ドット絵のライティングと陰影｜色温度と多光源

ドット絵のライティングでは、影をベース色の明度だけ落として作ると、画面全体がのっぺりして濁りやすい。
そこで必要になるのが、影を暗くする操作ではなく、光と影それぞれの色を設計する発想への切り替えです。
暖色の光源には寒色の影を合わせ、色相を補色方向へ回しながら明度差を組み直すと、同じキャラでも輪郭が締まって見えます。
さらに色温度、ヒュー・シフト、多光源の3本柱を押さえれば、5〜6色の濁らないランプを自分で組み、リムライトや環境光で奥行きまで出せるようになります。

ライティングは「暗くする」より「光と影の色を設計する」こと

ライティングを「どこを暗くするか」だけで捉えると、影はすぐに濁って見えます。
ドット絵では、光と影がそれぞれ別の色を持つ前提に切り替えるだけで、同じ32x32の素材でも立体感と鮮やかさが変わるのです。
ここで扱うのは明度を落とす作業ではなく、色温度、ヒュー・シフト、多光源を使って色の流れを設計する考え方になります。

「陰」と「影」は別物——2種類の暗さを分けて考える

ドット絵の暗さには、物体そのものの光が当たらない面である陰（form shadow）と、床や隣接面に落ちる影（cast shadow）があり、まずこの2つを分けないと置き場所が曖昧になります。
32x32のリンゴを思い浮かべると分かりやすく、実の暗い面は球体の丸みに沿って回り込み、机に落ちる影は接地面に沿って別レイヤーで伸びるからです。
さらに cast shadow は core shadow より暗くなるので、同じ「影」でも役割が違います。
ここを分けるだけで、どのドットを物体側に置き、どのドットを床側に置くかが自然に決まるでしょう。

明度だけ落とした影が濁って見える理由

中級者がつまずきやすいのは、影をベース色の明度だけ下げた色として扱うことです。
明度だけを落とすと、色相は動かないまま彩度の印象が相対的に弱まり、灰色っぽく濁って見えます。
これが作品全体を地味にする原因で、特に単純な形ほど差が出やすい。
たとえば同じスライムを、明度だけ下げた影と青紫へ色相を回した影で塗り分けて比べると、後者だけが立体的で、しかも鮮やかに見えます。
値ランプは5段が基本で、ハイライトから影へ単純に黒へ落とすのではなく、暗部ほど青紫側に寄せ、彩度を少し保つほうが濁りを防げます。
スライムのような単純な物体なら6色ランプでも十分まとまります。
ポイントは、暗くする操作を減光としてではなく、色の移動として見ることです。

光源は白とは限らない——色温度という前提

光源が白色とは限らない以上、影の色も白からの引き算では決まりません。
太陽は暖色、蛍光灯は寒色、夕焼けは強い橙というように光源自体が色温度を持ち、その色に対して影は反対方向へ寄ります。
暖色の光が当たる場面で影が青〜紫に振れるのは、直接光を失った面がアンビエント光の影響を強く受けるからです。
ここを押さえると、ライティングは「どこを暗くするか」ではなく「光と影がそれぞれどんな色を持つか」という設計に変わります。
ハイライトは光源の色へ近づけ、暗部は補色方向へ回す。
これが本記事の前提です。
色温度、ヒュー・シフト、多光源の3本柱で考えれば、既存の「影の付け方」や「立体感の出し方」の一段上で、色そのものを設計できます。
リムライトで輪郭を1〜2pxだけ分離し、環境光で陰側ののっぺりをほどき、反射光で下端に少し色を返す。
おすすめです。

光源の方向と一貫性——立体感の土台を固める

光源の方向を先に決めておくと、影の置き方が迷いなく進み、立体感の土台が揺れません。
ドット絵では上からの光が最も自然で、左上45度か右上45度を仮の標準にすると、ハイライトと影の分担が読みやすくなります。
色を詰める前にこの前提を固めるだけで、後の設計はかなり機械的になるでしょう。

光源は上から——左上45度が無難な理由

ドット絵で最も自然に見える光源は上方です。
太陽も室内灯も視線より上にあることが多く、上から光が落ちる配置は見る側の経験とずれにくいからです。
左上45度か右上45度に振ると、面の上辺にハイライトを置きやすく、反対側に影を逃がせるため、少ない色数でも形が立ちます。
光の入口を先に固定しておくと、球体でも箱でも同じルールで読ませやすくなるのです。

ここで便利なのは、左上45度を仮の標準として全パーツに適用する運用です。
あとから1作品分まとめて右上へ反転しても、各パーツが同じ約束で描かれていれば統一感は崩れません。
最初からパーツごとに光を迷わせるより、いったん決め打ちしてから全体を回すほうが、制作途中の判断コストを抑えられます。
おすすめです。

1作品で光源方向は固定する

1つの作品の中で光源方向を変えないのが金則です。
キャラは左上、背景は右上、アイテムは真上、という具合に光がばらつくと、色が整っていても画面の奥行きが急に安っぽく見えます。
視覚は細部よりもまず整合性を拾うので、方向の不一致は立体感の破綻として真っ先に目に入るわけです。
だからこそ、最初に決めた光源は途中で触らないほうがいいでしょう。

この一貫性は、後工程のカラーランプ適用にも効いてきます。
明部をどこまで押し上げるか、暗部をどこまで落とすかは、光の向きが定まって初めて判断できます。
色の話に入る前に紙やメモへ「左上45度」あるいは「右上45度」と書き切っておくと、迷いが減り、全体の処理がそろいます。
実際に球体を1つ描いて terminator を上下にずらすと、同じ球でも光の角度が変わって見えるはずです。
境界線の効きが、そこで体に入ります。

terminator と core shadow の置きどころ

terminator は明暗の境界で、core shadow はその陰側に続く最暗部です。
ここをどこに引くかで、物体の丸みが強く出るか、角ばって見えるかが決まります。
単に暗い色を足すだけではなく、まず境界を置き、そのすぐ内側に最暗部を寄せると、面の回転がはっきり読み取れるのです。
特にドット絵ではピクセル単位の差がそのまま造形の印象になるため、境界の位置決めがそのまま設計になります。

この考え方は、下からの光を扱うときにもっと分かりやすくなります。
ローキー・アングルは人物の輪郭を不気味に見せる演出へつながり、同じ顔でも印象が一変します。
つまり光源方向は「正しさ」のためだけのものではなく、何をどう見せたいかを決める道具でもあるということです。
terminator と core shadow を意識しておけば、怖さも柔らかさも、狙って作れるようになります。
おすすめです。

色温度——暖色の光には寒色の影を

色温度の基本は、光源の色と影の色を切り分けて見ることです。
暖色の光が当たる場面でも、影はその光が届きにくい側で天空光や環境光に照らされるため、青や紫へ寄りやすくなります。
逆に夜や水中のような寒色光源では、影は補色方向の暖色へ振ると、画面全体の空気が締まります。

実世界の光には温度がある——影が青くなる理屈

実世界の光には色温度があり、黄から橙に寄った光ほど、影は青から紫へ動かすと自然に見えます。
理由は単純で、影は「光がない場所」ではなく、直接光を避けた面が青い天空光や周囲のアンビエント光で照らされた結果だからです。
だからこそ、明度だけを下げた灰色の影より、色相ごと動かした影のほうが、空気や時刻まで乗ってきます。

この発想は、影の処理を三つの操作に分けると整理しやすいです。
色相を光源の補色方向へ回し、明度を下げ、彩度はむしろ少し上げる。
Aseprite の HSV スライダーでも、影色の H を青方向へ20〜30度動かしながら S を少し足すと、濁りが引いて輪郭が立ちます。
明度だけを落とす塗り方との違いは、ここではっきり出ます。

暖色光×寒色影／寒色光×暖色影の早見

暖色の光源、たとえば夕暮れの橙光や室内の黄灯では、影は寒色寄りに振ると安定します。
物体の陰は光源色の反対側へ逃がす、と覚えると判断が速いでしょう。
逆に、夜の月明かり、水中、蛍光灯下のような寒色光源では、影は相対的に暖色へ寄せるほうが説得力を持ちます。
光源色を決めたら、影は必ず補色方向へ振る、という見方です。

灰色の岩を塗る場面で、明度だけを下げた影と、青紫を混ぜた影に橙のハイライトを置いた影を並べると差は明快です。
前者は形は読めても空気が止まり、後者は曇天の湿り気や夕方の気配まで拾います。
色の差は小さくても、シーンの時間帯を決める力は大きいのです。

ハイライトは光源の色に寄せる

影だけでなく、ハイライトも同じ理屈で考えるとまとまりが出ます。
ハイライトは物体表面で光が跳ね返った部分なので、暖色光なら黄から白へ、寒色光なら青白へ寄せるのが基本です。
ここで影を補色方向に振り、ハイライトを光源色へ寄せると、面の向きと光の方向が一目で伝わります。

たとえば夕暮れのシーンなら、橙の光に対して紫の影を置き、最も強い当たりだけを黄白く抜くと空気が一気に変わります。
月夜なら、青白いハイライトの横に、わずかに暖色を含む反射を置くと冷え切った印象に人肌のような残り香が出ます。
色温度は正しさのためだけの理屈ではなく、雰囲気を設計するための主役です。
しましょう、ここまで決めると塗りの迷いが減ります。

ヒュー・シフトでカラーランプを組む

ヒュー・シフトで組むカラーランプは、明度だけを上下させる発想から一歩進めて、色相も同時に動かすことで立体感を作る手法です。
暗部は青紫へ、明部は黄方向へ寄せると、同じ赤系の物体でも面ごとの温度差が自然に分かれます。
赤いキャラのベース色から1本のランプを作れば、顔、服、影、ハイライトまで統一した設計で回せるようになります。

ヒュー・シフトとは——明度と一緒に色相を回す

ヒュー・シフトとは、明度を1段動かすごとに色相も一緒に回す配色手法です。
明るくするほど色相を黄方向へ、暗くするほど青紫方向へ寄せることで、単にVだけを上下した灰色っぽい並びより、はるかに鮮やかで奥行きのあるランプになります。
色温度の変化をそのままパレットに落とし込む考え方なので、光が当たる面と影の面が同じ物体の中で無理なく分かれます。

たとえば赤いキャラなら、暗部を赤から赤紫、さらに青紫へ振り、明部を赤から橙、黄白へ回す構成が扱いやすいでしょう。
こうして1本のランプを先に決めておくと、別パーツを描くたびに色を迷わず済み、全身の統一感も保ちやすくなります。
色を増やすのではなく、少ない段数の中で温度差を作るのがコツです。

HSVスライダーでランプを5〜6色作る手順

作成はHSVスライダーでH（色相）・S（彩度）・V（明度）を独立して動かすのが基本です。
まずベース色を置き、そこからVを数段刻みで振って5〜6色の階段を作ります。
次にHを1段あたり10〜30度ほど回し、明るい側は黄寄り、暗い側は青紫寄りにそろえると、段ごとの差が見えやすくなります。
回しすぎると別の色に見えてしまうので、隣り合う2色が「違うが地続き」に感じる範囲に収めるのがポイントです。

Aseprite等にはシェード、ライト、ヒュー、サチュレーションのバリエーションを自動生成するスクリプトもあり、下地づくりを高速化できます。
手作業で1色ずつ探すより、まず機械的に段を出してから人間の目で整えるほうが、少ない手数で安定したランプに仕上がる。
パレット上でHSVのVだけ動かした濁った並びと、Hも回した並びを横に置いて見比べると、その差は一目瞭然です。

彩度の上げ下げで濁りを防ぐ

1物体のカラーランプは5〜6色が標準で、彩度カーブをどう付けるかが濁りを防ぐ鍵になります。
明るい側へ向かうほど彩度を落として最終的に白へ寄せ、暗い側へ向かうほど彩度を上げて青紫へ寄せると、明部は抜け、暗部は沈みます。
逆に、Vだけを変えてSを雑に置くと、途中の段が泥のようにくすみ、せっかくの階調が死んでしまうのです。

隣り合う色の差を明確に取ることも忘れないでください。
差が小さすぎると、どの段も見分けがつかず、労力のわりにのっぺり見えます。
少ない色で勝負するドット絵では、この「隣同士だけをはっきり変える」設計感覚がそのまま仕上がりの強さになります。

多光源で奥行きを足す——リムライト・環境光・反射光

単一光源で陰影を作り切ったあとに第2、第3の光を足すと、画面は急に情報量を増します。
輪郭を分離する光、暗部に回り込む弱い光、床や隣接面の色を拾う光を少量ずつ重ねるだけで、32x32の小さなキャラでも奥行きがはっきり立ち上がるのです。
ポイントは主光源を主役のまま残し、補助光は脇役に徹させることだ。

リムライト（背面光）でシルエットを際立たせる

リムライトは、光源と反対側の輪郭に1〜2pxだけ明るい線を入れて、キャラを背景から切り離す手法です。
背景に埋もれやすいスプライトほど効き目がはっきり出て、輪郭が縁取られることで画面上に「浮き出す」印象になります。
完成済みの32x32キャラにまず1pxだけ入れてみると、どこまでが形でどこからが背景かが一気に読みやすくなるでしょう。

環境光で陰のっぺりを解消する

環境光は、周囲から回り込む弱い光で、陰側ののっぺり感をほどく役目です。
影一色で塗った暗部に、少しだけ寒色や空の色を足すと、暗いままなのに平坦ではなくなります。
輪郭線で形を見せるだけでは足りないとき、陰の中にもう一段階の立体を仕込む感覚で使うとよいです。
補助光はここでも控えめで、暗部全体を塗り替えるのではなく、陰の表面に息を吹き込む程度がちょうどいい。

反射光（バウンス光）で隣接面の色を陰に回す

反射光は、床や隣接面の色が物体の陰側下部に映り込む現象です。
たとえば草地に立つキャラなら、足元の陰に1〜2pxだけ緑を入れると、キャラと地面が同じシーンに属して見えます。
陰の下端に周囲の色がわずかに回るだけで、接地感や環境とのなじみが出るため、単なる影よりも説得力が増すのです。
ここでも入れすぎは禁物で、少量を精密に置くほうが主光源の方向性が崩れません。

やりがちな失敗と直し方

ピロー・シェーディング、ハイライト過多、黒混ぜの濁り、そしてディザリングの誤用は、どれも「塗り方の癖」に見えて、実際は光の設計を崩したときに出る症状です。
原因を症状で見分けられるようになると、どこを直せば画が戻るかが一気に早くなります。
まず押さえたいのは、立体感が失われるときは光源の不在を疑い、濁るときは明度だけで処理していないかを確認することです。
ぼやけや平板さは、局所的な修正より、光源・影・中間色の関係を組み直したほうが戻りやすいでしょう。

ピロー・シェーディングを脱却する

ピロー・シェーディングは、輪郭から内側へ均等に明るくして中央を一番明るく塗ってしまうため、不自然に見えます。
各パーツを光源を決めずに独立して処理すると、面ごとの向きが失われて、球体も頬も布も同じように膨らんだ印象になりがちです。
実際、左上45度に光源を固定し、ハイライトを光源側へ寄せ、core shadow を反対側へ集めるだけで、ピロー塗りの球は立体に戻ります。
まずは輪郭の明るさではなく、どの面が光を受けるかで考えましょう。

ハイライト・黒影の入れすぎを抑える

ハイライトは多いほど映えるわけではなく、全面が光ると面の差が消えて平板になります。
最も光を受ける1点に絞って面積を抑えるほど、素材感が締まり、金属やツヤの輪郭も読みやすくなるのです。
影も同じで、黒を混ぜると彩度が落ち切って色温度が消え、濁りの最大原因になります。
黒をやめて同明度の青紫に差し替えるだけで作品全体が締まる場面は多く、色温度の章で確認した原則がここでそのまま効いてきます。

ディザリングは『2色・境界』が原則

ディザリングは、滑らかなグラデを無理に作る技法ではありません。
境界で2色だけを混ぜるのが基本で、3〜4色を同時にディザると模様が解像せず、かえって濁って読めなくなります。
滑らかさが必要なら、ディザの回数を増やすより中間色を1色増やす方がでしょう。
ディザは「混ぜる」より「境界をなじませる」用途に向いています。
症状ベースで見るなら、のっぺりは光源不在や環境光不足、濁りは黒混ぜや明度だけの操作、ぼやけはピローやハイライト過多が疑いどころです。