ドット絵セルシェーディングの描き方とコツ

セルシェーディングは、明暗を滑らかなグラデーションではなく少数の段に量子化し、色のブロックで影とハイライトを置く塗り方です。
ソフト塗りと対になる考え方で、32x32の球体を左上光源・3トーンで塗るだけでも、影を1段入れるだけで立体感が立ち上がる手応えをつかめます。
破綻の8割は塗り始める前に決まるので、最初に光源を1方向へ固定し、ベース・影・ハイライトの3トーンを組み、純黒と純白は避けておきましょう。
準備を飛ばすとピロー塗りやバンディングに流れやすく、後から直すより最初の設計のほうが効きます。
手順は、ベースをフラットに塗る、反対側に影を1段だけ置く、光源側に少量のハイライトを足しながらヒューシフトで色味をずらす、の3段で整理できます。
影を寒色寄り、ハイライトを暖色寄りに振ると同じ色数でも奥行きが増し、暖色の光が寒色の影を生むという見方も腑に落ちるでしょう。
仕上げでは、ピロー塗りとバンディングを症状・原因・対処で見分け、セル塗り、ソフト塗り、ディザリングの使い分けまで押さえましょう。
AAは外周、ディザは内側、同じエッジで併用しない――この線引きまで決めておくと、ゲーム素材としての見栄えが安定します。

セルシェーディングとは？ドット絵での意味

セルシェーディングは、英語で cel shading / toon shading と表記し、日本語ではアニメ塗りと呼ばれます。
明暗をなめらかな階調でつなぐのではなく、少数の離散的な段に切り分けて見せる塗り方で、3D表現を平面的で手描き風に寄せる発想から生まれました。
ドット絵に持ち込むと、この考え方は影やハイライトを「色のブロック」として整理するための強い指針になります。

セルシェーディング（アニメ塗り）の定義

セルシェーディングは、光の情報を連続したグラデーションとして追うのではなく、ベース・影・ハイライトのような少数の段へ量子化して見せる表現です。
1つの色につき階調は5段以内に収まることが多く、まずは3段で考えると整理しやすいでしょう。
影に純黒、ハイライトに純白を置くのではなく、色相を少しずらしながら段差を作ると、平坦さを避けつつ色味が保たれます。

この「少ない段で割り切る」発想は、球体を塗る場面で特に分かりやすいです。
グラデーションを足せば立体的になると思いがちですが、境界が曖昧になるほど形はぼやけます。
むしろ光源を1方向に固定し、明るい面と暗い面をきっぱり分けたほうが、面の向きが読み取りやすくなるのです。
フラット塗りでのっぺりしやすい読者ほど、この逆説は体感しやすいはずです。

ドット絵と相性が良い理由

ドット絵はもともと色数が限られ、1ピクセル単位のエッジがはっきり見える表現です。
だからこそ、影やハイライトを滑らかにつなぐより、面ごとにくっきり分けたほうが形の情報が崩れません。
セルシェーディングでは、境界が線ではなく面の切り替わりとして見えるため、ピクセルアートの輪郭やブロック感と自然に噛み合います。

同じキャラをソフト塗りとセル塗りで塗り比べると、印象の差は明瞭です。
ソフト塗りは色を混ぜながら奥行きを作るので、絵画的でやわらかい空気を出しやすいのに対し、セル塗りは色のブロックを積み上げるぶん、輪郭やパーツの切れ味が前に出ます。
どちらが優れているかではなく、世界観に対してどの質感が合うかで選ぶ考え方になります。

ソフト塗り・グラデーション塗りとの考え方の違い

ソフト塗りは、影と光の境目をあえて曖昧にして、滑らかな移行そのものを魅力にします。
対してセル塗りは、段差を残すことで形を読ませる表現です。
つまり、前者は「混ぜる」ことで立体感を作り、後者は「分ける」ことで立体感を作る、という違いになります。

制作の感覚としては、セル塗りのほうが先に設計を固めやすいです。
光源を1方向に決め、ベース色を置き、影を1段、必要ならハイライトを1段足す。
ここまでを迷わず進めるだけで、画面の構造が締まります。
ソフト塗りと比べると工程は単純に見えますが、少ない段数の中で色味と面の向きを両立させるぶん、判断の基準がはっきりするのが強みです。

準備：光源とパレットを先に決める

セル塗りは、塗り始める前に勝負の大半がつきます。
まず光源を1方向に固定し、次にベース・影・ハイライトの3トーンを先に決めておくと、面ごとの明暗がぶれません。
左上から光が来ると想定すれば、影をどこへ置くかが自然に定まり、迷いを減らせます。

光源を1つに固定する

光源が曖昧なまま塗り始めると、左から差す影と右から差す影が同じ絵の中に混ざり、立体感が崩れます。
そこで最初に矢印を1本だけ描き込み、光が画面のどちらから来るのかを固定します。
定番は画面左上です。
これだけで影は反対側の右下へ集まり、各面の陰影を論理的に置けるようになります。

セル塗りは、明暗を滑らかに追う作業ではありません。
むしろ「この面は光を受ける」「この面は影になる」と割り切ることで、少ない段数でも形が読みやすくなる塗り方です。
だからこそ、塗り始める前に光源を決める行為そのものが、破綻を防ぐ土台になります。

ベース・影・ハイライトの3トーンを組む

次に、ベース1色を中心にして影とハイライトを並べた3トーンのカラーランプを組みます。
1色あたりの階調は5段以内に収まることが多く、セル塗りではそのうち3段を基準にするとです。
塗りながら色を作ると色相が散りやすいため、先に固定してから作業に入るほうが安定します。

影に純黒 #000000、ハイライトに純白 #FFFFFF を使うのは避けます。
黒い影は色味が死んで沈み、白いハイライトは浮いて見えるからです。
影は少し寒色、ハイライトは少し暖色へ寄せると、同じ3色でも奥行きが出ます。
暖色光が寒色の影を生む、という考え方とも噛み合います。

Aseprite でカラーランプを用意する

Aseprite ではパレットウィンドウでカラーランプを作れます。
Lospec などから .hex / .gpl 形式のパレットを Window > Palettes から読み込む方法もあり、手元で3トーンを組むのが難しい場面では、既製パレットから始めるやり方も実用的です。
最初にパレットへ登録しておけば、塗りの途中で色を選ぶ手が止まりません。

実際、3トーンのランプをパレットに置いておくと、影を足すたびに迷って色を探し直す時間が消えます。
ベース、影、ハイライトをすぐ呼び出せるだけで、作業のリズムが崩れにくくなるのです。
セル塗りでは色を増やす前に選択肢を減らしましょう。
そうすると、面の整理と色の整理が同時に進みます。

ステップ1：ベース色をフラットに塗る

影を置く前の土台は、輪郭とベース色の段階でほぼ決まります。
16x16 の小さなアイテムでも、先にアウトラインを引いてから各パーツを1パーツ1色で塗り分けると、シルエットと配色のバランスが見えやすくなり、後の陰影が締まりやすくなるのです。
ここで色配置を決め切っておくことが、仕上がりの迷いを減らす近道でしょう。

アウトラインを引く

16x16 のアイテムなら、まずペンシルで輪郭を置いて形を固定します。
ここで黒一色に頼ると線だけが前に出やすく、画面の中で浮いて見えがちです。
そこで、そのパーツの最も暗い色、つまりベース色の暗い版を輪郭に使うと、線が面とつながって見えます。
セルアウトの考え方はまさにここで効いてきます。
輪郭色を周囲の色調に合わせるだけで、同じ図形でも馴染み方が変わるからです。
Before では黒線がくっきり立ち、After では輪郭が静かにまとまり、キャラ全体が画面に沈み込みます。

各パーツをベース色で塗り分ける

アウトラインが決まったら、次はバケツツールで各面を流し込み、1パーツ1色の状態まで持っていきます。
ここでは影の情報を足さず、あえて単色のフラットだけで止めるのが大切です。
色数を増やす前に、シルエットだけで何を描いているか伝わるかを確認できるからです。
塗り残しやはみ出しがないかも、この段階で拾っておきましょう。
面ごとに色を分けると、あとで陰影を足したときに「どこが明るく、どこが暗いか」を置く場所がぶれにくくなります。

陰影に進む前のチェックポイント

陰影に入る直前は、光源が1方向に決まっているか、カラーランプが3トーンで用意できているか、ベースが単色で塗り分けられているかの3点を見ます。
この3つが揃っていれば、影は足し算ではなく整理として働きます。
逆に、ここが曖昧なまま進むと、影を置いても立体感が弱く、色も濁りやすいです。
輪郭、単色の面、光の向きの順で整えると、次のステップがずっと描きやすくなるでしょう。

ステップ2：影を1段だけ置く

影は、まず1段だけ置くほうが読みやすく仕上がります。
左上に光源を固定したなら、影はパーツの右下側、つまり光の反対側に集めます。
ここで面ごとの向きを見ながら、どこを影面にするかを先に決めておくと、あとから塗り足して迷う場面が減るでしょう。

光源の反対側に影面を決める

左上光源なら、球体でも箱でも、明るさが残る側と沈む側が自然に分かれます。
ピクセルを置く段階でその境目を先に意識すると、影はただの色替えではなく、形の向きを示す情報になります。
左上から光が来ているのに右上へ影を置いてしまうと、立体の向きそのものが逆転して見えるため、最初の判断がそのまま完成度を左右します。
球体の右下に弧状の影を1段入れた瞬間、平面だった丸がすっと前に出る感覚が生まれるのは、この配置が正しいからです。

くっきりした境界で影を区切る

セル塗りの影は、グラデーションではなく面で切るのが基本です。
境界線を引いてから内側を影色で塗ると、明部と暗部の切り替わりがはっきりし、量子化された段としての立体感が立ち上がります。
やわらかくぼかすより、あえて硬い境界を残したほうがドットの解像度では形を読み取りやすいのです。
影がにじむと情報が散り、面の向きより色の混ざり方が目に入ってしまうので、まずは切れ味を優先してみてください。

影1段で立体感をチェックする

影の境界は、形に沿った意味のある場所で分けます。
球なら曲面に沿う弧、箱なら平面の境目というように、構造に合った切り方を選ぶと説得力が増します。
なんとなく暗くすると後でバンディングの原因になり、どこが面でどこが装飾なのか分からなくなるため、まずは構造を読ませることが先です。
影は1段で十分なケースが多く、最大でも2段に抑えるほうが締まりやすいでしょう。

実際、影を2段3段と盛りたくなっても、いったん止めて全体を見直すと、1段目だけで十分に形が読める場面は少なくありません。
盛りすぎた影は濁りやすく、輪郭の外側まで重たく見えてしまいます。
そこで1段に戻すと、暗部が整理されて面の切り替わりが素直に見えるようになるのです。
影色は足すほど良くなるわけではないので、まずは1段で締まりを確認し、足りないときだけ次を検討しましょう。

ステップ3：ハイライトとヒューシフトで奥行きを出す

ハイライトは、明るさを足すだけの処理ではありません。
光源側のいちばん光が強く当たる面に、ほんの少しだけ置くことで、金属やガラスのような硬い質感が立ち上がります。
広い面をベタ塗りすると光が散って見え、せっかくの輪郭が甘くなるため、1〜数pxの点や細い面に絞るのが基本です。

ハイライトを光源側に少量足す

ハイライトは光源側、最も光が強く当たる面に少量だけ足します。
面積を広げるほど派手には見えますが、実際には安っぽさが先に立ちやすく、素材感も鈍ります。
逆に、点で入れた小さな光は視線を強く集めるので、少ない色数でも「硬い」「滑らか」「濡れている」といった印象をつくりやすいのです。
実際、広い面に白を置いてしまった版より、数pxの点に絞った版のほうが、金属もガラスもぐっとそれらしく見えました。
光は塗るのではなく、置く。
そう考えると調整の迷いが減ります。

ヒューシフトで影とハイライトに色味を加える

ヒューシフトは、明度だけでなく色相もずらして奥行きを出す手法です。
影は寒色、つまり青〜紫側へ寄せ、ハイライトは暖色、黄〜橙側へ寄せると、同じ色数でも発色が豊かになります。
単純に暗くした影は平板に見えがちですが、青紫へ寄せた影は空気を含んだように沈み、面の向きまで伝わりやすくなるのが利点です。
暖色の光源は寒色の影を生みます。
黄橙の光が当たる場所では、直射光が届かない影の側を環境光が受け持つため、青紫寄りに転ぶわけです。
だからこそ、色をずらす方向に迷ったら、光源が暖かいなら影は冷たく、ハイライトは少し温かくする、と覚えておくと扱いやすいでしょう。

リムライト（縁光）で輪郭を立たせる

リムライトは、背後から光が回り込んで輪郭だけが細く光る表現です。
キャラを背景から浮き立たせたい場面で特に効き、暗い背景でもシルエットの読みやすさを保てます。
輪郭線の代わりに見せる光でもあるため、入れる位置が少しずれるだけで印象が変わります。
ただし、全周に回す必要はありません。
背面や光源に近い側など、見せたい面に限定して入れるほうが、抜け感と緊張感の両方を保ちやすいのです。
おすすめなのは、まずハイライトとヒューシフトで面の情報を整え、そのあとで必要な場所だけにリムライトを足してみてください。
輪郭が呼吸しはじめるはずです。

ソフト塗り・ディザリングとの違いと使い分け

セル塗りは色をブロックとして分けて見せるため、輪郭も面もくっきり読み取りやすく、ソフト塗りは階調をなめらかに混ぜて絵画的な空気を作ります。
ここにディザリングを重ねると、別の役割で段差をなじませられるので、見た目の印象だけでなく、どこを読ませてどこをぼかすかまで整理しやすくなります。
まずはこの違いを切り分けることが、セルシェーディングを使い分ける出発点になります。

セル塗り・ソフト塗り・ディザリングの違い

セル塗りは、明るい面と暗い面を色面として切り分ける塗り方です。
中間を細かくつなぐより、境界をあえて残すことで形が立ち上がり、ゲーム画面のように小さく表示されても情報がつぶれにくくなります。
これに対してソフト塗りは、階調を連続的に混ぜて面のつながりを見せるため、柔らかい質感や丸みを出しやすい反面、縮小すると境界が曖昧になりやすいのです。
同じキャラを両方で塗り比べると、表示サイズが小さいほどセル塗りの読みやすさが先に立つ場面がはっきり見えてきます。

ディザリングは、この二択とは別の手法です。
2つの色の境界にドットを市松状に置き、目の錯覚で中間色やグラデーションを感じさせます。
色数を増やさず段差だけをなじませたいときに向いており、セル塗りのくっきりした面構成と相性がいい。
影の境界にだけ使えば、硬い切れ味を残しながらも急な段差を和らげられます。
逆に輪郭へ広げると、形を描くための線ではなくノイズとして見えやすいでしょう。

アンチエイリアスとディザリングの使い分け

アンチエイリアスは、形の外周エッジを背景に対して滑らかに見せるための処理です。
輪郭のギザつきを抑え、斜め線や曲線を見やすくします。
対してディザリングは、形の内側で2つの階調の段差をつなぐための技法で、陰影の切り替わりを自然に見せる役割を持ちます。
つまり、AAは外側の境界、ディザは内側の階調という住み分けが基本です。

この役割分担を外すと、画面はすぐに散らかります。
輪郭にディザを入れると、形を支える線が粒状になってしまい、何を見せたいのかがぼやけます。
実際、影の境界だけをディザリングで崩したときは段差が自然になりましたが、同じ感覚で輪郭にも入れた途端、狙いは崩れてノイズに寄りました。
同一のエッジにアンチエイリアスとディザリングを同時併用しない、という原則はここから生まれます。

ゲーム素材ではどれを選ぶか

ゲーム素材では、まず表示サイズを基準に考えるのが実用的です。
小さく表示されるキャラやアイコンでは、セル塗りの面分割が読みやすさを支えますし、必要なら影の一部だけにディザリングを足して密度を調整できます。
面の柔らかさを優先したい立ち絵や演出素材ならソフト塗りも選択肢になりますが、縮小後の輪郭がどこまで残るかを必ず見ておきたいところです。

使い分けの軸は単純で、輪郭はAA、内側の陰影はディザ、面の性格はセル塗りかソフト塗りかで決めるとです。
迷ったら、同じキャラを2通りで塗ってゲーム画面サイズまで縮小し、どちらが先に形を読めるかを比べてみてください。
おすすめです。
見た目の好みより、画面の中で役割を果たすかどうかで選ぶと、仕上がりが安定します。

よくある失敗：ピロー塗りとバンディングの回避

ピロー塗りとバンディングは、セル塗りで輪郭や影の置き方が崩れたときにまず疑うべき失敗です。
どちらも「影を入れたつもりなのに、立体感が消える」という点で似ていますが、症状の出方と直し方は違います。
光源の向きと影の幅を最初に整理しておくと、仕上げで慌てずに済みます。

ピロー塗りの見分け方と直し方

ピロー塗りは、光源を正面、つまり視点側に置いたように見えてしまい、輪郭に沿ってぐるりと均一に影が回り込む失敗です。
初めてスプライトの陰影を付けるときほど起こりやすく、全体が暗くなっているのに立体の向きが伝わらず、のっぺりした印象だけが残ります。
原因は、光源を1方向に固定せず、見えやすい場所へ同じ強さの影を散らしてしまうことにあります。

実際に、輪郭に沿って均一に影を入れたスプライトを見直したときは、光源を左上に決めて影を右下へ寄せただけで、面の向きが急にはっきりしました。
重要なのは、影を「塗る量」より「置く位置」です。
準備の段階で光源を決めておけば、輪郭全周に影がつく形は自然と避けられますし、もし全周に影が回っていたら、その時点でピロー塗りを疑えます。

バンディングの見分け方と直し方

バンディングは、影が全周にわたって1px均一の幅で並び、しましまに見えてしまう失敗です。
段と段の境界が等間隔の帯になると、面のつながりよりも線の反復が目立ちます。
立体の構造を無視して影を同じ幅で敷き詰めるほど起きやすく、なめらかなグラデーションを作りたい場面で特に目につきます。

調整の手順は2つです。
まず、影の幅を場所によって変えます。
曲率がきつい所は厚く、緩い所は薄くすると、輪郭の変化に影が追従しやすくなります。
そこにディザリングを重ねて境界の帯を崩すと、しましま感が抜けやすくなるでしょう。
1px均一の影で縞になったグラデーションも、この2手でかなり自然に戻せます。

公開前セルフチェックリスト

公開前は、仕上げの見た目を感覚だけで済ませず、光源の一貫性、影の偏り、縞の有無を順に確認しましょう。
ここで見るべきなのは、影が「あるかどうか」ではなく、光の方向に対して筋が通っているかどうかです。
少し引いた表示で輪郭を見たときに、全周へ同じ暗さが回っていればピロー塗り、等間隔の帯が残っていればバンディングと判断できます。

チェックの基準を先に持っておくと、修正も速くなります。
光源は1方向に固定されているか、影は反対側へ寄っているか、段差の幅は場所ごとに変わっているか、境界に帯が残っていないか。
この4点を見てから書き出せば、セル塗りの完成度は安定します。
おすすめです。