PCでWebサイトのスマホ表示のスクリーンショットを撮る一番手軽な方法は、ページをスマホ表示で開いてから撮影することです。Chrome DevToolsのデバイスモードなら、デバイスツールバーのメニューにある Capture screenshot か Capture full size screenshot を使います。スマホ表示用の拡張機能なら、スクリーンショットのボタンを押すだけです。どちらもスマホで表示したときのページを画像にでき、スマホ本体に触る必要はありません。
どの方法を選ぶかは、見えている画面だけが必要かページ全体が必要か、そして画像にスマホの枠を入れたいかどうかで決まります。
表示範囲だけか、ページ全体か
ツールによってできることが違うので、まずここを決めます。
表示範囲のスクリーンショットは、スクロールせずにスマホの画面で見える部分を写します。不具合報告（「Cookieバナーの裏にボタンが隠れている」）、アプリストア風の宣伝画像、ファーストビューのデザイン確認に向いています。
ページ全体のスクリーンショットは、スクロールするページ全体を1枚の縦長画像につなげます。コンテンツのチェック、LPの承認、リニューアル前のページの保存に使います。ただし、ブラウザがページ全体を一度に描画するため、固定ヘッダー、遅延読み込みの画像、スクロール連動のアニメーションは不自然に写ることがあります。
方法1：Chrome DevToolsのデバイスモード
- DevToolsを開き（
F12）、デバイスツールバーを切り替えます（Ctrl + Shift + M、MacはCmd + Shift + M）。 - 端末を選んでページを再読み込みします。
- デバイスツールバー右上の3点メニューを開きます。
- 表示範囲なら Capture screenshot、ページ全体なら Capture full size screenshot を選びます。
スマホの外枠を入れたい場合は、特定の機種を選び、撮影前に同じメニューで Show device frame をオンにします。ChromeはPNGをダウンロードフォルダに保存します。
同じ操作はコマンドメニューからも実行できます。Ctrl + Shift + P（Macは Cmd + Shift + P）を押して「screenshot」と入力します。コマンドメニューには、選択した要素だけを撮る Capture node screenshot もあり、1つのコンポーネントを記録したいときに便利です。
方法2：スマホ表示の拡張機能
スマホのスクリーンショットを頻繁に撮るなら、DevToolsの手順は面倒になってきます。Mobile View Extension はフローティングツールバーにスクリーンショットボタンがあります。スマホやタブレットのプリセットを選ぶと、プレビューに表示されているとおりの枠付きの表示範囲をPNGで保存します。ページを移動してもスマホ表示が続くので、サイト内をクリックして回りながら各ページを数秒ずつで撮影できます。
この方法で撮れるのは表示範囲のスクリーンショットです。ページ全体を撮りたいならDevToolsのほうが向いています。
方法3：実機のスマホ
実機で撮ったスクリーンショットが最も正確です。ブラウザのアドレスバー、ノッチやDynamic Island、実際のフォント描画まで写るからです。多くのスマホでは、通常のスクリーンショットを撮ったあとにスクロールキャプチャや「ページ全体」のオプションが表示されます。iPhoneのSafariでは、スクリーンショットの編集画面に フルページ タブがあり、ページをPDFとして保存できます。
顧客や関係者が細部までチェックするものは、実機で撮影しましょう。
鮮明で正確な画像にするコツ
ちょっとしたポイントで、スマホのスクリーンショットはずっと役に立つものになります。
- 鮮明さはデバイスピクセル比で決まる。 幅390pxのiPhoneの表示領域をピクセル比3で撮ると、幅1170pxの画像になります。ぼやけて見えるなら、エミュレートしている端末のピクセル比が正しいか確認しましょう。現行モデルのピクセル比はiPhone画面サイズ一覧にまとめています。
- フォントと画像の読み込みを待つ。 Webフォントや遅延読み込みの画像が表示されてから撮らないと、代替フォントやグレーの枠が写ったままになります。
- オーバーレイの扱いを決めておく。 Cookieバナーやチャットウィジェットは小さな画面の大部分を覆います。写すかどうかを決めておきましょう。不具合報告なら、たいてい写すべきです。
- 何をエミュレートしたか書いておく。 ファイル名やチケットに端末、ブラウザ、日付を入れます。例：
pricing_iphone-16_chrome-emulated_2026-10-21.png。ブラウザ内のツールはChromeのエンジンで描画するため、「iPhone」と書いた画像でも実際のSafariとは少し違う場合があります。
スマホのスクリーンショットの活用場面
スマホのスクリーンショットが役立つ場面は主に3つです。QAでは、チケットに添付して、どの表示幅で崩れたのかを開発者に正確に伝えます。幅はデバイスツールバーで確認できます。デザインレビューでは、スマホとPCのスクリーンショットを並べて、コンテンツの順番が自然かを確かめます。マーケティングでは、LPやアプリの紹介ページに枠付きの画像を使えますが、実機で撮るか、エミュレーションであることを明記しましょう。
こうしたスクリーンショットを使うテスト全体の流れは、モバイルサイトのテスト用チェックリストをご覧ください。
よくある質問
Chromeでスマホ表示のページ全体のスクリーンショットを撮るには？
DevToolsを開いてデバイスツールバーを切り替え、端末を選んで再読み込みし、デバイスツールバーの3点メニューから Capture full size screenshot を選びます。
DevToolsを使わずにスマホのスクリーンショットを撮れますか？
撮れます。Mobile View Extensionのようにスクリーンショットボタンのあるスマホ表示の拡張機能なら、フローティングツールバーからスマホサイズの表示を撮影できます。
スマホのスクリーンショットのピクセル幅が大きいのはなぜですか？
スクリーンショットはデバイスピクセル比で保存されるためです。幅390pxの表示領域を3倍で撮ると、幅1170pxの画像になります。これは正常で、高密度ディスプレイでも画像が鮮明に見えます。