自分のサイトがスマホからどんな感じで表示されているのか、気になりますよね。
近年スマホでウェブを閲覧するユーザー層が増えてきている為、スマホ表示が重要視されています。
そんなスマホ表示の確認方法ですが、実はとても簡単にできるんです。
今回は、「パソコン画面で自身のサイトのスマホ表示を確認する方法」をご紹介します。
2015年から「モバイル フレンドリーアップデート」の開始
その前に、なんでスマホ表示にも気をつける必要があるのかってところです。
実は、Google側も2015年4月に「モバイル フレンドリーアップデート」を開始しました。
Googleがこのような評価基準を設けたので、ウェブで集客を行っていく我々もこれに従わない訳にはいきません。
まさに、郷に入っては郷に従えです。
といった理由で、スマホからの表示にも気をつけないといけません。
それで具体的な方法は、、、。
Chrome拡張機能「Window Resizer」を使用
一番お手軽で簡単なのが、Chromeの拡張機能を使用する方法です。
「Window Resizer」という拡張機能を導入すると簡単にスマホ表示の確認が可能です。
この拡張機能を使うことで、各デバイスのサイズごとに画面サイズが変化させることができます。
導入後は、ツールバーにアイコンが表示されるので、そちらをクリックするだけです。
直感的に使用することが出来ますが、もしも迷った場合は「Window Resizer 使い方」で検索してください。
「デベロッパーツール」を使用
GoogleChromeには、デベロッパーツールという開発者向けのツールが搭載されています。
ウェブサイトを開いた状態で「右クリック」 ＞ 検証をクリックで、デベロッパーツールを起動できます。
起動した状態で、Windowsの場合「Ctrl＋Shift＋M」、Macの場合「command＋Shift＋M」をクリックするとスマホ表示にすることが可能です。
デベロッパーツールはツールは、テキストだけで解説するのが難しいので、「デベロッパーツール 使い方」、「デベロッパーツール スマホ表示」で検索してみてください。
編集後記
今回は、「パソコン画面で自身のサイトのスマホ表示を確認する方法」をご紹介しました。
これでスマホ表示を簡単に確認することができますね。
参考にしてみてください。
