テクニック

テクニックの記事一覧

ドット絵テクニック8選｜プロが使う表現技法

ドット絵の見栄えは、技法をたくさん足した量ではなく、1pxをどこに置くかの判断で決まります。この記事は、32x32や64x64の小さなキャンバスで表現を磨きたい人に向けて、題材に応じて選ぶべき8つの技法を、定義・効果・具体配置・失敗例までセットで整理していきます。

ドット絵の影付けは、色数より先に光をどこから当てるかを固定すると一気に整います。この記事は、16x16〜32x32の小さなキャラや顔アイコンで立体感を出したい初心者に向けて、左上・右上・逆光の3方向を最短で描き分ける考え方を、フラット、ディザリング、リムライトの3パターンに整理して解説します。

16x16のキャラ頭部で、最初は黒の1px外周にしていたものを影側だけ2pxへ切り替えたことがあります。白背景のSNSでは輪郭が拾われやすくなり、黒背景では外周の重さだけが前に出る感じも薄れて、同じ絵なのに見え方が一段整いました。

ドット絵のアンチエイリアスは、斜線や曲線の境界に中間色を置いて、ピクセルの段差を「ぼかす」のではなく「整えて見せる」作業です。とくにAsepriteで32x32前後のアイコンやスプライトを描き始めた人ほど、まずはピクセル配置そのものを直し、

ドット絵で色数が足りないとき、境界の段差をそのまま受け入れる必要はありません。ディザリングを覚えると、2色しかない場面でも中間色や階調を擬似的に作れますし、16x16や32x32の小さなキャンバスでも陰影の説得力が一段上がります。

この記事では、まずディスプレイの「サブピクセル（副画素）」と、ドット絵やゲームで1px未満の動きに見せる「サブピクセル表現」をきちんと切り分けます。液晶のRGB副画素を使う文字表示の話と、作画で中間色を置く話、実装で小数座標や描画スナップを使う話は、同じ名前でも中身が別物です。

32x32の剣アイコンを詰めているとき、刃のエッジに1pxだけ白寄りの強いハイライトを置いた瞬間、ただの灰色が急に鋼へ変わる場面があります。金属がプラスチックに見えてしまう原因は感覚論ではなく、ピクセル単位の置き方でほぼ説明できます。

16x16、32x32、64x64のドット絵は、ふつうのイラスト構図をそのまま縮小しても読めません。小さな画面では主役の形が一目で伝わることがすべてで、三分割は厳密に当てはめるよりも粗く使い、端や中心から1〜2pxの逃げを取り、4〜8色のパレットで明暗差を先に決めると画面が整理されます。

色数を絞るほどドット絵はまとまって見えますが、そこで明度差と色の役割分担を外すと、途端に主役が埋もれて輪郭まで鈍ります。以前、32x32の瓶アイコンを4色版と8色版で描き比べたときも、背景との明度差を目安として約20%上げただけで、何のアイコンかを読み取る速さが変わることがありました。