こんにちは、みなさんWordPressしてますか?
WordPressといえば、現在世界中では有料、無料問わずレスポンシブのテーマが数多く作成されています。
ひと昔前まで珍しかったレスポンシブサイトも、様々なデバイスが開発される中で今や当たり前に作られる手法となりつつあります。
WEB制作会社に勤務する人間にとって、多くのデバイスでレスポンシブのサイトをひとつずつチェックするとなると、かなり骨の折れる作業となります。
しかし、今回ご紹介する「Sizzy」を利用すればレスポンシブサイトも、ものの5秒で一度に複数のデバイスの表示を確認することが可能です。
「Sizzy」とは?
「Sizzy」とは上記でも少しご案内したとおり、レスポンシブのサイトを複数のデバイスの表示をチェックできるツールです。
「Sizzy」を利用してチェックするには、オンラインツールを利用する方法とGoogleのChrome拡張機能をインストールして利用する方法があります。
「Sizzy」で確認可能なデバイス
「Sizzy」でレスポンシブサイトの表示が確認できるデバイスは以下の8種類です。
- iPhone 4(320×480)
- iPhone 5(320×568)
- iPhone 6(375×667)
- iPhone 7(Plus: 414×736)
- iPad Air(768×1024)
- Galaxy S4(360×640)
- Nexus 6P(411×731)
- Nexus 7(600×960)
iPhoneが中心で、少し古い機種のみとなっていますが、逆にいうと古い機種の表示が確認できるツールとして、かなり重宝するのではないでしょうか。
「Sizzy」の使い方
続いて「Sizzy」の使い方をご紹介していきます。
前述したように、「Sizzy」ではオンラインで利用する方法と、Chromeの拡張機能を利用する方法の2とおりの利用方法があります。
どちらを選択するかは、好みによりますので、利用しやすい方を選択してください。今回は、オンラインツールを利用する場合の手順をご案内してみたいと思います。
「Sizzy」のサイトにアクセス
まずは、「Sizzy」のオンラインサイトにアクセスします。
https://sizzy.co
チェックしたいレスポンシブサイトのURLを入力
続いて、「Enter an URL」に確認したいレスポンシブサイトのURLを入力し、→アイコンをクリックしましょう。
動きや表示を確認
すると上記で記述した8種類のデバイスでの表示と動きが確認することができます。
リンクやフリック操作としても稼働するので、チェックしたいページへの移動もスムーズに確認することが出来ます。
setting機能からチェック
「Sizzy」のオンラインツールからチェックする際に、左側に表示されているSettingを使用することで、様々な視点でチェックすることが可能です。
キーボードを表示した場合の確認
「Show keyboard」をクリックすると、キーボードを表示させた状態で確認をすることが出来ます。
みて欲しい見出しやアイキャッチ画像、コンテンツなどの表示が、キーボードに隠れてしまう場合には、ファーストビューの改善が必要だったりしますので、必ずチェックする必要がある項目といえるでしょう。
横向き表示の確認
以外と見落としがちなのが、スマホやタブレットを横向きにした場合の表示です。
横向き表示も、Settingから「Switch to landscape」をクリックすることでチェックすることが出来ます。
まとめ
いかがでしたでしょうか?
今回は8つのデバイスでレスポンシブサイトを一度にチェックできるツール「Sizzy」をご紹介しました。
「Sizzy」をうまく利用することで、レスポンシブサイトのチェックが一瞬で確認することが出来ます。
今後のWEB制作現場では、必須のツールとして存在感を増してくるツールではないでしょうか?
最後までお読みいただきありがとうございました。