PC 版 Chrome はスマホ表示用のシミュレーターが組み込まれている

ブログや Web サイトを構築している人が悩まされる要因の1つとして、スマホ用サイトの表示が含まれます。SNS や検索サイトからの流入を見込んでいるサイトであれば、スマートフォン用サイトの構築は必須です。

また 2015年4月21日より、スマホからの Google の検索結果にモバイルフレンドリー、いわゆるスマホで閲覧するに適した構成になっているページかどうかが、検索結果ランキングに影響するとも公式に発表されています。

Google ウェブマスター向け公式ブログ

デスクトップパソコン用のサイトだけで事足りる時代は終わりました。今ではウィンドウサイズによって CSS の適用を変え、同一ソースで表示を調整できるレスポンシブデザインが主軸となっています。

このサイトはレスポンシブデザインではありませんが、スマホからのアクセスを判断して CSS や表示レイアウトが切り替わるような仕組みを取り入れています。

今回はスマホ用デザインに関する話ではありません。スマホ用にデザインしたページの表示を確認する方法に関する情報になります。

Chrome の Developer Tools を使ってスマホ用サイトを表示する

今回の話はパソコン版の Chrome を利用した方法になるので、普段他のブラウザを利用している方はこちらからダウンロードしてインストールしてください。

Chrome ブラウザ

Web サイトやブログの HTML や CSS 自身の手で構築している人なら、Chrome に内臓されている Dveloper Tools は欠かせないツールです。おおまかに表示されているサイトの構成を解析するためのツールと理解いただければと思います。

この Developer Tools を使えば、JavaScript により出力された HTML 等も含めソースコードとして閲覧することができます。そして、そのソース上で選択した要素に適用されている CSS 情報を確認することもできます。直接ソースをいじって画面表示まで確認できるとても便利なツールです。

Developer Tools を起動する

Chrome から解析を行いたいページを開きます。そして画面上を右クリックして「検証(I)」を選択します。すると次のように画面右側にツールが立ち上がります。

smart-phone-simulator01

ショートカットキー Ctrl + Shift + i または F12 でも同様に立ち上がります。

デフォルトの設定ではブラウザのウィンドウ内に収まっているため、解像度の小さいモニターで閲覧するには見づらいです。そこで、画面右上にあるメニュー「」を選択し、Dock side の項目から一番左にあるアイコンを選択してください。するとツールの部分が別ウィンドウで表示されるようになります。

smart-phone-simulator02

スマホ用画面を表示する

Developer Tools を立ち上げたら、ツールの左上にスマートフォンのアイコンをクリックしてください。2つ並んでいるアイコンの右側です。

smart-phone-simulator03

ツール上の表示は特に変わりませんが、最初に開いた Web ページの表示エリアがご覧のように縦長の枠で表示されるようになります。この状態がスマホで開いた状態の画面となります。

smart-phone-simulator04

現段階ではあくまでも表示枠のサイズが変更されただけです。Web ページ側にスマホからアクセスしているかのように認識させるため、ユーザーエージェント情報をシミュレートしてあげます。

表示枠が切り替わった Web ページの左上にある Device をクリックして、そちらからシミュレートするデバイス機器を選択してください。

smart-phone-simulator05

iPhone や各種 Android 機器が候補として選択できます。残念ながら僕が利用している XPERIA はリスト上へありませんが、あまり機種情報にこだわる必要はありません。デバイス情報を変えても、画面を描画するエンジンは PC 版 Chrome のものです。あくまでもユーザーエージェントと表示ウィンドウサイズのみを装っているに過ぎません。

デバイスを選択したら、画面を再読み込みします。

smart-phone-simulator06

再描画されると Web サイト側はスマホからのアクセスだと認識するため、ご覧のようにスマートフォン用のレイアウトに無事切り替わりました。

smart-phone-simulator07

スクリーンサイズはドラッグして変更することも可能です。また左上の Screen の数値を直接打ち込むことで変更することもできます。また Device 項目の右横にあるプルダウンを選択すれば、画面を横長に切替えたり、ナビゲーションバーやキーボードのエリアを表示させることもできます。

smart-phone-simulator08

これでスマホ版のレイアウト表示確認はばっちりですね。このシミュレーターは、スマートフォンの画面サイズに応じた表示の度合いを確認するツールです。フォントの関係上、実際のスマホで表示されるものと完全に一致するとは限りませんので、予めご了承ください。

また、このツールで表示している最中は、マウスポインターがグレーの丸い状態のものに変わります。タップされる領域の目安として活用できるので、リンク項目間が近すぎて誤タップを招く箇所を特定することも可能です。

ブログであろうが、サイトの利便性は考慮すべき事項です。画面表示の確認だけに留まらず、スマホでも見やすくて使いやすい構成になるようデザインを意識してあげる必要があります。

このツールを利用すれば直接 HTML や CSS のソースを操作して、どのくらい調整すれば良いか確認することもできます。他にもたくさんの機能を兼ね備えていますが、そちらについてはまた改めて紹介しようと思います。

以上、PC 版 Chrome をスマホシミュレーターとして利用する方法の紹介でした。

このブログの運営者

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。目指すところへの道のりは険しいですが、自分が自分らしくあるために、一歩ずつ進んでいきます!

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。よろしければフォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

最近のエントリー

プラグインを使わず WordPress の投稿ページで PHP の外部ファイルを呼び出す方法

Feedly ボタンが機能していない?!正しい URL の情報に変更する方法

Twitter で過去のツイートを閲覧・削除する方法

赤ちゃんが泣き止む動画「ふかふかかふかのうた」は生後3ヶ月の赤ちゃんにも効果抜群だった!

これで迷わない!東京ディズニーランドの喫煙所マップ一覧【写真付き】

iTunes でアートワークが反映されないのは WAV 形式が原因!AAC に変換すれば反映される!

【徹底比較】WiMAX 2+ ギガ放題プランの最安値はどこ?【2017年10月版】

おすすめのモバイルルーター・ポケット WiFi を比較!選ぶポイントは利用目的に合わせること!

公共料金の支払いはクレジットカードと口座振替のどっちがお得?

iPhone 8・8 Plus は 7・7 Plus のスマホケースをそのまま使えるのか?