スクリーンショット解像度

スクリーンショット解像度は、撮影した画像のピクセル寸法、つまり幅×高さを表します。画像の細かさ、鮮明さ、ファイルサイズに影響します。

Related workflow terms: Retinaスクリーンショット.

解像度と画質

解像度は、スクリーンショットの見た目を左右する基本的な要素です。高解像度の画像には多くの画素があり、細部や文字、曲線を鮮明に残せます。解像度が低いと、文字の輪郭がぎざつき、細い線が消え、小さなUI要素が読みにくくなります。

同じ表示内容なら、見える範囲あたりの画素が多いほど、細部を記録できます。同じWebページを撮影した2,880×1,800ピクセルの画像には、1,440×900ピクセルの画像の4倍の画素があります。同じ物理サイズで表示すると、高解像度版のほうがはっきり見えます。

ドキュメント、マーケティング、印刷に使うときは、特に重要です。見る人が拡大したり、デザイナーが一部を切り出したり、印刷で多くの画素が必要になったりします。最初に高い解像度で撮れば、後から縮小できます。一方、低解像度の画像へ本物の細部を後から足すことはできません。

解像度を決める要素

スクリーンショットのピクセル寸法は、複数の要素で決まります。

• ディスプレイ解像度： モニターや画面のネイティブ解像度です。全画面撮影なら、4Kディスプレイは最大3,840×2,160ピクセル、1080pディスプレイは最大1,920×1,080ピクセルです
• デバイスピクセル比（DPR）： 高密度ディスプレイではDPRが2倍や3倍になり、論理ビューポート寸法へ掛け合わされます。幅1,440ピクセルのビューポートを2倍画面で撮ると、幅2,880ピクセルになります
• ビューポート寸法： ブラウザ撮影では、ビューポートが論理的な撮影範囲を決めます。ビューポートが広いほど、スクリーンショットも広くなります
• 撮影ツールの設定： 初期解像度を上書きし、カスタムDPRや、実ディスプレイに依存しない描画寸法を指定できるツールもあります

自動撮影では、これらを固定すると出力をそろえられます。DPRとビューポート寸法を決めておけば、実行するパソコンが変わっても同じ条件で撮りやすくなり、担当者ごとのディスプレイ差を減らせます。

解像度とファイルサイズ

解像度が上がると、ファイルも大きくなります。幅と高さを2倍にすると画素数は4倍になり、形式と圧縮率による差はあるものの、容量も増えます。

可逆圧縮のPNGは、画素数におおむね比例して大きくなります。同じ内容でも、2,880×1,800ピクセルのPNGが5〜10 MB、1,440×900ピクセルなら1〜2 MBになる場合があります。非可逆圧縮のJPEGやWebPは、重複する情報を省くため増え方が緩やかですが、大きい画像ほどファイルも大きくなります。

この違いはWeb配信で重要です。ランディングページへ10 MBの画像を配信すれば、読み込みが遅くなります。最初から低解像度で撮るのではなく、高解像度で撮ってから用途に合わせて最適化します。適切な画質で圧縮し、対応環境にはWebPを使い、レスポンシブ画像のマークアップで端末に合うサイズを配信します。

実際の制作では、スクリーンショット解像度を、たまたま使った画面任せにせず、事前に決めます。目標ビューポート、DPR、書き出し形式をそろえると、社内比較がしやすくなり、公開前のやり直しも減らせます。

よくある失敗

• 高DPI画面で1倍撮影する： ツールによっては物理ピクセルではなく論理ピクセルで撮り、画面が表示できるものより低い解像度になる場合があります。ネイティブDPRで撮れているか確認します
• 低解像度の画像を拡大する： 1倍画像を2倍寸法へ広げても細部は増えません。画素を補間するため、ぼやけたりにじんだりします。後から拡大せず、必要な解像度で撮影します
• どの用途でも最大解像度を使う： 幅200ピクセルのサムネイルへ3倍画像を使うと、通信量と保存容量を無駄にします。最大表示寸法に、トリミング用の適度な余裕を加えた解像度を選びます
• 撮影後に圧縮しない： 高解像度画像は大きくなります。共有や公開前に圧縮しないと、通信量と保存容量が増えます。文字中心で可逆圧縮が必要ならPNG、写真中心で非可逆圧縮を許容できるならWebPまたはJPEGを使います