【ブログ】Chromeでスマホサイトの見え方を確認する方法

スマホやタブレット表示_アイキャッチ

パソコンでブログ製作をしている時に、スマホやタブレットでどう見えるか気になる事ありませんか。

パソコンでの画面はすぐに確認できますが、スマホやタブレットの画面を確認する為に毎回端末を持ち出すのは手間がかかります。

そんな時はChromeの「デベロッパーツール」を使って画面の確認をしましょう。

この記事でわかること

・パソコンのChromeでスマホやタブレットの画面表示確認をする手順


Chromeのデベロッパーツールを使うと、サイトの情報確認やデバック、修正のお試しなどいろいろな事ができます。

機能が多い事と、知識が無いと有効活用ができないツールですが、今回の内容は初心者の方でも難しくないと思いますので参考にしてみてください。

私がWindowsしか使っておらず、Macでの操作やショートカットキーの事を知りません。恐らくは同じような操作で良いと思うのですが、Mac操作については記載をしていません。ご了承ください。

目次

デベロッパーツールの起動から画面確認まで

ナオ

ここからの内容はWindowを使った操作です。

Chrome デベロッパーツールの起動

デベロッパーツールを起動したい画面(ブログのトップページ等)をChromeに表示します。

そこで「F12」キーを押すか、「ctl + Shift +i」を押す。

すると、画面右側に図のような文字が沢山かかれた画面が開きます。

これがデベロッパーツールです。

Cheromeのデベロッパーツール
デベロッパーツール

端末のエミュレート画面を表示する

デベロッパーツールの上部にあるデバイスツールのアイコンを押します。ショートカットは「ctl + Shift + m」

デバイスツールのアイコン
デバイスツールのアイコン

これで画面左側のサイト画面がスマホやタブレット端末に表示された時の画面に切り替わります。

端末のエミュレート画面
エミュレート画面

エミュレーターの端末画面を切り替え

エミュレーターの表示を他の端末画面に切り替えます。

現在のデベロッパーツールにあるプリセットは少し古い端末が多いです。

エディット機能がありますが、今回はプリセットから選択します。

端末画面のプリセット

エミュレーター画面の上部に「Responsive」という文字が書かれています。

ここをクリックするとプリセットが表示されます。

responsiveを押したとき
Responsiveを押したとき

ここで、表示をさせたい端末を選ぶ事でエミュレーターの画面サイズが変更されます。

ipad Proを選んだ時はこのように表示されます。

ipad proのイメージ
ipad proのイメージ

端末とPCでの見え方

私が使っているauのSOV36をデベロッパーツールでエミュレートしてみました。

SOV36はプリセットに無かったので、画面サイズなどエディットで作成しました。

スマホのスクショとPCのエミュレート画面の見え方はこんな感じ。

Eufyのページ
スマホとPCの差

フォントの差や若干のズレは出ますが、おおよそ確認できる程度にはなると思います。

ナオ

端末を持っていなくても、だいたいこんな感じに見えるんだな~ぐらいの確認はできますね。

まとめ

ショートカットキー
  • デベロッパーツール:F12 or 「ctl + Shift + i」
  • エミュレート画面:デベロッパーツール上部のデバイスツールアイコン or 「ctl + Shift + m」
  • 端末画面の変更:エミュレート画面上部の「Responsive」を押す。

PCで製作をしていると、スマホやタブレットでの見え方を確認する事を忘れがちです。

デベロッパーツールを利用して確認をするようにしてみると良いかと思います。

PageSpeed Insightsの速度改善について書いています。こちらもご参考にどうぞ!

よかったらシェアしてください!

コメント

コメントする

目次
閉じる