WEBサイトを作る時に、スマートフォンやタブレットなど多様な端末を意識した制作を行うことが以前にも増して多くなっています。特に、「Googleによるモバイルフレンドリーの大規模アップデート」の影響もあって、レスポンシブWEBデザインでマルチデバイス対応のサイト制作を行う流れは主流になりつつあります。
WEB運営者の方も、サイト制作時やリニューアル時、更新時などに、多様なデバイスで見え方のチェックをしなければならない場面が多くなっているのではないでしょうか。以前ならPCサイトの表示のみをチェックすればよかったのに、PC で見て、スマートフォンで見て、さらにタブレットでも…と、チェックしていかなければならないのは、結構大変ですよね。そこで今回は、手早く正確にスマホやレスポンシブのサイト表示チェックができるツールをご紹介しようと思います。
ブックマークレット「Viewport resizer」
http://lab.maltewassermann.com/viewport-resizer/
マルチデバイス（レスポンシブ）での表示確認を、パソコン上で手早く・簡単に・早く行いたいのなら、この「Viewport resizer」は、かなりおすすめです。
ブラウザベースで動作するブックマークレットとして提供されているので、Windowsでもmacでも関係なく、ブラウザもいつも使っているもので大丈夫。Viewport resizerのサイトにアクセスして、青いボタンのブックマークレットをブックマークツールバーにドラッグするなどして、ブックマークに登録するだけで準備は完了です。
使用方法もごく簡単で、確認したいサイトを表示した状態で、ブックマークしたViewport resizerをクリックするだけ。画面上部に、黒いデバイス選択バーが表示されますので、その中からチェックしたいデバイスのアイコンをクリックすれば、それに応じた画面サイズでページを表示してくれます。
各デバイスの向き（縦・横）も変更可能。ツールバーに主なデバイスサイズが登録されていますが、カスタマイズも可能。また、Viewport resizerのサイトでは、メーカー別の多様なサイズのデバイスから自分が必要なものだけを選んで、自分流のブックマークレットも作成できるようになっています。
ざっと表示状態をチェックできればいいというなら、これで十分。ブックマークするだけで使えて動作も軽いので、とりあえず登録しておいても損はないツールです。
Webサービス『Responsive Web Design Test Tool』
http://designmodo.com/responsive-test/
次にご紹介するのは、WEBサービスとして提供されているツール「Responsive Web Design Test Tool」です。
ブラウザでResponsive Web Design Test Toolのサービスサイトに接続し、URL入力欄にチェックしたいページのURLを入力してEnterキーを押すと、ページが読み込まれます。
その後、PCやタブレット、スマートフォンなどのアイコンをクリックして、プルダウンメニューの中から確認したいデバイスを選ぶと、それに合わせて表示サイズが切り替わるという、シンプルなツールです。
様々なメーカーの端末が登録されており、選択できる種類が非常に多いのが特徴です。さらに、画面の右端をドラッグして細かくサイズ調整することも可能。上部にピクセル値の定規が付いていますので、それを見ながら幅を調整することができ、視覚的にも使いやすいものになっています（画像では、テストページとしてレスポンシブサイトのギャラリー「RDW JP」のサイトを使わせて頂いています）。
Google Chromeブラウザの機能で確認
WEB担当者のからなら、Google Chromeブラウザを使っている方も多いと思いますが、Chromeを使っても、手軽にマルチデバイスチェックを行うことができます。
https://www.google.co.jp/chrome/browser/
Google Chrome『デベロッパーツール「Device Mode」』で確認
Chromeブラウザを使っているなら、「一応、デベロッパーツールも入れている…」という方は多くいらっしゃるのではないでしょうか。このデベロッパーツールにある「Device Mode」を使うことによって、マルチデバイスの確認は簡単に行えます。
Google Chromeを起動してデベロッパーツールを開き、Device Modeを有効にすると、Emulation機能が起動。確認したいデバイスを選んで表示のされ方を確認することができます。
このツールは、実際にコーディング作業を行う人がよく利用しているものですが、クライアント担当者の方のマルチデバイスの表示確認ツールとしても手軽に利用できます。このツールの詳しい使い方は、以下の記事で紹介されていますので参考にしてください。
参考ページ
Google Chrome『デベロッパーツール「Device Mode」』の使い方『スマホ、レスポンシブの表示チェックが捗る時短テク
http://ascii.jp/elem/000/000/997/997399/
Chrome拡張機能『Responsive Inspector』で確認！
ここまで紹介したものは、選択したデバイスにあわせて見える範囲を変更し、見え方を確認するというものでしたが、もう少し詳細な確認をしたい時には、
「Responsive Inspector」という機能拡張が便利です。これを使うと、見た目の表示確認だけでなく、スタイルシートで、どのようにレスポンシブの定義がなされているかを検証し、それに基づいてページの確認が行えます。
この機能拡張を追加すると、ブラウザのツールバーに赤いアイコンが表示されます。チェックしたいページを表示させた状態で、そのアイコンをクリックするとウィンドウが開き、メディアクエリの定義（CSSでどのようにレスポンシブの設定が行われているか）が、バー状のビジュアルで一覧表示されます。各バーをクリックすると、詳細なCSSの表示や、各サイズでの表示チェックも行えます。
やや専門的なツールになりますが、自分でも簡単なコーディング程度は行うことがある…というWEB担当者の方なら便利に使えると思います。一度試してみてください。以下の記事に詳しい機能が紹介されています。
参考ページ
Chrome拡張機能『Responsive Inspector』の使い方『レスポンシブの確認を見た目だけでなく、CSSに基づいた検証もできるChromeの機能拡張 -Responsive Inspector
http://coliss.com/articles/build-websites/operation/work/chrome-extension-responsive-inspector.html
今回のまとめ
スマホやマルチデバイスの表示チェックを簡単に行う方法、いかがでしたでしょうか？確認する環境や、普段使っているブラウザ、サイトが対象とするデバイスなどによっても、適切な方法は異なるかもしれませんが、少しでもお役に立てたらうれしいです。今後、さらにマルチデバイス時代になっていくことは必至。時代に合わせたワークフローで、効率良くWEBサイトを運営していきましょう。
