ドット絵で木・草を描く|自然物の塗り方

木や草のドット絵は、葉を1枚ずつ丁寧に置こうとすると、かえってべた塗りに見えて平面的になりやすい。
『塊で考えろ』と先輩に言われた瞬間に描き方が変わったように、葉をクラスターとしてまとめ、影・基本色・ハイライトの3色カラーランプで明暗を組むだけで、背景に置ける立体感が出てきます。
色数が限られるドット絵では、この3トーン設計とヒューシフトが質感づくりの土台であり、草や木がのっぺり見える問題を最短でほどく手がかりになります。
広葉樹、針葉樹、茂み、岩まで共通原則で描けるので、Asepriteのような一般的なエディタで、まずは塊の明暗を試しながら進めてみてください。

ドット絵の自然物が『のっぺり』する原因とゴール

ドット絵の自然物がのっぺり見えるのは、葉を1枚ずつ均一に並べてしまい、まとまりとしての明暗が作れていないからです。
色数が限られる以上、質感を支える主役はハイライトと影であり、まず塊としてどこを明るく、どこを沈ませるかを決めないと、どれだけ丁寧に打っても平面に寄ってしまいます。
ゴールは、ゲームのマップや背景にそのまま置ける、立体感のある木や草を安定して描けることです。

葉をべた塗りにすると平面に見える理由

初心者のころ、観葉植物を前にして葉を1枚ずつ忠実に打ち込んだことがあります。
形も枚数も実物に寄せたつもりでしたが、完成した画面はなぜか緑のべた塗りにしか見えず、かなり落ち込みました。
原因は単純で、葉の数ではなく、葉が集まったときにできる明暗差を見ていなかったからです。
ドット絵では色数が少ないぶん、陰影の設計がそのまま奥行きの設計になるので、葉の輪郭を増やすより先に、塊の中で光と影を分ける意識が必要になります。

『1枚ずつ』ではなく『塊（クラスター）』で考える

転機になったのは、先輩グラフィッカーの画面を覗いたときでした。
葉を点の集合として追うのではなく、数ピクセルの塊を判子のようにポンポン置いていて、しかも全部を描き切らずに隙間を残していました。
最初は雑に見えたのに、真似してみた瞬間に木らしさが一気に立ち上がったのです。
人の目は、葉の1枚1枚よりも、まとまりの輪郭と隙間のリズムを先に拾います。
だからこそ、1枚の葉を描く発想から、葉の塊を並べる発想へ切り替えると、少ない情報でも脳が空白を補完してくれるようになります。

この考え方に変えると、描く対象も整理しやすくなります。
葉を全部埋める必要はなく、見せたい場所にだけ密度を集めればよいので、樹冠の上部は明るめ、影側は締める、といった判断が素直に効きます。
おすすめです。
まずは2x2pxや数ピクセル単位の塊を、重ねすぎず接する程度に並べてみましょう。
葉そのものではなく、葉が集まってできるテクスチャを作るつもりで打つと、結果がかなり変わります。

光源は最初に1方向へ固定する

立体感を最後まで支えるのは、光源の一貫性です。
描き始める前に光が当たる方向を1つに固定し、その方向を葉の塊、幹、草のすべてで守るだけで、画面の中の自然物はばらつきにくくなります。
逆に、木は左上から光っているのに草は右上から明るい、といったズレが入ると、形が整っていても急にちぐはぐに見えるでしょう。
ゴールは、個々のパーツを上手く描くことではなく、ひとつの光で全体を束ねることにあります。

この原則は広葉樹でも針葉樹でも草でも同じです。
影側の面は少し沈め、光側にはハイライトを寄せる。
ただそれだけで、塊が空間に置かれている感覚が出ます。
あとはそのルールを崩さずに、広葉樹、針葉樹、草、茂み、視点ごとの描き分けへ進めば、マップに置いたときに浮かない自然物が組めるようになります。

色の準備:3色カラーランプとヒューシフト

カラーランプは、暗から明へ順序づけた色の並びで、自然物の立体感を作る土台になります。
影・基本色・ハイライトの3トーンだけでも、形のふくらみは十分に読ませられるので、最初から色数を増やさない方が絵はまとまりやすいです。
まずは少ない色で面を分け、必要ならあとから調整する流れにすると、迷いが減って作業も速くなります。

カラーランプとは:暗→明の順序づけられた色列

ドット絵のカラーランプは、ある面に当たる光の強さを暗→中間→明で並べた、色の階段そのものです。
自然物では影、基本色、ハイライトの3トーンを用意すれば、木の丸みも草の群れも岩の角張りも表現できます。
色を増やす前に、この3段をきちんと置くことが先で、そこが崩れるとどれだけ色を足しても形が締まりません。

葉を1枚ずつ均一に置くと、面の差が消えてのっぺりします。
だから発想は「葉を描く」より「葉の塊を組む」に切り替えた方がいいです。
塊ごとに影と明るい面を割り当てれば、見る側は隙間を自然に補完します。
2x2pxの小さな正方形を葉の単位にして、重ねすぎず接する程度に並べると、少ない色でも密度が出ます。

ヒューシフトで色数を増やさず立体に見せる

ヒューシフトは、明度だけでなく色相もずらして立体を見せる手法です。
影を青〜紫の寒色へ、ハイライトを黄の暖色へ寄せると、同じ3色でも発光感と奥行きが増します。
単純に暗くしただけの影は泥っぽく沈みますが、寒色に振ると空の青を拾った影らしさが出るため、面の向きがはっきり読み取れるのです。

草のような緑の自然物では、この差がさらに効きます。
緑をそのまま黒寄りに落とすと濁って見えやすいのに対し、青方向へ少しずらすと、生っぽい陰影になります。
初期の塗りで、基本色をそのまま暗くしただけの影を置いていた頃は木全体が重たく見えましたが、影を紫寄り、ハイライトを黄寄りに振った途端、同じ3色なのに瑞々しさが立ち上がりました。
色を足したのではなく、色の向きを変えたのが効いたわけです。

現場でも同じでした。
「色数を増やさずもっと立体的に」と求められたとき、追加色を作る代わりにヒューシフトの幅を広げ、暗部を青紫、明部を黄に寄せて調整しました。
色数が固定でも、光源側の面だけを少し暖かく、影側を少し冷たく見せるだけで、輪郭の押し出しは十分変わります。
おすすめです。

アンチエイリアスはオフが基本(ジャギは味)

ドット絵ではアンチエイリアスは基本オフで考える方が自然です。
ジャギのカクカクは欠点ではなく、ピクセル単位の輪郭を見せるための表情でもあります。
無理にAAをかけて境界をぼかすより、ハイライトと影の置き方で面を立てた方が、形の説得力は増します。
むしろ輪郭が少し荒いからこそ、塊の明暗が効いて見えるのです。

実作業では、基本色の塊、暗い塊、明るい塊を別レイヤーで分けて重ねると、後から光源や色の方向を動かしやすくなります。
まずは大きい面を置き、次に影、最後に光を足してみてください。
途中で「やりすぎた」と感じたら、レイヤーごと戻せるのも利点です。
色を詰める作業より、面の整理を先にする方が、結局はおすすめになります。

広葉樹の描き方:樹冠を塊で組む手順

広葉樹の樹冠は、形を先に決めてから葉の塊を積むと崩れにくいです。
最初から細部を描き込むより、楕円を組み合わせて大きなシルエットを取り、その後に明暗のクラスターを重ねる流れにすると、丸い木でも人工物っぽさが出にくくなります。
幹の質感まで含めて順番を守ると、量産する背景でも安定します。

Step1 楕円でシルエットと光源を決める

まず樹冠の外形を、ひとつの円や四角で済ませず、複数の楕円で組み立てます。
完全な円は均一すぎて張り付き感が出やすく、正方形は角の硬さが目立つため、少しずつ重心の違うオーバルを重ねた方が自然なふくらみになります。
この段階で光源方向も決めておくと、あとから明暗を乗せるときに迷いません。

Step2 中間色で葉の塊を1つ作り増殖させる

次は中間色で葉の塊をひとつだけ丁寧に作ります。
2x2pxの正方形を基本単位にして、重ね切らず、接するくらいの距離で並べると、点の集合ではなくひとまとまりの葉群として読めます。
そこから判子のように複製して樹冠全体へ広げると、毎回ゼロから形を探さなくてよくなるので、制作時間が一気に縮みます。
量産が必要なマップ背景でも破綻しにくくなったのは、このやり方に変えてからです。

Step3 暗い葉・明るい葉を光源側へ重ねる

土台の中間色ができたら、ヒューシフトで暗いバリアントと明るいバリアントを作り、光源側へ明るい塊、反対側へ暗い塊を重ねます。
ここで大切なのは、元の塊を消さずに上へ足していくことです。
削るより重ねるほうが、葉の前後関係や密度の差が残り、樹冠に立体感が生まれます。
左右対称に整えすぎると作り物っぽく見えますが、輪郭の一部を光側へ寄せるだけでも印象は変わるでしょう。

Step4 幹は縦線で繊維感を入れる

幹は葉のうろこ状の質感とは分けて考えます。
影色を縦線で入れて木肌の繊維を作ると、幹だけが平板に浮く感じを避けられます。
広葉樹では幹の色を針葉樹より薄めにすると軽さが出て、樹冠の重さとの釣り合いも取りやすいです。
仕上げでは輪郭を均一に閉じず、葉を1〜2pxだけ飛び出させてみてください。
数ピクセルの乱れが入るだけで、整いすぎた形がほどけて自然な茂みに見えます。

針葉樹(マツ・モミ)の描き方

針葉樹は、広葉樹のように丸くふくらませるより、まず三角形のまとまりとして捉えると形が安定します。
マツやモミは枝が層になって広がるので、その三角の輪郭を上から数段に区切り、段ごとに枝のボリュームを置くと全体像が見えやすくなります。
丸いシルエットのまま進めると樹種らしさがぼけやすいので、最初の設計が決め手です。

三角のシルエットを段で区切る

針葉樹は、全体を円錐に近い三角のシルエットとして取ると扱いやすいです。
そこから上部、中段、下部へといくつかの段に分け、各段を枝の集合として見ると、輪郭だけを追うよりも立体の設計がしやすくなります。
実際に広葉樹と同じ明るい緑、丸いシルエットで描いて「これマツに見えない」と指摘されたことがありましたが、色を暗くして三角の段に切り替えた途端、樹種の印象がはっきりしました。
形と色を同時に寄せるのがコツです。

うろこ状の影で枝の重なりを表す

各段は、葉が付くことで生まれるうろこ状(鱗状)の影で作ります。
段の下側に少し影を落とし、その影を次の段の上にかぶせると、上の枝が手前、下の枝が奥にあるように見えます。
平らに塗ると板のようになりますが、影を段ごとにずらして重ねると、枝葉の厚みが自然に出るのです。
クリスマスツリー風のモミを頼まれた場面でも、この段差を1段ずつずらして入れたところ、空気を含んだようなボリュームが出て、その場で喜ばれました。
モミらしい密度は、細い枝を一本ずつ描くより、この層の重なりで見せるほうが速くて強いでしょう。

濃い色＋部分ハイライトで質感を出す

針葉樹は、広葉樹よりも一段暗いベースで作ると、針葉らしい密で硬い質感が立ちます。
明るい緑を広く置くと軽く見えやすいので、まず暗めの色で面を締め、その上で必要なところだけ光を拾う考え方が合っています。
下側の暗い葉の段に、明るい色で軽く点のハイライトを入れると立体感が出ますが、全面には入れません。
段の縁や光源側だけに絞ることで密度を保てるからです。
幹は縦の繊維感で描きつつ、葉に隠れやすいので見える根元と幹下部を丁寧に処理すれば十分でしょう。

草・草むらの描き方(地面の自然物)

草や草むらは、木よりもさらに不規則さを前面に出した方が自然に見えます。
左右対称や均一な高さをそろえると、途端に芝刈り後のような硬さが出るため、まずは単色でざっくりとシルエットを置き、そこから高さと密度をばらつかせていく流れが描きやすいです。
形を整えるより、崩す意識で進めましょう。

単色シルエットを不規則に置く

草むらは、輪郭そのものが情報になります。
細かい葉を最初から描き込まず、まずは単色で塊として置くと、全体のリズムを先に決められるからです。
均一な三角形や直線の並びを避け、手前と奥で高さを変え、塊ごとに密度をずらすと、地面から自然に生えている感じが出ます。
均等に並べた草むらを見下ろしマップで試したとき、どうしても面がそろいすぎて不自然だったため、意図的にばらつかせたら一気に野原らしくなりました。

上明・下暗のグラデーションをつける

単色シルエットができたら、次は上明・下暗のグラデーションです。
草の上部は空からの光を受けやすく、根元は地面や周囲の影に沈むので、上を明るく下を暗くするだけで立体感が立ち上がります。
平面的な緑の塊が、光を持つ草むらに変わる瞬間です。
見下ろしマップで草パッチが地面から浮いて見えた場面でも、根元側を暗くして接地の影を足すと、すっと地面に馴染みました。
上と下の明暗差は、草が地面に刺さっている感覚を作るための土台だと考えるとよいでしょう。

境界ハイライトで立体を起こす

さらに効くのが、塊の境界に入れるハイライトです。
隣り合う草の塊の手前側の縁へ明るい色を1〜2pxだけ乗せると、前後関係が生まれ、重なりが読みやすくなります。
全面を明るく塗るのではなく、境界だけを拾うのがコツです。
影側に入れるハイライトは、光源側より1段階暗くすると奥行きが出ます。
同じ明るさを全体に入れてしまうと、せっかくの塊感が平面に戻るためです。
単体の草を描くなら、根元1pxから上へ向かって細くし、先端を少し曲げるだけでも風を受けた生命感が出ます。

茂み・岩など他の自然物への応用

茂みや岩も、木や草と同じく「塊をどう見せるか」で描けます。
茂みは樹冠を低く扁平にしたもの、岩は面で割って3色を当てるもの、と考えると、自然物ごとの違いが整理しやすくなります。
さらにディザリングを足すと、少ない色数でも質感を伸ばせるので、タイル化した場面でも破綻しにくくなるでしょう。

茂み:樹冠を低く扁平にした応用

茂みは木の樹冠の応用として扱うと描きやすいです。
葉の塊をいくつか重ねる原則は木と同じですが、地面に近いぶん全体は低く扁平になり、幹を見せずに葉の塊だけでまとめるのが違いになります。
樹冠よりも輪郭の上下差が小さいため、上に伸びるより横に広がる密度を意識すると、茂みらしい重さが出ます。
木で身につけた「塊の繰り返し」をそのまま縮める感覚で十分です。

実作業では、この単純さがそのまま強みになります。
葉の一枚ずつを追わず、光源側の明るい塊、基準色の塊、影の塊をまとめて置くと、茂みは短時間でも破綻しません。
タイルセットで並べたときも、幹がない分だけシルエットの違いが前面に出るので、塊の高さや丸みを少しずつ変えておくと、同じ素材でも見飽きにくくなります。
木を描けたなら、茂みはかなり素直に横展開できるはずです。

岩:面で割って3色を当てる

岩は葉とは逆に、丸い塊として塗り込むより、面で割って3色を当てると硬く見えます。
岩のシルエットを上面・側面・影面のような大きな面に分け、それぞれへ影・基本・ハイライトを割り当てると、表面に生える柔らかさが消え、石らしいソリッドさが立ちます。
筆者も最初は葉と同じノリで塊塗りしてしまい、綿のように柔らかく見えて失敗しました。
面を切り直して3色を当て直した途端、見た目が一気に締まったのは印象的でした。

この違いが重要なのは、岩が「有機物ではない」と一目で伝える必要があるからです。
葉や草は輪郭の曖昧さが生きますが、岩はエッジの硬さが命になります。
だからこそ、面の向きを先に決め、どの面が光を受けるかを固定してから色を置くと、形と陰影が同時に立ち上がります。
木・草の延長で考えると迷いにくいですが、仕上げの方向は真逆だと覚えておくと扱いやすいです。

ディザリングで質感とグラデを足す

ディザリングは、市松状に2色を交互配置することで、隣接ピクセルを目が混ぜて見る性質を利用する技法です。
少ない色数でも質感や緩いグラデーションを作れるので、岩の表面のざらつきや、草と土の境目を少しなじませたい場面で役立ちます。
硬い面をそのまま終わらせると単調になりやすいですが、ディザリングを差し込むと、面の輪郭を壊さずに情報量だけを増やせます。
限られたパレットで見栄えを伸ばすときに、頼れる方法です。

ただし、入れ方は控えめで十分です。
面全体を細かく埋めるより、境目や粗さを出したい場所に絞ったほうが、かえって説得力が上がります。
実際の制作でも、岩の影側に少しだけ散らしたり、草から土へ落ちるあたりに薄く混ぜたりすると、硬さと柔らかさの差が自然につながります。
見た目を派手にする技法ではなく、素材同士の差を滑らかにつなぐための道具だと考えると使いやすいでしょう。

自然物をゲームのタイルとして並べる場面では、塊や境界のパターンが規則的に繰り返されると、すぐに継ぎ目が見えてしまいます。
そこで重要なのが、塊の形・大きさ・配置をいくつか用意し、同じ見え方が連続しないように散らすことです。
茂みを並べたときに同じパターンが横一列に続いて違和感が出た場面では、塊の配置を数種類作ってランダムに散らすだけで、面の硬さがほどけて背景に馴染みました。
タイルは単体の完成度より、並んだときの逃げ道を持たせる発想が効きます。

木・草・茂み・岩は、結局のところ「塊または面＋3色ランプ＋光源を1方向に固定」という同じ設計で描けます。
木で学んだ塊の積み上げ方は茂みに、そのまま面の分割は岩に応用できるので、1つの自然物で身につけた手順が次へ自然に横展開します。
おすすめです。
まずはひとつの素材で3色の置き方を固め、次に別の素材へ広げてみてください。

視点別の描き分け:トップダウン vs サイドビュー

トップダウンの木とサイドビューの木は、同じ「木」でも見せる面がまったく違います。
RPGマップの見下ろしで横顔の木を置くと視点がずれて見えるため、最初にどちらの視点で描くかを固定することが出発点になります。
草も同じで、上から見る塊と横から立ち上がる形を分けて考えるだけで、背景全体の整合がぐっと取りやすくなります。

トップダウン(RPGマップ)の木と草

トップダウンでは、木は上面が見える円形の塊として受け取られます。
幹はほとんど隠れ、主役になるのは樹冠の広がりです。
ここで輪郭を少し対称気味にまとめると、タイルを敷き詰めたときに隣の木と干渉しにくく、森の中でも配置が落ち着いて見えます。
筆者も以前、トップダウンのマップにサイドビュー用の横顔の木をそのまま置いてしまい、1本だけ視点がずれて浮いて見えたことがありますが、上面の丸い木に描き直しただけで、周囲の草や道筋まで急に馴染みました。

草もトップダウンでは、一本一本の茎より地面に散ったパッチとして考えるほうが自然です。
小さな点をばらすより、数本がまとまった塊を置くほうが、地表の凹凸や植生の密度が伝わりやすくなります。
木も草も「上から見た形」に統一すると、RPGマップらしい読みやすさが出るでしょう。

サイドビュー(横スクロール)の木と草

サイドビューでは、木は幹と樹冠の横顔を描きます。
ここで効いてくるのが接地感で、根元がどこで地面に触れているか、どの方向に重さが乗っているかをはっきり見せると、画面の中で立体感が生まれます。
横スクロールゲームの木に落ち影を入れ忘れたまま進めていたとき、木が宙に浮いたように見えたことがあり、根元に楕円の影を1枚足しただけで地に足が付いた見え方に変わりました。
影は飾りではなく、接地点を示す記号です。

草は横から見ると、地面の縁から上へ伸びるシルエットになります。
トップダウンのような塊感をそのまま使うのではなく、地面との境目を意識して、上向きの勢いを出すのがポイントです。
同じ草でも、見下ろしでは面、横スクロールでは立ち上がりとして読ませるため、視点が変わると形も役割も変わります。

タイルとして並べるときの注意

タイル配置で失敗しやすいのは、1枚の絵としては良くても、隣接した瞬間に破綻するケースです。
トップダウンの木は、外周が極端に偏ると隣のタイルとぶつかりやすく、サイドビューの木は幹や影が端まで張り出しすぎると連続配置で切れ目が目立ちます。
だからこそ、タイル内に収めるなら、シルエットの重心を中央寄りに置き、画面外へ飛び出す要素を最小限に抑えるのが扱いやすいのです。

どの視点でも共通する原則は、塊＋3色ランプ＋光源固定＋不規則さです。
木の輪郭や草の束をまず塊として捉え、3色ランプで面を分け、光源の向きを揃えたうえで、全部を同じ形にしすぎないことが仕上がりを支えます。
まずは3色ランプを1つ作って、葉の塊を1つ描いてみてください。
そこからしましょう。