Web ページのスクリーンショット 高画質で撮る方法

スクリーンショット 高画質のポイントは 3 つです。画面の解像度いっぱいで撮る、JPG ではなく PNG で保存する、細かい部分は撮る前に拡大する。画面で表示できる以上にくっきりした Web ページが欲しいなら、Chrome の DevTools でデバイス ピクセル比（DPR）を 2 や 3 に上げてから Capture full size screenshot を使います。画像は通常サイズのその倍率で描画されます。

スクリーンショットがぼやける理由

スクリーンショットは画面のピクセルをコピーするだけです。ウィンドウが小さい、ページが縮小表示されている、圧縮した JPG で保存した、といった場合は細部が失われます。あとで画像を拡大しても戻りません。

高解像度で撮る方法

方法	変わること	向いている用途
PNG で保存	文字や輪郭に圧縮ノイズが出ない	UI、文字、図
撮る前に拡大	必要な範囲により多くのピクセルを使う	グラフや表
Chrome DevTools で DPR を上げる	ページを 2 倍・3 倍で描画	印刷、スライド、Retina 画面向けの Web ページ

方法 1：JPG ではなく PNG

PNG は文字と UI の輪郭をくっきり保ちます。JPG は画像を圧縮するので細い線がにじむことがあります。JPG はファイル サイズが細部より大事なときだけ使いましょう。

方法 2：先に拡大する

Ctrl + +（Mac は Cmd + +）でページを拡大してから範囲を撮ります。同じグラフがより多くの画面ピクセルを使うので、印刷や投影でもくっきり見えます。

方法 3：Chrome DevTools のピクセル比

Chrome のデバイス モードのドキュメント によると、DPR は物理ピクセルと論理（CSS）ピクセルの比率です。これは自分で設定できます。

1. DevTools（F12、Mac は Cmd + Option + I）を開き、スマホとタブレットのアイコンでデバイス モードをオンにします。
2. More options（3 点）> Add device pixel ratio をクリックします。
3. ページ上部のバーに出る DPR メニューで、2 や 3 などの値を選びます。
4. 同じ More options から、表示部分なら Capture screenshot、ページ全体なら Capture full size screenshot を選びます。

DPR は解像度の倍率として働きます。幅 1920 ピクセルの表示を DPR 2 で撮ると、幅 3840 ピクセルの画像になります。こちらの手順ガイド にも例があり、フルサイズのキャプチャがすべてのサイトで完璧に動くわけではないと注意しています。DevTools のほかのキャプチャ コマンドは Chrome スクリーンショットのショートカット に、詳しい手順は Chrome でページ全体のスクショ にあります。

毎日のスクリーンショットなら、Full page screenshot がページ全体や選択範囲を、文字がくっきり残る PNG で保存します。2 倍・3 倍の画像が必要なら、上の DevTools の方法を使ってください。

よくある質問

Windows で高解像度のスクリーンショットを撮るには？

画面を推奨解像度にし、ウィンドウを最大化して範囲を拡大し、Windows + Shift + S で撮ります。Web ページなら DevTools の DPR の方法を使います。

画面より高い解像度で撮れますか？

OS のショートカットではできません。Chrome の DevTools なら、DPR を変えて Web ページを 2 倍・3 倍で描画できます。

スクリーンショットは PNG と JPG のどちらがいい？

文字や UI なら PNG、ファイルを小さくしたくて細部がそれほど重要でないなら JPG です。