ドット絵アイコンを作る - グリッド・パレット・レイヤー・書き出し

ドット絵は「低解像度の絵」ではなく、点を選ぶ表現

写真を小さく縮めただけの画像と、ドット絵は同じではありません。縮小画像では計算が中間色を作り、細部を平均化します。ドット絵では作者が「ここを輪郭にする」「この一マスを目として読ませる」と選びます。つまり、描いている対象だけでなく、何を残し、何を捨てるかも作品の一部です。

専用エディターのAsepriteが、Indexed Color Palette、Layers、Pixel Perfect Freehandを別々の中核機能として掲げているのも象徴的です。ドット絵は単なるレトロ風フィルターではなく、色の集合、重なり、ピクセル列を意識して組み立てる制作方法だからです。 （Aseprite Features）

だから、最初から「きれいな線」を目指す必要はありません。必要なのは、最終表示で何が伝われば成功かを決めることです。SNSの顔アイコンなら目と髪型、ゲームの立ち絵なら頭・胴・持ち物の比率、なまずなら長い胴と三角の口。目的が決まると、残すべきピクセルが見えてきます。

32×48という情報量を味方につける

画像を拡大する（別タブ）

32×48は全部で1,536マスです。しかし、透明部分や大きな同色面を除けば、輪郭と表情に使える判断点はさらに少なくなります。横方向の一ピクセルは幅の約3.1%、縦方向では高さの約2.1%。高解像度の絵なら誤差になる一マスが、このキャンバスでは姿勢や年齢まで変えます。

制作中は8倍や16倍へ拡大して打てますが、判断は必ず原寸へ戻します。拡大画面は「ピクセルを置く場所」を見るため、原寸は「何に見えるか」を確かめるための表示です。拡大時に美しくても、32×48で目と口が一塊になれば情報が競合しています。逆に原寸で読めるなら、拡大時の素朴さは欠点ではありません。

なまずドット工房は、拡大書き出しの際にブラウザの画像平滑化を切り、整数倍で描画しています。これはピクセルの境界を保つためです。Canvasの既定の拡大処理は画像を滑らかにしてぼかす場合があり、imageSmoothingEnabledを無効にすると鋭いピクセルを保てることがMDNにも示されています。 （MDN: imageSmoothingEnabled）

細部より先にシルエットを作る

初心者が最も時間を使いやすいのは、目、髪飾り、服の模様です。しかし、それらは外形が崩れていると救済になりません。最初に見るべきなのは、頭の幅、胴の長さ、左右へ張り出す髪や持ち物、足元の接地位置です。黒一色に置き換えても向きと姿勢が分かるなら、土台は強い。

シルエットには外側の塊だけでなく、内側の空白も含まれます。腕と胴の間、髪と頬の間、持ち物と体の間に一マスの抜けがあるだけで、別々の部位として読めることがあります。すべてを接触させると大きな団子になり、離しすぎると部品が浮きます。「接続する場所」と「空ける場所」を交互に作るのがコツです。

正面向きでも、完全な左右対称が必ずしも正解ではありません。髪の房、肩の高さ、口角、アクセサリーのどれか一つをずらすと、静止画へ向きや気分が生まれます。ただし非対称を同時に増やすとノイズになります。まず対称で安定させ、意味のある一か所だけ崩すと管理しやすくなります。

輪郭とピクセルの並びを整える：一本の線にもリズムがある

画像を拡大する（別タブ）

斜線は、1マス右・1マス下を繰り返せば45度になります。より緩い傾きなら「右へ2、下へ1」、丸みにしたいなら「3・2・1」のように歩幅を変えます。この階段の間隔が突然「2・2・1・3」と乱れると、小さな突起に見えます。輪郭をなぞるときは、点ではなく歩幅の列として観察します。

孤立した一ピクセルは非常に強い記号です。目の光、金属の反射、ほくろなら役立ちますが、影の中へ理由なく散るとゴミやノイズに見えます。二つ以上の同色ピクセルが辺や角でつながる「クラスター」を基本にし、孤立点は意図のある場所へだけ残すと画面が落ち着きます。

アンチエイリアスは「使ってはいけない」のではありません。輪郭色と地色の間へ中間色を置けば、斜線を滑らかに感じさせられます。ただし32×48では中間色の一マスも形として読まれます。外周のすべてをぼかすと、輪郭が太り、透明背景や別色背景で縁取りが汚れて見えることがあります。まず硬い輪郭を完成させ、必要な曲線だけへ限定して追加してください。

なまずドット工房のペンは、Shiftを押しながら始点から終点へドラッグすると直線を作れます。輪郭の基準線を引くときに便利ですが、自動生成された直線をそのまま完成形にせず、端点の一マスを足す・引くことで胴や髪らしい抑揚を与えます。

少ない色で光と素材を伝える

色数を絞る目的は、昔の機械を真似ることだけではありません。同じ色を複数の場所で再利用すると、それらが一つの世界の光を受けているように見えます。髪の影色を服の最暗部にも使い、肌の明色を金属の反射にも一部使う。色が役割を兼ねるほど、絵はまとまります。

最初は「輪郭」「影」「基準色」「光」の四役で十分です。色相より先に明るさの差を確認してください。赤と緑でも同じ明るさなら、色覚や表示環境によって境界が弱くなります。逆に明暗が整理されていれば、後から色相を遊んでも形は残ります。

陰影は物体のすべての辺へ均等に付けるのではなく、光源を一つ決めます。左上から光が来るなら、左上に明色、右下に影色を置く。顔、髪、服で同じ方向を守るだけで立体がつながります。素材差は色数より面積で表せます。金属は小さく強いハイライト、布は広く穏やかな明暗、髪は房の流れに沿った塊として置きます。

パーツとレイヤーを、近道ではなく設計に使う

ドット工房のパーツは完成品を選ぶためだけのものではありません。体、後ろ髪、ボトム、トップス、目、鼻、口、前髪、顔飾り、頭飾り、持ち物、エフェクトという分類が、そのまま「どの順番で考えるか」のチェックリストになります。白紙から描く場合でも、この順番で問題を分割できます。

体・髪・顔・服などの基本カテゴリは、新しい候補を選ぶと同カテゴリの前のパーツと置き換わります。頭飾り、顔飾り、持ち物、エフェクトは複数追加できます。追加したのに見えない場合は消えたのではなく、別パーツの後ろへ隠れている可能性があります。右側の「レイヤー順（上が手前）」で、見せたい要素を上へ移動してください。

レイヤーをまたいだ並べ替えは、見た目の意味まで変えます。前髪を目の後ろへ置けば髪の隙間から顔が見え、手前へ置けば目へかかります。持ち物を胴の前へ置くのか、背中側へ回すのかでもポーズが変わる。レイヤーは単なる整理棚ではなく、二次元の画像へ前後関係を作る装置です。

自由描画は「カスタムレイヤー」として、表示中の全パーツより手前へ描画されます。パーツの境界を修正する、ハイライトを足す、オリジナル記号を重ねる用途に向きます。逆にパーツの背後へ自由描画を置く機能ではありません。背景や後ろ側の形が必要なら、既存パーツと配置順で作れるかを先に検討します。

ツールの操作を、絵作りの判断へ結びつける

画像を拡大する（別タブ）

機能を全部使う必要はありません。重要なのは、いま「形」「色」「重なり」のどれを直しているのかを把握し、それに合う操作だけを選ぶことです。

PCではパーツをドラッグし、矢印キーで一マス、Shift＋矢印で四マス動かせます。DeleteまたはBackspaceで選択中パーツを削除できます。タッチ端末ではパーツをタップしてドラッグし、二本指でズーム、素早いダブルタップで表示倍率を初期状態へ戻します。ズームは見え方を変えるだけで、書き出すピクセル数は変えません。

とくに覚えておきたいのは、自由描画のUndoとパーツ編集が別系統であることです。パーツを動かした後でCtrl＋Zを押しても、その移動は戻りません。位置を大きく試す前には設定JSONを一度保存するか、元の座標を目で覚えられる一マスずつの比較にします。

一体を完成させる実践ワークフロー

作業を「パーツ選び」と「お絵描き」に分けると、途中で完成像を見失います。次の順番は、各段階で一つの問題だけを解くためのものです。

1. 1. 一文で目的を決める

   「丸いSNSアイコンで、眠そうな表情と赤い帽子が読める」のように、用途・感情・識別点を一つずつ書きます。判断に迷ったら、この一文へ貢献しない装飾を後回しにします。

2. 2. 体と髪だけで外形を作る

   体、後ろ髪、前髪を置き、顔や服はまだ選びません。頭と胴の比率、キャンバス上端・下端の余白、左右の張り出しを確認します。原寸で人型や生き物として読めるまで細部へ進みません。

3. 3. 目と口で感情の最小単位を作る

   目と口を一つずつ選びます。一マスずつ上下左右へ動かし、元気、無表情、眠そうなどの変化を観察します。鼻や顔飾りを足す前に、目と口だけで意図した感情が読める状態を目指します。

4. 4. 服を色面として置く

   トップスとボトムは模様より、顔・髪との明暗差を見ます。髪も服も暗いなら、輪郭色を共用しつつどちらかの基準色を明るくする。顔へ視線を戻したいなら、服の最明色を減らします。

5. 5. レイヤー順で前後を決める

   髪、顔飾り、持ち物がどこへ潜り、どこで前へ出るかを整理します。一枚ずつ非表示にし、隠れているだけのパーツや、不必要に重複した輪郭がないか確認します。

6. 6. 自由描画は修正から始める

   いきなり模様を増やさず、パーツ間にできた輪郭の段差、目立つ隙間、光源と逆向きのハイライトを直します。その後、作品の識別点になる一〜三ピクセルだけを足します。

7. 7. 原寸と非表示で引き算する

   32×48で見て、最初に目へ入る場所を確認します。視線が顔へ来ないなら、飾りやハイライトを一つずつ非表示にします。「足す前」より「消した後」が強ければ、その情報は不要です。

8. 8. JSONとPNGを別々に保存する

   編集を続けるための設定JSONと、使用するためのPNGは役割が違います。完成時だけでなく、シルエット確定時にもJSONを残すと、装飾を増やしすぎたときに戻れます。

目を鍛える6つの実験

上手な完成品を一度作るより、同じ土台で一項目だけ変えるほうが、何が効いたかを学べます。設定JSONを節目で保存し、次の実験を順に比較してください。

1. 1. 顔を一マスだけ動かす

   目と口以外を固定し、口を上・中央・下へ一マスずつ移動します。それぞれ32×48で見て、幼さ、元気さ、疲労感がどう変わるかを書き留めます。ピクセル単位の表情設計を体験する実験です。

2. 2. 識別点を三つから一つへ減らす

   帽子、顔飾り、持ち物を全部付け、次に一つずつ非表示にします。最後まで残した一つだけでキャラクターが区別できるなら、それが主役です。残りは主役を補助する明るさと面積へ下げます。

3. 3. 四色だけで自由描画する

   スポイトで輪郭、影、基準色、明色を一色ずつ取得し、その四色以外を使わず輪郭修正と小物を描きます。新しい色を作りたくなった場所は、色不足ではなく形不足でないかを疑います。

4. 4. レイヤーだけでポーズを変える

   持ち物を体の手前、髪の後ろ、顔飾りの前へ移し、座標と色は固定します。どこへ重ねるかだけで、持っている、背負っている、前へ掲げているという関係が変わるかを観察します。

5. 5. アンチエイリアスを片側だけ試す

   丸い輪郭の左半分だけへ中間色を一マスずつ置き、右半分は硬い輪郭のままにします。原寸と8倍で比べ、滑らかさが増えたのか、輪郭が太っただけなのかを判断します。

6. 6. 四つの出力を同じ画面で比べる

   32×48、128×192、256×384、512×512を保存します。ピクセルの形は同じでも、原寸は読解、4倍・8倍は掲載、512角はアイコン枠への収まりに向くことが分かります。用途に合わせて完成判定を変える実験です。

なまずを描く場合：特徴を増やすより、設定を守る

オリジナルキャラクターをドット絵へ落とすとき、解像度を理由に別の特徴を足すと、描きやすくても別個体になります。なまずわーくすの「なまず」は、長めの胴を床へ付けて進む足のない体型です。脚、足先、膝は描きません。人型パーツを土台にする場合も、下半身の形は自由描画で足すのではなく、足に見える分離を消す方向で整えます。

通常時のヒゲもありません。頬へケーブルが接続されているときだけ、左右へ伸びるケーブルがヒゲのように見えます。プラグの差し込み口も、接続中か、モジュラーのように接続を待機している場面以外では隠します。口は小さな三角。上下へ長く割れた形や横へ突き出す形は、くちばしに見えるため避けます。

32×48で全部を説明しようとせず、「足のない長い胴」「三角の口」「接続時だけ現れる太めのケーブル」という優先順位を守ります。識別点は多さではなく一貫性で強くなります。ポーズによって胴の長さは変形しても、足や恒常的なヒゲを追加しないことが、同じキャラクターとして見せる最低条件です。

保存と書き出しを使い分ける：JSONは制作、PNGは使用

ドット工房は編集状態を同じブラウザのlocalStorageへ自動保存します。ページを再読み込みしても続きを開けるのは便利ですが、ブラウザデータの削除、プライベートモード、別端末への移動には耐えません。長く残す作品は「設定保存」でJSONをダウンロードし、「設定読込」で戻せるようにします。

JSONにはパーツの種類、座標、重ね順、表示状態、自由描画が入ります。PNGはその時点で見えている結果だけです。PNGからレイヤーや元パーツを復元することはできません。また将来パーツ構成が変わり、JSON内のパーツIDが現行カタログに存在しない場合、その不明パーツは読込時に除外されます。重要な完成品はJSONとPNGを対で保管してください。

512角は32×48を無理に正方形へ伸ばしません。10倍の320×480として中央へ置くため、左右96px、上下16pxの透明余白が残ります。SNS側で丸く切り抜かれても縦長の全身を守りやすい設計ですが、顔だけを大きく見せたい用途では、キャンバス内で顔が占める面積自体を増やす必要があります。

PNGは可逆圧縮のラスタ形式で、アルファチャンネルによる透明度を持てます。ドット工房も背景を透明のまま書き出すため、別の背景へ重ねられます。PNGの色形式と任意のアルファチャンネルはW3Cの仕様にも定義されています。 （W3C: Portable Network Graphics）

なお、非表示にしたパーツと非表示中のカスタムレイヤーはPNGへ含まれません。書き出し直前に右側の◎と「カスタムレイヤー 表示」を確認します。作品データはブラウザ内で合成され、PNGとJSONはいずれも端末へ直接ダウンロードされます。

よくある失敗と直し方：足す前に原因を分ける

• 拡大するときれいなのに、アイコンで読めない。 細部でなく原寸の明暗とシルエットが競合しています。32×48へ戻し、顔飾り、模様、ハイライトを一つずつ非表示にします。
• 輪郭がガタガタして見える。 斜線の歩幅を「1・1」「2・1」などの列として見直します。突起になっている一マスを消し、同じ傾きの区間をそろえます。
• 色を増やしても立体にならない。 色数ではなく光源が不統一です。いったん輪郭・影・基準・光の四役へ戻し、全パーツで光の方向をそろえます。
• 新しいパーツを選んだら前のパーツが消えた。 体、髪、顔、服などはカテゴリ内で置き換わる仕様です。複数候補を比較したい場合は、切替前に設定JSONを保存します。
• 追加したパーツが見えない。 レイヤーの後ろへ隠れているか、非表示になっています。「レイヤー順（上が手前）」で前へ出し、◎を確認します。
• 消しゴムで服や髪が消えない。 消しゴムが消すのはカスタムレイヤーの自由描画だけです。元パーツは右側の×で削除するか、別パーツへ置き換えます。
• Ctrl＋Zでパーツの移動が戻らない。 Undo／Redoは自由描画専用で最大10回です。大きな配置変更の前に設定JSONを保存し、移動は矢印キーで段階的に行います。
• 塗りつぶしが思わぬ場所まで広がった。 同色領域の境界に穴があります。Undoで戻し、ペンで一マスの隙間を閉じてから再度塗りつぶします。
• PNGを保存したので編集データも安全だと思った。 PNGは合成結果であり、パーツやレイヤーを保持しません。設定JSONも一緒に保存します。
• 既存作品のキャラクターに似すぎた。 色だけでなく、シルエット、髪型、顔の配置、象徴的な小物を見直します。公開・配布する作品は、特定作品の識別要素をなぞるのではなく、自分の設定から形を作ります。

一ピクセルを選べるようになると、大きな絵も変わる

ドット絵の制約は、描けないものを増やすためではありません。「この形に本当に必要な情報は何か」を目に見える単位へ分解してくれます。シルエットは全体の約束、輪郭の階段は線のリズム、色は光と素材の役割、レイヤーは前後関係、自由描画の一マスは最後の意思表示です。

まずパーツで形を借り、非表示で引き算し、原寸で読み、自由描画で必要な一マスだけを戻す。その順番なら、32×48は狭いキャンバスではなく、判断の理由が見える実験室になります。

参考資料

本稿の制作手順は、なまずドット工房の現行実装を操作単位まで確認したうえで構成しました。形式・描画処理に関する説明は、次の公式資料も参照しています。

• Aseprite — Features：レイヤー、Indexed Color Palette、Pixel Perfect Freehandなど、ピクセルアート制作機能の公式一覧。
• Aseprite Docs — Color Bar Tutorial：Indexed Color Modeとパレット参照の仕組み。
• MDN Web Docs — CanvasRenderingContext2D.imageSmoothingEnabled：Canvas拡大時の平滑化と、ピクセル境界を保つ設定。
• W3C — Portable Network Graphics (PNG)：PNGの可逆圧縮、色形式、アルファチャンネルに関する仕様案内。