スマホサイトの検証に役立つ便利ツール【ブラウザ編】

スマホなどのモバイル端末が広く普及したことで、最近ではPCサイトのみではなくスマホサイトも用意しているところが増えてきました。
スマホから見やすいサイトが増えるのは良いことですが、スマホサイトの検証作業は、端末によってスペック（OSや画面解像度など）が異なるため大変ですよね。

そこで今回は、代表的なWebブラウザ（PC）で簡単に出来る検証方法をご紹介します。

Safariでの検証方法

Safariでスマホサイトの検証をするには、メニューバーから[開発]-[ユーザーエージェント]を選び表示したい端末を選択することで、表示確認を行えます。

※開発がメニューに出ない場合
メニューバーより[Safari]-[環境設定]-[詳細]の「メニューバーに”開発”メニューを表示」にチェックを入れることで、メニューバーに開発メニュ―が表示されます。

デフォルトで用意されているユーザーエージェントは「Safari」「Safari iOS」「Internet Explorer」「Google Chrome」「Firefox」になりますので、新しく追加したい場合は、ユーザーエージェント一覧などを参考に「その他」から追加してください。

検証をする上で注意したい点としては、スマホ独自の操作方法である「スワイプ」や「タブルタップ」が使えないことです。スライダーやカルーセルは送りボタンを押すなり、ピンチイン・ピンチアウトで拡大・縮小する必要があります。

Google Chromeでの検証方法

次に、Google Chromeでスマホサイトの検証をするには、メニューバーより[表示]-[開発/管理]-[ディベロパーツール]を選び、ディベロッパーツールを起動します。
ちなみに、メニューバーから選択しなくても、右クリックメニューの「要素の検証」でも開けます。

①Hide drawer　②Device　③表示したい端末を選択　④Emulateボタンを押す

Emulateボタンを押すことで、自動的に更新され、スマホサイト表示となります。

Firefoxでの検証方法

Firefoxはデフォルトでスマホ表示することができないため、アドオンを使用します。
今回は「User Agent Switcher」というアドオンを使用しますが、他にもシミュレータアドオンは沢山ありますので、探してみてください。

User Agent Switcherの特徴として、スマホ以外にもガラケーやゲーム端末などを表示することができます。最近ですとあまり使わないかもしれませんが……。配布しているサイトもありますので検証したい端末がなければ、調べてみてください。

【まとめ】Webブラウザでの検証方法について

ご紹介したツールを使用してPCから検証するのは、効率的かつ手軽ですが、あくまでもシミュレータになりますので、最終確認は実機で確認することをオススメします。Android2.×系では文字の太さや、positionの不具合があったり、機種依存のエラーなどもあるため見落とさないよう気をつけて検証してください。

この記事を書いた人

モバイルラボ 編集部
ヨコハマ・モバイルラボとは？ モバイルならではの表現ってなんだろう？ 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。