レスポンシブサイトを複数同時にチェック「Sizzy」

こんにちは、みなさんWordPressしてますか？
WordPressといえば、現在世界中では有料、無料問わずレスポンシブのテーマが数多く作成されています。

ひと昔前まで珍しかったレスポンシブサイトも、様々なデバイスが開発される中で今や当たり前に作られる手法となりつつあります。

WEB制作会社に勤務する人間にとって、多くのデバイスでレスポンシブのサイトをひとつずつチェックするとなると、かなり骨の折れる作業となります。

しかし、今回ご紹介する「Sizzy」を利用すればレスポンシブサイトも、ものの5秒で一度に複数のデバイスの表示を確認することが可能です。

「Sizzy」とは？

「Sizzy」とは上記でも少しご案内したとおり、レスポンシブのサイトを複数のデバイスの表示をチェックできるツールです。
「Sizzy」を利用してチェックするには、オンラインツールを利用する方法とGoogleのChrome拡張機能をインストールして利用する方法があります。

「Sizzy」でレスポンシブサイトの表示が確認できるデバイスは以下の8種類です。

iPhoneが中心で、少し古い機種のみとなっていますが、逆にいうと古い機種の表示が確認できるツールとして、かなり重宝するのではないでしょうか。

続いて「Sizzy」の使い方をご紹介していきます。
前述したように、「Sizzy」ではオンラインで利用する方法と、Chromeの拡張機能を利用する方法の2とおりの利用方法があります。

どちらを選択するかは、好みによりますので、利用しやすい方を選択してください。今回は、オンラインツールを利用する場合の手順をご案内してみたいと思います。

まずは、「Sizzy」のオンラインサイトにアクセスします。
https://sizzy.co

続いて、「Enter an URL」に確認したいレスポンシブサイトのURLを入力し、→アイコンをクリックしましょう。

すると上記で記述した8種類のデバイスでの表示と動きが確認することができます。
リンクやフリック操作としても稼働するので、チェックしたいページへの移動もスムーズに確認することが出来ます。

「Sizzy」のオンラインツールからチェックする際に、左側に表示されているSettingを使用することで、様々な視点でチェックすることが可能です。

「Show keyboard」をクリックすると、キーボードを表示させた状態で確認をすることが出来ます。
みて欲しい見出しやアイキャッチ画像、コンテンツなどの表示が、キーボードに隠れてしまう場合には、ファーストビューの改善が必要だったりしますので、必ずチェックする必要がある項目といえるでしょう。

以外と見落としがちなのが、スマホやタブレットを横向きにした場合の表示です。
横向き表示も、Settingから「Switch to landscape」をクリックすることでチェックすることが出来ます。

いかがでしたでしょうか？
今回は8つのデバイスでレスポンシブサイトを一度にチェックできるツール「Sizzy」をご紹介しました。

「Sizzy」をうまく利用することで、レスポンシブサイトのチェックが一瞬で確認することが出来ます。
今後のWEB制作現場では、必須のツールとして存在感を増してくるツールではないでしょうか？

最後までお読みいただきありがとうございました。