色深度（カラー深度）
1画素の色を何ビットで表すかを示し、表現できる色数を決める指標。
📌色深度とは
色深度とは、1つの画素（ピクセル）の色を何ビットで表すかを示す値のことです。「色の細かさ」を決める指標で、ビット数が多いほど、その画素で表せる色の種類が増えます。
身近な例で考えると、絵を描くときに使える色鉛筆の本数に似ています。8色セットより24色セットのほうが、微妙な中間色まで塗り分けられますよね。色深度が大きいほど、たくさんの色鉛筆を持っているイメージです。
上のツールで▶ボタンを押すと、ビット数を8→24と変えたときに、色数とグラデーションの見え方がどう変わるかを確認できます。
🔢ビット数と色数の関係
表現できる色数は、「2の（色深度ビット数）乗」で求められます。1ビットは0か1の2通りを表せるので、ビットが1つ増えるたびに表せる組み合わせ（＝色数）が2倍になっていきます。
色数 = 2^(色深度ビット数)
| 色深度 | 計算 | 色数 | 通称 |
|---|---|---|---|
| 8ビット | 2^8 | 256色 | — |
| 16ビット | 2^16 | 65,536色 | ハイカラー |
| 24ビット | 2^24 | 約1677万色 | フルカラー |
色数が少ないと、なめらかなはずのグラデーションに段差（バンディング）が見えてしまいます。中間の色を表しきれず、色がカクカク切り替わるためです。24ビット（フルカラー）あれば、人の目では段差を見分けられなくなります。上のツールのSTEP3とSTEP4で、この違いを見比べてみてください。
💾データ量への影響
色深度を上げると見た目はきれいになりますが、その代わり1画素あたりのビット数が増えるため、画像全体のデータ量も増えます。色深度はデータ量に比例して効いてくるのです。
データ量 = 横 × 縦 × 色深度bit ÷ 8
たとえば100×100画素の画像なら、次のようにデータ量が変わります。
・8ビット：100×100×8÷8 = 10,000バイト（約9.8KB）
・24ビット：100×100×24÷8 = 30,000バイト（約29.3KB）
同じ画素数でも、色深度が3倍ならデータ量も3倍です。きれいさとデータ量はトレードオフ（あちらを立てればこちらが立たず）の関係にあります。だからこそ、用途に合わせて適切な色深度を選び、必要に応じて圧縮することが大切になります。上のツールの最終ステップで、データ量が増える様子を確認できます。
🎨RGBの各チャネルと24ビットの内訳
ここまで「色深度 = 1 画素のビット数」と説明してきましたが、フルカラー（24 ビット）はもう少し細かく分かれています。実際にはR（赤）・G（緑）・B（青）の 3 つのチャネルに分かれ、それぞれに 8 ビットずつ割り当てられています。
各チャネルは 8 ビット = 256 段階の明るさ（0〜255）を持っています。0 が「その色なし」、255 が「その色の最大の明るさ」を表します。3 色を組み合わせることで、256 × 256 × 256 = 約 1677 万色を表現できる仕組みです。
具体例：R=255, G=128, B=64 のオレンジ色
・R=255：赤を最大の明るさで光らせる
・G=128：緑を半分くらいの明るさで光らせる
・B=64：青を弱く光らせる
この組み合わせで、私たちの目には「オレンジ色」に見えます。Web 開発でよく見る #FF8040 という 16 進数表記は、R/G/B の各値を 2 桁ずつ並べたものです。
なぜ RGB なのか。これは人間の目の仕組みに合わせた方式です。目の網膜には赤・緑・青を感じる 3 種類の細胞があり、この 3 色の刺激の組み合わせを脳が「色」として認識します。だからモニタも同じ 3 色を発光させれば、あらゆる色を表現できるわけです。テレビ画面を虫めがねで見ると、赤・緑・青の小さな点が並んでいるのが見えます。
🌫️アルファチャンネル（32ビット色）
色深度には 24 ビット（フルカラー）のほかに32 ビットもよく使われます。これは 24 ビットの RGB にアルファチャンネル（A）を加えたもので、A は「透明度」を表します。
アルファ値の意味
・A = 0：完全に透明（その画素は見えない／背景がそのまま見える）
・A = 128：半透明（背景の色と半分ずつ混ざって見える）
・A = 255：完全に不透明（背景は隠れる、24bit と同じ見え方）
どんなときに使うか。アルファチャンネルがあると、画像と画像を重ねたとき、上の画像の透明な部分から下の画像が透けて見えます。Web サイトのロゴ・アイコン・スタンプ画像など、背景を切り抜きたい画像でよく使われます。代表的な対応フォーマットは PNG・WebP・BMP などで、JPEG はアルファチャンネルを持てないため、半透明の表現が必要なら PNG を選ぶことになります。
32 ビットでもデータ量が増える点には注意が必要です。1 画素 32 ビット = 4 バイトなので、24 ビットより 1.33 倍重くなります。透明度が不要な写真などでは無駄になるため、用途を見て使い分けます。
🎨インデックスカラー（カラーパレット方式）
色深度を抑える別の方法にインデックスカラー（カラーパレット方式）があります。これは、画像で使う色を最初に決めて「色見本帳（パレット）」として保存し、各画素には「色そのものではなく、パレットの番号」だけを記録する方式です。
具体例：8 ビットインデックスカラー
・パレット：256 色をあらかじめ用意（各色は 24 ビットで定義）
・各画素：パレットの番号（0〜255）を 8 ビットで記録
・1 画素あたり 8 ビットで済むので、データ量は 24 ビット直接の1/3になる
代表例が GIF 形式で、最大 256 色までの画像を扱えます。
メリット
・データ量が大幅に減る（イラスト・アイコン・ロゴなど色数の少ない画像で特に効果的）
・パレットだけ差し替えれば全体の色味を変えられる（カラーバリエーション生成）
デメリット
・使える色がパレットの数に制限される（8 ビットなら 256 色まで）
・写真など色数の多い画像には向かない（バンディングや色の劣化が出やすい）
例えるなら、「絵の具のチューブを毎回開けて塗る」（直接 24 ビット）か、「あらかじめパレットに 256 色用意しておいて、画素は番号で指す」（インデックスカラー）か、というイメージです。アイコンのような単純な絵なら、後者のほうが描く手間が少なく、データも軽くて済みます。
🗂️画像形式と色深度の対応
普段使う画像ファイル形式は、それぞれ扱える色深度の最大値が決まっています。用途に合った形式を選ぶと、画質・データ量のバランスを最適化できます。
| 形式 | 主な色深度 | 透明度 | 得意な用途 |
|---|---|---|---|
| GIF | 8bit（256色） | 1bit（透明 or 不透明のみ） | アイコン・簡単なアニメ |
| JPEG | 24bit（1677万色） | なし | 写真（不可逆圧縮） |
| PNG | 24/32bit | 8bit（半透明OK） | ロゴ・スクショ・透過素材 |
| WebP | 24/32bit | 8bit | Web向け（高圧縮） |
| BMP | 1/8/24/32bit | あり（32bit時） | 非圧縮の素データ |
選び方の目安
・写真：JPEG または WebP（フルカラーが必要、多少の劣化は許容できる）
・ロゴ・アイコン・透過素材：PNG または WebP（透明度が使え、文字や線が鮮明）
・シンプルなイラスト・絵文字：GIF または PNG（256 色で十分、データが軽い）
・古いシステム・素データ保存：BMP（圧縮されないので品質劣化ゼロ）
「色深度が大きい＝高画質」とは限らない点に注意してください。GIF で十分なアイコンを 24 ビット PNG で保存すると、見た目はほぼ同じなのにデータ量が数倍に膨らみます。逆に、写真を 8 ビット GIF にすると、色が不自然になり画質が落ちます。「絵柄に合う色深度・形式を選ぶ」のが基本です。
