ドット絵を作りはじめた人がほぼ全員ぶつかる壁が「色が汚い」という悩みです。 形は元絵に似ているのに、なぜか安っぽく見える。にじんで見える。何を描いているのか分からない。 その原因の大半は、絵の腕でも解像度でもなく配色にあります。 そしてほとんどの場合、解決策は「色を足す」ではなく「色を減らす」ことです。
この記事では、なぜ色数を絞ったほうがきれいに見えるのかという視覚的なしくみから始めて、 実際にパレットを組み立てる手順、色数ごとの配分の考え方、 そして失敗しやすい配色パターンとその直し方までをまとめます。 読み終わったあとに、自分の作品のパレットを見返して「ここを直せばいい」と判断できる状態を目指します。
「色数が多いほうがリアルで情報量が多いはずなのに、なぜ少ないほうがきれいに見えるのか」。 これは感覚の問題ではなく、人間の視覚のはたらき方から説明できます。理由は大きく3つあります。
人間の目は、色相（赤・青・緑といった色味）よりも明度（明るさ）のほうをはるかに敏感に、 かつ先に処理します。絵を遠くから見たとき、あるいは目を細めて見たときに残るのは色味ではなく明暗の塊です。 つまり、絵が「何に見えるか」を決めているのは色相ではなく明度差なのです。
色数が増えると何が起きるか。100色のパレットを明るさ順に並べると、隣り合う色の明度差はごくわずかになります。 すると隣接するドット同士の境目が視覚的に消え、輪郭がぼやけ、ぬるっとした印象になります。 逆に色数を16色に絞れば、1色あたりの明度の「持ち場」が広くなり、隣り合う色の差がはっきりします。 この差がドット絵特有のシャープさを生みます。
実践的な目安として、同じモチーフの中で隣り合う段（ベース色と影など）の明度差は最低でも15〜20%空けると覚えてください。 明度100%を白、0%を黒としたとき、ベース色が60%なら影は40〜45%、ハイライトは78〜85%あたりです。 10%未満しか差がない2色は、離れて見るとほぼ同じ色に見えるため、パレットの枠を1つ無駄に消費しているだけになります。
ドット絵はキャンバスが小さいぶん、1つの色が占める面積の意味が大きくなります。 色数が少ないパレットでは、同じ色がまとまった面積を占めるため、「面」として認識されます。 人の目は、色が面になってはじめてそれを物体の一部として読み取ります。
ところが色数が多いと、同じ物体の中で色がバラバラに散らばり、どれも数ドットずつしか使われない状態になります。 こうなると面が生まれず、絵全体がザラついたテクスチャのように見えてしまいます。 これがドット絵が「汚い」と感じられる状態の正体です。
目安としては、1つの色が最低でも全体の1%以上、あるいは10ドット以上のまとまりを持っている状態を狙います。 5ドット未満しか使われていない色は、絵に貢献していない可能性が高いので統合の候補です。
人間の視覚は、足りない情報を経験から補完します。頬に赤い点が2つ打ってあれば「頬の赤み」として、 肌色より暗い色が顎の下に1列並んでいれば「顎の影」として読み取ります。 これは実際に細かいグラデーションがそこにあるかどうかとは無関係に起きます。
だからドット絵では、グラデーションを忠実に再現する必要がまったくありません。 むしろ「ここは影である」と分かる最小限の情報だけを置いたほうが、見る側の脳が残りを補って立体的に見せてくれます。 色数を減らすことは情報を捨てることではなく、読み取ってほしい情報だけを残す作業だと考えてください。
確認方法: 作りかけのドット絵をスマホの画面から30cmほど離して、目を細めて見てみてください。 このときモチーフの形がはっきり分かれば明度設計は成功しています。 全体がのっぺりした一色の塊に見えるなら、明度差が足りていません。色を足すのではなく、影をもう1段暗くしましょう。
ドット絵のパレットは「好きな色を並べたもの」ではなく、モチーフごとの色のセット（ランプ）を積み上げたものと考えると一気に整理できます。 1つのモチーフ（肌、髪、服、金属など）につき、明度の違う3〜4色を1組で用意します。この1組を「ランプ」と呼びます。
| 役割 | 明度の目安 | 使う面積 | 働き |
|---|---|---|---|
| ベース色 | 55〜65% | 約60% | そのモチーフの「色」を決める主役。最も広い面積を占める |
| 影 | 35〜45% | 約25% | 立体感と接地感を作る。光源の反対側に置く |
| ハイライト | 78〜88% | 約10% | 光の当たる面を示す。狭くするほど硬質・つやのある印象 |
| 濃い影（任意） | 18〜28% | 約5% | 輪郭の締めや、物体同士の接する部分に使う |
3段（ベース・影・ハイライト）でほとんどのモチーフは成立します。 4段目の「濃い影」を足すのは、キャンバスが大きくて表現の余裕があるときや、 そのモチーフを主役として目立たせたいときだけにしましょう。 すべてのモチーフを4段にすると色数が一気に膨らみ、かえって全体の見分けがつかなくなります。
重要なのは面積の比率です。ハイライトはベース色の1/6程度に抑えるのが基本で、 初心者がやりがちな「ハイライトを広く塗る」は絵を白っぽく平坦にする最大の原因です。 光が当たっている部分は狭いからこそ光って見えます。
ベース色から影を作るとき、多くの人は同じ色の明度だけを下げます。
たとえば赤 #E05050 の影を #A03030 にする、といった具合です。
これは間違いではありませんが、仕上がりが濁って見えがちです。
プロのドット絵が鮮やかに見えるのは、影を作るときに色相もいっしょにずらしているからです。
| モチーフ | ハイライト | ベース色 | 影 |
|---|---|---|---|
| 肌 | #FFE0C0（黄寄り） | #F0B890 | #C07868（赤紫寄り） |
| 赤い服 | #F08858（橙寄り） | #D04040 | #8C2856（紫寄り） |
| 緑の葉 | #C8D858（黄緑寄り） | #5AA048 | #2C6A58（青緑寄り） |
| 灰色の石 | #E8E4D8（暖色寄り） | #A8A8A0 | #5C6068（青寄り） |
表の「灰色の石」に注目してください。無彩色のモチーフでも、ハイライトをわずかに暖色、影をわずかに寒色にずらすだけで、 完全な無彩色のグレー3段よりもずっと生き生きとして見えます。 無彩色をそのまま使うと画面が死んで見えるため、グレーには必ず微量の色味を混ぜるのがドット絵の定石です。
色相ずらしは強力ですが、やりすぎると「別の物体の色」になってしまいます。 1段あたり15度前後、3段全体でも45度以内に収めるのが安全です。 赤のベース色から影を作るつもりで色相を90度動かすと、そこは紫の別パーツに見えてしまいます。 迷ったら、影の色を単体で見たときに「暗い赤」と言えるかどうかを基準にしてください。
ゼロからパレットを組むときは、次の順番で進めると迷いません。順番を守ることが重要です。
ツールでの応用: みんなのデザインスタジオで画像を変換したあと、 減色設定の「カスタム」を使うと、使われている色の一覧から手動で色を統合できます。 このとき「面積が小さくて役に立っていない色」から順に消していくと、上で説明した3〜4段構成に自然と近づきます。 色をタップすると最も近い色に統合されるので、中間色から先に消すのがコツです。
使える色数によって、どこに色を「投資」するかの判断が変わります。 色数が少ないほど、1色の使いどころを厳しく選ぶ必要があります。
| 総色数 | 配分の目安 | 向いている題材 |
|---|---|---|
| 8色 | 主役に5色、背景に2色、輪郭に1色 | アイコン、シンプルな紋章、単色の小物、文字ロゴ |
| 16色 | 主役に10色（3〜4ランプ）、背景に4色、輪郭に2色 | キャラクター、服のデザイン、風景の一部 |
| 24色 | 主役に14色、サブモチーフに6色、背景に4色 | 複数のモチーフが登場する絵、背景込みの1枚絵 |
8色では立体表現をほぼ諦めて、形とシルエットで見せる設計にします。 1モチーフあたり2色（ベースと影のみ）に絞り、ハイライトは主役の1か所だけに置きます。 背景は単色か、明度の違う2色の帯にとどめます。 この色数では色相ずらしの効果が最も大きく効くので、2色しか使えないぶん、影の色相をしっかりずらして情報量を稼ぎます。
16色は、ドット絵として最もバランスが取れる色数です。 3〜4段のランプを3つ作れるので、たとえばキャラクターなら「肌4色・髪4色・服4色」で12色、 残り4色を背景と輪郭に回す、という組み立てになります。 ここで注意したいのが、ランプ同士で色を共有するテクニックです。 肌の一番暗い色と髪の一番明るい色を同じ1色にまとめられれば、それだけで1色浮きます。 浮いた1色をアクセントカラーに使えば、絵の情報量が上がります。
24色になると、背景にもランプを組む余裕が出てきます。 ただし色数が増えるほど「明度が近すぎる色」が生まれやすくなるため、 完成後に一度パレットを明度順に並べ替えて、隣り合う色の差が10%を切っていないかを点検してください。 差が小さすぎる2色を見つけたら片方を消し、その枠をアクセントや新しいモチーフに回したほうが絵は良くなります。
原因: 明度差の不足。ベース色と影の差が10%程度しかないケースがほとんどです。
直し方: 影の明度をさらに15%下げます。「暗くしすぎでは」と感じるくらいがちょうど良いことが多いです。
それでも足りなければ濃い影を1色足しますが、面積は全体の5%以内に抑えます。
原因: 影を作るときに黒を混ぜている、あるいは彩度を下げすぎている。
直し方: 影の彩度を上げ、色相を寒色側にずらします。黒を混ぜるのではなく「暗くて彩度の高い別の色」に置き換える感覚です。
とくに肌や木材のような暖色系のモチーフで効果が大きく出ます。
原因: ハイライトの面積が広すぎる。または、パレット全体の明度が70〜90%に集中している。
直し方: ハイライトの面積を半分に減らします。加えて、パレットに明度30%以下の色が1つもない場合は、
暗い色を意識的に1〜2色追加してください。絵には必ず「一番暗い場所」が必要です。
原因: 高彩度の色を多用している。彩度80%以上の色が5色以上あると、視線の行き場がなくなります。
直し方: 高彩度は主役だけの特権と決めます。背景やサブモチーフの彩度を20〜40%まで落とすと、
主役の色が同じままでも一気に浮き上がって見えます。色を足すのではなく、周りを引く発想です。
原因: 輪郭の色と背景の明度が近い。
直し方: 輪郭は真っ黒（#000000）にするより、そのモチーフのベース色を大きく暗くした色にすると馴染みます。
そのうえで、背景と輪郭の明度差が30%以上あるかを確認します。背景が暗いなら、輪郭を明るくする選択肢もあります。
やりがちな落とし穴: 「思い通りの色が出ない」と感じたとき、パレットに色を1つ足して解決しようとするのは、 ほぼ確実に悪化します。色を足すたびに既存の色との明度差が縮まり、絵全体のコントラストが下がるからです。 足す前に、まず既存の色のどれかを動かせないかを検討してください。
ここまでは絵としての話ですが、ハートピアで実際に1マスずつ打ち込むことを考えると、 色数を絞るメリットはさらに大きくなります。
みんなのデザインスタジオでは、変換後の画面に現在のカラー数が表示されます。 この数字を見ながら、絵が壊れない範囲で減色を進めるのが基本の流れです。 実際に作業しやすいのは15〜25色程度で、これは偶然にも、 この記事で説明した「3〜4段のランプを3〜5組」という構成とちょうど一致します。 きれいに見えるパレットと、打ちやすいパレットは同じものなのです。
ドット絵の配色でやるべきことは、突き詰めると次の4つに集約されます。
この4つを意識するだけで、同じ元画像から作ったドット絵の見え方は大きく変わります。 画像を変換したあとに減色設定を触るとき、単に色数を減らすのではなく 「どのランプのどの段を残すか」という視点で選べるようになると、仕上がりの安定感がはっきり違ってきます。 まずは手持ちの作品を1つ開いて、パレットを明度順に並べ替えるところから試してみてください。