モバイルサイトをPCブラウザで手軽にチェックする方法
こんにちは。デザイナーのやまざきです。
前回モバイルサイトの構築について書かせていただきました。
前回モバイルサイトの構築について書かせていただきました。
今回は、モバイルサイトの表示確認について書いてみようと思います。
みなさん、モバイルサイトの表示確認はどうされていますか？
さまざまなデバイスが普及している今、複数の実機を用意するのはなかなか難しいですよね。今回はPCブラウザ上でさくっと確認できる方法をご紹介します。
みなさん、モバイルサイトの表示確認はどうされていますか？
さまざまなデバイスが普及している今、複数の実機を用意するのはなかなか難しいですよね。今回はPCブラウザ上でさくっと確認できる方法をご紹介します。
※いずれも各デバイスの表示を忠実に再現できるものではありません。ユーザビリティなどの正確な検証が必要の際は実機をご利用ください。
※画面キャプチャはMacバージョンです。
ブックマークしておくと便利なウェブサービス※画面キャプチャはMacバージョンです。
URLを入力するだけ簡単チェックDemonstrating Responsive Design
右上のボックスにURLを入力、Viewボタンをクリック。あとは上部の各デバイスアイコンをクリックするだけで、下に用意されたデバイスのフレーム内で表示が切り替わります。フレーム内でスクロールも出来るのでサイト全体を見ることが可能です。
確認できるデバイスは「iPhone縦／横」、「iPad縦／横」、「PC」に限られているため細かなチェックには向いておりませんが「どんな風に見えるのかパッと確認したい」という時にオススメです。
サイズ指定も可能なお手軽ブックマークレットViewport resizer
確認したいWebサイトを表示し、ツールバーから起動するだけで確認できるブックマークレットです。
Demonstrating Responsive Designと同じように、上部の各デバイスアイコンをクリックするだけで、ブラウザのサイズを手動で変えることなく表示を確認できます。選択しているアイコンを再度クリックで「縦／横」が切り替わります。「Customize」エリアでサイズ入力も可能なので未対応のサイズでも手入力で確認でき、動きもサクサクです。公式Webサイトにはツールバーのカスタマイズも用意されています。
ブラウザの機能やアドオンを使って確認する方法Google Chromeの標準機能
下記の手順でデベロッパーツールを表示します。
- Mac：メニューバー 「表示」−「開発／管理」−「デベロッパーツール」
- Windows：右上のメニューアイコン「その他のツール」−「デベロッパーツール」
ブラウザ下部にデベロッパーウインドウが表示されたところで、左側のスマートフォンのアイコンをクリックすると上部に設定画面が表示されます。また右側の「Show drawer」アイコンからConsoleウインドウを開き、「Emulation」タブを選択すると細かな設定をすることが出来ます。プルダウンからデバイスを切り替えます。表示が切り替わらない場合は、選択した状態で一度リロード（WindowsではF5）をしてください。
Safariの標準機能
確認したいWebサイトを表示し、メニューバーの「開発」にある「ユーザーエージェント」で表示の切り替えが可能です（※）。こちらはウインドウの幅に合わせて表示されるため、ウインドウのサイズは手動で変更が必要です。
デフォルトではSafari、Safari iOS（iPhone、iPod touch、iPad）、Internet Explorer、Google Chrome、Firefoxが設定されており、「その他」からAndroidやWindows Phoneなど希望のユーザーエージェントの追加も可能です。
※「開発」メニューが表示されていない場合は下記の方法で設定をしてください。
- Mac：メニューバー 「Safari」−「環境設定」−「詳細」の「メニューバーに”開発”メニューを表示」にチェック
- Windows：メニューバー 「編集」−「設定」−「詳細」の「メニューバーに”開発”メニューを表示」にチェック
FirefoxアドオンUser Agent Switcher
アドオンをインストールしたらメニューバーの「ツール」−「Default User Agent」からデバイスを選択します。選択しても表示が切り替わらない場合は、選択した状態で一度リロード（WindowsではF5）をしてください。こちらもウインドウの幅に合わせて表示されるため、ウインドウのサイズは手動で変更が必要です。
一度切り替えるとそのまま設定が引き継がれますので、確認が終わったら「Default User Agent」に戻すことを忘れないようにしましょう。このアドオンにはGoogle Chrome版もあります。
※Windows版のFirefoxでメニューバーが出ていない場合は、下記の手順で表示してください。
- 左上のメニューアイコン「カスタマイズ」−「ツールバーを表示/隠す」−「メニューバー」にチェック
検証用のアドオンはいくつかありますが、「User Agent Switcher」はユーザーエージェント（※）を一覧で追加することが出来るため個人的に重宝しています。ユーザーエージェントは各キャリアの公式サイトで公開されていたり、無料で一覧を配布されている方もいらっしゃいますので自己責任の範囲でご利用いただければと思います。
※今回はユーザーエージェントの詳細について割愛させていただきます。
最後にモバイルサイトを検証していて、表示崩れや「こうした方がもっと見やすいかも」という発見をされた時には、お手持ちの“機種”と“バージョン”を、もしくは上記のようなツールを利用した場合は“設定”を、お気づきの点と合わせて制作会社さんに伝えてあげください。モバイルと一括りに言ってもさまざまな機種や解像度が存在するため、検証環境の情報があることで作業がよりスムーズになると思います。
から高い
まで、3段階で示しています。
