形は描けるようになったのに、色を塗ると急にダサくなる。ドット絵を続けていると、ほぼ全員がこの壁に当たります。
原因はセンスではありません。色の選び方に、明確なセオリーがあるのを知らないだけです。しかもそのセオリーは、ドット絵という制約の強い媒体では特にはっきりしています。この記事では、そこを分解して説明します。
📌 この記事の3行まとめ
① 色が濁る原因のほとんどは明度差の不足。彩度や色相より先に、明るさを離す
② 影は「暗くする」だけでなく色相をずらす（ヒューシフト）。これが最も効く1手
③ 絵全体で色を共有する。1つの物に専用色を割り当てないほど、絵はまとまる
なぜ色数を絞るほど良くなるのか
「32色しか使えない」と聞くと制限に感じますが、実際には助けになっています。
理由は2つあります。第一に、色数が少ないと、色同士の関係を設計せざるを得なくなるからです。無制限に色が使えると、人はその場その場で「なんとなく良さそうな色」を選んでしまい、結果として絵全体の統一感が失われます。
第二に、色数が少ないほど、1色1色の役割が明確になるからです。この色は影、この色はハイライト、この色は輪郭——と決まっていれば、迷う時間が消えます。
昔のゲーム機の絵が今見ても成立しているのは、厳しい色数制限が、結果として設計を強制したからでもあります。
原則①：明度差が、すべての土台
色がぼやけて見える、何を描いたか分からない——その原因の8割は明度差（明るさの違い）が足りないことです。
確認方法は簡単で、絵をグレースケールにしてみることです。それで形が判別できないなら、色を変えても解決しません。
具体的な指針は次のとおりです。
- ベース色と影色の明度は、はっきり離す。少し暗くした程度では効きません
- 隣り合う色は、明度で区別できるようにする。色相だけが違う同じ明るさの2色は、隣に置くと境界が溶けます
- ハイライトは狭く、強く。広く薄く置くと、ただ白っぽくなるだけです
「彩度を上げれば鮮やかになる」と考えて彩度ばかり触ってしまうのは、初心者に非常に多い失敗です。まず明度、次に色相、彩度は最後の順で調整してください。
原則②：ヒューシフト——影は、ただ暗くしない
ドット絵の見た目が一段階変わる、最も効果的なテクニックがこれです。
影を作るとき、明度を下げるだけでなく、色相もずらす。これをヒューシフト（hue shifting）と呼びます。
具体的には、次のようにします。
| 部分 | 明度 | 彩度 | 色相 |
|---|---|---|---|
| ハイライト | 上げる | やや下げる | 黄色寄りにずらす |
| ベース | 基準 | 基準 | 基準 |
| 影 | 下げる | 上げる | 青・紫寄りにずらす |
つまり、明るいところは黄色に、暗いところは青紫に寄せるわけです。
これは現実の光の性質に基づいています。屋外では、光源である太陽光は暖色で、影の部分は空（青空）からの光で照らされるため青みを帯びます。ヒューシフトは、その現象を極端に単純化したものです。
例として、赤いリンゴを塗るなら——ハイライトはオレンジ寄りの明るい色、ベースは赤、影は赤紫〜青紫寄りの暗い色。単に赤を暗くしただけの影と比べると、はるかに生き生きして見えます。
💡 彩度に注意
影を作るとき、明度と一緒に彩度も下げてしまうと、灰色に近づいて絵が死にます。影は「暗く、色みは濃く」が基本です。
原則③：カラーランプを作る
1つの色について、ハイライトからベース、影までの一続きの色の並びを作ります。これをカラーランプと呼びます。
- 3色ランプ：ハイライト・ベース・影。最小構成。小さいドット絵はこれで十分
- 4色ランプ：ハイライト・ベース・中間影・深い影。32×32以上ならおすすめ
- 5色ランプ：さらに反射光を追加。大きい絵や、質感を出したいとき
ランプを作るときのコツは、明度の間隔を均等にしないことです。人間の目は明るい部分の違いに鈍く、暗い部分の違いに敏感です。暗い側は間隔を狭く、明るい側は広く取ると自然に見えます。
原則④：絵全体で色を共有する
ここが、初心者と経験者の差が最も出る部分です。
キャラクターを描くときに、髪用の3色、肌用の3色、服用の3色、金具用の3色……と個別に用意すると、あっという間に色数が膨れ上がり、しかも絵がバラバラに見えます。
経験者は逆をやります。ランプの端を共有するのです。
- 髪の影の最も暗い色を、服の影にも使う
- 肌のハイライトを、金具のハイライトにも使う
- 最も暗い色を全体の輪郭線に統一する
こうすると色数が減り、同時に絵全体に共通の光と空気が生まれます。「なぜかまとまって見える絵」は、たいていこの共有が効いています。
原則⑤：背景とキャラクターを分離する
ゲーム用の素材なら、これは実務上とても重要です。
背景は彩度を落とし、明度を中間に寄せる。キャラクターは彩度を上げ、明度の幅を広く取る。 こうしないと、キャラクターが背景に埋もれてプレイに支障が出ます。
もう1つ有効なのが、背景とキャラクターで色相の傾向を変えることです。背景が寒色寄りなら、キャラクターに暖色を入れる。単純ですが、視認性が明確に上がります。
既存パレットを使うのは「ずるくない」
自分でパレットを組むのは、慣れないうちは難しいものです。既存の配布パレットから始めるのは、まったく問題ありません。むしろ、良いパレットを使って描くこと自体が、配色の勉強になります。
よく使われるものには、レトロゲーム機の実機パレット、PICO-8の16色、DawnBringerの16色／32色などがあります。
ただし、使う前にライセンスと利用条件を必ず確認してください。多くは自由に使えますが、作者によって条件は異なります。商用のゲームに使うなら特に重要です。
慣れてきたら、既存パレットを土台にして自分用に改変するのが良い進み方です。ゼロから32色を決めるより、はるかに現実的です。
実践：配色に詰まったときのチェックリスト
- グレースケールにして形が分かるか？ → 分からないなら明度差不足
- 色数を数えたか？ → 20色を超えていたら、たぶん共有できる色がある
- 影の色相をずらしたか？ → ただ暗くしただけになっていないか
- 光源は1つに揃っているか？ → 場所ごとに影の向きが違わないか
- 一番暗い色と一番明るい色を確認したか？ → 真っ黒と真っ白は、たいてい使わないほうが良い
- 縮小して見たか？ → 実際の表示サイズで成立しているか
PixelHubなら、パレットを触りながら試せます
配色は、実際に色を差し替えて比べないと身につきません。ところが多くのエディタでは、色を変えるたびに塗り直しが発生し、試行錯誤に時間がかかります。
当社が開発した PixelHub - ドット絵エディタと学習講座 は、最大32色のインデックスカラー方式を採用しています。これが配色の練習に効きます。
- パレット側で色を変えると、作品全体に即座に反映される。全ピクセルを塗り直さずに配色を比較できます
- HSVで直接編集できるので、「明度だけ下げる」「色相だけ青にずらす」といったヒューシフトの操作がそのまま行えます
- PICO-8やDawnBringerなどのプリセットを最初から搭載。良いパレットで描く経験がすぐ積めます
- GPL形式のパレットの読み込み・書き出しに対応。他ツールと行き来できます
- 11コース・134レッスンのうち、光と影・質感のコースが、この記事の内容を実技402問と一緒に扱っています
「影の色相をずらすと本当に変わるのか」を、自分の絵で1分で確かめられる環境だと思ってください。完全オフラインで動作します。買い切り2,000円です。
形の描き方から知りたい方はドット絵の描き方入門を先にどうぞ。開発の背景はPixelHubリリース記事に書いています。
