「自分のサイトがスマホでどう見えるか確認したい」
「スマホ版のデザインをチェックしたい」
「スマホ限定のキャンペーンページを見たい」
こんな時、わざわざスマホを取り出さなくても、パソコンのChromeでスマホ表示に切り替えられるんです！
この機能は「デベロッパーツール」または「検証モード」と呼ばれ、Web制作者だけでなく、一般のユーザーにも便利に使えます。画面サイズの確認はもちろん、iPhone、Android、タブレットなど、様々なデバイスの表示をシミュレーションできるんですよ。
この記事では、Chromeでスマホ表示に切り替える方法を、初心者の方にも分かるように詳しく解説していきます。
Chromeのスマホ表示機能とは？
スマホ表示機能（正式名称：デバイスツールバー、またはレスポンシブデザインモード）は、パソコンのChromeで、スマートフォンやタブレットの画面表示をシミュレートできる機能です。
どんな時に使うの？
この機能は、以下のような場面で役立ちます：
Web制作者の場合:
- 自分が作ったサイトがスマホでどう見えるか確認
- レスポンシブデザインのテスト
- 画面サイズごとの表示崩れをチェック
- 異なるデバイスでの動作確認
一般ユーザーの場合:
- スマホ限定のページを見たい
- PC版とスマホ版の違いを比較したい
- スマホ版の使いやすさを確認
- タブレット版のレイアウトをチェック
開発の知識がなくても簡単に使えるので、誰でも気軽に試せますよ。
できることは？
Chromeのスマホ表示機能では、以下のことが可能です：
- 画面サイズの変更 – 自由に幅と高さを調整
- デバイスの選択 – iPhone、Android、iPadなど主要デバイスを選択
- 縦向き・横向きの切り替え – 画面の回転をシミュレート
- タッチ操作のシミュレーション – スワイプやタップを再現
- ズームレベルの調整 – 拡大・縮小表示
- ネットワーク速度の制限 – 3Gや4Gの環境をテスト
基本的なスマホ表示の切り替え方法
まずは、最もシンプルな方法から始めましょう。
【方法1】ショートカットキーで瞬時に切り替え（一番簡単！）
これが最速の方法です。
手順:
- スマホ表示で見たいサイトをChromeで開く
- キーボードで以下を押す：
- Windowsの場合:
F12またはCtrl + Shift + I - Macの場合:
Command + Option + I
- デベロッパーツールが開く
- ツールバー左上のスマホとタブレットのアイコンをクリック
- または
Ctrl + Shift + M（Mac:Command + Shift + M）
これで画面がスマホ表示に切り替わります！
【方法2】メニューから開く
マウス操作だけで開きたい方はこちら。
手順:
- スマホ表示で見たいサイトを開く
- 画面のどこかを右クリック
- メニューから「検証」を選択
- デベロッパーツールが開く
- 左上のデバイスツールバーアイコン（スマホとタブレットの形）をクリック
【方法3】Chromeメニューから開く
手順:
- Chrome右上の「︙」（3つの点）をクリック
- 「その他のツール」にカーソルを合わせる
- 「デベロッパーツール」を選択
- デバイスツールバーアイコンをクリック
どの方法でも同じ結果になるので、お好みの方法を選んでくださいね。
デバイスの種類を選ぶ方法
スマホ表示に切り替えたら、具体的なデバイスを選べます。
デバイスの選択手順
手順:
- デバイスツールバー（画面上部）の「レスポンシブ」をクリック
- ドロップダウンメニューが開く
- 好きなデバイスを選択
選べる主なデバイス
iPhone系:
- iPhone SE
- iPhone XR
- iPhone 12 Pro
- iPhone 14 Pro Max
- その他のiPhoneモデル
Android系:
- Pixel 5
- Pixel 7
- Samsung Galaxy S20
- Samsung Galaxy S8+
- Nexus シリーズ
タブレット系:
- iPad
- iPad Air
- iPad Mini
- iPad Pro
- Surface Pro 7
その他:
- カスタムサイズ（自由に設定）
- レスポンシブ（可変サイズ）
デバイスを選ぶとどうなる？
デバイスを選択すると、以下が自動的に設定されます：
- 画面サイズ – そのデバイスの解像度に合わせて表示
- ユーザーエージェント – サイトにそのデバイスで見ていると認識させる
- タッチ設定 – タッチ操作対応のデバイスとして扱われる
つまり、本物のそのデバイスで見ているのとほぼ同じ状態になるわけです。
画面サイズを自由に調整する方法
プリセットのデバイスだけでなく、自由にサイズを変更できます。
カスタムサイズの設定
方法1: ドラッグで調整
- デバイスを「レスポンシブ」モードにする
- 画面の角または端にカーソルを合わせる
- サイズ変更カーソル（双方向の矢印）が表示される
- ドラッグして好きなサイズに調整
リアルタイムで画面サイズが変わるので、レスポンシブデザインの動作確認に最適です。
方法2: 数値で指定
- 画面上部に表示されている幅と高さの数値をクリック
- 直接数値を入力
Enterキーで確定
例:
- 幅: 375px、高さ: 667px（iPhone SE サイズ）
- 幅: 360px、高さ: 640px（Android 一般的なサイズ）
- 幅: 1024px、高さ: 768px（iPad サイズ）
よく使われる画面サイズ
Web制作の現場でよく確認されるサイズをご紹介します：
スマートフォン（縦向き）:
- 320px × 568px – 小型スマホ
- 375px × 667px – iPhone 標準
- 390px × 844px – iPhone 新型
- 360px × 740px – Android 標準
- 414px × 896px – 大画面スマホ
タブレット（縦向き）:
- 768px × 1024px – iPad 標準
- 810px × 1080px – Android タブレット
タブレット（横向き）:
- 1024px × 768px – iPad 横
- 1366px × 1024px – iPad Pro 横
これらのサイズで表示を確認すると、主要なデバイスをカバーできます。
縦向きと横向きを切り替える方法
デバイスの画面の向きも簡単に変更できます。
回転の手順
手順:
- デバイスツールバーの回転アイコン（円形の矢印）をクリック
- 画面が90度回転する
- もう一度クリックすると元に戻る
ショートカットキー:Ctrl + Shift + Mを押すと、素早く回転できます（Mac: Command + Shift + M）
縦向きと横向きの使い分け
縦向き（ポートレート）を確認すべき場面:
- 通常のブラウジング
- SNSやニュースサイト
- 縦長のコンテンツ
横向き（ランドスケープ）を確認すべき場面:
- 動画視聴
- ゲームサイト
- 横長の画像やグラフ
両方の向きで表示が崩れていないか、必ず確認しましょう。
ズームレベルを調整する方法
画面の拡大率も変更できます。
ズームの設定
手順:
- デバイスツールバーのズームドロップダウンをクリック
- 50%、75%、100%、125%、150%から選択
- またはカスタムで数値を入力
ズームを使う場面
50%や75%:
- 全体のレイアウトを俯瞰したい時
- 画面に収まらない大きなページを見る時
100%:
- 実際のサイズで表示したい時（基本はこれ）
125%や150%:
- 細かい部分をチェックしたい時
- 文字の読みやすさを確認したい時
スマホのタッチ操作をシミュレートする方法
マウスでタッチ操作を再現できます。
タッチモードの有効化
デバイスを選択すると、自動的にタッチモードになりますが、手動でも切り替えられます。
確認方法:
- デベロッパーツールの右上の「︙」（3つの点）をクリック
- 「Settings」（設定）を選択
- 左側のメニューから「Devices」を選択
- 「Emulate touch events」にチェック
タッチジェスチャーの使い方
シングルタップ:
マウスで普通にクリック
スワイプ:
マウスをクリックしたまま移動
ピンチズーム:Shiftキーを押しながらマウスホイールを回す
長押し:
マウスボタンを長めに押し続ける
これにより、スマホ特有の操作が正しく動作するか確認できます。
ネットワーク速度をシミュレートする方法（上級者向け）
通信速度が遅い環境での表示もテストできます。
ネットワーク制限の設定
手順:
- デベロッパーツールの「Network」タブをクリック
- 「No throttling」（制限なし）をクリック
- 通信速度を選択：
- Fast 3G – 3G回線相当
- Slow 3G – 遅い3G回線
- Offline – オフライン状態
- カスタム – 自分で速度を設定
なぜ通信速度を制限するの？
理由:
- 地方や通信環境が悪い場所でのユーザー体験を確認
- 画像や動画の読み込み速度をチェック
- ページの表示が遅い時のエラーを発見
特に、海外からのアクセスや移動中の閲覧を想定する場合、通信速度の制限テストは重要です。
スマホ表示から通常表示に戻る方法
テストが終わったら、通常のPC表示に戻しましょう。
戻す方法
方法1: デバイスツールバーアイコンをクリック
画面上部のスマホ・タブレットアイコンをもう一度クリックすれば、スマホ表示が解除されます。
方法2: ショートカットキー
- Windows:
Ctrl + Shift + M - Mac:
Command + Shift + M
方法3: デベロッパーツールを閉じる
- Windows:
F12またはCtrl + Shift + I - Mac:
Command + Option + I
デベロッパーツールごと閉じれば、完全に通常表示に戻ります。
PC版サイトとスマホ版サイトを切り替える（スマホ実機での方法）
スマートフォンのChromeで、PC版サイトを表示する方法も解説します。
スマホでPC版サイトを見る方法
Android版Chromeの場合:
- サイトを開く
- 右上の「︙」（3つの点）をタップ
- 「PC版サイト」にチェックを入れる
iPhone版Chromeの場合:
- サイトを開く
- 下部の「…」をタップ
- 「PC版サイトをリクエスト」をタップ
Safari（iPhone）の場合:
- サイトを開く
- アドレスバー左側の「ああ」をタップ
- 「デスクトップ用Webサイトを表示」をタップ
スマホ版に戻す方法
同じ手順を繰り返して、チェックを外すか、もう一度タップすれば元に戻ります。
よくある使用シーン
実際にどんな場面で使うのか、具体例をご紹介します。
シーン1: 自分のブログやサイトの確認
やること:
自分が作ったサイトがスマホでちゃんと表示されるか確認
手順:
- 自分のサイトをChromeで開く
- デベロッパーツールでスマホ表示に切り替え
- iPhone、Android、タブレットなど複数デバイスで確認
- 文字サイズ、画像の配置、ボタンの押しやすさをチェック
シーン2: ネットショッピングの商品表示確認
やること:
ECサイトの商品ページがスマホでどう見えるかチェック
手順:
- 商品ページを開く
- スマホ表示に切り替え
- 商品写真の見やすさ、購入ボタンの位置、レビューの読みやすさを確認
購入前に、スマホでの見え方を確認しておくと安心です。
シーン3: Webフォームの入力テスト
やること:
問い合わせフォームや会員登録フォームがスマホで使いやすいか確認
手順:
- フォームページを開く
- スマホ表示に切り替え
- 入力欄の大きさ、タップのしやすさ、送信ボタンの位置を確認
- タッチモードで実際に操作してみる
シーン4: スマホ限定キャンペーンページの閲覧
やること:
「スマホ限定」と書かれたキャンペーンページをPCで見る
手順:
- キャンペーンページのURLをPCのChromeで開く
- スマホ表示に切り替え
- 適切なデバイス（iPhoneやAndroid）を選択
- キャンペーン内容を確認
PC版では表示されない情報が、スマホ版で見られることがあります。
シーン5: レスポンシブデザインの動作確認
やること:
画面サイズを変えた時のデザインの変化を確認
手順:
- サイトを開く
- レスポンシブモードで表示
- 画面サイズをゆっくりドラッグして変更
- どのサイズでレイアウトが変わるか（ブレイクポイント）を確認
デザインの崩れや不自然な表示がないかチェックできます。
トラブルシューティング
スマホ表示がうまくいかない時の対処法です。
問題1: スマホ表示に切り替わらない
原因:
デバイスツールバーが有効になっていない
解決方法:
画面上部のスマホ・タブレットアイコンがハイライト（青く）なっているか確認してください。なっていなければクリック。
問題2: サイトがPC版のまま表示される
原因:
サイト側がデバイス判定をしていない、またはユーザーエージェントが正しく設定されていない
解決方法:
- デバイスを「レスポンシブ」から具体的なデバイス（iPhone など）に変更
- ページを再読み込み（
Ctrl + RまたはCommand + R） - それでもダメなら、スーパーリロード（
Ctrl + Shift + RまたはCommand + Shift + R）
問題3: 表示が崩れる・おかしい
原因:
キャッシュが残っている、またはサイト側の問題
解決方法:
- デベロッパーツールを開いた状態で、再読み込みボタンを長押し
- 「キャッシュの消去とハード再読み込み」を選択
- それでもダメなら、サイト側のスマホ対応に問題がある可能性
問題4: タッチ操作が効かない
原因:
タッチモードが無効になっている
解決方法:
- デベロッパーツールの設定を開く
- 「Devices」→「Emulate touch events」がオンになっているか確認
- オフならオンにして、ページを再読み込み
問題5: 画面が小さすぎて見づらい
原因:
ズームレベルが100%のまま
解決方法:
デバイスツールバーのズームを50%または75%に変更すると、全体が見やすくなります。
デベロッパーツールの便利な使い方
スマホ表示以外にも、便利な機能がたくさんあります。
スクリーンショットを撮る
スマホ表示のまま、ページのスクリーンショットを簡単に撮れます。
手順:
- デバイスツールバーの右側の「︙」（3つの点）をクリック
- 「Capture screenshot」を選択
- 表示されている範囲のスクリーンショットがダウンロードされる
または「Capture full size screenshot」を選ぶと、ページ全体のスクリーンショットが撮れます。
要素の検証
特定の部分のコードを確認できます（Web制作者向け）。
手順:
- デベロッパーツールの左上の矢印アイコンをクリック
- 確認したい部分にカーソルを合わせる
- クリックすると、その部分のHTML/CSSが表示される
コンソールでエラー確認
サイトにエラーがないか確認できます。
手順:
- デベロッパーツールの「Console」タブをクリック
- 赤い文字でエラーメッセージが表示されていないか確認
エラーがあると、サイトが正常に動作しない可能性があります。
スマホ表示を使いこなすコツ
より効率的に使うためのヒントです。
コツ1: よく使うデバイスをお気に入りに
手順:
- デベロッパーツールの設定を開く
- 「Devices」セクション
- 「Add custom device」でカスタムデバイスを追加
- よく使うサイズを登録しておく
コツ2: 複数のデバイスを同時にチェック
方法:
Chromeの新しいウィンドウを複数開いて、それぞれ異なるデバイスで表示すれば、並べて比較できます。
コツ3: ショートカットキーを覚える
覚えておくと便利なキー:
F12– デベロッパーツール開閉Ctrl + Shift + M– スマホ表示切り替えCtrl + R– 再読み込みCtrl + Shift + R– スーパーリロード
コツ4: デベロッパーツールの位置を変更
デベロッパーツールは画面の下、右、左、または別ウィンドウに表示位置を変更できます。
手順:
デベロッパーツール右上の「︙」→「Dock side」から選択
コツ5: 定期的にキャッシュをクリア
正確な表示を確認するため、テストの前にキャッシュをクリアする習慣をつけましょう。
よくある質問と回答
Q1: スマホ表示で見た状態は、実機と完全に同じ？
A: ほぼ同じですが、完全に同じではありません。
同じ点:
- 画面サイズ
- レイアウト
- 基本的な動作
異なる点:
- 実機の処理速度
- 実機特有の動作（例: GPSの実際の位置情報）
- タッチ操作の感触
重要なサイトは、必ず実機でも確認することをおすすめします。
Q2: スマホ表示にしたら動作が重くなった
A: デベロッパーツールは多くのリソースを使うため、パソコンのスペックによっては重くなることがあります。
対処法:
- 不要なタブを閉じる
- 他のアプリケーションを終了する
- ズームレベルを下げる
Q3: 特定のサイトだけスマホ表示にできない
A: サイト側の設定で、PC表示を強制している可能性があります。または、JavaScriptでデバイス判定をして、意図的にPC版を表示している場合もあります。
Q4: デベロッパーツールが英語で分かりにくい
A: Chromeの言語設定を日本語にしていても、デベロッパーツールは英語表記が基本です。使っているうちに慣れてきますが、主要な用語だけ覚えれば問題ありません。
Q5: スマホ表示の設定は保存される？
A: デバイスの選択やズームレベルなどは、次回もある程度保持されます。ただし、完全に保存されるわけではないので、毎回確認しましょう。
まとめ: スマホ表示を活用して快適なサイト閲覧を
Chromeでスマホ表示に切り替える方法を詳しく解説しました。
重要ポイントのおさらい:
✅ ショートカットキーが最速 – F12でツール起動、Ctrl + Shift + Mでスマホ表示
✅ 様々なデバイスを選択可能 – iPhone、Android、iPad など主要デバイスに対応
✅ 画面サイズを自由に調整 – ドラッグまたは数値入力で柔軟に変更
✅ 縦向き・横向きを簡単切り替え – 回転アイコンでワンクリック
✅ タッチ操作もシミュレート可能 – マウスでスワイプやタップを再現
こんな時に活用しよう:
- 自分のサイトやブログのスマホ対応を確認したい
- ECサイトの商品ページの見え方をチェックしたい
- スマホ限定のキャンペーンページを見たい
- レスポンシブデザインの動作を確認したい
- 複数のデバイスで表示を比較したい
覚えておきたい操作:
F12でデベロッパーツールを開く- スマホアイコンをクリックしてスマホ表示に
- デバイスを選択して実機に近い環境で表示
- 完了したらもう一度アイコンをクリックして解除
Chromeのスマホ表示機能は、Web制作者だけでなく、一般ユーザーにとっても便利なツールです。
スマホでどう見えるか気になった時は、わざわざスマホを取り出さなくても、パソコンでサクッと確認できるんです。この機能を使いこなせば、より快適にインターネットを楽しめますよ！
この記事は2025年11月時点の情報に基づいています
コメント