ドット絵で立体感を出す方法｜陰影・反射光・コントラスト設計の完全ガイド

ドット絵の立体感は、光の5要素であるハイライト、明部、暗部、投影影、反射光を限られた色数の中でどう置くかで決まります。
とくに左上45°光源は、スーパーファミコン時代のRPGキャラクターグラフィックから現代のインディーゲームまで使われてきた標準設定です。
初心者がつまずきやすいのは、輪郭全体を均等に暗くするピロー・シェーディングと、明度の境目が帯状に見えるバンディングでしょう。
どちらも光源の一貫性と境界処理を直せば改善でき、反射光やリムライトを少し足すだけでも形の見え方は変わります。
陰色を黒で潰さずHSVで色相を少しシフトし、1〜2ピクセル単位で反射光を置くと、古い16色制限の発想を現代の制作にそのまま活かせます。
おすすめです。
しましょう。

この記事でわかること

• 光の5要素がドット絵の立体感をどう分担しているかを理解する
• 左上45°光源がSFC時代のRPGグラフィックで標準化した理由
• ピロー・シーディングとバンディングの見分け方と直し方
• 反射光を1〜2ピクセルで置くと輪郭の浮き上がり感がどう変わるかを知る
• HSVの色相シフトとディザリングで16色制限の陰影をどう補うか

立体感の正体──光の5要素を知る

立体感は、ハイライト（スペキュラー）・明部・暗部（陰）・投影影・反射光の5要素で組み立てると理解しやすいです。
どれか1つでも欠けると形は読めますが、量感や素材感は急に弱くなります。
ドット絵でも同じで、限られた色数の中でこの5要素をどう割り振るかが、見た目の説得力を左右します。

ハイライトは光が最も強く当たる点で、金属や濡れた質感では小さく鋭く出ます。
明部は面の向きが光に近い部分、暗部は光が届きにくい面です。
さらに、物体が地面や隣の部位に落とす投影影が形の接地感を作り、暗部の縁に入る反射光が輪郭をわずかに持ち上げます。
つまり、立体感は「明るい・暗い」だけではなく、光がどこで跳ね返り、どこで遮られるかまで含めて成立するのです。

光源をひとつに絞るのが基本原則なのも、この仕組みがあるからです。
光の向きが複数あると、ハイライトの位置も影の落ち方も競合し、面の向きが一気に曖昧になります。
複数光源は上級者向けで、まずは左上45°のように一方向で整理したほうが、キャラクターの頭・肩・脚のどこが前に出ているかを読み取りやすいでしょう。
スーパーファミコン時代のRPGキャラクターグラフィックから現代のインディーゲームまで、この単純さが広く使われ続けているのは理にかなっています。

ドット絵では解像度が荒いため、面の境界を細かく描き分けられません。
だからこそ、ハイライトと陰の配置が視覚的立体感のほぼすべてを決めます。
輪郭全体を均一に暗くするピロー・シェーディングは、形の膨らみを消してしまう代表例ですし、明度差の境目が縞になって見えるバンディングも避けたい表現です。
反射光を暗部の縁に1〜2ピクセルで置き、必要ならディザリングで中間調を作る。
おすすめです。
まずはこの配置を見直して、光が一つの方向から当たっているかを確かめてみてください。

陰影の3段階分け──明部・中間・暗部の設計

ドット絵の陰影は、光源の位置を先に固定してから面ごとに明部・中間・暗部を割り当てると安定します。
最も標準的なのは左上45°の光で、スーパーファミコン時代のRPGキャラクターもこの前提で描かれてきました。
まず光が当たる面を明部、斜めを向く面を中間色、反対側を暗部に振り分けましょう。

曲面や大きな装甲のように面が連続する形では、3段階だけで止めず、4〜5段階のカラーランプに広げると丸みが出ます。
ここで効くのがHSVの色相シフトで、暗くするだけでなく少し補色側へ寄せると、黒ずみすぎず立体感が保てます。
ディザリングを重ねれば色数を増やさずに段差をなじませられるので、限られた16色でも表現の幅が広がるでしょう。

境界線の処理も見落とせません。
明度段階の切り替えを直線で置くと等高線のような縞、つまりバンディングが目立つため、境目はジグザグに崩し、不規則な形でまたぐようにします。
これだけで面のつながりが自然になり、輪郭が硬く見えにくくなるのです。
ピロー・シェーディングを避ける意味でも、面の向きに応じた境界処理を意識してみてください。

暗部は怖がって削りすぎないほうがきれいです。
影面積を広めに取ると、明るい部分との対比で光源の向きがはっきり読み取れるからです。
暗部の縁に1〜2ピクセルの反射光を置けば沈み込みを防げますし、輪郭に薄いリムライトを添えるとキャラクターが背景から浮き上がります。
おすすめです。

NG例：ピロー・シェーディングと避けるべきパターン

ピロー・シェーディングとは、輪郭に沿って均等に陰をかける塗り方であり、光源方向が曖昧になるため、形がふくらんでいても平面的に見えてしまいます。
外周をなぞるように同じ密度で暗部を置くと、立体を支えるはずの影が「縁取り」のように働き、面の向きが読み取りにくくなるのです。
ドット絵では1ピクセル単位の差がそのまま形の説得力に直結するので、陰を均等に配る発想そのものが危うい。

バンディングも似た落とし穴です。
明度段階が同じ形で規則正しく並ぶと、そこに疑似的な輪郭線が生まれ、実際にはないエッジを見せてしまいます。
層が水平に揃いすぎると、面の連続性よりも段差だけが目立ちます。
だから、暗部を増やしたのに立体感が上がらない、むしろ硬く見えるという逆転が起きるのです。

正しい代替は、光源方向を先に固定し、その向きに従って陰の境界ラインを不規則に折ることです。
輪郭に沿って丸く囲うのではなく、面の向きが変わる場所でだけ影を切り替えると、バンディングはほどけます。
境界を少し崩すことで、同じ明度でも「面が回っている」情報が残る。
形を整えすぎないことが、かえって自然さを生みます。

見分け方は明快です。
中心が最も明るく、輪郭に向かって暗くなるグラデーション構造になっていれば、ピロー・シェーディングの疑いが濃いでしょう。
ふくらみの中心が光を受け、外側に行くほど影が深くなるのは、球やクッションのような単純形状では自然ですが、複雑なパーツでは危険信号になります。
迷ったら、暗部が「形の説明」になっているかを確認してみてください。
影が輪郭の装飾になった瞬間、立体は弱くなるのです。

反射光・リムライトの追加で奥行きを倍増させる

反射光は、暗部をただ暗く塗りつぶさず、地面や周囲オブジェクトからの跳ね返りを拾って輪郭を生かす技法です。
入れる位置は暗部の外側ではなく、あくまで暗部の内側の縁。
1〜2ピクセルだけ明るさを差し込むと、影の厚みが残ったまま面の向きが読めるので、立体感が急に増します。
背景色と接する場所に置くと境界がにじむため、先に暗部の形を決めてから差すのがきれいです。

リムライトは逆光に近い状況で効きます。
キャラクターの外周だけを細く光らせることで、背景と被写体の色が近くても切り分けやすくなり、シルエットの輪郭が一段はっきりします。
太く塗ると発光表現に寄ってしまうので、髪、肩、腕、衣服のエッジなど、見せたい側だけを選んで細く入れるのがコツでしょう。
反射光と違って、こちらは「面の内側」ではなく「外周」に置く点が違いです。

スペキュラーハイライトは、金属・ガラス・水面のような硬い光沢に向きます。
広い面を白くするのではなく、最明色を1〜3ピクセルの点として置くと、素材の硬さと光の方向が同時に伝わります。
点が大きすぎるとベタ塗りに見え、逆に小さすぎると見落とされるので、曲面なら細く、平面なら鋭く入れるとよいです。
特にアニメ調のピクセルアートでは、ハイライトの形そのものが材質説明になるため、位置の説得力が仕上がりを左右します。

色数を増やさずに反射光を表現したいなら、既存パレットの最明色を暗部の縁ピクセルへ使いまわす方法が有効です。
新しい中間色を作らなくても、同じ明るさを「面の先端」と「影の内側の端」に振り分けるだけで、光の回り込みが生まれます。
ポイントは、明色を面全体に散らさないことです。
少ない色数ほど配置の意図が見えるので、どのピクセルが反射光で、どのピクセルが主光源かを切り分けてみてください。

カラーランプ設計──色相シフトで陰影に深みを出す

色相シフトを使ったカラーランプ設計では、暗部をただ黒へ寄せるのではなく、主役色の温度を保ったまま陰影を作ります。
赤系なら影を紫〜青寄りへわずかに振ると、輪郭が沈まずに奥行きだけが増し、塗りが急に平板になるのを防げます。

陰色は明度を下げながら彩度を上げる、というHSV調整が要点です。
純黒を混ぜると色の生命感が切れ、純白で飛ばすと素材感が消えやすいので、暗部もハイライトも「色のまま」持ち上げる発想が効きます。
赤キャラクターなら、暗部#8B0000から中間#CC2200、明部#FF6644、スペキュラー#FFAA88へつなぐと、同じ赤でも面の向きが読み取りやすくなるでしょう。

この考え方は、色数が少ないピクセルアートほど効きます。色を足す代わりに、隣接ピクセルの密度や並び方で明暗差を補えば、段差の強い塗りでも破綻しにくくなります。

ディザリングはその補助に向いています。
市松模様ドットで2色を交互に置けば、中間色を追加せずにグラデーションを疑似表現でき、面の移ろいを細かく見せられます。
単色のベタ塗りよりも柔らかく、しかも色数を圧迫しないため、限られたパレットで立体感を出したい場面に。
レトロ調の表現でも現代的な読みやすさでも、まずはこの2色のつなぎ方を試してみてください。

コントラスト設計──読ませる立体感のバランス調整

コントラスト設計では、まず明暗差をどこまで開くかが立体感の出発点になります。
コントラストが弱いと輪郭が空気に溶けたようにぼんやり見え、陰部と明部の明度差は最低でも30〜40%確保するのが目安です。
差を詰めすぎると面の向きが読めず、強すぎると今度は面のつながりが切れて見えるため、狙うのは「盛る」より「読ませる」配分でしょう。

輪郭線も同じ考え方で扱います。
明るい面の輪郭は1段明るく、暗い面の輪郭は1段暗くすると、面そのものの明暗と線の明暗が噛み合って立体感が増します。
線を均一に置くと記号としては整っても、面の向きが平板になるからです。
とくに小さなドット数で描くときは、輪郭の差がそのまま形の説得力になるので、線を「囲うもの」ではなく「面を補助するもの」として調整してみてください。

ただし、ゲームキャラとアイコンでは求められる立体感の強度が異なります。
キャラは視線を引きつけるためにある程度の陰影を使えますが、ゲームUIはまず読ませることが優先で、立体感を足しすぎると情報の階層が崩れます。
ここでは見栄えより判読性が基準になるため、面の厚みを見せるより、ボタンや記号の境界を素早く認識できるかを優先しましょう。

スーパーファミコンの16色/パレット時代のゲームでは、手前側を明るく、奥側を暗くする奥行き表現が定石でした。
使える色数が限られるぶん、色相の差より明度差が距離感の主役になり、しかも少ない情報で画面全体の前後関係を示せるからです。
手前を持ち上げ、奥を沈めるだけで、同じキャラでも配置やサイズ感がすっと読みやすくなります。
こうした発想は今のピクセルアートでも有効で、限られた色で深さを出したい場面にそのまま応用できます。
しましょう。

実践：球体・箱・キャラクターへの陰影適用

球体は、陰影の全要素を1つで確認できる練習台です。
光部・暗部・反射光・スペキュラーが同居するので、どこに何を置けば立体に見えるのかを、迷わず見分けられます。
まず明るさのピークを決め、次に境界を締め、最後に反射光を少し戻す。
この順番で塗ると、球体だけで光の設計図が読めるようになるでしょう。

立方体は考え方が逆で、各面を単色に分けるだけで成立します。
面の向きに応じて明・中・暗の3段階へ整理すれば、グラデーションを細かく追わなくても奥行きが出ます。
球体で「丸さの連続変化」を掴み、立方体で「面の切り替え」を掴む。
形が違うだけで、陰影の見方も変わるのです。

キャラクターに応用するときは、服・肌・髪を同じルールで扱わず、パーツ別にカラーランプを分けるのが扱いやすいです。
肌はなだらかな明暗、髪は強いハイライト、服は素材ごとの硬さが出るので、ひとまとめにすると混線します。
そこでパレット内でグループ管理しておくと、色数が増えても迷いません。
どのパーツにどの明暗差を使うかが固定されるため、表情や動きの差分も作りやすくなります。

Asepriteのグラデーションツールは、この整理と相性が良いです。
両端色を先に決めれば、その間のカラーランプを一括生成できるので、手作業で1段ずつ作るより速く、配色の揺れも抑えられます。
まず肌用、次に服用、最後に髪用という順でランプを作り、同じ明度差で並べてみてください。
パレットの設計を先に固めると、陰影そのものを描く時間に集中できるようになります。