WEBデザインをする上で、モニター（ディスプレイ）の仕組みを理解することは非常に重要です。特に、RGB（色の表現方法）と解像度（画面の精細さ）を正しく理解すると、より適切なデザインが作成できます。
RGBとは？（色の表現方法）
RGB（Red, Green, Blue）とは、デジタル画面で色を表現する仕組みのことです。
- モニターは 赤（R）、緑（G）、青（B） の3色の光を組み合わせて、さまざまな色を作り出します。
- 例えば、
- R:255, G:0, B:0 → 純粋な「赤」
- R:0, G:255, B:0 → 純粋な「緑」
- R:0, G:0, B:255 → 純粋な「青」
- R:255, G:255, B:255 → 「白」
- R:0, G:0, B:0 → 「黒」
- RGBの数値は 0～255 の範囲で設定され、色の組み合わせによって何百万色もの色が表現できます。
WEBデザインでのRGBの活用
- 色の統一: RGB値を指定することで、異なる環境でもできるだけ統一した色を表示できる。
- コントラスト: 色の組み合わせによって、視認性の高いデザインが可能（例えば、黒背景に白テキスト）。
- 透明度の設定: CSSでは
rgba(R, G, B, A)を使って、A（アルファ値 0.0～1.0）で透明度を調整できる
解像度とは？（画面の精細さ）
解像度とは、画面を構成するドット（ピクセル）の密度を表す数値です。高解像度になるほど、より細かく美しい表示が可能になります。
代表的な解像度
| 解像度 | ピクセル数（横×縦） | 画面比率 |
|---|---|---|
| HD | 1280 × 720 | 16:9 |
| Full HD（FHD） | 1920 × 1080 | 16:9 |
| 2K | 2560 × 1440 | 16:9 |
| 4K | 3840 × 2160 | 16:9 |
| 8K | 7680 × 4320 | 16:9 |
WEBデザインでの解像度の考慮点
デバイスごとの違いを理解する
-
- スマホ、タブレット、PCでは画面サイズも解像度も異なるため、レスポンシブデザインを意識する。
- 例えば、スマホでは
375pxくらいの横幅しかなく、PCでは1920px以上になることもある。
Retinaディスプレイ（高解像度）の対応
-
- Apple製品などはRetinaディスプレイを採用し、通常の2倍以上のピクセル密度を持つ。
- 例えば、通常
100px × 100pxの画像でも、Retina用に200px × 200pxで作ると綺麗に表示される。 @2xや@3xの画像を用意したり、CSSでbackground-sizeを調整するのが一般的。
画像の最適化
-
- 高解像度の画像は綺麗だが、ファイルサイズが大きくなると表示速度が遅くなる。
- WebP や SVG の使用で軽量化しつつ、高品質を維持するのがポイント。
まとめ
- RGB → WEBデザインで色を決める基準。R（赤）、G（緑）、B（青）の組み合わせで色を表現する。
- 解像度 → ピクセルの密度。デバイスごとに異なり、適切なサイズや画像形式を選ぶ必要がある。
- 実践ポイント
- RGB値を理解して適切な色設定をする
- スマホやPCの解像度に対応したデザインを考える
- 高解像度（Retinaなど）を意識しつつ、データの軽量化を行う
WEBデザインでは、モニターの仕組みを理解することで、美しく見やすいデザインを実現できます！
