ドット絵 スライムの描き方｜32x32でぷるぷる質感を作る

スライムは、32x32のキャンバスと12色前後のパレットで立体表現を学ぶのに向いた、球体に近い単純なドット絵キャラクターです。
丸い形を置くだけならすぐ描けますが、ただの色の塊から抜け出すには、影とハイライト、そして半透明の見せ方が決め手になります。
ドラクエ型の青いスライムでも毒っぽい緑のスライムでも、光源を左上に固定して段階的に影を落とすだけで、32x32の中にしっかりした奥行きが生まれるでしょう。
この記事では、明るめの輪郭と内部の薄い影、控えめなハイライトでぷるぷるした質感を作り、スクワッシュ＆ストレッチで跳ねる動きまでつなげて描いていきます。

完成イメージと準備するもの

まず完成形をはっきり思い描くと、迷いが一気に減ります。
表面がてかり、中身がほんのり透けて見える「ぷるぷる・つやつや」のスライムを目標にすると、必要なのは色数の多さではなく、光をどこへ置くかだと分かるからです。
初めてなら32x32の正方形で始めると、影とハイライトを入れる余白が確保しやすく、1体目の学習に向いています。

目指す「ぷるぷる・つやつや」スライムの完成イメージ

最初に完成イメージを言葉にしてから描き始めると、工程ごとに何を足すかがぶれません。
スライムは球体に近い単純な形なので、立体表現の基本である光源固定、段階的な影、控えめなハイライトを試す題材としてちょうどよい存在です。
底が広く上が丸いドーム型を思い浮かべ、右下に影、左上に小さな光を置く構図を先に決めてしまいましょう。

キャンバスサイズと色数の決め方

キャンバスは32x32が基準です。
16x16でも描けますが、影とハイライトを入れるスペースが狭く、形を整えながら立体感まで出すのが難しくなります。
色数は12色前後が扱いやすく、ベース1色に影2段階、ハイライト1〜2色を足せば、残りを輪郭・目・口へ回せます。
色を増やすほど豪華になるわけではなく、むしろまとまりが崩れやすいので、少ない色で見せる意識を持ちましょう。

使うツール（Aseprite・Piskel など）と基本設定

ツールはAsepriteのような有料定番でも、Piskelのような無料のブラウザ型でも構いません。
ピクセル単位で打てるなら十分で、ペンシル、バケツ、選択範囲が使えれば制作は進められます。
新規で32x32キャンバスを作り、グリッド表示をオンにして1ドットの大きさを確認すると、線の太さや曲線の段差がつかみやすいです。
ここまで整えておけば、あとは形を取って塗り、光を置くだけ。
おすすめです。

ステップ1：アウトラインで丸い基本形を取る

アウトラインで最初に固めるのは、スライムの丸みよりも「座りのよさ」です。
底をやや平らにしたドーム型にすると、地面に接している感じが出てシルエットが安定します。
ここで輪郭を先に決めておくと、あとから塗るベース色や影、ハイライトの置き場まで迷いにくくなります。

底が広く上が丸い「ドーム型」シルエット

スライムの土台は、完全な円よりも底が少し広く、上に向かって丸くふくらむドーム型が描きやすいです。
下端をほんの少し平らに寄せるだけで、浮いた印象が消えて、床にちょこんと座っている見た目になります。
球体に近い単純な形だからこそ、最初の輪郭で接地感を作ると全体がまとまりやすいのです。

左右対称をきれいに取るコツ

左右対称が崩れると、スライムはすぐに不自然に見えます。
そこで中心に1pxの縦ガイド線を引き、左半分だけを先に打ってから反転コピーで右半分を作ると、形のズレを抑えやすいです。
片側を丁寧に作るほど、全体の輪郭が安定します。
対称を手で合わせようとすると細かな揺れが出やすいので、最初から片側基準で進めましょう。

なめらかな曲線を打つドットの増やし方

曲線をなめらかに見せるには、ドット数を「1,1,2,2,3」のように1段ずつ増やしていくのがコツです。
急に2段、3段と段差を付けると、輪郭のギザギザが目立ってしまいます。
段差が気になったら1ドットずつ動かしてリズムを整えると、丸みが自然に繋がります。
輪郭色はこの段階では1色だけに絞り、暗めの色でシルエットを固めることに集中すると、後の着色がずっと楽になります。

ステップ2：ベース色を置いて立体の下地を作る

スライムの色作りは、まず青系か緑系のどちらか一方向に寄せて、1色のベースから組み立てると進めやすいです。
青系はドラクエ型の王道感を出しやすく、緑系は毒や粘液の印象を強めやすいので、狙う雰囲気に合わせて軸を決めましょう。
最初から複数色を散らすより、影とハイライトを後から両側に振れる状態を作るほうが、立体化の自由度が高くなります。

スライムらしい配色（青系・緑系）の選び方

スライムの王道カラーは、青系と緑系の2方向に集約されます。
青系はゲームらしい親しみやすさが出しやすく、緑系は少し毒気のある粘液感を足しやすいので、まずはどちらの性格に寄せるかを決めるのが近道です。
中間色の1色で塗り始めると、影を深くする方向にも、ハイライトで透明感を上げる方向にも広げやすくなります。

青系で描く場合は、いきなり濃い青ではなく、彩度を少し落とした中間の青を選ぶと扱いやすいです。
ベタ塗りの段階では地味に見えても、あとから濃い影と明るい光を足す余地が残るため、仕上げで一気にスライムらしさが立ち上がります。
色を置く順番を誤らないことが、結果的にいちばん描きやすい流れになるでしょう。

塗りつぶしで下地を作る手順

輪郭の内側をバケツツールで塗りつぶし、まずは下地を作ります。
ここでは質感を作り込む必要はなく、形の中に均一な色が入っていることが先です。
塗り残しや1pxの穴があると、バケツが外へ漏れてしまうので、輪郭が閉じているかを先に確認しておくと手戻りが減ります。

実際にバケツがはみ出したときは、アウトラインの隙間を1px埋めて閉じ直すと収まりやすいです。
小さな穴は見落としやすいものですが、そこを塞ぐだけで塗りつぶしの挙動が安定します。
下地づくりの段階では、きれいに面が取れていることが最優先。
おすすめです。

彩度を少し下げて影・光の余白を残す

ベース色は最高彩度を避け、彩度を1〜2段下げた色にするのがコツです。
最初から最も鮮やかな色を置くと、あとでハイライトを足しても明るくする余白がなくなり、立体感の伸びしろが狭くなります。
少しだけ落ち着いた色を置いておくと、影側にも光側にも振りやすくなり、完成時のコントラストが素直に決まります。

この時点では平面的でよいので、ベタ塗りの状態を気にしすぎなくて構いません。
次のステップで影を足して初めて立体になりますから、まずは土台をきれいに整えましょう。
青系でも緑系でも、下地が安定していればその後の調整はぐっと楽になります。
焦らず進めてみてください。

ステップ3：影を入れて丸みと重さを出す

光源を一か所に決めると、スライムの丸みは一気に読みやすくなります。
左上から光が当たる前提で塗ると、明るい面と暗い面の向きがそろい、右下に影が集まることで球体らしい立体感が生まれるのです。
影を増やす前に、まず光の方向を固定しましょう。

光源を左上に固定する

左上を光源に置くと決めたら、影の置き場所は迷いません。
光が当たる面は左上、暗くなる面は右下という役割分担がはっきりするので、どのパーツをどこまで明るくするかを毎回同じ基準で判断できます。
スライムのような単純な形ほど、この基準が効きます。
丸い面に沿って影を流すと、ただの色分けではなく、ふくらみのある塊として見えるからです。

右下の縁から内側へ、弧を描くように1段目の影を置いていくと、光を受けた面との境目が自然につながります。
直線で切るより、曲面に沿った流れを作ったほうが、やわらかいゼリーのような質感が残るでしょう。

影は2段階まで

影は2段階までに抑えると、ゲーム風の軽快さが保てます。
1段目はベースのすぐ暗い色、2段目はさらに暗い色にして、右下の縁へ向けて重ねる形が扱いやすいです。
段数を増やしすぎると、陰影は細かくなっても画面の印象は重くなり、ドット数の少ない絵では輪郭がにごりやすくなります。

塗り広げる面積も控えめで十分です。
スライムの2/3はベース色を残し、右下の1/3に影を集めると、明るい面がきれいに残ってつや感の余地が生まれます。
影を狭く入れるほど、形そのものが前に出てくる。
ここがポイントです。

底の接地影で「置かれている感」を出す

底の縁に1px濃い影を足すと、スライムは地面に触れているように見えます。
ほんの1pxでも、接地ラインが締まるだけで浮遊感が消え、キャラが画面上の空間に「置かれた」感じになるのです。
立体感の演出というより、重さを支える最後のひと押しだと考えると分かりやすいでしょう。

実際には、底の接地ラインに濃い影を1pxだけ入れた瞬間、宙に浮いていた印象がすっと消えます。
右下へ集めた影と接地影がつながることで、丸さと座り込みの感触が同時に立ち上がるからです。
小さなスライムほど、この1pxが効きます。

ステップ4：ハイライトと半透明表現でゲル質感を作る

ハイライト、内部の影、明るい輪郭の3つがそろうと、ゲル状のスライムは一気に手触りのある見た目になります。
なかでも最初に効くのは左上の小さな光で、そこを2〜3pxに絞るだけで表面に張りが生まれ、つやつやした印象へ寄っていきます。
顔パーツはそのあとに足すと、質感の演出とキャラクターらしさがぶつからず、まとまりやすいです。

左上に小さなハイライトを置く

ハイライトは、光源が左上にある前提で、その方向に小さく置くのが基本です。
2pxでも十分に効きますし、2〜3pxの小さな塊にとどめると、面が急に“濡れた”ように見えず、表面だけがきゅっと反射して見えます。
実際に左上へ明るい点を置いてから全体を見ると、色数を増やさなくても張りが出るのが分かるでしょう。

ハイライトの入れすぎが「汗っぽさ」を生む

白をあちこちに散らすと、光沢というより汗をかいたスライムに見えやすくなります。
試しにハイライトを増やすと輪郭の読みやすさは上がるのに、質感はむしろ安っぽく崩れます。
いったん1点に戻すと、つや感が締まり、視線の集まる場所もはっきりするのです。
おすすめです。
ここは盛りすぎないほうが映えます。

明るい輪郭・内部の影で半透明（ゲル）感を出す

半透明感は、明るめの輪郭、内部に薄い影、控えめなハイライトの3点で作ります。
輪郭が明るいとゲルの外皮が少し光を受けたように見え、内部の下側に薄い影を入れると、中身が透けて見える立体感が出ます。
そこへ強すぎないハイライトを添えると、外側のてかりと内側の透け感が同時に立ち上がるのです。
内部の影を強める場面ではハイライトを弱め、光の主張を少し引いてみてください。

目や口を最後に1〜2pxで足す

質感が決まったら、最後に目や口を1〜2pxで足します。
点目と小さな口だけでも表情は十分に出て、ただの丸い塊が一気にキャラクターへ変わります。
先に顔を描くと視線がそちらへ引っ張られますが、後から置けばゲルのつやと透け感を壊しません。
細部は小さく、でもはっきり。
これで十分です。

ステップ5：アンチエイリアスで輪郭をなめらかに仕上げる

アンチエイリアスは、曲線の輪郭にだけ丁寧に入れると効きます。
ギザギザが気になる場所に輪郭色とベース色の中間色を1色作り、段差の角へ1pxずつ置くと、目に刺さる硬さがすっと抜けるでしょう。
広い面を塗りつぶす発想ではなく、曲線の流れを保ったまま段差だけをならす考え方です。

中間色を1色作って角に置く

実作業では、まず輪郭色とベース色の中間にある1色を用意します。
その色を曲線の内側や外側の角に1pxずつ差し込むと、輪郭の階段状の切れ目が弱まり、線の流れが自然に見えてきます。
特にスライムのように丸みが強い形では、少しの補正で印象が変わりやすいです。
段差を消すというより、視線が引っかからないよう受け止める感覚に近いでしょう。

曲線の段差に中間色を1pxずつ置いていくと、どこで角が立っていたのかが見えにくくなります。
黒い輪郭のままだと硬さが先に立ちますが、1色挟むだけで面のつながりが滑らかになり、少ないドットでも形が整って見えるのです。
細部を増やすのではなく、必要な場所だけを選ぶのがコツです。

アンチエイリアスは曲線の目立つ箇所だけに

アンチエイリアスは全周に掛けないほうが仕上がりが締まります。
目立つ曲線部分だけに絞ると、残した硬い輪郭との対比が生きて、形の輪郭が読みやすいままになります。
逆に全面へ広げると、境界が均されすぎてぼやけ、キャラクターの持つメリハリが薄れるのです。
見せたい場所だけを柔らかくする、そこが判断の分かれ目でしょう。

作業の途中で全周を均一に処理したくなりますが、そこで止めると見映えは上がりにくいです。
角が強く出る箇所、丸みが崩れて見える箇所、視線が止まりやすい箇所に限定して整えると、完成度は上がりやすくなります。
やりすぎないこと自体が技術であり、引き算の発想がそのまま画面の読みやすさにつながるのです。

輪郭色を黒以外にしてリッチに見せる

輪郭色を真っ黒から濃紺へ変えただけで、スライム全体が柔らかくまとまって見えることがあります。
黒は強く締まる反面、色面との落差が大きく、形によっては重く見えやすいからです。
ベース色に近い濃い色を使うと、境界は残したまま空気が少し和らぎ、絵全体がリッチになります。
濃緑のような色も同じ考え方で扱えます。

輪郭を少しだけ色寄りにするだけで、キャラクターの印象はずいぶん変わります。
縮小したときに硬すぎず、拡大して見たときにも色のつながりが自然に残るため、仕上げの安定感が出るのです。
最後は全体を縮小表示で確認し、ゲーム画面のサイズで歪みがないかを見ると、拡大中には気づかなかった引っかかりが見えてきます。
完成形はその視点で決まるでしょう。

応用：跳ねるスライムのアニメーションを作る

完成した静止画をそのまま動かすのではなく、まず潰れと伸びを足して弾力を作ると、スライムの跳ね方が一気に生きてきます。
スクワッシュ＆ストレッチはアニメーションの基本原則で、見た目の誇張がそのまま勢いの説得力になる表現です。
静止画を複製してコマごとの差をつければ、2〜4コマでも十分に跳ねる動きが組めます。

スクワッシュ＆ストレッチで弾みを出す

スライムの跳ねを出すなら、潰れる瞬間は横に広げて縦を詰め、空中で伸びる瞬間は縦に引き上げて横を少し細くします。
横1.1・縦0.9、あるいは横0.9・縦1.1という目安は、形を壊しすぎずに弾性だけを強めるための基準です。
対比が小さいと動きは弱く見え、対比がはっきりすると着地と離陸の感触が伝わりやすくなるでしょう。

2コマから始めるアニメーションの組み方

最小構成は、潰れたコマと伸びたコマの2枚です。
完成した静止画を複製して、1コマ目を横に潰し、2コマ目を縦に伸ばすだけでも、ループ再生すると「沈んでから跳ね上がる」流れが見えてきます。
慣れてきたら、間に通常形のコマを挟んで3〜4コマにすると移動のつながりがなめらかになり、跳ね上がる途中の重さまで表現しやすくなります。

オニオンスキンで前後のコマを重ねて確認する

コマを増やすと、次に描く輪郭が前後の形とずれやすくなります。
そこでオニオンスキンをオンにすると、前後のコマが半透明で重なって見えるため、輪郭のふくらみ方や中心の移動を目で追いながら調整できます。
実際には、前のコマを透かした状態で次のコマを少しずつ直し、縁がガタつかない位置を探す作業になるはずです。
弾みの大きさよりも、形のつながりを丁寧に整えることが仕上がりを安定させる近道になります。

よくある失敗とその対策

最初につまずきやすいのは、形そのものよりも「影」と「ハイライト」の置き方です。
塊に見える、左右が合わない、暗く重くなる、汗っぽく光るといった失敗は、原因を切り分けると意外なほど直しやすくなります。
症状ごとに手を入れる場所を決めてしまえば、迷わず整えられるでしょう。

「ただの色の塊」に見えるときの直し方

「ただの丸い色の塊」に見える場合は、輪郭を描き込む前に立体の骨組みが足りていないことが多いです。
とくに影とハイライトが弱いと、面の向きが読めず、どれだけ線を整えても平たいまま残ります。
そこで、暗部を2段階に分けて入れ、最後に1点だけ強いハイライトを置くと、スライムでも一気に奥行きが出ます。

実際に、塊にしか見えなかったスライムへ影2段とハイライト1点を足しただけで、輪郭の内側に厚みが生まれました。
ポイントは、光る場所を増やすことではなく、最も明るい点をひとつ決めることです。
面の向きが定まるので、初心者ほどこの1点の効果は大きいはずです。

左右非対称・形が歪むときの対処

左右非対称が崩れるときは、最初から全体を描こうとするとズレが積み重なります。
片側だけをきちんと作ってから左右反転コピーで貼り合わせると、形の狂いを早い段階で抑えやすくなります。
中心線を1px残しておくと、貼り合わせ位置の目印になり、微妙なズレも見つけやすいでしょう。

顔や胴体のように、左右の見え方が少し違うだけで印象が変わる形ほど、この方法が効きます。
片側を基準にして整えると、後から削る量が減るので、描き直しの手戻りも少なくなります。
左右対称に近い造形では、まず片側を完成形まで持っていくのが。

影が重い・ハイライトが多すぎるときの調整

影が重いときは、暗さそのものより、影の「層」と「面積」が効いています。
影を3段以上重ねると空気が詰まったように見えやすく、重心だけが下がって絵が鈍くなります。
2段階に戻し、影の面積を右下1/3程度に抑えると、重さが抜けて軽い質感に戻しやすいです。

ハイライトが多すぎると、つやではなく汗のように見えることがあります。
白い点を散らしたくなりますが、光源がひとつなら明るさの頂点もひとつで十分です。
左上の1点に集約し、他を消してみてください。
複数置いていたときよりも輪郭が締まり、表面の素材感が落ち着きます。