スマートフォンが普及している現代では、サイトを運営するにあたって、スマホ対応(レスポンシブデザイン)が非常に重要です。WordPressテーマなどもレスポンシブ対応がほぼ標準となっていますが、スマホやモバイル端末でブログやサイトがどう見えるかの確認（モバイル表示の確認）は必須です。
スマートフォン本体で直接確認すれば確実ですが、機種やグレードによりサイズも違いますし、実際に確認するのは意外と手間がかかります。構築してる段階でもっと簡易的にモバイル表示を確認できると便利ですよね。
そこで便利なのが、Google Chromeのデベロッパーツール（開発者ツール）です。今回はGoogle Chromeでスマホ表示を確認する方法をお伝えします。念の為、あなたのサイトがモバイルフレンドリーになっているかどうかもサクッと確認してみましょう。
Google Chromeでスマホ表示を確認する方法
ここではブラウザは「グーグルクローム」を使っての確認の仕方をみていきます。
まず確認したいブログやサイトをグーグルクロームで表示し、その上で右クリックしてメニューを表示します。
- 表示されたメニューから「検証」をクリックします。
- なお、開発者ツール（デベロッパーツール）は「F12」キーで一発で起動します
モバイル表示切り替えのアイコンをクリック
表示された開発者ツールの上のバーから四角が重なったアイコンをクリックします。
すると、左側にパソコン表示されていたサイトが、以下のようにモバイル表示に変わります。スマホ表示が確認できていますね！
表示するスマホの種類やサイズの変更
上記ではiPhone6/7/8 が表示されています。
その隣の下向き矢印をクリックすると以下のように他に表示を確認したいモバイル機器が選択できます。
すべてを確認する必要はありませんが、一般的に使われているiPhoneシリーズやiPadなどは一通り確認しておくことは必要です。
さらに、確認したい画面の大きさの追加もできるようになっていて、以下の画面の「Edit・・」をクリックするとたくさんの種類が表示され、選択項目に追加できるようになっています。
スマホのフレームを表示させる
スマートフォンのプリセットを使用しているときに、フレームの表示に対応しているプリセットであればスマートフォンのフレームを表示させることができます。
- 右上のメニューボタンをクリックして「Show device frame」をクリック
すると以下のようにスマートフォンのフレームが表示されます。どのように見えるのか、よりイメージしやすいですね。
モバイル表示の確認を終了する
モバイル表示の確認を終了するには
- もう一度四角が重なったアイコンをクリックする
- 右上の☓でグーグルデベロッパーツールを閉じる
のいずれかで元の表示に戻ります。
スマホ表示とモバイルフレンドリーテスト
スマホ表示の確認の必要性
昨今では、ウィンドウサイズによって CSS の適用を変え、同一ソースで表示を調整できるレスポンシブデザインが主流となり、デスクトップパソコン用のサイトだけで事足りる時代は終わりました。ジャンルにもよりますが、Webサイトを閲覧している約８割がスマホユーザーという数字もあります。
スマホ表示はグーグルでは「モバイル表示」といってますが、このモバイル表示に対応していない、とグーグルで判断されると、検索結果にも大きく影響してきます。
2015年にはモバイルフレンドリー、2018年にはモバイルファーストインデックスと、スマートフォン用の表示サイトに対するウエイトが大きくなってきている現実もあります。
モバイルフレンドリーテスト
グーグルから見て「モバイルフレンドリー（モバイル表示に対応しているかどうか）」の確認は以下のページで簡単に確認できます。
- URLを入力する枠に、確認したいサイトのURLを入力し、「URLをテスト」をクリック！
このツールでサイト（nao-netbusiness.com)をテストすると以下のような表示になります。
「このページはモバイルフレンドリーです」と表示されれば安心です。
まとめ
PC版Google Chromeでスマホ表示を確認する方法を解説してきました。
- スマホなどの表示確認は、Google Chromeのデベロッパーツール（開発者ツール）を使えば簡単
- 確認の仕方は、右クリックで開発者ツールを立ち上げて、それ用のアイコンをクリックするだけ
- この開発者ツールでは、いろいろな種類のモバイル機器を選択し確認できる
- 最低限、良く使われているiPhoneシリーズなどは確認する
実際のスマホやタブレットで確認することもできますが、ブラウザの機能を使うことで、作業中にそのままモバイル表示が確認できるのは時短にもつながります。
また、更にネットで収益化していきたい、他の人とは一味違うブログ運営がしてみたい、という場合には以下のメルマガにも登録してみてください。
