【6日でできるHTML＆CSS入門】画像が表示される原理
―画面の 1 点はどうやって「色」を持つのか―
スマートフォンや PC のディスプレイは、静止画・動画・ゲームを滑らかに映し出しますが、その根本原理は 光の三原色 (RGB) と 画素 (pixel) の組み合わせに尽きます。ここでは「光が目に届くまでの仕組み」を起点に、画素構造・解像度・色深度・表示デバイスの違いまで体系的に解説します。
１．色が見えるしくみ
1.1. 光の三原色と加法混色
| 色光 | 略称 | 組み合わせ例 | 見える色 |
|---|---|---|---|
| Red | R | R + G | Yellow |
| Green | G | G + B | Cyan |
| Blue | B | B + R | Magenta |
| R+G+B | RGB 全開 | White |
RGB それぞれの光量を変えることで、人間の目が認識できるほぼすべての色域を再現できます（加法混色）。
1.2. ピクセルとサブピクセル
1 画素 = R・G・B 3 つのサブピクセル
各サブピクセルの輝度を 0〜最大まで調整 → 単一色の点を生成 → 無数に敷き詰めて画像を構築。
1.3. 画素＝点の集合 → 解像度
解像度は「横 × 縦」の画素数で表記。値が大きいほど細密。
| 名称 | 代表解像度 | アスペクト比 |
|---|---|---|
| HD | 1280×720 | 16:9 |
| FHD | 1920×1080 | 16:9 |
| 4K UHD | 3840×2160 | 16:9 |
２．ディスプレイの技術と色再現
2.1. LCD と OLED の発光原理
- LCD： バックライトの白光を液晶シャッター＋カラーフィルターで透過／遮光。
- OLED： 各サブピクセル自体が発光。バックライト不要で高コントラスト。
2.2. 色深度 (Color Depth)
| 名称 | R | G | B | 合計 bit | 表現可能色 |
|---|---|---|---|---|---|
| ハイカラー | 5 | 6 | 5 | 16 | 約 6.5 万色 |
| フルカラー | 8 | 8 | 8 | 24 | 約 1677 万色 |
| ディープカラー | 10 | 10 | 10 | 30 | 10 億色超 |
高 bit ほどグラデーションが滑らかになりバンディング（階調飛び）が起きにくい。
2.3. DPI と視認性
DPI = dots per inch（1 インチ当たりの画素密度）。スマホは 300 DPI 以上が一般的で、肉眼では個々のピクセルが判別しにくい “Retina” 領域。
３．デジタルデータ→光になるまで
- 画像ファイルを OS やブラウザがデコード（JPEG・PNG など）。
- 各ピクセルの RGB 値をフレームバッファへ格納。
- GPU が同期信号に合わせて行・列へデータを送出。
- ディスプレイ側のドライバ IC がサブピクセル電圧／電流を制御。
- 光が発せられ、人の網膜で三色感覚細胞が興奮 → 脳で「色」と認識。
４．最新トピック
4.1. HDR (高ダイナミックレンジ)
輝度レンジと色域を拡大し、より現実に近い映像を表示。
- 規格例：HDR10, Dolby Vision
- 必要条件：10 bit 以上の色深度＋広色域バックライト／OLED
4.2. ミニ LED / マイクロ LED
- ミニ LED： 数千個のバックライトを局所駆動し LCD でも高コントラスト。
- マイクロ LED： 各画素が自発光、OLED を凌ぐ輝度・寿命が期待。
使用キーワード早見表
| 用語 | 意味 | 例 |
|---|---|---|
| RGB | 光の三原色 | #FF0000（赤） |
| Pixel | 画素 | FHD = 2,073,600 px |
| Sub-pixel | R/G/B の発光素子 | 1 px = 3 sub |
| Color Depth | 1 色当たり bit 数 | 24 bit = 8-8-8 |
| DPI | 画素密度 | 326 DPI (iPhone 13) |
まとめ
- RGB の強弱 が色を決め、ピクセルの集合 が画像になる。
- 色再現力は 色深度、精細さは 解像度＋DPI で決まる。
- 表示デバイスは LCD/OLED/LED など多様だが、「サブピクセルを制御して光を放つ」という核心原理は同じ。
仕組みを理解すれば、画質調整・画像最適化・デザイン作業の説得力がぐっと高まります。