ドット絵UI・アイコンの描き方｜16px設計術

UIアイコンは、キャラ絵とは設計思想が根本から異なる表現である。
上手く描けているかではなく、小さくしても一目で意味が伝わるか、複数並べて統一感が出るか、状態違いをきちんと管理できるかが勝負になる。
16x16ではわずか256ピクセルしかないため、塗りや影でごまかす前に単色シルエットで意味を立てる必要があり、剣のアイコンも最初は棒にしか見えなかったものが、刃を太くして鍔を1px足した瞬間に剣として読めるようになる。
さらに本稿では、キーライン・線幅・安全余白・色ロール・光源方向をそろえたセット統一から、9スライスのボタン枠、通常・ホバー・選択・無効の4状態、色相違いの量産まで、UIに組み込める一式の作り方を扱います。

ゴール：UIアイコンとキャラ絵は別物

UIアイコンは、絵の上手さよりも小さくしたときの可読性、並べたときの統一感、そして選択中や無効といった状態管理で評価されます。
16x16の世界では1ドットの差が印象を左右するため、まずは形と役割を揃える発想が必要です。
キャラ絵のような魅せ方とは別物だと割り切れるかどうかが、最初の分かれ道になるでしょう。

UIアイコンの3要件：可読性・統一感・状態

UIアイコンは、単体で見栄えする絵ではなく、UIの中で迷わず機能する記号です。
だからこそ最初に見るべきなのは、どれだけ上手に描けたかではなく、16x16でも意味が読めるか、複数並べても大きさや線の太さが揃うか、通常・選択中・無効の差分を崩さず運用できるか、の3点になります。
装飾的な32x32を併用する場合も、この基準は変わりません。

特に16x16は256ピクセルしかなく、1ピクセルが全体の約0.4%を占めます。
つまり、輪郭を1ドット太らせるだけで存在感が変わり、逆に削りすぎれば意味が消えるのです。
塗りでごまかす余地が少ないので、まず単色シルエットで形を立て、そこから必要な情報だけを足していく順番にすると迷いが減ります。
設定・セーブ・閉じるのような定番記号に寄せるのも、このサイズでは理にかなっています。

キャラ絵との決定的な違いは『一目で意味が伝わるか』

キャラ絵は多少崩れていても表情や雰囲気で魅力が残りますが、アイコンは「何のボタンか分からない」時点で機能として失格です。
ここで優先されるのは塗りの華やかさではなく、刃・鍔・瓶・×印のような、意味を直接指す輪郭です。
黒一色で見ても判別できるかどうかを先に確認すると、配色に頼りすぎる失敗を避けやすくなります。

実際、最初に「設定＝歯車、セーブ＝フロッピー、閉じる＝×」へ寄せると、独創性より伝わりやすさを優先するUIではむしろ使いやすくなります。
メニューアイコンを単体で見ると整って見えても、UIに5個並べた瞬間に「この1個だけ大きい」「線が太い」と粗が見えてくるものです。
並べて初めて統一感の有無が分かる、という感覚は制作の早い段階で掴んでおくとよいでしょう。

目指す完成形：統一されたアイコンセット

完成形は、用途ごとに揃ったアイコンセットです。
インベントリなら剣・盾・ポーション、メニューなら設定・セーブ・閉じる、ステータスならHP・MP・コインのようにまとめて作ると、共通ルールが効きやすくなります。
見かけの大きさを合わせる基準枠を決め、外周に1〜2pxの安全余白を取り、光源を左上に固定しておくと、個別に描いたときでも一式として揃いやすいです。

状態も、通常だけで終わらせず、最低でも通常・選択中・無効を想定して設計します。
後から色だけ差し替えるより、最初から枠線の強さや彩度の落とし方を決めておいたほうが手戻りが少ないからです。
共有ルールが固まれば量産は速く、1アイコンあたり10〜20分で回せる感覚になります。
まずは小さく、同じ規則で、少数をきっちり揃えてみてください。

キャンバス・グリッド・キーラインの準備

ドット絵のUIアイコンは、まず描く前の土台で仕上がりが決まります。
16x16か32x32でキャンバスを切り、グリッドを見える状態にしておくと、1マスごとの位置関係が追いやすくなり、後からの微調整が減ります。
安全余白とキーラインを最初に決めておけば、並べたときの詰まりやサイズ感のズレも起きにくくなります。

16x16/32x32 のキャンバス作成とグリッド設定

UIアイコンの基本は16x16で、装飾性を少し足したいときだけ32x32を使うと設計がぶれません。
どちらのサイズでも新規キャンバスを作成したらグリッド表示をONにし、1マス＝1pxが見える状態にしておくと、輪郭の角や余白の位置を迷わず決められます。
小さな面積では1ピクセルの差が形の印象を大きく変えるので、最初に座標を見える化しておくことが効きます。

制作の途中で拡大率だけに頼ると、線が1pxずれただけでも別物に見えやすいです。
グリッドが出ていれば、剣の刃先や瓶の口のような細部も置き場所を一定に保ちやすく、複数アイコンを並べたときの揃いも作りやすくなります。
AsepriteでもPiskelでも、まずはこの下地を固定してしまいましょう。

外周1〜2pxの安全余白で『詰まり』を防ぐ

16x16では外周に1〜2pxの安全余白を残し、本体は中央12〜14pxに収める考え方が扱いやすいです。
端まで描き切ると、隣のアイコンと並べたときに窮屈に見えるうえ、選択枠を重ねた場面でもはみ出して見えます。
最初に余白を取っておくと、のちの配置や状態変化を入れても破綻しにくいのです。

実務では、別レイヤーにキーラインの4枠を薄く置いておき、新しいアイコンを描くたびにその枠に収めるやり方が扱いやすいでしょう。
5個、10個と増えても『見かけの大きさ』が自然に揃い、後から並べ直す手間が消えます。
余白は空きではなく、詰まりを防ぐための設計だと考えると分かりやすいです。

キーラインで全アイコンの大きさを揃える

統一感の核になるのがキーラインです。
正方・横長・縦長・円の4基準枠をあらかじめ用意し、すべてのアイコンをどれかに合わせて描くと、形が違ってもセットとしてまとまります。
剣は縦長枠、コインは円枠というように、ピクセル数ではなく見かけの大きさを枠で合わせるのが要点です。

特に円は同じ16pxでも四角より小さく見えるため、単純に面積をそろえても揃って見えません。
ここで大切なのは光学的な大きさで、黒一色のシルエットでも意味が読めるかを基準にします。
左右対称の盾や歯車は、Aseprite の対称ツール（View > Symmetry Options）を使うと片側だけ描けば反対側が自動生成され、初心者でもブレのない形を取りやすいです。
歯車の歯を片側だけ進めてもそのままミラーされるので、作業がぐっと楽になります。

ステップ1：シルエットで意味を作る

単色のブロックアウトは、16x16のアイコンを読むための土台です。
色や影を足す前に、まず黒一色でも対象の形が立つかを確かめると、縮小したときに何が消え、どこを残すべきかが見えてきます。
線を追うのではなく塊で考える姿勢に切り替えると、最初の段階で読める形へ寄せやすくなります。

まず単色でブロックアウトする

色を塗る前に、必ず単色で対象の輪郭だけを置きます。
ここで見るべきなのは配色の印象ではなく、黒一色でも意味が立つかどうかです。
可読性の9割はこの段階で決まるので、塗りや影は「見えた形」に質感を足す作業だと捉えたほうがいいでしょう。
実際、剣のアイコンを描いたあとに一度すべて黒く塗りつぶして縮小表示すると、刃が細すぎて棒にしか見えないことがあります。
そこで刃を1px太くし、鍔を1px長くするだけで、途端に剣として読めるようになる。
ブロックアウトはその差を見つけるための工程です。

黒一色で『何か』が分かるかテストする

ブロックアウトできたら、次はシルエットテストです。
黒一色で塗りつぶした状態のまま、それが何のアイコンかを瞬時に判別できるかを確認します。
ここで判別できないなら、どれだけ色を工夫しても読みやすさは上がりません。
判別できないときに塗りで挽回しようとすると、光沢や影が増えるだけで形の弱さは残ります。
迷ったら塗りではなく形に戻る。
輪郭の角度、パーツの大小、配置を変えて、シルエットだけで意味が立つ構成を探すほうが、結果的に作業は速くなるのです。

特徴を誇張し、細部は思い切って捨てる

16x16では、細部を全部入れようとするとすぐに潰れます。
だからこそ、対象を象徴する1〜2の特徴だけを残し、それ以外は捨てる判断が必要です。
剣なら細長い刃と横一文字の鍔、ポーションなら丸い瓶と小さな栓、鍵なら丸い頭とギザギザの先だけで十分に伝わります。
このとき有効なのが、線ではなく塊で考える見方です。
細い線の集合は16pxでは読みにくいので、ある程度の面積を持ったブロックの組み合わせとして組むと、縮小しても輪郭が崩れにくくなります。
実寸で何度も確認しながら、残す特徴を少し誇張していくと、画面上で一気に意味が立つようになります。

ステップ2：アウトラインと線幅の統一

アウトラインと線幅を先に固定しておくと、あとから描くアイコンが自然に揃います。
とくに輪郭の太さと縁取り色は、見た目の印象を左右するうえに、セット全体の統一感を決める土台です。
ここがぶれると、同じシリーズでも一部だけ重く見えたり、輪郭がにじんで見えたりします。

1px輪郭をセット全体で統一する

アイコンの輪郭は1pxを基本にし、セット内で必ず太さを統一します。
ある絵だけ2px縁になると、同じサイズで並べたときにその1点だけ密度が上がり、視線がそこへ吸われやすくなるからです。
セット制作では、線幅そのものを個別の判断にせず、最初に共通ルールとして固定しておくほうが仕上がりが安定します。

このルールは、線の見え方だけでなく制作の迷いも減らします。
盾と剣を別々のタイミングで描いたとき、片方が黒縁、片方が暗色縁になっていて並べた瞬間に違和感が出たことがありました。
あらかじめ1px・暗色縁・Anti-aliased OFFまで決めておけば、後から絵を追加しても自動的に同じ基準で揃うのです。

黒縁・暗色縁・縁なしの使い分け

縁取りの色は、純黒、本体より暗い同系色、縁なしの3択で考えると整理しやすいです。
純黒は輪郭がくっきりして古典的な強さがありますが、やや硬く見えます。
暗色縁は本体に馴染みながら形を締められるため、いまのUIに合わせやすい選択肢です。
縁なしは背景へ溶け込むぶん軽い印象になり、情報量を抑えたい場面で効きます。

UIは明るい背景にも暗い背景にも置かれるため、迷ったら中立的な濃色が無難です。
背景が変わっても輪郭だけが浮いたり沈んだりしにくく、見た目のバランスを保ちやすいからです。
Asepriteで描くときも、まずこの縁取りルールを決めておくと、あとからパレットを変えても全体の空気感が崩れません。

ジャギを抑える曲線の刻み方

曲線部分はジャギが出やすいので、同じ長さのドットを機械的に連続させないことが大切です。
2px・1px・1pxのようにステップ長を変えて刻むと、少ないドットでも斜めの流れが生まれ、階段状のギザつきが目立ちにくくなります。
細い輪郭ほど差が出るので、曲線の端や丸い角でこの刻み方を意識すると効果的です。

Asepriteでは、ペンのAnti-aliased（アンチエイリアス）を必ずOFFにします。
ONのままだと中間色が自動で混ざり、輪郭の輪郭らしさが弱まってしまいます。
新規ファイルを開いたらまず設定を確認する習慣にしておくと、円を描いたあとに半透明のにじみを見つけてやり直す手間を防げます。

ステップ3：パレットと光源を揃える

色数を絞り、色の役割と光源の向きをそろえるだけで、別々に描いたアイコンでも急に同じセットに見えてきます。
16×16のような小さな画面では、色を増やすほど情報量ではなく濁りが増えやすいので、最初に共通の土台を作る発想が効きます。
剣、盾、ポーションをバラバラの配色で描いても、共通パレットに乗せ直すと世界観が締まるでしょう。

全体8〜16色に絞り共有パレット化する

1個あたり1パーツに2〜3色、全体で8〜16色に抑えると、小サイズでも輪郭が崩れにくくなります。
16×16では、色数が増えるほど見栄えの「ディテール」より先に「ノイズ」が目立つからです。
共有パレットを保存して全アイコンで読み込めば、後からレアリティ違いを増やすときも軸がぶれません。

色に役割（ロール）を割り当てて統一する

色は「何に使うか」を決めてから置くと、アイコン同士の関係が揃います。
縁取り、影、中間、ハイライト、アクセントの5つに役割を分け、剣でもポーションでも同じロールを使い回すと、形は違っても“同じ世界の道具”として読めるようになります。
実際、剣・盾・ポーションを別々のパレットで描いたときはちぐはぐでしたが、共通の16色パレットに統一して塗り直しただけで、急にまとまりが出ました。
ポイントは配色そのものより、役割の固定です。
色の意味が毎回同じだと、見る側は迷いません。

光源を左上に固定しヒュー・シフトで深みを出す

光源はセット全体で左上に固定し、ハイライトを左上、影を右下にそろえると、並べたときに視線の流れが安定します。
1つだけ光の向きが違うと、そのアイコンだけ浮いて見えるためです。
金属やガラスでは、明度差だけで段階を作るより、ハイライトを暖色寄り、影を寒色寄りにずらすヒュー・シフトのほうが奥行きが出ます。
白を真っ白にせず、クリーム色やごく薄い水色のような少し色味を残した明るい色にすると、地の色になじみやすく、安っぽさも減ります。
こうした調整は地味ですが、セット全体の品を決める仕上げになります。

ステップ4：ボタン枠と9スライス

ボタン・パネル枠は、まず角・辺・中央の三つに分けて考えると設計しやすいです。
角を固定し、辺と中央だけを伸ばす前提にすると、小さなボタンから横長のパネルまで同じ意匠を使い回せます。
見た目の統一感も保ちやすく、素材作りの手間も減るでしょう。

ボタン・パネル枠の基本構造

最初はサイズごとに枠を1枚ずつ描いていたが、角・辺・中央の役割を分けて考えるだけで発想が変わる。
角は形の輪郭を決める固定パーツ、辺は長さに合わせて調整する帯、中央は面を埋める領域だと整理すると、どの大きさでも崩れにくい。
角が見た目の印象を支え、辺が伸縮の受け皿になるため、枠全体を一つの構造物として扱えるようになります。

この考え方は、枠を描く作業を「毎回新規制作」から「再利用前提」に変える。
実際、角を5px以上で作った枠を小さいボタンに流用したとき、角同士が詰まって潰れたことがあった。
そこから、伸ばすのは辺だけにして、角は3〜4px程度に抑える鉄則が腑に落ちたのです。

9スライスで1枚をどんなサイズにも伸ばす

9スライス、つまりナインスライス／9パッチは、画像を3x3の9マスに分割し、四隅を固定したまま上下左右の辺と中央だけを伸縮またはタイル状に繰り返す方法です。
これなら、1枚の枠素材を小型ボタンにも横長パネルにも使い回せる。
輪郭のシャープさは角で保ちつつ、長さの変化は辺が吸収するので、破綻の少ないスケール変更ができます。

Unityでは Sprite Editor で Border を設定し、Godotでは NinePatchRect を使うと、エンジン側でこの分割処理を扱えます。
手描きのままではサイズごとに描き分ける必要があった場面でも、9スライスを覚えてからは枠を1枚作るだけで済むようになり、サイズごとの描き分けが不要になって作業時間を大きく削減できた。
おすすめです。
ゲーム内で同系統のボタンを増やすなら、まずこの仕組みを仕込んでおきましょう。

アイコンと枠の余白（パディング）を取る

アイコンを枠の中央に置くときは、2〜4pxの余白を確保すると収まりがよくなる。
詰めすぎた配置は窮屈に見えるだけでなく、クリック領域の境界も読み取りにくい。
枠そのものがきれいに伸びても、中身が端に寄ると全体の印象が崩れるため、パディングは見た目と操作性を同時に整える調整になります。

余白は単なる空白ではなく、アイコンの輪郭を際立たせるための間隔です。
小さなボタンほどこの差が目立つので、中央配置と組み合わせて整えると扱いやすい。
枠、アイコン、パディングの三点をセットで考えると、ボタンはぐっと読みやすくなります。
試してみてください。

ステップ5：状態違いとレアリティ量産

状態違いを先に設計しておくと、アイコンセットは見た目の統一感と使いやすさを両立しやすくなります。
実用UIでは通常・ホバー・選択中・無効の4状態を1セットにし、どの状態でも同じルールで変化させることが要です。
状態間のコントラストが揃っていれば、複数のアイコンでも振る舞いが迷いにくく、触った瞬間に意味が伝わります。

通常・ホバー・選択・無効の4状態を作る

通常状態を基準に、ホバーは全体を少し明るくし、選択中は外周の1pxラインや背景の強調で拾う形にすると、UI全体で判定が揃います。
最初はアイコンごとに選択表現を変えてしまいがちですが、ルールを1つに決めるだけで、ボタンでも装備枠でも同じ見え方に寄せられるのが利点です。
細部を増やすより、変化の方向を統一するほうが読み取りやすいのです。

無効はグレースケール＋減光で表現する

無効状態は彩度を0〜30%に落とし、明度も下げると、押せないことがひと目で伝わります。
色味を少し変える程度では通常状態との区別がつきにくいですが、グレースケールに寄せて暗くすると、操作不可の印象が視覚的に固定されるからです。
実際、彩度と明度を同時に落とす表現は、色の差よりも状態の差を強く見せます。
無効は「消す」のではなく「使えない」と見せる、ここがポイントです。

色相違いでレアリティ・属性を量産する

同じ剣アイコンでも、パレットの色相だけを変えれば鉄、銀、金へとレアリティ違いを並べられます。
形を描き直さずに済むため、制作コストを抑えたまま見た目の格を出せるのが強みです。
共有パレットを使っていれば、数色を入れ替えるだけで全アイコンの色変えが連動し、炎は赤、氷は青、雷は黄といった属性差もまとめて展開できます。
剣を金色に塗り替えるときにパレットの3色を差し替えるだけで済んだ場面では、銀、銅、ミスリルまで数分で4段階を揃えられました。
これは、量産したいアイコンほど共有パレットが効く理由をはっきり示しています。

よくある失敗と書き出し設定

16x16のUIアイコンは、最初から情報を詰め込みすぎると輪郭が潰れ、何の絵か判別しづらくなります。
迷ったときは細部を足すより先に削り、1色に統合できる中間色や不要な装飾を見直すのが近道です。
並べて使う前提なら、線幅1px、暗色縁、左上光源をそろえ、ひとつだけ浮いて見える状態を先に消しておきましょう。

詰め込みすぎ・線幅バラつきの直し方

最も多い失敗は『詰め込みすぎ』です。
16x16に細部を全部入れようとすると、情報が相互に干渉して輪郭が読めなくなります。
似た中間色が3つもあって濁って見えたアイコンを、色を1色に統合しただけでスッキリ読めるようになった経験があるなら、まさにその感覚だと思ってください。
小サイズでは「削るほど読める」が鉄則です。

次に多いのが線幅・縁取り・光源のバラつきでしょう。
セットで並べたときに1個だけ浮く場合、原因はたいていここにあります。
線幅1px、暗色縁、左上光源のように共通ルールを決め、迷ったらそこへ戻して揃え直しましょう。
見た目の統一感は、個々の完成度より先に全体の一体感を作ります。

ニアレストネイバーで拡大ボケを防ぐ

ゲームやアプリで拡大表示するなら、ニアレストネイバー（最近傍法）で拡大するのが基本です。
バイリニアなどの補間が入ると、ドットの境界に中間色が混ざって輪郭がぼやけ、ピクセルアートらしさが崩れます。
エンジン側でテクスチャのフィルタをPoint no filter、あるいはNearestに設定して、拡大時も元のドットをそのまま見せてください。

アイコンがぼやけて困ったとき、フィルタをPointに変えた瞬間にドットがくっきり戻ることがあります。
そこで初めて、書き出しだけでなく読み込み側の設定まで含めて制作工程だと分かります。
拡大時の見え方は描画後に勝手に決まるので、制作時点で「どの拡大方法で使うか」まで想定しておくと安全です。

透過PNG・スプライトシートで書き出す

書き出しは用途で2択です。
アイコンを個別に使うなら透過PNGを1枚ずつ、まとめて管理するなら全アイコンを並べたスプライトシート（透過PNG）にして、エンジン側で切り出して使います。
個別PNGは差し替えが楽で、スプライトシートは量が増えたときに。
制作途中でも運用途中でも迷いにくい形式を先に決めておくとよいでしょう。

背景は必ず透過（アルファ）にして書き出します。
透過にしておけば、ボタン枠やUI背景の上に重ねても白い四角の縁が出ず、どんな配色の画面にも自然に馴染みます。
小さなUIアイコンほど余白の処理が見えやすいので、背景色を焼き込むより透過で持たせたほうが扱いやすいのです。
おすすめです。