※小説ではない※専門書 要約資料集 為替(換算)3.9万円でもらう 紐解集生成 専門 初入門 資料   作:{作者名}

355 / 382

# BOOK-0223 色彩学 第2巻 — 配色理論と六光源グラデーション設計(デザイン実践編)

> 新設冠・色彩学デザイン 第2弾。ガイド役: Fable 5 監修 / Sonnet 5 執筆(脚本班)
> トーン規約: GAKUMON_UNIVERSE.md準拠。専門用語は初出で必ず説明する。水準二〜六中心(実務技法が主軸)、色彩心理学の実証研究の限界に触れる箇所は水準六〜七。
> 本書は「text系のゲームEditor」プロジェクトの実務書であり、ここで扱う配色理論・陰影設計は、ゲームのタイル・スプライト・UI意匠の判断に直接使えることを目指して書かれている。

---


# BOOK-0223 色彩学 第2巻 — 配色理論と六光源グラデーション設計(デザイン実践編)

 

# BOOK-0223 色彩学 第2巻 — 配色理論と六光源グラデーション設計(デザイン実践編)

 

> 新設冠・色彩学デザイン 第2弾。ガイド役: Fable 5 監修 / Sonnet 5 執筆(脚本班)

> トーン規約: GAKUMON_UNIVERSE.md準拠。専門用語は初出で必ず説明する。水準二〜六中心(実務技法が主軸)、色彩心理学の実証研究の限界に触れる箇所は水準六〜七。

> 本書は「text系のゲームEditor」プロジェクトの実務書であり、ここで扱う配色理論・陰影設計は、ゲームのタイル・スプライト・UI意匠の判断に直接使えることを目指して書かれている。

 

---

 

## 本書の一枚要約(まず全体を掴むための1ページ)

 

**何を書いた本か**: 色を「どう組み合わせるか(配色調和)」と「どう陰影をつけるか(グラデーション設計)」という、2つの実践的な技術を扱う一冊である。姉妹書→BOOK-0222(色彩学第1巻)が光の物理・色空間の科学という「土台」を扱うのに対し、本書はその土台の上に立つ「実務」——つまり、実際に手を動かして配色を決め、陰影をつけるときに、何を根拠にどう判断すればよいか——に的を絞る。

 

**何が身につくか**: 本書を読み終えたとき、読者は次の4つの実務技能を得ているはずである。第一に、イッテンの色相環に基づく5つの配色調和(補色・類似色・三色配色・分割補色・四色配色)を、実際のRGB数値とともに使い分けられるようになる。第二に、本書の中心テーマである「六光源グラデーション体系」——白・黒(闇)・赤・黄・緑・青という6つの光源(または状況)ごとに、ハイライトからシャドウまでの色の遷移をどう設計するかという、ドット絵・タイル・スプライトの陰影表現に直結する具体的な設計図を習得する。第三に、色が人の心理に与える影響について、「広く支持されている知見」と「文化依存性が強く、過度に信じるべきではない通俗的な通説」とを見分ける目を養う。第四に、コントラスト比の計算やカラーユニバーサルデザインという、色覚の多様性に配慮した実務チェックリストを身につける。

 

**どこで再利用できるか**: 本書の六光源グラデーション体系と配色調和の理論は、「text系のゲームEditor」本体の原画班(地図生成・スプライト盤)・着色班(パレット・レンダラ・UI意匠)が、タイルセットやスプライトシートの陰影を機械的・体系的に設計するための実務標準として、そのまま再利用できることを想定している。

 

**章立て地図**:

 

```

第一章: 色相環と配色調和の基本理論(イッテンの色相環・補色/類似色/三色配色/分割補色/四色配色/PCCS)

第二章: 六光源グラデーション体系(本書の中核・白/黒/赤/黄/緑/青、それぞれのHSV設計と実測RGB値)

第三章: 陰影とグラデーションの実務技法(段階陰影・環境光と直接光・反射光・レトロハードの制約実例)

第四章: 四色による印象表現のデザイン論(色彩心理学の到達点と限界・実践パレット4例)

第五章: 実例研究(ゲームUI・パッケージデザイン・ブランドロゴにおける実在の配色実践)

第六章: グラデーションの派生バージョン比較(線形・放射・多段階/ポスタリゼーション)

第七章: 配色の実務チェックリスト(コントラスト比・アクセシビリティ・カラーユニバーサルデザイン)

第八章: 終章(観測手法ならぬ「設計判断の型」の総ざらいと次巻への橋渡し)

```

 

**本書の姿勢**: 色彩心理学の分野では、「赤は情熱を意味する」式の断定的な言い回しが世の中に広く流通している。しかし本書は、こうした通説をそのまま受け売りにはしない。研究によって比較的よく支持されている知見(たとえば色相差が知覚的コントラストを生むことなど)と、文化・時代・個人差によって大きく揺らぐ通説(特定の色と特定の感情の一対一対応)とを、章の中で明確に書き分ける。本書に登場する数値(RGB値・HSV値・コントラスト比)は、すべて本書の執筆時に計算式に基づいて算出した実測値であり、雰囲気で書いた数字は一つもない。

 

---

 

## 入口の物語 — 「正しい色」という幻想と、「機能する配色」という現実

 

ゲームの画面を作るとき、多くの初心者がまず突き当たる壁がある。それは「なんとなく綺麗な色を選んだつもりなのに、画面全体がぼやけて見える」「陰影をつけたつもりが、ただ黒っぽく汚れて見える」という壁である。

 

この壁の正体は、たいてい「センス」の不足ではない。**構造の不在**である。色を場当たり的に選ぶのではなく、色相環という地図の上のどこにその色があるのか、光源の色に対してハイライトとシャドウがどちらの方向に転ぶべきなのかという、再現可能な設計ルールを持たないまま手を動かしていることが、ほとんどの原因である。

 

19世紀のフランスの化学者ミシェル=ウジェーヌ・シュヴルールは、染料工場の技術顧問として働く中で、ある奇妙な苦情に出会った。「黒い糸だけが、他の色に比べて質が悪い」という顧客からの苦情である。ところが糸そのものを検査しても、化学的な欠陥は見つからなかった。シュヴルールが最終的に突き止めた原因は、糸そのものではなく、**隣り合う色が互いの見え方に影響を与える**という、人間の視覚のしくみそのものにあった。この発見は1839年、『色の同時対比の法則』という著作にまとめられ、後の画家たち——ドラクロワ、そして印象派・後期印象派の画家たち——に大きな影響を与えることになる。本書の第二章で扱う「六光源グラデーション」という陰影設計の技法も、根をたどればこの発見に行き着く。

 

一方、20世紀に入るとバウハウス(ドイツの造形学校)で教鞭を執ったヨハネス・イッテンが、色相環という道具を使って「どの色とどの色を組み合わせれば調和して見えるか」を体系化した。この体系は、100年近く経った現在でも、デザイン教育の出発点であり続けている。

 

本書は、この2つの伝統——シュヴルールの「陰影の科学」と、イッテンの「配色調和の体系」——を、ゲーム制作という現代の実務の文脈に翻訳し直す試みである。姉妹書→BOOK-0222が「色とは何か、目はどう色を見ているか」という科学的な土台を扱うのに対し、本書は「その土台の上で、実際に何を選び、何を組み合わせるか」という、一段実践寄りの問いに答えていく。

 

読み終えたとき、読者の手元には、単なる「綺麗な色の見本帳」ではなく、どんな新しい場面に出会っても自分で配色を組み立て直せる「設計の型」が残っているはずである。

 

---

 

# 第一章: 色相環と配色調和の基本理論

 

## 1-1. 色相環という地図

 

色を選ぶときに最初に持つべき道具は、**色相環(しきそうかん、水準二: 色を、赤→橙→黄→緑→青→紫→赤…という具合に、隣り合う色同士が近い印象になるよう円環状に並べた図)**である。色相環は、色を「なんとなくの直感」ではなく「円の上の位置関係」として扱えるようにする、配色理論の最も基本的な地図である。

 

色相環の上で色同士がどんな位置関係にあるかを見れば、その2色(あるいは3色、4色)を組み合わせたときに、調和して見えるか、それとも強い緊張感を生むかを、ある程度まで予測できる。この「位置関係から調和のパターンを読む」という考え方こそが、本章で扱う5つの配色調和(補色・類似色・三色配色・分割補色・四色配色)に共通する基本原理である。

 

## 1-2. イッテンの色相環 — バウハウスが遺した設計図

 

現在もっとも広く参照される色相環の一つが、スイスの画家・美術教育者**ヨハネス・イッテン(Johannes Itten, 1888-1967)**が、ドイツの造形学校**バウハウス**での教育経験をもとにまとめた色相環である。イッテンは著書『色彩論(The Art of Color)』(1961年)の中で、色相環を使った配色調和の考え方を体系的に整理し、以後のデザイン教育における事実上の標準を作り上げた。

 

イッテンの色相環は、**赤・黄・青**という3つの色を**一次色(いちじしょく、水準二: それ以上ほかの色を混ぜ合わせて作ることのできない、混色の出発点となる色)**として12時・4時・8時の位置に置き、一次色同士を混ぜ合わせてできる**橙・緑・紫**を**二次色(にじしょく)**としてその中間に置き、さらに一次色と二次色を混ぜ合わせてできる**三次色(さんじしょく)**を残りの位置に置くことで、12色からなる円環を作る。

 

## 1-3. 大事な区別 — 「絵の具の輪」(RYB)と「光の輪」(RGB)は別物

 

ここで、本書がゲーム制作の実務書であるがゆえに、正確に押さえておかなければならない重要な区別がある。イッテンの色相環が採用している赤・黄・青という一次色の組み合わせは、**RYBモデル(Red-Yellow-Blue、水準三: 絵の具や顔料など、光を吸収して色を作る「減法混色」の材料を前提にした、伝統的な絵画の色相環)**と呼ばれる、絵の具を混ぜる画家の実務から生まれた体系である。

 

一方、コンピュータのディスプレイやゲーム画面が採用しているのは、赤・緑・青を一次色とする**RGBモデル(Red-Green-Blue、水準二: 光そのものを足し合わせて色を作る「加法混色」を前提にした、デジタル画面の色相環)**である。RYBは「絵の具を混ぜるほど暗く濁っていく(全部混ぜると茶色や黒に近づく)」減法混色、RGBは「光を足すほど明るくなる(全部混ぜると白になる)」加法混色であり、両者は成り立ちからして異なる体系である。たとえばRYBの色相環では赤の隣に橙・黄が並ぶが、RGBの色相環(本書がゲーム制作の文脈で実際に使うのはこちらである)では、赤(R)と緑(G)を均等に混ぜると、絵の具の実感覚では想像しにくい**黄色**になる、という違いが生まれる。

 

本書では、実際にゲーム画面上で色を指定する場面を主対象とするため、以後の色相環・HSV(色相・彩度・明度)の数値例は、**すべてRGBベースのデジタル色相環**(色相0度が赤、120度が緑、240度が青)を基準に統一して説明する。ただし、イッテンが整理した「配色調和のパターンそのもの」(補色・類似色・三色配色など、色相環上の位置関係のルール)は、RYB・RGBのどちらの色相環に当てはめても同じように機能する、環境に依存しない考え方であることも付け加えておきたい。位置関係のルールは共通だが、そのルールをどの色相環に当てはめて具体的な数値を出すかは、絵の具の実務なのかデジタルの実務なのかによって変わる、という二段構えで理解してほしい。

 

## 1-4. 補色 — もっとも強いコントラストを生む組み合わせ

 

**補色(ほしょく、コンプリメンタリー、水準二: 色相環の上で、正反対(180度)の位置にある2色の組み合わせ)**は、配色調和の中でもっとも強い視覚的コントラストを生む。

 

RGBの色相環で色相0度(赤、RGB値でおよそ(217,65,65)、彩度70%・明度85%を仮定した場合)を基準に取ると、その補色は色相180度(シアン系、同条件でおよそ(65,217,217))になる。赤とシアンのように、補色同士を並べると、互いの色が最大限に引き立って見える一方で、面積の使い方を誤ると視覚的にうるさく、目が疲れる配色になりやすい。実務上は、**片方を広い面積(ベースカラー)、もう片方を狭い面積(アクセントカラー)として使う**という比率の工夫が定石になっている。

 

第二章で扱う「六光源グラデーション」の中核にある考え方——ハイライトの色に対してシャドウの色を反対側に転がす——も、この補色関係の応用の一種である。

 

## 1-5. 類似色 — 隣り合う色がもたらす、静かな調和

 

**類似色(るいじしょく、アナロガス、水準二: 色相環の上で隣り合う、あるいは近い位置にある2〜3色の組み合わせ)**は、補色とは対照的に、強い緊張感を生まない、穏やかで自然な調和を作る。

 

たとえば色相200度・230度・260度(いずれも彩度70%・明度85%と仮定すると、RGB値でおよそ(65,166,217)・(65,90,217)・(116,65,217)、つまり水色から青、青紫へと連続的に変化する3色)を並べると、互いに似た色味を持つため、画面全体に統一感が生まれやすい。空のグラデーションや、水辺・森など自然物の質感を表現する際に、類似色は特に効果を発揮する。ただし色相が近すぎるがゆえに、コントラストが弱く、要素同士の境界が見えにくくなるという弱点もあり、後述するコントラスト比(第七章)への配慮が別途必要になる場面もある。

 

## 1-6. 三色配色(トライアド) — 色相環を三等分する、力強い調和

 

**三色配色(さんしょくはいしょく、トライアド、水準三: 色相環を等間隔(120度ずつ)に三等分する位置にある3色の組み合わせ)**は、補色ほど強烈な緊張感は生まないが、類似色よりもはっきりした視覚的な豊かさとコントラストを両立できる配色として、多くの画家・デザイナーに好まれてきた。

 

色相環でもっとも直感的なトライアドの例は、色相0度・120度・240度、つまり赤・緑・青という組み合わせである。実務ではこれをそのまま使うのではなく、たとえば色相30度・150度・270度(彩度70%・明度85%と仮定すると、RGB値でおよそ(217,141,65)・(65,217,141)・(141,65,217)、橙・緑・紫の組み合わせ)のように、色相環上で等間隔を保ったまま全体を回転させることで、より穏やかで扱いやすいトライアドを作ることができる。トライアドの実務上のコツは、3色を均等な強さで使わず、**1色を主役(広い面積)、残り2色を脇役(狭い面積のアクセント)にする**という主従関係をつけることである。3色を同じ強さでぶつけると、画面がまとまりを欠きやすい。

 

## 1-7. 分割補色 — 補色の緊張感を和らげる、実務上の折衷案

 

**分割補色(ぶんかつほしょく、スプリット・コンプリメンタリー、水準三: ある基準色の補色そのものではなく、その補色の両隣にある2色を組み合わせる配色)**は、補色が持つ強いコントラストを保ちながら、補色そのものを使うときの強すぎる緊張感を和らげる、実務上よく使われる折衷案である。

 

たとえば基準色を色相0度(赤)とすると、単純な補色は色相180度(シアン)一色になるが、分割補色ではその両隣、色相150度・210度(彩度70%・明度85%と仮定すると、RGB値でおよそ(65,217,141)・(65,141,217)、緑寄りのシアンと、青寄りのシアン)の2色を使う。これにより、赤という基準色に対して2方向から異なる色相のコントラストが加わり、単純な補色1色よりも配色に奥行きが生まれる。ゲームのUIデザインにおいて「メインカラーを目立たせつつ、単調にはしたくない」という場面で、分割補色は特に実務価値が高い選択肢になる。

 

## 1-8. 四色配色(テトラード) — 色相環の長方形が生む、最大の多様性

 

**四色配色(ししょくはいしょく、テトラード、水準三: 色相環の上に長方形(または正方形)を描くように配置される4色の組み合わせ、実質的に2組の補色ペアの組み合わせ)**は、5つの配色調和の中でもっとも色数が多く、扱いが難しい反面、うまく使えば最大の色彩的多様性を生み出せる配色である。

 

具体的には、色相0度・60度・180度・240度(彩度70%・明度85%と仮定すると、RGB値でおよそ(217,65,65)・(217,217,65)・(65,217,217)・(65,65,217)、赤・黄・シアン・青)のように、色相環上に不等辺の長方形を描く形で4色を選ぶ。この配色は、赤↔シアンという補色ペアと、黄↔青という補色ペアの、2組の補色関係を同時に含んでいる。四色配色の実務上の鉄則は、**4色を均等な面積・彩度で使わないこと**である。4色すべてを同じ強さで主張させると、画面がまとまりを失いやすい。1色を支配的な基調色、1色を準主役、残り2色を控えめなアクセントとして使う、という明確な優先順位づけが欠かせない。この四色配色の考え方は、第四章で扱う「四色による印象表現のデザイン論」の土台になる。

 

## 1-9. PCCS — 色相とトーンで語る、日本の実務標準

 

配色調和を実務でもっと直感的に扱うための道具として、日本で広く使われている体系に**PCCS(Practical Color Coordinate System、日本色研配色体系、水準三: 一般財団法人日本色彩研究所が1966年に発表した、色相と「トーン」という2つの軸だけで配色を考えられるようにした実務向けの色体系)**がある。

 

PCCSの特徴は、色を色相(24色相)・明度・彩度という3属性で扱う代わりに、**明度と彩度をまとめて「トーン」という1つの軸に統合**し、「色相+トーン」という2軸だけで色を直感的に語れるようにした点にある。たとえば「v(ビビッド、鮮やかな)トーンの赤」「p(ペール、淡い)トーンの黄」のように、トーンには「鮮やか」「淡い」「深い」「暗い」といった形容詞が対応づけられており、感覚的な言葉と数値とを橋渡しする実務ツールとして、日本の配色検定(色彩検定など)でも標準的に採用されている。

 

PCCSの実務上の利点は、**同じトーンでそろえた配色は、色相が違っても自然にまとまる**という経験則を、体系的に説明できる点にある。たとえば「ペールトーンで統一する」という指示だけで、色相をあれこれ迷わずに、明るく淡い印象のパレットを一貫して作ることができる。この「トーンで色を語る」という発想は、次章で扱う六光源グラデーションにおいて、ハイライト・中間色・シャドウという各段階を「明度と彩度がどう変化していくか」という形で設計するときの、考え方の土台としても活用する。

 

## 1-10. イッテンの七つの色彩対比 — 調和だけでなく「対比」を体系化する

 

ここまでは色相環上の位置関係から生まれる5つの配色調和を扱ってきたが、イッテンの理論体系にはもう一つ、重要な柱がある。それが**七つの色彩対比(いろのたいひ、水準三: 2色以上を組み合わせたときに生まれる、視覚的な際立ち方のパターンを7種類に整理した理論)**である。配色調和が「どう組み合わせれば馴染むか」を扱うのに対し、色彩対比は「どう組み合わせれば際立つか」を扱う、いわば裏表の関係にある理論である。

 

イッテンが整理した7つの対比は次のとおりである。

 

```

① 色相対比(いろあいの違いそのものによる対比。色相環上で離れているほど対比が強い)

② 明暗対比(明るさの差による対比。もっとも基礎的で強い対比)

③ 寒暖対比(暖色〈赤・橙・黄〉と寒色〈青・青緑〉の対比。第四章で扱う心理的な温度感に関わる)

④ 補色対比(第一章1-4で扱った、色相環上で正反対の2色による対比)

⑤ 同時対比(隣り合う色が互いに相手の補色を帯びて見える対比。第二章2-2のシュヴルールの発見そのもの)

⑥ 彩度対比(鮮やかな色とくすんだ色を並べたときに生まれる対比)

⑦ 面積対比(色そのものの性質ではなく、使用する面積の比率によって生まれる対比。

一般に彩度・明度の強い色は、面積を小さくしても十分な存在感を持つ)

```

 

この7つのうち、⑤同時対比は第二章で扱うシュヴルールの発見と同一のものであり、イッテンの体系とシュヴルールの発見が、時代を越えて同じ現象を指し示していることがわかる。また⑦面積対比は、本書がこれまで繰り返し述べてきた「配色は均等な強さで使わず、主役と脇役に役割分担させる」という実務上の鉄則(第一章1-6・1-8、第四章4-5)の理論的な裏付けにあたる。彩度・明度の強い色ほど小さい面積で使うべきだという原則は、この面積対比の考え方から導かれる。

 

## 1-11. 総合例 — 同じ場面を5つの配色調和で塗り分けてみる

 

5つの配色調和(補色・類似色・三色配色・分割補色・四色配色)の違いを実感するため、「草原に立つ塔」という同一の題材を、5つの調和パターンそれぞれで配色した場合の基調色の組み合わせを比較してみよう。基準となる塔の壁面色を色相30度(暖色系の橙)に固定し、彩度65%・明度80%で統一する。

 

```

基準色(塔の壁面): H=30 S=65% V=80%

 

① 補色を採用する場合: 空・草を色相210度(青)にする → 強いコントラスト、塔が際立つ

② 類似色を採用する場合: 空・草を色相0度・60度(赤〜黄)にする → 穏やかで一体感のある暖色画面

③ 三色配色を採用する場合: 空を色相150度(緑)、草を色相270度(紫)にする → 賑やかで舞台的な印象

④ 分割補色を採用する場合: 空を色相180度、草を色相240度にする → 補色ほど強くない、洗練された対比

⑤ 四色配色を採用する場合: 塔=30度、空=90度、草=210度、遠景=270度 → 情報量の多い、複雑な画面

```

 

同じ「塔」という主題であっても、選ぶ配色調和によって画面が伝える印象がここまで変わる。実務では、その場面で何を主役にしたいか(塔を際立たせたいのか、画面全体の統一感を優先したいのか)によって、5つの調和から適切なものを選択することになる。この選択のプロセスこそが、次章の六光源グラデーション、そして第四章の四色による印象表現へとつながっていく、本書全体の設計思想の出発点である。

 

## 1-12. PCCSの12トーン早見表 — 感覚語と数値の橋渡し

 

1-9で紹介したPCCSの「トーン」という考え方を、実務で使えるところまで具体化しておきたい。PCCSは彩度・明度の組み合わせを、次の**12種類のトーン**に分類し、それぞれに感覚的な略号を与えている。

 

```

PCCS 12トーン(高彩度グループ→中彩度グループ→低彩度グループの順)

高彩度: v(ビビッド・鮮やか)/b(ブライト・明るい)/s(ストロング・強い)/dp(ディープ・深い)

中彩度: lt(ライト・浅い)/sf(ソフト・柔らかい)/d(ダル・鈍い)/dk(ダーク・暗い)

低彩度: p(ペール・淡い)/ltg(ライトグレイッシュ・明るい灰みの)/

g(グレイッシュ・灰みの)/dkg(ダークグレイッシュ・暗い灰みの)

```

 

この12トーンの分類がなぜ実務上便利なのかというと、**同じトーン記号を使う限り、色相をいくら変えても、パレット全体の「調子」が崩れない**という性質にある。たとえば「p(ペール)トーンで統一する」と決めてしまえば、暖色を選ぼうと寒色を選ぼうと、彩度・明度の組み合わせは常に「低彩度・高明度」の範囲に収まり、淡く優しい印象のパレットが自動的に保証される。これは第四章で扱う四色パレットの実践(4-5)においても、色相をどう選ぶか迷ったときに、まず「どのトーンで統一するか」を先に決めてしまうという、実務上有効な近道を提供してくれる。たとえばパレットB「不穏な夜の遺跡」(4-5)は、彩度25〜35%・明度20〜35%という数値帯からもわかるように、感覚的には「dkg(ダークグレイッシュ)」トーン寄りの構成になっている。

 

---

 

## 休憩所①: まとめ箱 — 第一章のポイント

 

```

色相環 = 色を円環状に並べた地図。イッテン(バウハウス・1961年著作)が配色調和を体系化

RYB(絵の具・減法混色)とRGB(デジタル画面・加法混色)は別の色相環→本書はRGB基準で統一

 

配色調和5パターン(色相環上の位置関係で分類):

補色(180度・最大コントラスト)/類似色(隣接・穏やかな調和)/

三色配色(120度等分・力強い調和)/分割補色(補色の両隣・折衷案)/

四色配色(長方形・2組の補色ペア・最大の多様性、ただし主従の優先順位づけ必須)

 

PCCS(日本色研配色体系・1966年発表) = 明度+彩度を「トーン」に統合し、

色相+トーンの2軸だけで配色を語れる実務標準(色彩検定でも採用)

 

イッテンの七つの色彩対比(色相/明暗/寒暖/補色/同時/彩度/面積)

→ ⑤同時対比はシュヴルールの発見と同一。⑦面積対比は「主役は小面積でも際立つ」の理論的裏付け

 

総合例: 同一の塔を5つの配色調和で塗り分けると、それぞれ全く異なる印象になる

→ どの調和を選ぶかは「何を主役にしたいか」という設計判断そのもの

 

PCCS12トーン(v/b/s/dp/lt/sf/d/dk/p/ltg/g/dkg): 同じトーンで統一すれば

色相を変えてもパレットの「調子」が崩れない→四色パレット設計の実務的近道

```

 

---

 

# 第二章: 六光源グラデーション体系 — 光源色が生む陰影の設計図

 

本章は本書の中核である。ゲームのタイル・スプライトに立体感を与える陰影を、勘に頼らず**再現可能な数値ルール**として設計するための体系を扱う。

 

## 2-1. なぜ「光源の色」を主役にするのか

 

初心者が陰影をつけるとき、もっともよくある失敗は「元の色に、ただ黒を足して暗くする」というやり方である。これをやると、どんな色も同じように彩度を失い、画面全体が単調で「汚れた」印象になりやすい。

 

熟練した画家やゲームのドット絵職人が実際に行っているのはこれとは異なる操作である。彼らは陰影をつけるとき、**明るくするときは色相を光源の色に近づけながら彩度を落とし、暗くするときは色相を光源の色から遠ざけながら彩度を上げる**という、色相そのものを回転させる操作を行っている。この技法は実務者の間で**ヒューシフト(hue shifting、色相シフト、水準三: 明暗をつける際に、明度・彩度だけでなく色相そのものを意図的にずらしていく彩色技法)**と呼ばれ、特に色数の制約が大きいドット絵・ピクセルアートの実務で広く教えられている、実在する技法である。

 

本章の「六光源グラデーション」は、このヒューシフト技法を、白・黒(闇)・赤・黄・緑・青という6つの光源(または状況)ごとに具体的な数値(色相・彩度・明度、およびRGB値)にまで落とし込んだ、本書オリジナルの設計体系である。以降で示すRGB数値は、いずれもHSV(色相・彩度・明度)の指定値から計算式によって機械的に算出した実測値であり、目分量で決めた数字ではない。

 

## 2-2. シュヴルールの同時対比の法則 — なぜ影は「補色側」に転ぶのか

 

ヒューシフト技法が「暗くするときに色相を反対方向へ転がす」という操作を採用している背景には、入口の物語で紹介した、フランスの化学者**ミシェル=ウジェーヌ・シュヴルール(Michel Eugène Chevreul, 1786-1889)**が1839年の著作『色の同時対比の法則(De la loi du contraste simultané des couleurs)』でまとめた、**同時対比(どうじたいひ、水準四: 隣り合う色同士が、互いに相手の補色を帯びて見えるように、人間の視覚が知覚を強調して処理する現象)**という考え方がある。

 

シュヴルールは、白い紙の上に置かれた一色の円盤を見つめ続けると、その周囲ににじむように補色の縁取りが知覚されることを実験で示した。人間の視覚系は、隣接する色同士の違いを実際以上に強調して知覚する性質を持っており、この性質が、「日なたの色に対して、その影の部分がわずかに補色寄りの色合いを帯びて見える」という現象の一因になっていると説明される。この発見は、ドラクロワをはじめとする画家たち、そして後の印象派・後期印象派の画家たちに大きな影響を与え、「影は単なる黒ではなく、色を持っている」という、現在の陰影表現の土台になる考え方を広めた。

 

本書の六光源グラデーションが、シャドウ側の色相を光源の色相から意図的に遠ざける(おおむね反対方向へ回転させる)設計を採っているのは、このシュヴルールの知見と、前節のヒューシフト技法という、2つの裏付けに基づく判断である。

 

## 2-3. 本章の検証可能な設計ルール(数値ルールの明文化)

 

以降の6つの光源すべてに共通する設計ルールを、先に明文化しておく。これにより、読者は本書の数値を「センスによる例示」ではなく「ルールの適用結果」として検証できる。

 

```

共通ルール(5段階グラデーション: ハイライト/明部/中間色(ターミネーター)/暗部/最暗部)

① ハイライト: 色相=光源の色相、彩度=低(12〜20%程度)、明度=最大域(96〜98%)

→ 直接光の反射(スペキュラー)は光源の色そのものに近く、白によって薄められるため彩度が下がる

② 明部: 色相=光源の色相、彩度=中(45〜55%程度)、明度=高(80〜88%程度)

③ 中間色(ターミネーター): 色相=光源の色相からおよそ10〜20度shift、彩度=中〜高(65〜72%)、明度=中(50〜58%)

→ 直接光と陰の境界(ターミネーターライン)にあたる、明暗の分かれ目

④ 暗部: 色相=光源の色相からおよそ120〜150度shift(補色側へ回転)、彩度=高(72〜80%)、明度=低(28〜33%)

⑤ 最暗部: 色相=暗部よりさらに補色側へ回転、彩度=中(58〜62%、黒に近づくほど彩度は知覚されにくくなるため据え置き)、明度=最低域(12〜15%)

```

 

この段階数(5段階)は固定の正解ではなく、次章で扱うポスタリゼーション(段階陰影)の考え方に基づく一つの実務的な目安である。単純な2段階(ハイライトとシャドウのみ)から、8段階以上の滑らかなグラデーションまで、用途に応じて段階数を増減させてよい。

 

## 2-4. 白色光源のグラデーション

 

**白色光源(はくしょくこうげん、水準二: 特定の色に偏らない、太陽光や標準的な照明を想定した光源)**は、六光源の中でもっとも基準となるケースである。ただし現実の「白色光」(たとえば晴天の太陽光)は、完全な無彩色ではなく、わずかに暖色(黄味)を帯びることが知られている。この観察に基づき、本書ではハイライト・明部をわずかに暖色側(色相45度付近)に、シャドウを前節のシュヴルールの知見に基づいて寒色側(青、色相220度付近)に振る設計を採用する。これは実務者の間でも「影は青みがかる」という経験則として広く共有されている調整である。

 

```

白色光源グラデーション(検証済み実測値)

ハイライト: H=45 S=12% V=97% → RGB(247,240,218) #F7F0DA

明部: H=45 S= 6% V=85% → RGB(217,213,204) #D9D5CC

中間色(ターミネーター): H=40 S= 4% V=55% → RGB(140,138,135) #8C8A87

暗部: H=220 S=28% V=32% → RGB( 59, 66, 82) #3B4252

最暗部: H=225 S=40% V=14% → RGB( 21, 25, 36) #151924

```

 

中間色付近ではほぼ無彩色(彩度4%)のグレーに近く、そこから暗部・最暗部にかけて明確に青みが強まっていく(彩度28%→40%)様子が数値からも確認できる。これは、単純に明度だけを落としていく彩色に比べて、画面に奥行きと温度感の変化を与える、実務上非常によく使われる調整である。

 

## 2-5. 黒(闇・シルエット)の設計 — 「光源のない状態」をどう描くか

 

六光源のうち、黒だけは他の5つと性質が異なる。黒は光源ではなく、**光源が存在しない(あるいは光量が極端に乏しい)状態**、すなわち**闇(やみ)**を表す。この章では便宜的に「黒」を六番目の「光源」として扱うが、実務的には「光の欠如をどう設計するか」という、他の5つとは逆方向の課題として理解してほしい。

 

闇の中でキャラクターやオブジェクトの形を伝えるためには、内部のグラデーションよりも**シルエット(輪郭)の可読性**がはるかに重要になる。人間の視覚は、内部の陰影情報がほとんどなくても、輪郭の形さえ明確であれば、対象が何であるかを驚くほど正確に認識できる。この性質を利用した表現技法を**シルエットデザイン(水準三: 内部のディテールを大胆に削ぎ落とし、輪郭の形状だけで対象を認識させる表現技法)**と呼ぶ。

 

実務上、完全な黒一色(RGB(0,0,0))だけでオブジェクトを描くと、背景も暗い場面では輪郭が背景に溶けて視認性を失う危険がある。これを避けるための定石が**リムライト(rim light、縁光、水準三: 被写体の輪郭の縁だけに、背後や側面からのわずかな光を当てて明るく縁取ることで、暗い背景からシルエットを浮かび上がらせる技法)**である。

 

```

闇のグラデーション(検証済み実測値・4段階)

リムライト際: H=210 S=15% V=22% → RGB(48,52,56) #303438 (輪郭の縁にわずかに残る光)

極暗部1: H=210 S=10% V=12% → RGB(28,29,31) #1C1D1F

極暗部2: H= 0 S= 0% V= 5% → RGB(13,13,13) #0D0D0D (色相の意味をほぼ失う領域)

完全な闇: H= 0 S= 0% V= 0% → RGB( 0, 0, 0) #000000

```

 

明度が5%を下回るあたりから、色相・彩度の情報は人間の目にはほとんど知覚されなくなる(数値上は保持していても、見た目にはただの黒に近づく)。したがって実務上は、**闇の中の「形」はリムライトの配置で作り、色そのものの情報は最小限に割り切る**という考え方が合理的である。ゲームのタイル・スプライトで「夜」「洞窟」「シルエットの敵キャラ」を表現する場面では、この闇の設計ルールと、背景よりわずかに明るいリムライトの組み合わせが、実務上もっとも安定した解法になる。

 

## 2-6. 赤色光源のグラデーション

 

赤色光源(たとえば炎・夕焼け・危険を示す警告灯などを想定)は、色相0度を基準に置く。

 

```

赤色光源グラデーション(検証済み実測値)

ハイライト: H= 0 S=20% V=97% → RGB(247,198,198) #F7C6C6

明部: H= 0 S=55% V=82% → RGB(209, 94, 94) #D15E5E

中間色(ターミネーター): H=350 S=72% V=52% → RGB(133, 37, 53) #852535

暗部: H=320 S=75% V=30% → RGB( 76, 19, 57) #4C1339

最暗部: H=300 S=60% V=13% → RGB( 33, 13, 33) #210D21

```

 

色相の遷移を追うと、ハイライトの0度から、最暗部の300度まで、実に60度ぶんの回転が起きている(0度→350度→320度→300度という流れで、暗くなるほどマゼンタ・紫の方向へ寄っていく)。これは赤(0度)から見て反対側にあたる補色シアン(180度)そのものではなく、その手前のマゼンタ・紫寄りの領域までしか回転させていない、控えめな調整である。補色そのもの(180度)まで一気に回転させると不自然に色が変わって見えるため、実務では「補色の方向を目指しつつ、途中で止める」という加減が重要になる。

 

## 2-7. 黄色光源のグラデーション

 

黄色光源(ろうそくの炎、暖色系の室内照明、レトロなランタンなどを想定)は、色相50度を基準に置く。

 

```

黄色光源グラデーション(検証済み実測値)

ハイライト: H=50 S=18% V=98% → RGB(250,242,205) #FAF2CD

明部: H=50 S=55% V=88% → RGB(224,204,101) #E0CC65

中間色(ターミネーター): H=45 S=70% V=58% → RGB(148,122, 44) #947A2C

暗部: H=20 S=75% V=33% → RGB( 84, 42, 21) #542A15

最暗部: H= 0 S=62% V=15% → RGB( 38, 15, 15) #260F0F

```

 

黄色光源の特徴は、暗部にかけて色相が赤方向(50度→20度→0度)へ寄っていく点である。これは黄色の補色である青紫(230度付近)へ一気に回転させるのではなく、**暖色の範囲内(黄→橙→赤)にとどめた、控えめなシフト**を採用しているためである。ろうそくの炎やランタンのような「暖かい光源」の陰影を、いきなり寒色(青)へ転がしてしまうと、光源そのものの温度感と矛盾した違和感が生まれやすい。暖色系の光源では、シャドウ側も暖色の範囲内にとどめつつ彩度と明度を落とす、という調整が実務上自然に見える結果を生む。

 

## 2-8. 緑色光源のグラデーション

 

緑色光源(毒々しい魔法のエフェクト、森の中の木漏れ日、有害な化学物質などを想定)は、色相130度を基準に置く。

 

```

緑色光源グラデーション(検証済み実測値)

ハイライト: H=130 S=18% V=96% → RGB(201,245,208) #C9F5D0

明部: H=130 S=52% V=80% → RGB( 98,204,116) #62CC74

中間色(ターミネーター): H=140 S=68% V=50% → RGB( 41,128, 70) #298046

暗部: H=170 S=72% V=28% → RGB( 20, 71, 63) #14473F

最暗部: H=190 S=58% V=12% → RGB( 13, 28, 31) #0D1C1F

```

 

緑色光源では、暗部にかけて色相が130度→140度→170度→190度と、シアン・青緑の方向へ寄っていく。緑(130度)の補色は赤紫(310度付近)にあたるが、そこまで大きくは回転させず、隣接するシアン・青緑の範囲にとどめている。この「補色の方向へ大きく回転させすぎない」という加減は、赤・黄・緑・青のすべての光源に共通する実務上の注意点であり、次節の青色光源でも同様の考え方を採る。

 

## 2-9. 青色光源のグラデーション

 

青色光源(月明かり、水中、SF的な機械の光などを想定)は、色相220度を基準に置く。

 

```

青色光源グラデーション(検証済み実測値)

ハイライト: H=220 S=20% V=97% → RGB(198,214,247) #C6D6F7

明部: H=220 S=55% V=82% → RGB( 94,132,209) #5E84D1

中間色(ターミネーター): H=235 S=72% V=50% → RGB( 36, 43,128) #242B80

暗部: H=265 S=75% V=28% → RGB( 40, 18, 71) #281247

最暗部: H=280 S=60% V=12% → RGB( 24, 12, 31) #180C1F

```

 

青色光源では、暗部にかけて色相が220度→235度→265度→280度と、紫の方向へ寄っていく。青(220度)の補色にあたる黄橙(40度付近)とは反対方向、つまり紫からマゼンタにかけての領域を経由する設計である。月明かりや水中のような「冷たく静かな」場面の陰影表現において、この紫がかったシャドウは、単純な「青を暗くしただけ」の陰影よりも、色の深みと神秘的な印象を与える効果を持つ。

 

## 2-10. 六光源の比較 — 何が共通し、何が違うのか

 

ここまでの5つの色つき光源(白は基準ケースとして別枠、黒は光源不在のケースとして別枠)を並べて比較すると、次の共通パターンが見えてくる。

 

```

共通パターン:

・ハイライトは常に、光源の色相そのもの・低彩度(12〜20%)・最高明度(96〜98%)

・明部から中間色にかけて、彩度が急激に上昇する(スペキュラーな輝きから、物体表面の質感が見え始める境目)

・暗部・最暗部にかけて、色相は「真反対の補色」までは回転させず、

補色に近づく方向へ30〜150度程度シフトさせるにとどめる

・明度が下がるほど、彩度の知覚上の効果は薄れていく(黒に近い領域では色相の違いが見えにくくなる)

 

光源ごとの個性:

・白色光源: 唯一「無彩色に近い基準点」を持ち、シャドウで初めて明確な色(青)を帯びる

・赤/緑/青の光源: 暗部で寒色・中間色系(マゼンタ〜紫〜シアン)へ回転する

・黄色光源: 唯一、暗部でも暖色の範囲(橙→赤)にとどまる、例外的なパターン

・黒(闇): 色相ではなく明度とリムライトの配置が主役になる、逆転した設計原理

```

 

この比較から実務的に導ける結論は、「シャドウ側の色相をどこまで回転させるか」は光源の色そのものの温度感によって調整すべきだという点である。暖色光源(赤・黄)は暗部でも暖色寄りにとどめると自然に見えやすく、寒色光源(青・緑)は暗部でさらに寒色・中間色側へ回転させても違和感が少ない。これは、光源の色が持つ印象と、影の色が持つ印象の間に、極端な矛盾を作らないための調整だと理解できる。

 

## 2-11. ゲームエディタへの実装 — タイル・スプライトへの橋渡し

 

「text系のゲームEditor」の原画班・着色班の実務に即して言えば、本章の六光源グラデーション体系は、次の2つの使い方を想定している。

 

第一に、**タイルセットの陰影パレット設計**である。地形タイル(草原・洞窟・水辺など)ごとに、その場面にふさわしい光源(屋外の草原なら白色光源、洞窟の奥なら黒〈闇〉、溶岩地帯なら赤色光源、など)を割り当て、本章の5段階グラデーションをそのままパレットとして採用すれば、シリーズ全体で一貫した陰影ルールを保てる。

 

第二に、**スプライトの状態変化の表現**である。キャラクターが毒状態になったときは緑色光源のグラデーションを、氷結状態になったときは青色光源のグラデーションを、被ダメージ時の明滅には赤色光源のハイライト付近の色を、というように、状態異常やエフェクトの色設計に、六光源体系のどの段階の数値を使うかをあらかじめ決めておくことで、機械的かつ一貫性のある色指定が可能になる。

 

## 2-12. なぜ白色光源は暖かく、影は青いのか — 色温度という物理的な根拠

 

第二章2-4で、白色光源のハイライトをわずかに暖色側(色相45度)に、シャドウを寒色側(青、色相220度)に設計した判断には、単なる経験則ではない、物理的な裏付けがある。それが**色温度(いろおんど、ケルビン、水準四: 光の色味を、仮想的な黒体〈熱すると特定の色に光る理想的な物体〉が発する光の色になぞらえて、絶対温度の単位ケルビン〈K〉で表したもの)**という考え方である。

 

色温度は数値が低いほど暖色(赤寄り)、高いほど寒色(青寄り)を意味する、直感とは逆向きの尺度である。ろうそくの炎はおよそ1900K、白熱電球はおよそ2700K、快晴の直射日光は正午前後でおよそ5000〜5500K、写真・映像の分野で「標準的な昼光」とされる基準はおよそ6500K(D65標準光源)である。ここで重要なのは、**直接の太陽光と、日陰・曇り空の光とでは、色温度がまったく違う**という事実である。直射日光を遮る日陰では、太陽から直接届く光ではなく、青い空全体から回り込む光(拡散したスカイライト)が主な光源になるため、色温度はおよそ7000〜8400K、澄み切った青空だけを見ればさらに高温側(9000K以上)にまで達するとされる。

 

この物理現象こそ、第二章2-4で白色光源のシャドウを青く設計した根拠である。屋外の場面では、直接光(太陽光、比較的低い色温度=暖色)が当たる面がハイライト・明部になり、直接光が当たらない日陰の面は、青い空からのスカイライト(比較的高い色温度=寒色)によって照らされる。つまり「影は青い」という経験則は、単なる絵画的な約束事ではなく、**日なたと日陰とで、実際に光源そのものの色温度が異なる**という、屋外照明の物理的な実態を反映した、正確な観察に基づく技法なのである。

 

## 2-13. 光源色と物体固有色のかけ合わせ — なぜ「緑の物を赤で照らす」と濁るのか

 

ここまでの六光源グラデーションは、説明を単純にするため、光源の色の影響だけを取り出せる無彩色(グレー)の物体を題材にしてきた。しかし実際のゲーム画面では、緑の草・青い水面・肌色のキャラクターなど、**その物体自身が固有の色(固有色、こゆうしょく)を持っている**場合がほとんどである。固有色を持つ物体に、色つきの光源を当てたときの色は、光源の色をそのまま使うのではなく、**光源の色と物体の固有色を、チャンネルごとに掛け合わせる(乗算合成、マルチプライ)**ことで求められる。これはペイントソフトやゲームエンジンの「乗算(マルチプライ)」レイヤーと同じ考え方であり、光が物体に当たって反射するとき、物体が持つ色以外の光の成分を吸収してしまうという、物理的な反射の仕組みを簡略化した近似モデルである。

 

具体的な数値で確認してみよう。固有色として彩度55%・明度55%の葉の緑(色相110度、RGB(76,140,63))を題材に取り、これを第二章2-6の赤色光源の「明部」(RGB(209,94,94))で照らした場合を計算する。

 

```

検算: 緑の葉(RGB(76,140,63))×赤色光源・明部(RGB(209,94,94))の乗算合成

各チャンネルを0〜1に正規化して乗算:

R: (76/255)×(209/255) ≈ 0.244

G: (140/255)×(94/255) ≈ 0.205

B: ( 63/255)×(94/255) ≈ 0.091

→ RGB(62,52,23) #3E3417 (色相換算でおよそH=44度、彩度63%、明度24%の、くすんだ焦げ茶)

```

 

鮮やかな緑と鮮やかな赤という、色相環上でほぼ補色に近い2色を掛け合わせると、結果は「濃い緑」でも「濃い赤」でもなく、**両方の色相が打ち消し合った、くすんだ焦げ茶色**になる。これは第一章1-4で述べた「補色同士は反発し合う」という性質が、光と物体の掛け合わせという場面でも同じように働くことを示している。同じ葉の緑を、今度は第二章2-9の青色光源・明部(RGB(94,132,209))で照らすと、

 

```

検算: 緑の葉(RGB(76,140,63))×青色光源・明部(RGB(94,132,209))の乗算合成

→ RGB(28,73,52) #1C4934 (色相換算でおよそH=152度、彩度62%、明度29%の、深い青緑)

```

 

この場合は、緑と青という色相環上で近い(類似色に近い)2色の掛け合わせであるため、結果も違和感のない、落ち着いた青緑に収まる。この2つの検算から導ける実務上の教訓は、**光源の色と物体の固有色が色相環上で近い関係にあるほど結果は素直に馴染み、遠い(補色に近い)関係にあるほど結果は予測しにくい濁った色になりやすい**という点である。舞台照明の実務でも、衣装の色と照明の色の組み合わせには細心の注意が払われており、この掛け合わせの性質は分野を越えて共通する実践知である。

 

## 2-14. 二光源の組み合わせ — キーライトとリムライトの実務

 

これまでは単一の光源を想定してきたが、実務のイラストやゲームのキャラクター立ち絵では、**主となる光源(キーライト)に加えて、輪郭を浮かび上がらせる補助的な光(リムライト、第二章2-5で紹介した縁光と同じ考え方)を、背後や側面から追加で当てる**という、複数光源の組み合わせが頻繁に使われる。

 

このとき実務上よく使われる工夫が、**キーライトとリムライトに、あえて対照的な色温度(暖色/寒色)を割り当てる**というものである。たとえば主となる場面を青色光源(第二章2-9、冷たく静かな印象)で構成しつつ、キャラクターの輪郭だけに暖色のリムライト(色相40度・彩度35%・明度99%、RGB(252,223,164)程度の、淡い金色がかった光)を追加すると、画面全体の冷たい印象を保ったまま、キャラクターの輪郭が背景から視覚的に分離され、際立って見えるようになる。これは第一章1-10で扱ったイッテンの寒暖対比を、光源設計というレベルで応用した実務技法だと理解できる。

 

## 2-15. 副次的な陰影現象 — 肌・ロウソクの半透明感とグレア

 

六光源グラデーションの基本ルール(2-3)は、光を表面で跳ね返すだけの、不透明な物体を前提にしてきた。しかし実務では、肌・ロウソク・葉・薄い布のように、**光の一部が表面の内部にまで入り込み、内部で散乱してから別の場所に抜け出てくる**、半透明な質感の物体を扱う場面が少なくない。この現象を**サブサーフェス・スキャッタリング(subsurface scattering、表面下散乱、水準五: 光が物体の表面で単純に反射するのではなく、いったん内部に侵入して散乱し、入射した場所とは別の場所から抜け出てくる現象)**と呼ぶ。

 

人間の肌はこの現象が特に顕著な素材として知られており、肌が実際に反射して見せている光のうち、表面でそのまま跳ね返る成分(直接反射)はわずか6%程度にすぎず、残る94%程度は表面下散乱によって生み出されているという分析がある。この性質のため、肌を単純な不透明素材として塗ると、質感が「プラスチックのような」硬い印象になりやすい。実務での簡易な対処としては、耳や指先のように薄い部位に、背後からの光が透けるようなほんのりした赤みを足す、あるいは肌の陰影の暗部(第二章の暗部・最暗部にあたる領域)に、通常のヒューシフトよりもやや赤みの強い色を混ぜる、といった調整が行われる。同じ現象はロウソクにも見られ、ロウソクは炎の近くの薄い部分が、内部の炎の色を透かして橙色に薄く輝いて見えることが知られている。

 

もう一つの副次的な現象が**グレア(glare、まぶしさ・光の滲み、水準四: 非常に強い光源そのものや、その周辺の高輝度な領域が、視覚的に周囲ににじみ出しているように知覚される現象)**である。ゲームの表現では、太陽や魔法のエフェクトなど、画面内でもっとも明るい光源の輪郭を、第二章のハイライト色よりもさらに明度を上げた色で軽くぼかして重ねることで、このグレアを再現できる。これは第六章で扱う放射グラデーション(6-2)を、ハイライトのすぐ外側にもう一段階、面積を広げて重ねる形で実装することが多い。

 

---

 

## 休憩所②: まとめ箱 — 第二章のポイント

 

```

陰影設計の技法的土台: ヒューシフト(色相シフト)技法

→ 明るくするとき光源色に近づけ彩度を落とし、暗くするとき光源色から遠ざけ彩度を上げる

 

科学的根拠: シュヴルール『色の同時対比の法則』(1839年)

→ 隣接する色は互いに補色を帯びて見える(印象派の「影は色を持つ」表現の源流)

 

本章の共通設計ルール(5段階): ハイライト(低彩度・最高明度)→明部→中間色(ターミネーター)

→暗部→最暗部(色相は補色方向へ30〜150度シフト、真反対〈180度〉までは回転させない)

 

六光源: 白(基準・シャドウで初めて青みを帯びる)/黒〈闇〉(色相でなくリムライトで形を作る)

/赤/黄(例外的に暗部でも暖色を保つ)/緑/青(暗部で紫方向へ)

→ 全数値はHSV指定値からの計算による実測値(RGB・16進を本文に明記)

 

実務への橋渡し: タイルの陰影パレット設計・状態異常エフェクトの色指定への応用

 

色温度(ケルビン): 数値が低いほど暖色(ろうそく約1900K)、高いほど寒色(青空9000K以上)

→ 直射日光(暖色・低ケルビン)と日陰のスカイライト(寒色・高ケルビン)の実際の違いが

「影は青い」という経験則の物理的根拠

 

固有色×光源色の乗算合成: 緑の葉×赤色光源→くすんだ焦げ茶(補色に近いほど濁る)

緑の葉×青色光源→落ち着いた青緑(類似色に近いほど馴染む)

 

二光源の組み合わせ: キーライト+リムライトに対照的な色温度を割り当てると

輪郭が背景から分離され際立つ(寒暖対比の実務応用)

 

サブサーフェス・スキャッタリング(表面下散乱): 肌は反射光の約94%がこの現象由来

→ 薄い部位に赤みを足す簡易調整で「プラスチック的」な硬さを回避できる

グレア(まぶしさ): ハイライトの外側にもう一段階明るい色を重ねて再現(放射グラデーション応用)

```

 

---

 

# 第三章: 陰影とグラデーションの実務技法

 

## 3-1. 段階陰影 — なめらかさより「読みやすさ」を選ぶ理由

 

第二章では5段階のなめらかなグラデーションを扱ったが、実際のゲーム画面(特に低解像度のドット絵やモバイル向けの軽量な表現)では、あえて段階数を絞り込んだ**段階陰影(だんかいいんえい、水準三: 連続的な明暗の変化を、はっきりと区別できる少数の色面〈2〜4段階程度〉に切り分けて塗る技法)**が好まれる場面が多い。

 

この技法は、日本のアニメーション彩色技法に由来する**セルシェーディング(cel shading、水準三: 立体をなめらかな陰影ではなく、輪郭のはっきりした少数の色面で塗り分けることで、平面的・イラスト的な見た目を作るレンダリング手法)**として、3Dゲームの世界でも広く実装されている。段階陰影・セルシェーディングが好まれる理由は主に2つある。第一に、色数が少ないほど、離れた場所からでも・小さな画面でも、明暗の境界を認識しやすくなるという視認性の利点。第二に、なめらかなグラデーションよりも制作コストが低く、色の管理(パレット化)が容易になるという実務上の利点である。第六章では、この段階陰影を「多段階グラデーション(ポスタリゼーション)」としてさらに詳しく掘り下げる。

 

## 3-2. 環境光と直接光の重なり

 

現実の陰影は、光源からの光(直接光)だけでできているわけではない。周囲の物体や空全体から回り込んでくる、方向性の弱い光を**環境光(かんきょうこう、アンビエントライト、水準三: 特定の方向を持たず、シーン全体に均一に降り注ぐと仮定される光)**と呼ぶ。

 

物体同士が近接している場所(壁と床の境目、キャラクターの脇の下など)では、周囲の物体が環境光を遮ることで、直接光だけの計算よりもさらに暗くなる領域が生まれる。この現象を**アンビエントオクルージョン(ambient occlusion、環境光遮蔽、水準四: 物体同士が近接する部分で、周囲からの環境光が遮られることによって生じる、追加的な陰影)**と呼び、3Dゲームでは陰影のリアリティを高める代表的な技法として実装されている。

 

ドット絵やタイルベースの2D表現でも、この考え方は「物と物が接する境界線を、周辺よりわずかに暗い色でなぞる」という簡易的な形で応用できる。これは第二章の暗部・最暗部の色をそのまま境界線に薄く敷くだけで実現でき、立体感を大きく底上げする、コストの低い実務技法である。

 

## 3-3. 反射光(バウンスライト)の扱い

 

第二章の「最暗部」は理論上もっとも暗い領域だが、現実の陰影ではしばしば、最暗部よりもわずかに明るい光が、影の中のさらに奥まった位置に現れることがある。これは、光源からの光が周囲の物体(床・壁・地面など)に一度反射してから、影の中に回り込むことによって生じる**反射光(はんしゃこう、バウンスライト、水準四: 光源から直接ではなく、周囲の物体の表面で一度反射してから対象物に届く、間接的な光)**である。

 

反射光の色は、光源の色そのものではなく、**反射した周囲の物体の色**を帯びる。たとえば緑の芝生の上に立つキャラクターの足元の影には、わずかに緑がかった反射光が入り込むことが多い。実務上、反射光は「最暗部よりわずかに明るく、かつ周囲の環境色を帯びた」小さな領域として、影の輪郭付近(特に接地面に近い部分)に控えめに加えることで、画面に「空気感」や「その場に実際に立っている」という説得力を与える効果がある。ただし過剰に使うと陰影の暗部が失われ、立体感がかえって損なわれるため、面積・彩度ともに控えめにとどめることが実務上の定石である。

 

## 3-4. レトロハードウェアの制約という実例 — 色数の限界から生まれた工夫

 

段階陰影・限られた色数での陰影表現という考え方は、決して抽象的な理論ではなく、実在するゲームハードウェアの技術的制約から歴史的に鍛えられてきた、実務の産物である。

 

任天堂のファミリーコンピュータ(NES、1983年発売)は、内部的にはおよそ54色(諸説あり52〜55色とされる、白の重複や、明度がゼロ以下になる黒が含まれるなどの技術的事情による)のマスターパレットを持っていたが、スプライト(キャラクター等の可動グラフィック)は8×8ピクセル単位で3色+透明の専用パレットしか同時に使えず、実質的に**画面上で同時に使用できる色数はおよそ25色程度**という、極めて厳しい制約の中で陰影表現を行っていた。任天堂のゲームボーイ(1989年発売)にいたっては、表示できる階調はわずか**4段階の濃淡**(俗に「4色の緑」と呼ばれる、実際にはオリーブがかった単色の階調)のみであり、色相の情報を一切使わずに、明度の4段階だけで陰影と形状のすべてを表現しなければならなかった。

 

こうした厳しい制約の中で、当時の開発者たちは、限られた色をどこに配置すれば立体感と可読性を最大化できるかという、本章で扱ってきた段階陰影・アンビエントオクルージョンの簡易表現・シルエットデザイン(第二章2-5)の工夫を、経験的に洗練させていった。現代のゲーム制作では色数の制約は大幅に緩和されているが、「限られた色数でどう立体感と可読性を両立させるか」という発想そのものは、軽量なタイルセットやモバイル向けアセットを作る際に、今なお実務価値の高い考え方である。

 

## 3-5. アイソメトリックタイルの陰影慣習 — 「text系のゲームEditor」の地図生成に直結する実務知識

 

「text系のゲームEditor」が扱う自動生成マップのように、タイルを俯瞰(ふかん、見下ろし)視点で並べて地図を構成する表現では、**アイソメトリック(isometric、等角投影、水準三: 立体を、奥行き方向にも均等な角度をつけて描くことで、擬似的な立体感を持たせる俯瞰的な投影方式)**という描き方が広く使われている。

 

アイソメトリックのタイル(立方体や直方体を基本単位とするブロック状の地形)を塗り分ける際、業界で広く共有されている実務上の慣習がある。それは、**光源を画面の左上方向にあると仮定し、上面をもっとも明るく、左側面を中間の明るさ、右側面をもっとも暗く塗る**という慣習である。

 

```

アイソメトリックタイルの慣習的な陰影配分(光源=左上と仮定)

上面(天面): もっとも明るい(第二章の「明部」相当)

左側面: 中間の明るさ(第二章の「中間色〈ターミネーター〉」相当)

右側面: もっとも暗い(第二章の「暗部」相当)

```

 

この配分がなぜ業界標準になっているかというと、光源を左上に統一することで、**同じ地形・同じ建材のタイルを、マップ上のどこに置いても、常に同じ規則で塗り分けられる**という、機械的な一貫性が保てるためである。これは本書が繰り返し強調してきた「勘に頼らない、再現可能な設計ルール」という考え方(第二章2-3)を、タイルベースの地図生成という具体的な実装にそのまま応用した実例だと言える。第二章の六光源グラデーションの「明部・中間色・暗部」の3段階を、そのままこの「上面・左側面・右側面」の3面に割り当てれば、どの光源(白・赤・黄・緑・青)を採用した地形タイルであっても、統一感のある陰影を機械的に生成できる。

 

## 3-6. 素材による違い — ハイライトの形が伝える「質感」

 

第二章のハイライトはこれまで色の数値だけを扱ってきたが、実務上、ハイライトが持つ**形の大きさ・輪郭のシャープさ**もまた、物体の質感を伝えるうえで重要な役割を果たす。

 

金属や磨かれたガラスのような、表面が滑らかで反射が鋭い素材は、ハイライトが**小さく、輪郭のはっきりした点**として現れる。逆に、布や土、未加工の木材のような、表面が粗く反射が拡散する素材は、ハイライトが**大きく、輪郭のぼやけた面**として広がる。第二章で示したHSV数値(ハイライトの彩度12〜20%・明度96〜98%)はあくまで「色」の指定であり、これに加えて「ハイライトをどれだけ小さく鋭く描くか、あるいは大きくぼかすか」という形の設計を組み合わせることで、同じ光源・同じ配色ルールを使いながらも、金属・布・肌・水面といった異なる素材の質感を描き分けることができる。この形の使い分けは、第六章で扱う放射グラデーション(6-2)の半径・ぼかし具合を調整することで、タイルやスプライトの実装に落とし込むことができる。

 

## 3-7. グラデーションの「幅」が伝える丸み — 曲率の表現

 

素材の質感(3-6)がハイライトの形で決まるのに対し、物体そのものの**丸み(曲率、きょくりつ)**は、明部から暗部へ移り変わる**グラデーションの遷移幅**によって表現される。

 

角ばった、平らな面を持つ物体(木箱・建物の壁など)では、明部から暗部への切り替わりが、ごく狭い範囲(理想的には1ピクセル)で急激に起こる。これは、平らな面の角度が場所によって変化しないため、光の当たり方が面の中では一定で、面と面の境界(エッジ)でだけ急に変化するからである。反対に、丸みを帯びた物体(球体・円柱・生き物の体など)では、表面の向きが位置によって連続的に変化していくため、明部から暗部への遷移も、同じように連続的で幅の広いグラデーションとして表現しなければならない。

 

この原則を数値に落とし込むと、次のような実務上の目安になる。

 

```

曲率とグラデーション遷移幅の対応(実務目安)

角ばった面(木箱・建物の壁): 遷移幅=1〜2ピクセル相当(ほぼ二値的な切り替え)

ゆるい丸み(頬・果物の表面): 遷移幅=対象の直径のおよそ15〜25%程度

強い丸み(球体・卵形): 遷移幅=対象の直径のおよそ30〜40%程度

```

 

第二章の六光源グラデーションで示した「ハイライト→明部→中間色→暗部→最暗部」という5段階の色そのものは、どんな形の物体に対しても共通して使えるが、**その5段階を画面上のどれだけの幅に配置するか**は、描こうとしている物体が角ばっているか丸いかによって変えるべきである、という点は、色の数値表だけを見ていては見落としがちな、重要な実務上の補足である。

 

---

 

## 休憩所③: まとめ箱 — 第三章のポイント

 

```

段階陰影(セルシェーディング) = 連続的な明暗を少数の色面に切り分ける技法

→ 視認性向上+制作コスト低減の両面で実務価値が高い

 

環境光とアンビエントオクルージョン = 物体同士が近接する部分に生じる追加の暗さ

→ 2D表現では「接触境界線をわずかに暗くなぞる」簡易実装で代用可能

 

反射光(バウンスライト) = 周囲の物体表面で一度反射してから届く間接光

→ 最暗部よりわずかに明るく、周囲の環境色を帯びた小領域として控えめに配置

 

歴史的実例: NES(マスターパレット約54色・実質同時発色約25色)/

ゲームボーイ(明度4段階のみ・色相情報なし)

→ 色数制約の中で段階陰影・シルエットデザインの工夫が実務的に鍛えられた

 

アイソメトリックタイルの陰影慣習(光源=左上想定): 上面最明・左側面中間・右側面最暗

→ 「text系のゲームEditor」の地図生成に直結する、機械的に一貫性を保てる実務ルール

 

素材による質感の違い: ハイライトの形(小さく鋭い=金属・ガラス/大きくぼやけた=布・土)

→ 色の数値(第二章)+形の設計の組み合わせで質感を描き分ける

 

グラデーションの幅=曲率の表現: 角ばった面は遷移幅1〜2px(急激)、

丸い面は直径の15〜40%程度の幅(緩やか)

→ 同じ色数値表(第二章)でも、配置する幅を変えることで角/丸みを描き分ける

```

 

---

 

# 第四章: 四色による印象表現のデザイン論

 

## 4-1. 色彩心理学という分野の見取り図 — 何が確かで、何が怪しいのか

 

色と心理の関係を扱う**色彩心理学(しきさいしんりがく、水準三: 色の知覚が、人の感情・認知・行動にどのような影響を与えるかを研究する心理学の一分野)**は、デザインの実務書やマーケティングの記事で非常に頻繁に引用される一方、その引用のされ方には、科学的な確からしさの水準がまちまちな主張が無頓着に混在しているという問題がある。本章では、この分野に踏み込む前に、まず「どの主張をどの程度信じてよいか」という整理から始めたい。

 

心理学者アンドリュー・エリオット(Andrew J. Elliot)とマルクス・マイヤー(Markus A. Maier)は、2012年に発表した**カラー・イン・コンテキスト理論(color-in-context theory、水準五: 色が人の心理に与える影響は、色そのものに固定的に備わっているのではなく、それが提示される文脈〈状況・課題・文化的学習〉によって強く左右される、とする理論的枠組み)**を提唱している。この理論の核心は、「赤は常にこういう効果を持つ」という単純な一対一対応を否定し、同じ赤という色であっても、達成場面(たとえば試験や競技)で見る場合と、対人的な魅力の場面で見る場合とでは、まったく異なる作用を及ぼしうると考える点にある。この理論的立場そのものは、本書が採用する「文脈次第で確度が変わる」という慎重な姿勢と一致しており、色彩心理学という分野を扱う本章全体の指針とする。

 

## 4-2. 比較的よく支持されている知見 — 暖色・寒色という「経験の蓄積」

 

色彩心理学の中でも比較的広く支持されているのが、**暖色(だんしょく、赤・橙・黄など)は暖かさ・活動性の高さを、寒色(かんしょく、青・青緑など)は冷たさ・落ち着きを連想させやすい**という知見である。ただし本書は、この知見を「色に生まれつき備わった絶対的な性質」としては紹介しない。理由は2つある。

 

第一に、この暖色・寒色の対応関係そのものが、**歴史的・文化的にまったく固定されたものではなかった**という事実である。ドイツの文豪ヨハン・ヴォルフガング・フォン・ゲーテは、1810年の著作『色彩論(Zur Farbenlehre)』の中で、黄・赤・紫を「プラス側」(輝き・力強さ・暖かさ)、青を「マイナス側」(乏しさ・冷たさ・弱さ)に位置づけたが、これはあくまで19世紀ヨーロッパの一人の観察者による整理である。さらに興味深いことに、ヨーロッパでは15世紀ごろまで、青は現在とは逆に「暖かい色」というイメージを持たれていたとする指摘もあり、暖色・寒色のイメージづけそのものが、時代とともに移り変わってきた、比較的新しい文化的合意にすぎない可能性が指摘されている。

 

第二に、暖色・寒色が引き起こすとされる生理的反応(心拍数の上昇や、筋緊張の変化など)についての実証研究は、個人差や環境条件(照明・彩度・提示時間など)の影響を強く受け、必ずしも一貫した結果が得られているわけではない。したがって本書は、「暖色は活動的、寒色は落ち着いた印象を与えやすい」という大枠の傾向は実務上参考にする価値があると位置づけつつも、これを疑いようのない絶対法則としては扱わない。

 

## 4-3. 文化依存性が強く、断定を避けるべき通説の実例

 

色彩心理学をめぐる言説の中には、上記の暖色・寒色の傾向以上に、断定的に語られがちであるにもかかわらず、実証の裏付けが弱い、あるいは文化によって正反対の意味を持つ通説が数多く存在する。

 

たとえば黄色は、日本では明るさ・元気さを連想させることが多い一方、キリスト教文化圏の一部では、裏切り(ユダの衣の色とされてきた伝統など)や卑しさといった否定的な意味合いと結びつけられてきた歴史がある。同様に、白は日本の伝統的な文脈では清浄さと同時に喪(そう、葬儀)を連想させる色でもあり、西洋の一般的な「白=純粋・婚礼」という連想とは並び立たない側面を持つ。こうした例は、「特定の色は特定の感情や意味を持つ」という言い切りが、文化的な文脈を無視すればするほど危うくなることを示している。

 

さらに重要な実例として、色彩心理学の研究の中でもとりわけ有名だった**「赤は異性への魅力を高める」という仮説(通称レッド・ロマンス仮説)**を取り上げたい。この仮説は、エリオットとニースタが2008年に発表した研究で示されたものだが、その後の追試では雲行きが大きく変わっている。エリオット自身も名を連ねる2018年のメタ分析(レーマン・エリオット・カリン=イェイジマン、2018年発表)は、複数の追試データを統合した結果、「赤が魅力の評価に与える真の効果は、非常に小さいか、実質的に存在しない可能性が高い」という、当初の仮説よりもはるかに慎重な結論を報告している。本書がこの事例をあえて詳しく取り上げるのは、**当初の研究で華々しく報告された効果が、後年の追試の積み重ねによって大幅に修正されるということ自体が、色彩心理学という分野で頻繁に起こりうる、健全な自己修正の一例**だと考えるからである。断定的な通説に接したときは、それが単発の研究に基づくものか、複数の独立した追試によって支持されているものかを、常に区別して受け止める姿勢が重要である。

 

## 4-4. ゲームUIの配色慣習 — 「生得的な心理効果」ではなく「学習された記号」

 

ここで本書の実務領域であるゲームデザインに引きつけて、重要な整理を加えておきたい。ゲームのUI(ユーザーインターフェース)では、赤をダメージ・体力(HP)の警告に、青を魔法力(MP)や情報表示に、緑を回復・安全に、黄色を注意・警告に使うという配色の慣習が、ジャンルを問わず広く定着している。

 

しかし本書は、この配色慣習を「赤という色が生まれつき危険を意味する心理効果を持つから」という説明では紹介しない。より正確な理解は、**長年のゲームというメディアの歴史の中で、プレイヤー全体に共有される「学習された記号」として定着した、文化的な慣習**だという捉え方である。実際、体力を緑や赤で、魔法力を青や紫で表現するという組み合わせは、多くのタイトルで踏襲されることで、プレイヤーが新しいゲームを触ったときにも直感的に読み取れる「業界標準の語彙」として機能している。したがって実務上重要なのは、「赤=危険」という心理的効果を信じ切ることではなく、**プレイヤーがすでに学習している業界慣習を裏切らないように設計する**という、より謙虚で実務的な視点である。あわせて、色だけに頼った情報伝達は、後述する色覚多様性(第七章)を持つプレイヤーには伝わりにくいため、アイコンや数値表示、パターンの違いなど、色以外の手がかりを必ず併用するべきである。

 

## 4-5. 四色パレットの実践 — 場面の印象を組み立てる

 

第一章で扱った四色配色(テトラード)の考え方と、ここまでの色彩心理学の慎重な整理を踏まえ、実際に「場面の印象」を四色で組み立てる実践例を4つ示す。いずれも、本書執筆時に計算式に基づいて算出したHSV指定値とRGB実測値であり、色彩心理学の断定的効果を主張するものではなく、あくまで色相環上の配色調和(類似色・補色などの構造)に基づいて設計した、実務上の参考パレットである。

 

```

パレットA「元気で明るい昼の街」(暖色の類似色+寒色1色のアクセント、高明度中心)

メイン(建物・地面): H=45 S=75% V=95% → RGB(242,197, 61) #F2C53D

サブ(屋根・小物): H=15 S=70% V=90% → RGB(230,109, 69) #E66D45

アクセント(空・水): H=200 S=60% V=90% → RGB( 92,184,230) #5CB8E6

ベース影(輪郭・影部): H=230 S=30% V=25% → RGB( 45, 48, 64) #2D3040

 

パレットB「不穏な夜の遺跡」(低明度・低彩度の寒色主体+有毒感のある補色アクセント)

メイン(石壁・地面): H=260 S=35% V=20% → RGB( 39, 33, 51) #272133

サブ(遺跡の柱): H=270 S=25% V=35% → RGB( 78, 67, 89) #4E4359

アクセント(発光・毒): H=100 S=60% V=55% → RGB( 84,140, 56) #548C38

ハイライト(灯り): H=50 S=40% V=70% → RGB(178,167,107) #B2A76B

 

パレットC「郷愁の夕焼け」(暖色と寒色の分割補色・第二章の赤色光源グラデーションと接続)

空上部(高い空): H=280 S=45% V=55% → RGB(119, 77,140) #774D8C

空中央(夕焼け本体): H=20 S=70% V=90% → RGB(230,122, 69) #E67A45

太陽・最高光: H=45 S=50% V=99% → RGB(252,221,126) #FCDD7E

地上のシルエット: H=250 S=55% V=15% → RGB( 21, 17, 38) #151126

 

パレットD「清涼な水辺」(寒色の類似色でまとめ、無彩色に近い泡だけを強アクセントに)

水面: H=195 S=55% V=75% → RGB( 86,165,191) #56A5BF

深部(水底): H=210 S=65% V=45% → RGB( 40, 77,115) #284D73

泡・ハイライト: H=185 S=15% V=98% → RGB(212,247,250) #D4F7FA

水辺の植物: H=140 S=50% V=60% → RGB( 76,153,102) #4C9966

```

 

これら4つのパレットに共通する設計の型は、**基調色(メイン)・準主役(サブ)・アクセント(強い1色)・輪郭やベースとなる暗色**という4つの役割分担である。第一章1-8で述べた「四色を均等な強さで使わない」という鉄則が、ここでもそのまま当てはまる。パレットCが第二章2-6の赤色光源グラデーションと接続していることからもわかるように、本章の四色パレットと第二章の六光源グラデーションは、独立した技法ではなく、同じ設計思想(色相環上の構造+ヒューシフトの発想)を異なる粒度で応用したものである。

 

## 4-6. 色彩心理学研究の方法論的な留保 — 「誰を対象にした研究か」という問い

 

第四章4-2・4-3で紹介してきた色彩心理学の研究知見を評価するうえで、もう一つ押さえておくべき方法論的な注意点がある。心理学研究一般に向けられている批判として、実験参加者の多くが**欧米の、高学歴で、産業化された、豊かな、民主主義社会に属する人々**(頭文字を取って**WEIRD**〈Western, Educated, Industrialized, Rich, Democratic〉サンプルと呼ばれる、大学の心理学実験に参加しやすい層に偏った被験者集団)に偏っているという指摘がある。色彩心理学の実験の多くも例外ではなく、特定の文化的背景を持つ集団で得られた結果を、人類全体に当てはまる普遍的な法則であるかのように語ってしまう危険が、常につきまとっている。

 

この方法論的な留保は、第四章4-2で紹介した「ヨーロッパにおける青の歴史的な位置づけの変化」や、4-3で紹介した「黄色の文化間での意味の違い」といった実例と合わせて理解すると、単なる重箱の隅をつつく指摘ではなく、**色彩心理学の知見をゲームデザインに応用する際の、実務上の警告**として機能する。世界中のプレイヤーを対象にするゲームを作る場合、特定の文化圏の被験者だけを対象にした研究結果を根拠に「この色を使えば全プレイヤーがこう感じるはずだ」と設計することは、慎重であるべきである。

 

## 4-7. 四色パレットの時間軸への拡張 — ミニ・カラースクリプトという発想

 

4-5で示した4つのパレットは、いずれも「ある一瞬の場面」を切り取ったものだったが、実務ではこれをさらに一歩進め、**物語の進行や時間帯の推移に沿って、パレットを連続的に変化させていく**という使い方もできる。ここでは、朝→昼→夕→夜という1日の時間経過を、4つの基調色の推移として設計した簡単な例を示す。

 

```

ミニ・カラースクリプト(朝→昼→夕→夜、各段階の基調色1色ずつ)

朝: H=35 S=40% V=85% → RGB(217,181,130) #D9B582(淡く霞んだ暖色)

昼: H=200 S=35% V=92% → RGB(152,207,235) #98CFEB(明るく開放的な寒色)

夕: H=20 S=70% V=85% → RGB(217,116, 65) #D97441(彩度の高い暖色、第四章パレットCと同系統)

夜: H=250 S=45% V=22% → RGB( 35, 31, 56) #231F38(低明度の寒色、第二章の闇の設計と接続)

```

 

彩度・明度の推移を数値で追うと、朝(V=85%)→昼(V=92%、もっとも明るい)→夕(V=85%、彩度は最大の70%まで上昇)→夜(V=22%、もっとも暗い)という、山型の明度変化と、夕方に彩度がもっとも高まるという変化が見て取れる。この「時間軸に沿ってパレットを連続的に変化させる」という考え方は、次章5-5で紹介する、映像作品の制作現場で実際に使われている「カラースクリプト」という手法の、もっとも単純化した形にあたる。

 

## 4-8. 四色配色と六光源の交差点 — 光源色をパレットの基調に転用する

 

第一章の四色配色(テトラード)と、第二章の六光源グラデーションは、一見すると別々の道具に見えるかもしれないが、実務上は互いを補い合う、一体の設計手順として使うことができる。

 

もっとも手早い方法は、**第二章のいずれかの光源グラデーション5段階から、4色を抜き出してそのまま四色パレットに転用する**というものである。たとえば第二章2-6の赤色光源グラデーションから、ハイライト・明部・暗部・最暗部の4段階(中間色を除く)を抜き出すと、

 

```

赤色光源グラデーションからの四色パレット転用例

基調色(メイン相当): 明部 RGB(209, 94, 94) #D15E5E

ハイライト(アクセント相当): ハイライト RGB(247,198,198) #F7C6C6

準主役(サブ相当): 暗部 RGB( 76, 19, 57) #4C1339

ベース影(暗色相当): 最暗部 RGB( 33, 13, 33) #210D21

```

 

この4色は、そもそも同一の光源(赤色光源)から生成された、色相環上でひとつながりの遷移をたどる色であるため、第一章1-8で述べた「四色を均等な強さで使わない」という鉄則を、最初から満たしている。すでに明度・彩度の序列(ハイライト→明部→暗部→最暗部)が決まっているため、どの色を基調色にし、どの色を暗色として使うべきかで迷う必要がない。この手順は、四色配色をゼロから設計する時間がない場合の、実務上の近道として使うことができる。

 

---

 

## 休憩所④: まとめ箱 — 第四章のポイント

 

```

色彩心理学の見取り図: Elliot & Maier(2012年)のカラー・イン・コンテキスト理論

→ 色の心理効果は文脈依存であり、「色に固定的に備わった効果」という単純化は誤り

 

比較的支持される知見: 暖色/寒色の知覚傾向(ただし個人差・環境条件の影響が大きく絶対視は禁物)

→ ゲーテ『色彩論』(1810年)の暖色/寒色の整理、ヨーロッパで青が15世紀まで

「暖かい色」とみなされていた史実が、この知見の文化・時代依存性を示す

 

文化依存的/実証が弱い通説: 黄=明るさ(日本)⇔裏切り(キリスト教圏一部)等の対立例

「赤は異性への魅力を高める」仮説(Elliot & Niesta 2008)は、

Lehmann・Elliot・Calin-Jageman(2018年)のメタ分析で効果ほぼ皆無と後に修正

→ 断定の危うさと、科学の自己修正の健全性を示す実例

 

ゲームUI配色(赤=ダメージ/青=MP/緑=回復)は「生得的心理効果」でなく「学習された記号」

→ 色だけに頼らずアイコン・数値・パターンの併用が実務上必須(色覚多様性への配慮)

 

四色パレット実践4例(A元気な昼/B不穏な夜/C郷愁の夕焼け/D清涼な水辺)

→ 基調色・準主役・アクセント・暗色という役割分担が共通の型

 

方法論的留保: WEIRD(欧米・高学歴・産業化・豊か・民主主義)サンプルへの偏り批判

→ 特定文化圏の研究結果を全プレイヤーに一般化することへの警告

 

ミニ・カラースクリプト(朝→昼→夕→夜の基調色推移): 山型の明度変化+夕方に彩度最大

→ 第五章5-5「カラースクリプト」技法の単純化版

 

四色配色×六光源の交差点: 光源グラデーション5段階から4色(ハイライト/明部/暗部/最暗部)を

抜き出して四色パレットに転用可能→序列が既に決まっているため主従で迷わない実務的近道

```

 

---

 

# 第五章: 実例研究 — ゲームUI・パッケージ・ブランドの配色実践

 

本章では、架空の事例ではなく、実際に一般に知られている分野での配色実践を取り上げ、これまでの章で扱った理論(色相環・六光源グラデーション・四色による印象表現)が、現実の商業デザインの中でどう現れているかを確認する。

 

## 5-1. ゲームUIにおける配色実践

 

第四章4-4で述べたとおり、ゲームのUI(体力ゲージ・魔法力ゲージ・警告表示など)には、ジャンルを越えて広く共有される配色の慣習がある。実務上整理すると、赤は危険・ダメージ・緊急性を示す警告色として、青は情報・冷静さ・魔法力(マナ)を示す色として、緑は回復・安全・成功を示す色として、黄色〜橙は警告・エネルギー・注目を促す色として使われる傾向が強い。

 

ここで実務上重要な設計上の注意点を2つ加えておきたい。第一に、体力ゲージの残量が減るにつれて色を緑→黄→赤と変化させる、いわゆる**しきい値配色(スレッショルドカラー)**は、プレイヤーに残量を直感的に伝える定番の手法だが、この際の3色は本書の第一章で扱った色相環上で連続した位置関係にあることが望ましい(緑・黄・赤はいずれも色相環上で隣接〜近接した位置にあり、類似色に近い自然な遷移を作れる)。第二に、第七章で詳しく扱う色覚多様性への配慮から、色の変化だけに頼らず、ゲージの点滅・アイコンの変化・数値表示の併用が、実務上推奨される設計である。

 

## 5-2. パッケージデザインにおける配色慣習

 

商品パッケージのデザインでも、色は単なる装飾ではなく、商品の性質を瞬時に伝える記号として機能している。飲食料品のパッケージでは、緑色が天然・健康・オーガニックといった印象と強く結びつけられる傾向があり、自然由来をうたう飲料や健康食品のパッケージに緑が多用される。対照的に赤色は、食欲増進・エネルギー・辛味や濃い味わいを連想させる色として、スナック菓子や香辛料を効かせた食品のパッケージで好んで使われる傾向がある。

 

具体的なブランドの実例としては、大手ハンバーガーチェーンのマクドナルドが採用している赤と黄色の組み合わせは、赤のエネルギー感・食欲喚起と、黄色の親しみやすさ・活気を組み合わせた配色として広く知られている。同様に、サンドイッチチェーンのサブウェイが採用する黄色と緑の組み合わせは、黄色の活力と、緑の新鮮さ・自然さを組み合わせた例として言及されることが多い。これらの実例は、単一の色の効果というより、本書が繰り返し強調してきた「複数の色の組み合わせ(配色)」が全体の印象を作っているという考え方を裏づけている。

 

## 5-3. 企業ロゴ・ブランドカラーと色

 

ブランドの色選びに関する実務的な知見として、青色を採用する企業ロゴ・店舗デザインは、消費者から信頼性・品質の高さの評価を得やすいとする調査結果が知られている。IT企業や金融機関に青系統のロゴを採用する例が世界的に多いのも、この「青=信頼」という広く共有された連想と無関係ではないと考えられる。ただし本書は第四章で述べた慎重さをここでも維持したい。この種の調査結果は、あくまで「ある程度の傾向」を示すものであり、業種・ターゲット層・時代の流行によって、最適なブランドカラーは大きく変わりうる。色だけでブランドの成否が決まるわけではなく、配色は数ある設計要素の一つである、という謙虚な位置づけを忘れてはならない。

 

## 5-4. ドット絵・レトロゲーム表現への接続

 

第三章3-4で扱ったレトロハードウェアの色数制約は、単なる歴史の一コマではなく、現代でも「レトロ調」「ドット絵」を意図的に選ぶインディーゲームやスマートフォン向けゲームにおいて、あえて模倣される美意識として実務価値を持ち続けている。色数をあえて絞り込んだ配色は、開発コストの節約になるだけでなく、視認性の高さと独特のノスタルジックな雰囲気を両立できるという、実務上の利点を兼ね備えている。本書の六光源グラデーション体系(第二章)を、たとえば各光源につき3段階(ハイライト・中間・シャドウのみ)に絞り込んで適用すれば、そのままレトロ調のドット絵パレットとしても機能する設計になっている。

 

## 5-5. カラースクリプト — 映像制作現場の配色設計技法

 

第四章4-7で「ミニ・カラースクリプト」として先取りした考え方の、本家にあたる実務技法を紹介したい。長編アニメーション映画の制作現場では、脚本・絵コンテが固まった後、本格的な作画・背景制作に入る前の段階で、**カラースクリプト(color script、水準四: 作品全体を通して、各シーン・各カットの配色・光・ムードをあらかじめ設計しておく、絵コンテとは別の、色に特化した設計図)**と呼ばれる工程を経ることがある。

 

この技法は、アメリカのアニメーションスタジオ・ピクサーで、『トイ・ストーリー』(1995年)のプロダクションデザイナーであったラルフ・エグルストンが確立した手法として知られ、以後ピクサーの全作品はもちろん、ディズニー・アニメーション、ドリームワークス、ソニー・ピクチャーズ・アニメーションなど、多くの大手スタジオに広く採用されるようになった。カラースクリプトは、作画・照明といった作業に本格的に入る前に、監督・プロダクションデザイナー・撮影監督が「作品全体を通して、色と光がどう推移していくか」を確認するための中核資料として機能し、以後の背景美術・照明・合成の判断基準(北極星)になる。

 

このカラースクリプトという実務技法は、本書の第四章で扱った「四色による印象表現」を、単発の場面ではなく**作品全体の時間軸**に拡張したものだと理解できる。ゲーム制作の文脈に置き換えれば、ステージ・章ごとの基調パレットをあらかじめ一覧化しておくことで、個々の背景タイルやスプライトを作る担当者が、作品全体のトーンの推移から外れた配色を作ってしまうことを防げる、実務上非常に価値の高い工程管理の手法である。「text系のゲームEditor」のような、複数の担当班(原画班・着色班・演出班)が並行して作業を進めるプロジェクト構成においては特に、こうした「色の北極星」となる資料をあらかじめ用意しておくことの実務価値が大きい。

 

## 5-6. 日本の伝統色 — DIC-0027への橋渡し

 

第四章4-3で、色の意味づけが文化によって大きく異なりうることを述べたが、その具体例として、日本には古くから独自の色名の体系(伝統色、でんとうしょく)が存在する。たとえば藍色(あいいろ)は、タデ科の植物であるタデアイ(蓼藍)の葉を発酵させて作る染料によって古くから染められてきた、深い青系の伝統色であり、江戸時代の庶民の衣服に広く使われたことから、来日した外国人が当時の日本の風景を指して「ジャパン・ブルー」と呼んだという逸話でも知られている。同様に、紅花(べにばな)という植物から採れる紅色(べにいろ)は、鮮やかな赤系の伝統色として、口紅などの化粧にも用いられてきた歴史を持つ。

 

これらの伝統色は、単なる「色の名前」以上の情報——**その色がどんな染料・顔料から、どういう歴史的背景で生まれたか**——を背負っている点で、第一章のRGB/HSVという抽象的な数値だけでは伝わらない、文化的な奥行きを持っている。本書の六光源グラデーション(第二章)や四色パレット(第四章)で設計した色に、こうした具体的で由来のある色名を当てはめたいという実務上のニーズに応えるのが、姉妹企画である→DIC-0027(色名大辞典)である。DIC-0027は、JIS慣用色名・日本の伝統色・国際標準のnamed colorを、和英表記・カタカナ発音・正式名称・RGB値・16進表記とともに収録する、検索型の辞典として計画されている。本書で数値として設計した色に「名前」を与えたくなったときは、DIC-0027を辞書として参照することを想定している。

 

## 5-7. 日本における色彩の資格制度 — 実務者はどう学んでいるか

 

本書がここまで扱ってきた配色調和・色彩心理学・アクセシビリティといった知識体系は、日本国内では独立した学問としてだけでなく、実務家向けの資格制度としても整備されている。代表的なものが、文部科学省後援の**色彩検定**と、東京商工会議所が主催する**カラーコーディネーター検定試験**の2つである。

 

色彩検定は3級・2級・1級に加え、**UC級(ユーシー級)**という区分を持つ。このUC級の「UC」は**ユニバーサルカラー(Universal Color)**の略であり、まさに第七章で扱ったカラーユニバーサルデザインの考え方を専門に扱う級として設けられている。1級は一次(マークシート方式)・二次(記述・論述・実技)の両方に合格して初めて認定される、実務レベルの高い難易度を持つ資格である。一方のカラーコーディネーター検定試験は、日常的な色彩の基礎知識を扱うスタンダードクラスと、ビジネスにおける色彩活用の事例まで扱うアドバンスクラスに分かれている。

 

こうした資格制度の存在は、本書で扱ってきた内容が、決して一冊の書物の中だけで完結する特殊な知識ではなく、**日本国内で体系化され、検定という形で実務能力が測られている、確立した専門分野の一部**であることを裏づけている。本書の第一章(配色調和)・第四章(色彩心理学)・第七章(カラーユニバーサルデザイン)は、いずれもこれらの資格試験の主要な出題範囲と重なっており、本書を読んだ読者が、さらに専門性を深めたいと考えたときの、次の学習先の一つになりうる。

 

---

 

## 休憩所⑤: まとめ箱 — 第五章のポイント

 

```

ゲームUI: 赤=危険/青=情報・マナ/緑=回復/黄=警告という業界慣習

しきい値配色(緑→黄→赤)は色相環上で近接した色を使う自然な遷移

→ 色以外の手がかり(点滅・アイコン・数値)の併用が実務上必須

 

パッケージデザイン: 緑=天然・健康/赤=食欲・エネルギーという傾向

実例: マクドナルド(赤+黄=エネルギー+活気)/サブウェイ(黄+緑=活力+新鮮さ)

 

ブランドカラー: 青系ロゴは信頼性の評価を得やすい傾向があるが、

業種・時代による変動を伴う「ある程度の傾向」であり絶対法則ではない

 

レトロゲーム表現: 色数制約の美意識は現代のインディーゲームでも実務的に模倣される

→ 六光源グラデーションを3段階に絞ればそのままレトロ調パレットとして機能

 

カラースクリプト: ラルフ・エグルストンが『トイ・ストーリー』(1995年・ピクサー)で確立、

以後ディズニー・ドリームワークス等にも波及した、作品全体の配色・光・ムードの設計図

→ 四色パレット(第四章)の時間軸拡張版。複数班が並行作業する制作体制で特に実務価値が高い

 

日本の伝統色: 藍色(タデアイ由来・「ジャパン・ブルー」の逸話)/紅色(紅花由来)

→ 色名は染料・歴史的背景を背負う。具体的な命名は姉妹企画→DIC-0027(色名大辞典)を参照

 

日本の色彩資格: 色彩検定(文科省後援・3級/2級/1級/UC級)/カラーコーディネーター検定

(東京商工会議所主催・スタンダード/アドバンス)

→ UC級の「UC」=ユニバーサルカラー、第七章のCUDが独立した検定級として存在する裏づけ

```

 

---

 

# 第六章: グラデーションの派生バージョン比較

 

## 6-1. 線形グラデーション

 

**線形グラデーション(せんけいグラデーション、リニアグラデーション、水準二: 直線上の始点から終点に向かって、一定方向に色が変化していく、もっとも基本的なグラデーションの形式)**は、空のグラデーション(上が青、下が白っぽいなど)や、平坦な壁面・床面に方向性のある陰影をつける場面で、もっとも頻繁に使われる基本形である。線形グラデーションの実務上の利点は、計算が単純で、どんな解像度・アスペクト比の画面にも均等に引き延ばせる点にある。

 

## 6-2. 放射グラデーション

 

**放射グラデーション(ほうしゃグラデーション、ラジアルグラデーション、水準二: 一つの中心点から外側に向かって、同心円状に色が変化していくグラデーションの形式)**は、光源やスポットライトのように、特定の一点から光が広がっていく効果を表現する際に使われる。第二章のハイライト表現(特に球体状のオブジェクトの光の当たり方)は、実質的にこの放射グラデーションの一種である。ゲーム画面では、キャラクターの周囲を照らす魔法陣のエフェクトや、爆発の中心から広がる閃光などの表現に、放射グラデーションが頻繁に用いられる。

 

## 6-3. 多段階グラデーション(ポスタリゼーション)とバンディング現象

 

なめらかな線形・放射グラデーションを、意図的に少数の色の階段状の帯に置き換える技法を**ポスタリゼーション(posterization、多階調化・階調分解、水準三: 連続的な色の変化を、指定した少数の色数の範囲内に丸め込むことで、階段状の色の帯を作る画像処理技法)**と呼ぶ。第三章3-1で扱ったセルシェーディングは、このポスタリゼーションを立体物の陰影に応用したものと理解できる。実際に、2009年に発売されたゲーム『ボーダーランズ』のような作品では、ポスタリゼーションとセルシェーディングを組み合わせることで、コミック(アメリカン・コミック)的な、輪郭のはっきりした色面によるグラフィックスタイルが実現されている。

 

一方、ポスタリゼーションを意図せずに引き起こしてしまう技術的な問題として、**バンディング(banding、色の帯・階調飛び、水準三: なめらかであるべきグラデーションの中に、意図しない色の境界線〈帯〉が視認されてしまう現象)**がある。バンディングが起きる根本的な原因は、画像が扱える色の段階数、すなわち**色深度(いろしんど、ビット深度、水準三: 1つの色チャンネル〈赤・緑・青それぞれ〉を何段階の明るさで表現できるかを示す、画像データの精度)**の不足にある。

 

色深度と、それによって表現可能な総色数の関係を、本書の計算で確認しておこう。

 

```

色深度と総色数の検算(1チャンネルあたりの段階数の3乗=総色数)

8bit(1チャンネル256段階): 256³ = 16,777,216通り(約1,678万色)

10bit(1チャンネル1024段階): 1024³ = 1,073,741,824通り(約10億7,374万色)

12bit(1チャンネル4096段階): 4096³ = 68,719,476,736通り(約687億色)

```

 

8bit(いわゆる「フルカラー」)は約1,678万通りという大きな数に見えるが、明度がゆるやかに変化する空のグラデーションのような画像では、256段階という制約が、肉眼で識別できる帯(バンディング)として表面化してしまうことがある。この対策として実務で使われるのが**ディザリング(dithering、水準三: 隣接するピクセルに、異なる色を細かく織り交ぜて配置することで、遠目には中間の色が滑らかに存在するかのように錯覚させる技法)**である。ディザリングは、色深度そのものは増やさずに、視覚的な滑らかさを擬似的に底上げする、色数制約の中で磨かれてきた古典的な工夫であり、第三章で扱ったレトロハードウェアの時代から現在に至るまで、広く使われ続けている。

 

## 6-4. 代表的なディザリングアルゴリズム — 誤差拡散法と組織的ディザ法

 

ディザリングには、大きく分けて2つの系統がある。

 

第一の系統は**誤差拡散法(ごさかくさんほう、error diffusion、水準四: ある1ピクセルを、使える色の中でもっとも近い色に丸め込んだ際に生じる「丸め込みの誤差」を、まだ処理していない周囲のピクセルに配分〈拡散〉していく方式)**である。この系統の代表格が、1976年にロバート・フロイドとルイス・スタインバーグが発表した**フロイド・スタインバーグ・ディザリング**である。このアルゴリズムは、画像を左上から右下へ1ピクセルずつ処理していきながら、丸め込みで生じた誤差を、右隣のピクセルに16分の7、左下のピクセルに16分の3、真下のピクセルに16分の5、右下のピクセルに16分の1という、決まった比率で配分していく。

 

```

フロイド・スタインバーグ法の誤差拡散比率(現在処理中のピクセルを*とする)

[ * ][7/16]

[3/16][5/16][1/16]

```

 

第二の系統は**組織的ディザ法(そしきてきディザほう、ordered dithering、水準四: あらかじめ決められた固定のパターン〈閾値マトリクス〉と、各ピクセルの値を比較することで、機械的にディザパターンを決める方式)**であり、1973年にバイヤーが考案した**バイヤー・マトリクス(4×4や8×8などのサイズがよく使われる)**が代表例である。誤差拡散法が処理順に左右されテクスチャが不規則になるのに対し、組織的ディザ法は同じ模様が規則的に繰り返されるという特徴を持ち、レトロゲーム特有の「格子状の網目模様」の陰影表現は、多くの場合この組織的ディザ法に由来する。実務上は、誤差拡散法の方が写真のような自然な階調表現に向き、組織的ディザ法の方が意図的にレトロな質感を出したい場合や、規則的なパターンを好むピクセルアートの美意識に向く、という使い分けがなされている。

 

## 6-5. 三者の比較表

 

```

比較表: 線形/放射/多段階(ポスタリゼーション)グラデーション

┌────────────┬──────────────────┬──────────────────┬──────────────────────┐

│ 種別 │ 主な用途 │ 実装コスト │ 視覚的な効果 │

├────────────┼──────────────────┼──────────────────┼──────────────────────┤

│ 線形 │ 空・平坦な壁面・床面 │ 低い(直線的な計算) │ 方向性のある自然な変化 │

│ 放射 │ 光源・爆発・魔法陣 │ 低い(中心点からの距離)│ 中心への注目を集める効果 │

│ 多段階 │ セル調の陰影・レトロ表現│ 中(段階数の設計が必要)│ 平面的・グラフィカルな強さ│

└────────────┴──────────────────┴──────────────────┴──────────────────────┘

```

 

3種のグラデーションは互いに排他的ではなく、実務では組み合わせて使われることが多い。たとえば放射グラデーションで光源の位置を決め、その明暗の変化を多段階(ポスタリゼーション)で区切り、最後に平坦な面には線形グラデーションで環境光の方向性を足す、という重ね合わせが、第二章の六光源グラデーションを実際のタイル・スプライトに落とし込む際の、典型的な実装手順になる。

 

## 6-6. イージング(緩急曲線) — グラデーションの変化速度を設計する

 

ここまでのグラデーションは、始点から終点まで色が一定の速さで変化していく(線形補間)ことを暗黙の前提にしてきた。しかし実務では、この「変化の速さ」そのものを調整することで、グラデーションの印象を大きく変えることができる。この考え方を**イージング(easing、緩急曲線、水準四: 変化の開始・終了付近の速度を、一定ではなく意図的に緩急をつけることで、より自然で心地よい変化を作る手法)**と呼ぶ。

 

イージングという考え方を体系化し、広く普及させたのは、2002年にアニメーション制作ツールFlash向けの著書の中で一連の緩急計算式を発表した、ロバート・ペナー(Robert Penner)である。ペナーが定義した緩急曲線は、その後様々なアニメーション・デザインツールに標準機能として組み込まれ、現在では業界の共通言語になっている。代表的な種類には、開始がゆっくりで徐々に加速する**イーズイン(ease-in)**、開始が速く徐々に減速していく**イーズアウト(ease-out)**、そして前半をイーズイン・後半をイーズアウトにした**イーズインアウト(ease-in-out)**がある。

 

このイージングの考え方は、色のグラデーションにもそのまま応用できる。第二章の六光源グラデーションで示した5段階(ハイライト・明部・中間色・暗部・最暗部)を、単純に等間隔(線形)で配置するのではなく、たとえば「ハイライト付近は変化を急に、中間色から暗部にかけてはゆっくりと」といったイーズアウト的な配分にすると、光が当たる部分の鋭さと、影が徐々に深まっていく質感を、より自然に両立させることができる。第三章3-7で扱った「グラデーションの幅=丸みの表現」という考え方に、このイージングの緩急を組み合わせることで、単なる均等なグラデーションよりも、一段階リアリティの高い陰影表現が可能になる。

 

## 6-7. 実装例 — Web技術でのグラデーション記述

 

「text系のゲームEditor」の技術スタック(index.html+ESモジュール構成)を踏まえ、本章で扱ってきたグラデーションを、実際にどう記述するかを具体的に示しておきたい。

 

Web標準のCSSには、線形・放射グラデーションを直接記述できるプロパティが用意されている。第二章2-6の赤色光源グラデーション(ハイライト→最暗部)をそのままCSSの線形グラデーションとして記述すると、次のようになる。

 

```css

/* 第二章2-6・赤色光源グラデーションのCSS実装例 */

background: linear-gradient(

to bottom,

#F7C6C6 0%, /* ハイライト */

#D15E5E 25%, /* 明部 */

#852535 55%, /* 中間色(ターミネーター) */

#4C1339 80%, /* 暗部 */

#210D21 100% /* 最暗部 */

);

```

 

球体状のオブジェクト(第六章6-2の放射グラデーションが対応する形状)であれば、`radial-gradient()`に置き換えるだけで、同じ配色をそのまま流用できる。さらに、タイルやスプライトをJavaScriptのCanvas API(`<canvas>`要素)で動的に描画する場合は、`createLinearGradient()`・`createRadialGradient()`という、CSSとほぼ対応するメソッドが用意されており、第二章の5段階のRGB値を`addColorStop()`で登録していく形で、プログラムから直接同じグラデーションを生成できる。この対応関係により、本書の六光源グラデーション表(第二章)は、デザインツール上での試作から、実際のゲームエディタへの実装まで、数値を変換することなくそのまま持ち込める設計になっている。

 

また、第六章6-4で紹介した組織的ディザ法についても、具体的な数値を示しておく。もっとも基本的な4×4のバイヤー・マトリクスは、次の16個の閾値から構成される。

 

```

4×4バイヤー・マトリクス(標準形・値0〜15)

0 8 2 10

12 4 14 6

3 11 1 9

15 7 13 5

```

 

この行列の各マスの値を、ピクセルごとの明るさと比較し、行列の値より明るければそのピクセルを「点灯」、暗ければ「消灯」と判定する処理を、タイル全体に敷き詰めるようにくり返し適用することで、レトロゲーム特有の格子状の網目模様を、計算だけで機械的に生成できる。

 

---

 

## 休憩所⑥: まとめ箱 — 第六章のポイント

 

```

線形グラデーション = 直線上の変化(空・壁・床など、方向性のある自然な変化)

放射グラデーション = 中心点からの同心円状の変化(光源・爆発・魔法陣など)

多段階グラデーション(ポスタリゼーション) = 少数の色帯に丸め込む技法

→ セルシェーディング(第三章)・『ボーダーランズ』(2009年)のコミック調表現に接続

 

バンディング = 色深度不足による意図しない色の帯

検算: 8bit=256³=16,777,216通り/10bit=1024³=1,073,741,824通り/

12bit=4096³=68,719,476,736通り

対策: ディザリング(隣接ピクセルの色を織り交ぜ、視覚的な滑らかさを擬似的に確保)

 

ディザリング2系統: 誤差拡散法(フロイド・スタインバーグ、1976年・比率7/16,3/16,5/16,1/16)

=処理順で不規則なテクスチャ、自然な階調向き

組織的ディザ法(バイヤー・マトリクス、1973年)=規則的な網目模様、レトロ調に向く

 

実務では3種を重ね合わせて使うのが典型的(放射で光源位置→多段階で区切り→線形で環境光)

 

イージング(緩急曲線): Robert Penner(2002年・Flash向け著書)が体系化、業界標準に

ease-in(徐々に加速)/ease-out(徐々に減速)/ease-in-out(前後半の組合せ)

→ 六光源グラデーション(第二章)の5段階を等間隔でなく緩急配分すると陰影がより自然に

 

実装例: CSS linear-gradient()/radial-gradient()、Canvas APIのcreateLinearGradient()等で

第二章のRGB値をそのまま流用可能。4×4バイヤー・マトリクス(0,8,2,10/12,4,14,6/

3,11,1,9/15,7,13,5)で組織的ディザを機械的に生成できる

```

 

---

 

# 第七章: 配色の実務チェックリスト — コントラストとカラーユニバーサルデザイン

 

美しい配色であっても、情報が正しく伝わらなければ、実務上は失格である。本章では、配色を世に出す前に必ず確認すべき、実測可能なチェック項目を扱う。

 

## 7-1. コントラスト比 — WCAGの計算式

 

Web・UIデザインの国際的な標準を定める団体W3Cが策定した**WCAG(Web Content Accessibility Guidelines、水準四: 障害の有無にかかわらず、誰もがWebやアプリの情報にアクセスできるようにするための国際的なアクセシビリティ指針)**は、文字色と背景色の間に必要な**コントラスト比(contrast ratio、水準三: 2つの色の明るさの差を、1:1〈差なし〉から21:1〈黒と白の最大差〉までの数値で表したもの)**の基準を定めている。

 

コントラスト比は、まず各色の**相対輝度(そうたいきど、水準四: 人間の目が実際に感じる明るさに近づくよう、赤・緑・青それぞれの強さに重みをつけて計算した明るさの指標)**を次の式で求め、

 

```

相対輝度 L = 0.2126×R' + 0.7152×G' + 0.0722×B'

(R', G', B'は各色成分をsRGBのガンマ特性に応じて線形化した値。

人間の目は緑を赤・青より明るく感じるため、緑の重みが最大になっている)

```

 

続いて、明るい方の相対輝度L1・暗い方の相対輝度L2を使い、次の式でコントラスト比を求める。

 

```

コントラスト比 = (L1 + 0.05) / (L2 + 0.05)

```

 

WCAGの基準では、通常サイズの文字については**4.5:1以上(レベルAA)**、大きな文字(おおむね18ポイント以上、太字なら14ポイント以上)については**3:1以上**、より厳格な基準であるレベルAAAでは通常文字について**7:1以上**が求められる。

 

## 7-2. 検算 — 実際に色を当てはめて確かめる

 

この式が本当に機能するか、本書で扱ってきた色を使って検算してみよう。

 

```

検算1: 白(255,255,255)と黒(0,0,0)

L(白)=1.0000、L(黒)=0.0000

コントラスト比 = (1.0000+0.05)/(0.0000+0.05) = 21.00:1

→ 理論上の最大値と一致(既知の基準値と符合)

 

検算2: 中間グレー(128,128,128)と白(255,255,255)

L(グレー)≈0.2159

コントラスト比 = (1.0000+0.05)/(0.2159+0.05) ≈ 3.95:1

→ レベルAA(4.5:1)の基準に届かない

 

検算3: 中間グレー(128,128,128)と黒(0,0,0)

コントラスト比 = (0.2159+0.05)/(0.0000+0.05) ≈ 5.32:1

→ レベルAA(4.5:1)は満たすが、AAA(7:1)には届かない

 

検算4: 第二章の赤色光源「明部」RGB(209,94,94)と、暗い背景RGB(30,30,36)

コントラスト比 ≈ 4.32:1

→ レベルAA(4.5:1)にわずかに届かず、実務では「あと一歩」の要改善例

```

 

検算4は、本書が意図的に選んだ実例である。第二章で設計した赤色光源の「明部」の色を、そのままHPバーの文字色や重要なアイコンの色として暗い背景に使うと、コントラスト比は4.32:1となり、AA基準の4.5:1にわずかに届かない。これは「見た目には十分濃い赤に見えるのに、計算上はアクセシビリティ基準をわずかに満たさない」という、実務で頻繁に起こる典型的な落とし穴である。この場合の対処法は、明度をわずかに落とす、あるいは彩度を保ったまま明度を数%調整することで、多くの場合コントラスト比を基準内に収められる。**目視の印象だけに頼らず、実際に数値で検算する習慣**が、本章の最大の実務教訓である。

 

ここで、ゲームのUIデザインにおいて見落とされやすい点を補足しておきたい。7-1で紹介した4.5:1・3:1・7:1という基準は、いずれも**文字**を対象にした基準(達成基準1.4.3)である。ところがゲーム画面の多くは、文字よりもアイコン・ゲージ・ボタンの輪郭線といった**非文字要素**の方が、情報を伝える役割を担っている。WCAG基準にはこの非文字要素向けの基準(達成基準1.4.11「非テキストのコントラスト」)も別途存在し、ボタンの輪郭やアイコンの意味を区別するために必要な最小限のグラフィック部分についても、3:1以上のコントラスト比が推奨されている。第二章の六光源グラデーションで設計したアイコン色を実装する際は、文字だけでなく、こうした非文字要素についてもコントラスト比の確認を怠らないことが望ましい。

 

## 7-3. JISの安全色 — 日本の産業規格が定める警告色

 

配色によって「危険」を伝える必要がある場面では、感覚に頼らず、公的な規格を参照するという選択肢がある。日本産業規格(JIS)には**JIS Z 9103「図記号—安全色及び安全標識」**という、安全色を定めた規格が存在する。この規格は、赤・赤紫寄りの黄(黄赤)・黄・緑・青・赤紫という**6色の安全色**と、それらを引き立てるための対比色として白・黒を定めており、それぞれの色が「防火・禁止・危険」「注意」「安全・避難」「指示・保守」といった、意味の異なる警告・案内の用途に対応づけられている。

 

この規格は2018年に改正されており、この改正の要点は本書の第七章全体の趣旨と強く重なる。改正版のJIS Z 9103は、一般的な色覚だけでなく、**赤緑色覚異常・黄青色覚異常や、ロービジョン(弱視)を持つ人々にも見分けやすい**よう、色度座標(色の正確な範囲)が見直されている。つまりこの規格そのものが、第七章7-5で扱うカラーユニバーサルデザインの考え方を、国が定める公的な安全基準の中に正式に組み込んだ実例なのである。ゲーム内で「危険地帯」「回復ポイント」といった安全・警告に関わる表示を設計する際、このJIS安全色の6色とその意味づけを参考にすることは、独自に警告色を一から設計するよりも、プレイヤーにとって直感的に伝わりやすい配色を選ぶための、実務上有効な近道になる。

 

## 7-4. 色覚多様性のシミュレーション — どうやって「他人の見え方」を確かめるのか

 

次節7-5で紹介する色覚多様性の統計を、実務上さらに一歩進めて活用する方法として、**色覚シミュレーション(color vision deficiency simulation、水準五: ある画像や配色が、P型・D型などの色覚特性を持つ人には実際にどう見えるかを、計算によって疑似的に再現する技術)**がある。

 

このシミュレーションの科学的な裏付けとしてよく参照されるのが、ブレテル・ヴィエノ・モロン(Brettel, Viénot & Mollon)が1997年に発表したモデルと、これを簡略化してP型・D型に適用しやすくした、ヴィエノ・ブレテル・モロンによる1999年の改良モデルである。これらのモデルは、まず画面の色(sRGB)を、人間の目の3種類の錐体(すいたい、光を感じる網膜の細胞)の感度に対応する**LMS色空間**(Long・Medium・Shortの3波長帯への感度を軸にした色空間)に変換し、その上で特定の錐体の働きを欠く(あるいは弱い)状態を数式的に再現するという、視覚科学に基づいた手順を踏む。2009年にはマシャド(Machado)らによる、より汎用性の高い改良モデルも発表されている。

 

実務上重要なのは、こうしたシミュレーションが「勘や推測」ではなく、**視覚科学の裏付けを持つ計算モデル**によって行われているという点である。「text系のゲームEditor」の着色班がタイル・UIの配色を最終確認する際、こうしたシミュレーションの考え方(実装としては、既存の色覚シミュレーションツール・シェーダーを利用する形が実務的である)を通して見え方を確認する工程を加えることで、次節7-5で述べる「赤緑が区別しにくい」という統計的な事実を、具体的な自分たちの配色データの上で、直接確認することができる。

 

具体的にどのような場面で問題が起きやすいかを、本書のしきい値配色の例(第五章5-1)で考えてみよう。体力ゲージを緑(安全)→黄(注意)→赤(危険)と変化させる配色は、一般的な色覚では自然なグラデーションに見える。しかしP型・D型の色覚特性では、緑と赤の弁別が難しくなるため、シミュレーション上では「安全」の緑と「危険」の赤が、彩度・色相のわずかな違いだけの、非常に近い色として見えてしまうことがある。この場合、黄色だけが手がかりとして残り、緑と赤の区別がつきにくくなる。この問題への実務上の対処は、7-7のチェックリストで述べるとおり、色の変化と同時に、ゲージの点滅速度や、数値そのものの表示といった、色に依存しない手がかりを必ず併設することである。

 

## 7-5. カラーユニバーサルデザイン — 色覚の多様性への配慮

 

色による情報伝達を設計する際、忘れてはならないのが**色覚(しきかく)の多様性**である。日本国内の統計では、日本人男性のおよそ5%(約20人に1人)が、赤と緑の区別がつきにくい**P型**(1型、赤を暗く感じる特性、日本人男性の約1.5%)または**D型**(2型、赤緑の弁別が難しい特性、日本人男性の約3.5%)の色覚特性を持つとされる。女性の場合はP型・D型の割合はおよそ0.2%(500人に1人)程度と、男性よりかなり少ない。かつてはこれらを「色盲」「色弱」と呼んでいたが、日本遺伝学会が2017年以降「色覚多様性」という呼称を提唱しており、本書もこの呼称を採用する。

 

この色覚の多様性に配慮したデザインの考え方を**カラーユニバーサルデザイン(CUD、水準三: 色の感じ方が異なる人を含め、できるだけ多くの人に情報が正確に伝わるよう配慮したデザインの考え方)**と呼ぶ。日本ではNPO法人**カラーユニバーサルデザイン機構(CUDO)**が、この分野の普及と実務ガイドラインの整備を進めている団体として知られている。CUDOが提唱するカラーユニバーサルデザインの要点は、大きく3つに整理される。第一に、できるだけ多くの人が見分けやすい配色を選ぶこと。第二に、色を見分けにくい人であっても情報が伝わるよう、色以外の手がかり(形・パターン・文字ラベルなど)を併用すること。第三に、色の名前を使ったコミュニケーションが誰にでも成立するよう配慮すること。

 

CUDOが公開している「カラーユニバーサルデザイン推奨配色セット」は、サインや地図など比較的狭い面積で見分けやすさが必要な高彩度の**アクセントカラー9色**、案内図の塗り分けなど広い面積に使う高明度・低彩度の**ベースカラー7色**、そしてこれらの色と誤認されにくい**無彩色4色**の、合計20色から構成されている。実務では、この推奨配色セットを、独自に決めた配色の「検算用の参照リスト」として使うことができる。

 

第四章4-4・第五章5-1で述べたゲームUIにおける「赤=危険・緑=安全」という配色慣習は、P型・D型の色覚特性を持つプレイヤーにとって、赤と緑がもっとも区別しにくい組み合わせの一つに当たるため、色覚多様性の観点からは実は要注意の組み合わせである。この場合の実務上の解決策は、単純だが効果的である。**色の違いに加えて、形(丸か三角か)・アイコン・数値・点滅パターンなど、色以外の手がかりを必ず1つ以上併用する**ことである。

 

## 7-6. 総合ワークフロー — 1枚のタイルを設計する手順

 

本書の各章で扱ってきた道具を、実際に1枚のタイル(あるいは1体のスプライト)を設計する場面を想定し、頭から順にたどれる手順として組み立て直しておきたい。

 

```

ステップ1(第一章): 場面の主役を決め、配色調和を1つ選ぶ

→ 主役を際立たせたいなら補色・分割補色、統一感を優先するなら類似色、

賑やかさが欲しいなら三色配色・四色配色

 

ステップ2(第二章): 場面にふさわしい光源を六光源から選ぶ

→ 屋外の昼なら白色光源、洞窟や夜なら黒(闇)、炎や危険地帯なら赤色光源、

毒沼や魔法なら緑色光源、月明かりや水中なら青色光源

 

ステップ3(第二章・第三章): 段階数と遷移幅を決める

→ レトロ調・視認性重視なら2〜3段階の段階陰影(第三章3-1)、

丸みのある有機的な対象なら第三章3-7の幅広い遷移、

角ばった人工物なら1〜2ピクセルの急な遷移

 

ステップ4(第六章): グラデーションの種類とイージングを選ぶ

→ 平面は線形、光源・爆発の中心は放射、質感を強調したいなら多段階(ポスタリゼーション)、

自然な陰影にしたいなら6-6のイーズアウト的な緩急を加える

 

ステップ5(第四章): 全体のパレットを四色に絞り込む(必要な場合)

→ ステップ2で選んだ光源のハイライト・明部・暗部・最暗部を、

4-8の手順でそのまま四色パレットに転用してもよい

 

ステップ6(第七章): コントラスト比と色覚多様性を検算する

→ 文字・アイコンは4.5:1以上(非文字要素は3:1以上)を確認し、

赤緑・青黄の組み合わせには色以外の手がかりを必ず併設する

```

 

この6ステップは、本書の第一章から第七章までの内容を、そのまま実装の手順として並べ直したものである。各ステップで「なぜそう判断するのか」という理由は、それぞれの章で詳しく扱った通りであり、本ワークフローはあくまで、実務の現場で迷ったときに立ち返るための、圧縮された地図として使ってほしい。

 

## 7-7. 実務チェックリスト(まとめ)

 

本章までの内容を、実装前に確認すべきチェックリストの形にまとめる。

 

```

配色の実務チェックリスト

□ 文字・重要なアイコンと背景のコントラスト比を計算したか(通常文字は4.5:1以上が目安)

□ 目視の印象だけでなく、実際に数値で検算したか(検算4のような「わずかな未達」に注意)

□ 赤緑・青黄のような、色覚多様性の観点から混同されやすい組み合わせを避けているか

□ 色だけに依存せず、形・アイコン・数値・パターンなど代替の手がかりを用意したか

□ 警告・安全に関わる表示は、JIS Z 9103の安全色6色を参考にしたか

□ 可能であれば色覚シミュレーションで、複数の色覚特性での見え方を確認したか

□ 配色の意図(第一章の配色調和・第四章の印象表現)を、色覚特性に関わらず

情報として伝えられる設計になっているか

```

 

---

 

## 休憩所⑦: まとめ箱 — 第七章のポイント

 

```

WCAGコントラスト比 = (明るい方のL+0.05)/(暗い方のL+0.05)、L=相対輝度(緑の重みが最大)

基準: 通常文字4.5:1以上(AA)/大きな文字3:1以上/厳格基準7:1以上(AAA)

 

検算: 白vs黒=21.00:1/グレー128vs白≈3.95:1(AA未達)/グレー128vs黒≈5.32:1(AA達成・AAA未達)

/第二章の赤色光源「明部」vs暗背景≈4.32:1(AA基準にわずかに届かない実務上の典型例)

 

非文字要素のコントラスト(WCAG達成基準1.4.11): アイコン・ゲージ・ボタン輪郭も3:1以上が目安

→ ゲームUIは文字より非文字要素が情報を担うことが多く、こちらの確認も必須

 

JIS Z 9103(安全色・2018年改正): 赤/黄赤/黄/緑/青/赤紫の6色+白黒の対比色

→ 2018年改正で色覚多様性に配慮した色度座標に見直し済み(公的規格とCUDの接続点)

 

色覚シミュレーション: Brettel・Viénot・Mollon(1997/1999年)、Machado(2009年)の

LMS色空間に基づく計算モデル→勘でなく視覚科学の裏付けで見え方を確認できる

実例: しきい値配色(緑→黄→赤)はP型・D型では緑と赤が近い色に見え黄だけが手がかりに残る

 

色覚多様性: 日本人男性の約5%がP型・D型(赤緑の弁別が困難)、女性は約0.2%

→ カラーユニバーサルデザイン(CUDO)の3原則+推奨配色セット20色(9+7+4)

 

赤=危険/緑=安全という慣習は、P型・D型にとって区別しにくい組み合わせ

→ 色以外の手がかり(形・アイコン・数値・点滅)の併用が実務上必須

```

 

---

 

# 第八章: 終章 — 配色理論から実装へ

 

## 8-1. 本書を貫いた設計判断の型

 

本書は、色相環という「配色の地図」(第一章)から出発し、六光源グラデーションという「陰影の設計図」(第二章、本書の中核)、その実務技法(第三章)、四色による印象表現とその心理学的な裏付けの限界(第四章)、実在する分野での実践例(第五章)、グラデーション技法の比較(第六章)、そして実務チェックリスト(第七章)へと歩みを進めてきた。

 

ここで、本書全体を貫いていた、一つの共通する設計判断の型を振り返っておきたい。それは、**「均等に強調するのではなく、優先順位をつける」**という型である。配色調和における主役と脇役の区別(第一章1-6・1-8)、六光源グラデーションにおけるハイライトから最暗部までの明確な序列(第二章)、四色パレットにおける基調色・準主役・アクセント・暗色の役割分担(第四章4-5)、実務チェックリストにおける「最低限これだけは満たす」という優先順位(第七章7-7)——これらはすべて、色を選ぶという行為が「全部を目立たせる」ことではなく「何を目立たせ、何を後ろに引かせるか」という決断の連続であることを示している。

 

もう一つの共通する型は、**「断定を避け、確度を明示する」**という姿勢である。第四章で扱った色彩心理学の慎重な整理がその代表例だが、本書はこの姿勢を、色彩心理学に限らず、六光源グラデーションの数値ルール(あくまで本書独自に設計した実務体系であり、唯一の正解ではない)や、ブランドカラーの効果(第五章5-3、あくまで傾向であり絶対法則ではない)についても一貫して保ってきた。

 

## 8-2. 縦の階段 — 本書で登った水準

 

```

水準二: 色相環の基本(補色=色相環上で180度の位置関係、例: 赤0度⇔シアン180度)

↓

水準三: PCCS(色相+トーンの2軸)/段階陰影・ポスタリゼーション/色覚多様性の基礎

↓

水準四: 六光源グラデーションのHSV設計(例: 赤色光源、H=0度→最暗部でH=300度まで

60度分シフト)/アンビエントオクルージョン/WCAGコントラスト比の計算式

↓

水準五: シュヴルール『色の同時対比の法則』(1839年)/Elliot & Maier

カラー・イン・コンテキスト理論(2012年)/相対輝度の重み付け計算(0.2126/0.7152/0.0722)

↓

水準六: 色彩心理学の再現性問題(レッド・ロマンス仮説の2018年メタ分析による修正)/

暖色・寒色の知覚の歴史的可変性(ヨーロッパにおける青の歴史)

```

 

## 8-3. 横の広がり — 同じ水準にある姉妹概念

 

```

水準四にある姉妹概念:

色の三属性(色相・彩度・明度) ←→ 音の三要素(音高・音量・音色、→BOOK-0004音楽第1冊)

→ どちらも「見た目(聴こえ方)の全体」を、独立した少数の軸に分解して扱う考え方

ヒューシフト技法(色相をずらして陰影をつける) ←→

転調(音楽で調〈キー〉をずらして印象を変える技法)

→ どちらも「基準となる軸をずらすことで、同じ構造のまま印象を変える」という操作

```

 

## 8-4. 現在のフロンティア

 

色彩心理学の分野では、2018年のレッド・ロマンス仮説メタ分析(第四章4-3)に象徴されるように、過去に広く信じられていた効果を、より厳密な追試の蓄積によって見直す**再現性の検証**が、2020年代においても継続的な研究テーマになっている。またアクセシビリティの分野では、本書が扱ったWCAG 2.1のコントラスト比の計算式に代わる、文字と背景のどちらが前景・背景かによって計算方法を変える、より知覚に忠実な次世代のアルゴリズム(APCA、Advanced Perceptual Contrast Algorithm)が、次期規格の草案の中で議論されている。これらはいずれも、「これまで正しいとされてきた基準を、より精密な検証によって更新し続ける」という、本書が第四章で強調した科学の自己修正性を体現する、現在進行形の動きである。

 

## 8-5. 次の冊子への矢印

 

姉妹書→BOOK-0222(色彩学第1巻、光と目と色 — 光学基礎・色空間の科学)は、本書と対をなす理論編として、光の物理・RGB/CMY/HSV等の色空間・人間の目の色知覚の仕組みという、本書が前提として使ってきた土台そのものを扱う。あわせて→DIC-0027(色名大辞典)は、JIS慣用色名や日本の伝統色、国際標準の named color を、和英・カタカナ発音・RGB値・16進表記とともに収録する、検索型の辞典として計画されている。本書の六光源グラデーション表や四色パレットに具体的な色名を当てはめたいときは、DIC-0027を辞書として参照することを想定している。

 

なお、本シリーズの続刊候補として、ロードマップ(ROADMAP_色彩学デザインシリーズ.md)には、ゲームアセット・UI・パッケージデザインの実例分析をさらに掘り下げる巻や、色彩心理学の文化差・実証研究の到達点と限界をより専門的に扱う巻が、候補として挙げられている。これらはあくまで候補段階であり、実際の着手は台帳(NUMBER_REGISTRY.md)の確認を経て決定される。

 

---

 

## 休憩所⑧: まとめ箱 — 第八章のポイント

 

```

本書を貫いた設計判断の型: ①均等に強調せず優先順位をつける ②断定を避け確度を明示する

 

縦の階段: 色相環の基本(水準二)→PCCS・段階陰影(水準三)→六光源のHSV設計・

コントラスト比計算(水準四)→シュヴルール・color-in-context理論(水準五)→

色彩心理学の再現性問題(水準六)

 

横の広がり: 色の三属性↔音の三要素/ヒューシフト↔転調(軸をずらして印象を変える操作)

 

現在のフロンティア: 色彩心理学の再現性検証(2018年〜)/次世代コントラスト算出APCA

 

次巻: →BOOK-0222(光学基礎・色空間の科学)/→DIC-0027(色名大辞典)

続刊候補: 配色応用実例集・色彩心理学の専門編(ロードマップ記載・着手未確定)

```

 

---

 

## 結びの物語 — 「センス」の正体は、地図と設計図だった

 

入口の物語で述べた「なんとなく綺麗な色を選んだつもりなのに、画面全体がぼやけて見える」という壁に、もう一度立ち返ってみよう。

 

本書を読み終えた今、その壁の正体がもう少しはっきり見えているはずである。色を選ぶという行為は、決して「センス」という名の、説明不可能な才能に頼るしかない営みではない。イッテンが体系化した色相環という地図(第一章)、シュヴルールの発見に根を持つヒューシフトという陰影の設計図(第二章)、限られた色数の中で磨かれてきた実務の工夫(第三章)、色の心理効果を過信も軽視もしない誠実な態度(第四章)、そして色が正しく届くかを検算する習慣(第七章)——これらはすべて、後天的に学び、再現可能な形で身につけられる「型」である。

 

「センスがある人の配色」を観察すると、実はその人が、こうした型を意識的にせよ無意識にせよ、体に染み込ませていることが多い。本書が目指したのは、その型を、一足飛びの才能としてではなく、一段ずつ登れる階段として提示することだった。

 

次にタイルやスプライトに色を置くとき、読者はもう、白紙のキャンバスに勘だけで色を置く必要はない。どの光源を想定するか、ハイライトからシャドウまでどの色相をどう転がすか、四色でどんな印象を組み立てるか——本書で得た設計図を手に、一つひとつの判断に、根拠を持って向き合えるようになっているはずである。

 

姉妹書→BOOK-0222で色そのものの科学的な土台を確かめ、→DIC-0027で具体的な色名の辞書を引きながら、本書の設計図を実際のゲーム制作の現場で使い倒してほしい。

 

---

 

## 付録: 本書で使った計算式の早見表

 

実装の際に立ち返りやすいよう、本書で使用した計算式を1か所にまとめておく。いずれも本文中で実際に数値を代入し、検算まで行った式である。

 

```

① HSV→RGB変換(第二章・第四章で多用)

C = V×S(彩度による色の濃さ)

X = C×(1-|((H/60) mod 2)-1|)

m = V-C

Hの範囲によって(R',G',B')=(C,X,0)/(X,C,0)/(0,C,X)/(0,X,C)/(X,0,C)/(C,0,X)

最終的にR=(R'+m)×255、G=(G'+m)×255、B=(B'+m)×255(第二章2-3〜2-9で適用)

 

② 乗算合成(光源色×固有色、第二章2-13)

結果R = (光源R/255)×(固有色R/255)×255、G・Bも同様に各チャンネルごとに計算

 

③ WCAG相対輝度とコントラスト比(第七章7-1・7-2)

L = 0.2126×R'+0.7152×G'+0.0722×B'(R'等はsRGBガンマ補正後の線形値)

コントラスト比 = (明るい方のL+0.05)/(暗い方のL+0.05)

 

④ 色深度と総色数(第六章6-3)

総色数 = (1チャンネルあたりの段階数)³(例: 8bit=256³=16,777,216)

 

⑤ フロイド・スタインバーグ誤差拡散比率(第六章6-4)

右隣=7/16、左下=3/16、真下=5/16、右下=1/16

```

 

これらの式はいずれも、Pythonの標準ライブラリ(`colorsys`モジュール等)や、多くのプログラミング言語の標準関数で機械的に計算できるものばかりであり、本書のRGB・HSV・コントラスト比の数値はすべて、これらの式を用いて実際に計算した結果である。読者が独自の光源色・固有色の組み合わせを試したいときは、この早見表の式にそのまま数値を代入するだけで、本書と同じ手順を再現できる。

 

---

 

## 付録2: 実務でよくある失敗と対策

 

本書の理論を実際にタイル・スプライト・UIへ適用する際に、初心者がつまずきやすい失敗を7つ挙げる。いずれも第二章〜第七章で扱った原則の裏返しであり、失敗例から逆算することで原則の理解を補強できる。

 

**失敗1: 影に黒を単純に混ぜてしまう。**

固有色に黒(RGB(0,0,0))を単純乗算・単純ブレンドすると、彩度が失われて「泥色」になりやすい。第二章2-4〜2-9で示した六光源方式では、影は明度を下げるだけでなく色相を光源の補色方向へずらし、彩度をやや上げることで、暗くても濁らない影を作る。

 

**失敗2: 明度差をつけずに彩度だけでコントラストを作ろうとする。**

彩度(鮮やかさ)の差は目を引くが、明度(明るさ)の差がないと、白黒に変換したときや色覚多様性を持つ人にとって境界が消えてしまう。第七章7-1のWCAG相対輝度計算がまさにこの問題を数値化したものであり、彩度に頼った配色は必ず明度差も確認すべきである。

 

**失敗3: ハイライトを白一色で塗ってしまう。**

光源の色を無視した純粋な白(255,255,255)のハイライトは、艶はあってもどこか浮いた印象になりやすい。第二章2-13の乗算合成で示したとおり、ハイライトにも光源色をわずかに混ぜることで、素材と光の一体感が生まれる。

 

**失敗4: 補色を同じ面積で使ってしまう。**

第一章1-11で扱った補色配色は強いコントラストを生むが、両者を等面積で使うと画面がちらついて見づらくなる。実務では主色7割・補色2〜3割程度の面積比(70-25-5ルールに近い配分)にとどめ、補色は差し色として使うのが安定した結果を生みやすい。

 

**失敗5: 低ビット環境でのバンディングに気づかない。**

なめらかなグラデーションのつもりが、実機やスクリーンショットで見ると段差(バンディング)が見えることがある。第六章6-3・6-4で扱ったとおり、色深度が低い環境やレトロ調表現ではディザリング(誤差拡散・組織的ディザ)を意図的に適用することで、段差を目立たなくできる。

 

**失敗6: 色だけに情報を乗せてしまう。**

「赤いアイテムは強い」「緑のゲージは安全」といった情報を色だけで伝えると、色覚多様性を持つプレイヤー(第七章7-4で扱った日本人男性の約5%を含む)には伝わらないことがある。第七章7-5・7-7で述べたとおり、色に加えて形状・アイコン・パターン・数値表示を併用することが望ましい。

 

**失敗7: 光源の角度をタイルごとにバラバラにしてしまう。**

第三章3-5で扱ったアイソメトリックタイルの陰影規則(左上光源なら上面が最も明るく、左側面が中間、右側面が最も暗い)を無視して、タイルごとに陰影の向きが不揃いになると、マップ全体の光源が統一されていないように見え、違和感を与える。プロジェクト全体で光源方向を一つに固定し、全アセットに一貫して適用することが望ましい。

 

---

 

## 付録3: 用語集(五十音順)

 

本書で登場した主要な専門用語を、初出の章とあわせて簡潔にまとめる。読み返す際の索引として使ってほしい。

 

- **アンビエントオクルージョン(環境遮蔽)**: 物体同士が近接する隙間や溝で、周囲からの光が遮られて生じる柔らかい陰影。直接光の影とは別の暗さの層として重ねる(第三章3-2)。

- **色温度(いろおんど/しきおんど)**: 光源の色味をケルビン(K)という単位で表した尺度。数値が低いほど赤みがかった暖色、高いほど青みがかった寒色の光になる(第二章2-12)。

- **色覚多様性(しきかくたようせい)**: 色の感じ方が多数派と異なる特性。C型・P型・D型などに分類され、日本人男性のおよそ5%が該当するとされる(第七章7-4)。

- **色深度(いろしんど/しきしんど)**: 1チャンネルあたりの色の段階数を表す指標。8bitなら256段階で総色数は256の3乗、10bitなら1024段階で総色数は1024の3乗になる(第六章6-3)。

- **カラースクリプト**: 物語全体の色調変化を1枚の絵にまとめた設計図。ピクサーが『トイ・ストーリー』で確立した手法(第五章5-5)。

- **カラーユニバーサルデザイン(CUD)**: 色覚の多様性に関わらず情報が伝わるよう配慮した配色設計の考え方。日本ではNPO法人CUDOが推進している(第七章7-5)。

- **同時対比(どうじたいひ)**: 隣接する色同士が互いに影響し合い、実際の数値以上に対比が強調されて知覚される現象。シュヴルールが1839年に法則化した(第二章2-2)。

- **コントラスト比**: 2色の相対輝度から算出する、読みやすさの指標。WCAGでは通常テキストで4.5:1以上が推奨される(第七章7-1)。

- **サブサーフェス・スキャッタリング(表面下散乱)**: 光が物体表面のすぐ下に入り込み、内部で散乱してから出てくる現象。肌などの半透明な質感の陰影を柔らかく見せる(第二章2-15)。

- **彩度(さいど)**: 色の鮮やかさの度合いを表す属性。彩度が高いほど鮮やか、低いほどくすんだ灰色に近づく(第一章1-1)。

- **三色配色(トライアド)**: 色相環上で等間隔(120度おき)に選んだ3色を組み合わせる配色技法(第一章1-11)。

- **色相(しきそう)**: 赤・青・黄のような「色みの種類」を表す属性。色相環という円環上の位置で表される(第一章1-1)。

- **セルシェーディング**: 陰影を滑らかなグラデーションではなく、少数の段階(多くは2〜3段階)に区切って塗る技法。アニメ調・トゥーン調の質感を作る(第三章3-1)。

- **ディザリング**: 少ない色数しか使えない環境で、隣接ピクセルの色を交互に並べることで、遠目には中間色があるように錯覚させる技法(第六章6-4)。

- **PCCS**: 日本色彩研究所が1966年に発表した配色体系。色相24分割とトーン12種による2属性の考え方を採用する(第一章1-9)。

- **バウンスライト(反射光/回り込み光)**: 主光源が周囲の物体表面で反射し、間接的に別の面を照らす光。影の中に周囲の色が薄く映り込む効果を生む(第三章3-3)。

- **ヒューシフト(色相シフト)**: 陰影を作る際、明部では光源の色相へ、暗部では光源の補色側へと色相そのものを少しずつ動かす技法。単純な明暗だけの陰影より鮮やかで自然な印象になる(第二章2-1)。

- **分割補色配色(スプリットコンプリメンタリー)**: 基準色の補色そのものではなく、補色の両隣の2色を組み合わせる配色技法。補色配色よりやや穏やかな対比になる(第一章1-11)。

- **ポスタリゼーション**: 滑らかな階調を少数の段階に減らす処理。色数の少ないレトロ表現や、セルシェーディングの土台として使われる(第六章6-3)。

- **補色(ほしょく)**: 色相環上で正反対に位置する2色の関係。組み合わせると互いを最も強く引き立て合う(第一章1-2)。

- **明度(めいど)**: 色の明るさの度合いを表す属性。同じ色相・彩度でも明度を変えるだけで陰影の基本が作れる(第一章1-1)。

- **四色配色(テトラード)**: 色相環上で長方形または正方形を描くように選んだ4色を組み合わせる配色技法(第一章1-11)。

- **類似色配色(アナロガス)**: 色相環上で隣り合う近い色同士を組み合わせる配色技法。まとまりのある落ち着いた印象になりやすい(第一章1-11)。

 

---

 

## 付録4: 練習課題

 

本書の内容を実際に手を動かして確認するための課題を4つ挙げる。いずれも紙とペン、または簡単な画像編集ソフトがあれば取り組める。

 

1. 第一章1-11の五配色理論(補色・類似色・三色配色・分割補色配色・四色配色)を使って、同じモチーフ(例: 一本の木)を5パターンの配色で塗り分け、印象の違いを比較する。

2. 第二章2-4〜2-9の六光源グラデーション(白・黒・赤・黄・緑・青)を使って、同じ球体を6種類の光源のもとで陰影づけし、色相・彩度・明度がそれぞれどう変化するかを観察する。

3. 第六章6-3・6-4のポスタリゼーションとディザリングを使って、同じグラデーション画像を「元のなめらかな状態」「4段階のポスタリゼーション」「ディザリング適用」の3通りで書き出し、見た目の違いを比較する。

4. 第七章7-1・7-2のコントラスト比計算式を使って、自分が普段使っているアプリのUIから文字色と背景色を選び、実際にコントラスト比を計算してWCAG AA基準(通常テキストで4.5:1)を満たしているか検算する。

 

これらの課題はいずれも、本書内の数値やRGB値をそのまま使って再現できるように設計してある。答え合わせは各課題が参照する章の数値・図表と照らし合わせることで行える。手を動かして初めて、色相・彩度・明度という3つの属性が独立に動く感覚がつかめるはずである。

 

---

 

## 出典・参照

 

本文は確立された色彩学・デザイン理論の基礎知識と、WebSearchによる裏取りに基づき、自分の言葉で構成した(外部サイトの文章転載は行っていない)。六光源グラデーションの具体的なHSV/RGB数値は、本書の執筆時にHSV→RGB変換式に基づいて計算した実測値であり、そのまま数値検算が可能である。

 

**配色理論(第一章)**

- Johannes Itten, *The Art of Color* (原著独語 *Kunst der Farbe*, 1961年)におけるバウハウスの色相環・配色調和(補色・類似色・三色配色・分割補色・四色配色)の体系化。

- RYB(伝統的な絵の具の色相環・減法混色)とRGB(デジタル画面・加法混色)の区別。

- PCCS(Practical Color Coordinate System、日本色研配色体系): 一般財団法人日本色彩研究所が1966年に発表(1964年に「カラーハーモニーパレット」として着想)。色相24分割・トーン(明度+彩度の統合軸、v/b/s/dp/lt/sf/d/dk/p/ltg/g/dkgの12種)による2属性体系。

- 日本の伝統色(藍色・紅色等)の染料由来・歴史的背景: 一般に知られる染織史の知見に基づく。

 

**陰影・グラデーション技法(第二章・第三章・第六章)**

- ヒューシフト(hue shifting)技法: ピクセルアート・ドット絵実務における、明部は光源色へ・暗部は光源色から離れる方向への色相操作。複数の実務解説記事(Blue Canary、mlpds.art等のピクセルアート指南記事)で共通して説明されている技法。

- Michel Eugène Chevreul, *De la loi du contraste simultané des couleurs*(『色の同時対比の法則』、1839年)。隣接する色が互いに補色を帯びて知覚される現象の発見。印象派・後期印象派への影響。

- 色温度(ケルビン)の代表値(ろうそく約1900K・直射日光約5000〜5500K・D65標準昼光6500K・日陰7000〜8400K等): 写真・照明分野で一般的に用いられる公開資料に基づく。

- サブサーフェス・スキャッタリング(表面下散乱、肌の反射光の約94%を占めるとする分析): 3DCGレンダリング分野の技術解説記事に基づく。

- セルシェーディングとポスタリゼーションの関係: 2009年発売『ボーダーランズ』における実装例。

- 色深度と色数の関係(8bit=256³/10bit=1024³/12bit=4096³)は本書による計算実測値。

- NESの色数制約(マスターパレット約54色・実質同時発色約25色): NESdev技術コミュニティの公開資料に基づく。ゲームボーイの4段階濃淡表示: 同ハードウェアの公開仕様に基づく。

- Floyd-Steinbergディザリング: Robert W. Floyd & Louis Steinberg(1976年)発表のアルゴリズム(誤差拡散比率7/16・3/16・5/16・1/16)。組織的ディザ法(バイヤー・マトリクス): Bayer(1973年)発表。

- イージング(緩急曲線): Robert Penner(2002年、Flashアニメーション向け著書にて体系化)。

 

**色彩心理学(第四章)**

- Andrew J. Elliot & Markus A. Maier, color-in-context理論(2012年)、およびElliot, Maierらによる色彩心理学の理論的・実証的知見のレビュー論文(2015年頃、Frontiers in Psychology誌等に掲載)。

- Johann Wolfgang von Goethe, *Zur Farbenlehre*(『色彩論』、1810年)における暖色(プラス側)・寒色(マイナス側)の整理。

- Andrew J. Elliot & Daniela Niesta, "Romantic Red: Red Enhances Men's Attraction to Women"(2008年)、およびGabrielle K. Lehmann, Andrew J. Elliot & Robert J. Calin-Jageman, "Meta-Analysis of the Effect of Red on Perceived Attractiveness"(2018年)による、当初仮説の効果量がその後の追試でほぼ消失したとする再検証。

- 大山正・齋藤美穂 編著『色彩学入門 — 色と感性の心理』(東京大学出版会、2009年)。色の知覚・感情効果、色彩調和と配色、色彩と安全等を扱う日本語の色彩学教科書。

 

**実例(第五章)**

- ゲームUIにおける配色慣習(赤=ダメージ・青=マナ・緑=回復・黄=警告)、パッケージデザインにおける配色慣習(緑=天然・健康、赤=食欲・エネルギー)、ブランドロゴにおける青=信頼性評価の傾向は、複数のデザイン実務解説記事における共通した記述に基づく、業界レベルで広く共有された経験則として紹介した。

- カラースクリプト: Ralph Eggleston(プロダクションデザイナー)による『トイ・ストーリー』(1995年、ピクサー)での確立、以後の大手アニメーションスタジオへの波及に関する公開資料に基づく。

- 色彩検定(文部科学省後援・3級/2級/1級/UC級)、カラーコーディネーター検定試験(東京商工会議所主催・スタンダード/アドバンスクラス)に関する各実施団体の公開資料に基づく。

 

**アクセシビリティ(第七章)**

- W3C, Web Content Accessibility Guidelines (WCAG) 2.1、コントラスト比の計算式(相対輝度・sRGBガンマ補正)、達成基準1.4.3(コントラスト最小限度)および達成基準1.4.11(非テキストのコントラスト)。

- NPO法人カラーユニバーサルデザイン機構(CUDO)による、色覚多様性の分類(C型・P型・D型等)・日本人男性における色覚多様性の割合(約5%)・推奨配色セット(アクセント9色+ベース7色+無彩色4色、合計20色)に関する公開資料。

- 日本産業規格 JIS Z 9103「図記号―安全色及び安全標識」(2018年改正版)の6安全色(赤・黄赤・黄・緑・青・赤紫)と色覚多様性への配慮に関する規格情報。

- 色覚多様性シミュレーション: Brettel, H., Viénot, F., & Mollon, J. D.(1997年)、Viénot, F., Brettel, H., & Mollon, J. D.(1999年)、Machado, G. M. et al.(2009年)によるLMS色空間ベースのモデル。

 

本書中の色彩心理学に関する記述のうち、「暖色・寒色の知覚」「特定の色と特定の感情の対応」については、確立した知見と文化依存性の強い通説とを意識的に書き分け、断定を避けた。特にレッド・ロマンス仮説の事例は、当初の研究結果が後の追試で大きく修正された実例として、あえて詳しく紹介した。

 

---

 

> 関連書: →BOOK-0222(色彩学第1巻 — 光と目と色) / →DIC-0027(色名大辞典) / →BOOK-0004(音楽第1冊、色の三属性と音の三要素の対応で参照)

 

 





# BOOK-0223 色彩学 第2巻 — 配色理論と六光源グラデーション設計(デザイン実践編)
  1. 目次
  2. 小説情報
  3. 縦書き
  4. しおりを挟む
  5. お気に入り登録
  6. 評価
  7. 感想
  8. ここすき
  9. 誤字
  10. 閲覧設定