解像度
Resolution
概要（サマリー）
解像度とは、パソコンやスマートフォンの画面、あるいは画像データを構成する最小単位である「ドット（画素・ピクセル）」の密度や、画面全体のマス目の細かさを示す数値のことである。
たとえば、「1920 × 1080」といった数値で表され、この値が大きい（ドットが細かい）ほど、文字や画像が滑らかで高精細に表示される。
Web制作やデザインを扱う上で、画面サイズや画像の見え方を調整するための極めて重要な基本概念である。
詳細解説
解像度とは何か
デジタル機器が画面に文字や画像を映し出す際、それは無数の小さな「光の点（ピクセル）」を格子状に並べることで表現されている。
この「点の細かさ」や「点の総数」を解像度と呼ぶ。
解像度の概念には、大きく分けて「画面解像度」と「画像（印刷）解像度」の2つの側面がある。
画素（ピクセル）と画面解像度
画面解像度は、ディスプレイに横と縦でそれぞれ何個のピクセルが並んでいるかを示す。
代表的な規格には以下のものがある。
- HD:
1280 × 720ピクセル - Full HD (FHD):
1920 × 1080ピクセル（現在の一般的なPCモニター規格） - 4K:
3840 × 2160ピクセル（非常に高精細な映像表示規格）
同じ画面サイズ（たとえば24インチのモニター）であっても、解像度が高ければ高いほど、より多くの情報を一度に画面内に表示でき、文字の輪郭も滑らかになる。
画像の解像度（dpi/ppi）の違い
画像データにおける解像度は、主に「画素密度（1インチの幅にどれだけピクセルが詰まっているか）」で表される。
- ppi (pixels per inch): ディスプレイ上で1インチあたりに並ぶピクセル数を示す。
- dpi (dots per inch): 印刷時に1インチあたりに並ぶドット（インクの点）数を示す。
Web用の画像は一般的に 72ppi〜96ppi で十分綺麗に表示されるが、紙に印刷する場合はインクがにじむため、最低でも 300dpi〜350dpi の高い解像度が必要となる。
Web開発で注意すべき「論理解像度」と「物理解像度」
近年のスマートフォンやMacのディスプレイ（Retinaディスプレイなど）は、人間の目ではピクセルを識別できないほどの高密度ディスプレイを採用している。
これに伴い、Web開発では「論理解像度（CSSピクセル）」と「物理解像度（デバイスピクセル）」を区別しなければならなくなった。
- 物理解像度: ディスプレイに実際に組み込まれている物理的なピクセル数。
- 論理解像度: ウェブサイトを制作する際に指定するCSS上のピクセル数。
高解像度画面では、通常の「横300ピクセル」の画像をそのまま表示すると、物理ピクセルに対して引き延ばされてぼやけて表示されてしまう。
これを回避するため、CSSのメディアクエリなどを使って、高解像度画面向けに「2倍・3倍の大きさの画像」を縮小して表示させるような、レスポンシブ対応の設計技術が必要になる。
以下は、CSSで特定の画面解像度（画素密度）のデバイス向けにスタイルを切り替えるメディアクエリのコード例である。
/* 高精細ディスプレイ（Retinaディスプレイなど）向けのスタイル設定 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo {
/* 2倍サイズで作成した高解像度画像を背景に指定し、CSSで半分のサイズに縮小して表示 */
background-image: url('logo@2x.png');
background-size: 100px 50px;
}
}
このような調整を行うことで、どのような端末から閲覧されても文字やロゴがくっきりと美しく表示される、優れた UI / UX を実現することができる。
AIコーディングとの関係
AIにCSSのスタイリングやレスポンシブデザインのコード生成を依頼する際、解像度の指定方法についてAIに明確な指示を出すことで、意図したデザインを正確に再現しやすくなる。
たとえば、「PC用の標準的な解像度（横1920px以上）とスマホ用の解像度（横768px以下）で切り替えるレスポンシブ用のメディアクエリを書いて」と依頼すると、AIは一般的なブレイクポイント（画面幅の基準値）を設定したCSSを生成してくれる。
また、AIに画像を生成してもらう（DALL-EやMidjourneyなどのAIアセット生成機能を使う）場合、「1920x1080の壁紙用の解像度で生成して」「Webサイトのアイコン用に512x512ピクセルの正方形で出力して」といったピクセル解像度の指示（アスペクト比や寸法）をプロンプトに含めることで、後からトリミングやサイズ変更をする手間を省くことができる。
よくある勘違い
解像度を高くすればするほど画面の文字が綺麗で読みやすくなる？
ハードウェアの性能としてはその通りだが、画面サイズが小さいまま解像度だけを極端に高くすると、文字やアイコンの表示サイズが非常に小さくなってしまい、かえって視認性が悪くなる。
そのため、現代のOSにはスケーリング（画面の拡大表示）機能が備わっており、4K解像度などを「150%」や「200%」に拡大することで、読みやすさを保ちつつ高精細な表示を実現している。
画像の解像度（dpi）を上げれば元のぼやけた写真が鮮明になる？
元々のピクセル数が少ない（例えば 100x100 ピクセルの小さな）画像の解像度設定値だけを編集ソフトで「72dpi から 300dpi」に変更しても、画像内部のピクセル情報が魔法のように増えるわけではない。
ドットを引き延ばして無理に補間するだけ（アップスケーリング）になり、画像はぼやけたまま変わらない。
高精細な画像を得るためには、最初から十分な大きさのピクセル数で写真撮影や画像生成を行う必要がある。
スマホ用の画像はPC用と同じ解像度で書き出してよい？
スマホの画面サイズ自体はPCより小さいが、前述の通り画素密度（ppi）がPCの数倍高いディスプレイが一般的である。
そのため、スマホ用だからといって小さな画像をそのまま使用すると、画面上でロゴや写真がぼやけてしまう。
スマホ向けにも綺麗に表示させるためには、画面サイズ（CSS上の幅）の2〜3倍の解像度を持つ画像を用意する必要がある。
まとめ
- 解像度は、ディスプレイや画像を構成する「ピクセル」の細かさや全体の総数のことである。
- 画面解像度（Full HDや4Kなど）が高いほど、多くの情報を滑らかに表示できる。
- 画像の解像度（ppi/dpi）は、印刷用（高密度）とWeb用（低密度）で要求される値が異なる。
- 高密度ディスプレイに対応するため、Web制作では論理解像度と物理解像度の概念を意識する。
情報ソース
より詳しくAIに聞いてみよう
- WindowsとMacで、モニターの解像度とテキストの表示サイズ（スケーリング）を最適化する設定方法を教えてください。
- レスポンシブデザインにおいて、画像ファイルを
<picture>タグやsrcset属性を使って解像度ごとに出し分けるHTMLの書き方を教えてください。 - 4KモニターをフルHD解像度に設定して使用すると、画面の映り方はどう変化しますか？
- イラストレーターやデザイナーが使う「SVG（ベクターデータ）」は、なぜ画面の解像度に関わらず常にくっきりと表示されるのですか？
- AIに「様々なスマホやタブレットの画素密度に対応する、Web用のアセット画像の書き出し指示書」を英語と日本語で作ってもらうプロンプトの例を教えてください。