ドット絵で木と森を描く手順とコツ

ドット絵で木を描くときのつまずきは、葉を1枚ずつ打とうとしてノイズの塊にしてしまうことにあります。
32x32で広葉樹を描く場面でも、葉を束として捉え直し、円や楕円で樹冠の塊を先に作るだけで、画面は驚くほど整理されるのです。
立体感は光源を1方向に固定し、葉・幹・地面へ同じ向きを通すことで生まれ、影を青緑寄り、ハイライトを黄緑寄りへずらすヒューシフトが少ない色数でも効いてきます。
Aseprite や Piskel のペンシルとバケツ、葉3〜5色と幹2〜3色があれば十分で、単木の描き方はそのまま森背景へつながります。

完成イメージと描く前の準備

32x32で広葉樹1本を描けるようになると、同じ発想で森背景へ広げる土台ができます。
まず単木の完成形を固め、そこから複数の木を並べる前提で画面を組むと、サイズ選びや色数の迷いが減ります。
最初から全体を詰め込まず、木の塊を見せる順序で進めましょう。

この記事で描けるようになるもの

ここで扱う完成像は、32x32の中で成立する広葉樹1本と、それを複数並べた森背景です。
葉を1枚ずつ追うのではなく、樹冠をクラスタとしてまとめて形にするので、見た目は単純でも木らしさが残ります。
単木を先に安定させると、森へ拡張したときに「どこを省くか」が自然に見えてきます。

初心者がいきなり32x32で森全体を描こうとすると、1本も満足に置けないことが起きやすいです。
木の周囲にクラスタを置く余白が足りず、輪郭も影も窮屈になるからです。
まずは1本を32x32で描き切り、森背景は64x64以上へ移してみてください。
画面の広さがあるだけで、前景・中景・遠景の重なりを試しやすくなります。

キャンバスサイズと使うツール

最初の1本は32x32が扱いやすく、森背景は64x64以上を目安にすると組みやすいです。
小さいキャンバスは判断が速く、葉の塊や幹の太さを迷わず詰められます。
逆に背景になると木の重なり、地面、空きスペースまで必要になるため、少し広い面積があったほうが自然な密度を作れます。

使うツールは、AsepriteやPiskelのペンシル（B）とバケツ（G）で足ります。
ペンシルは1px描画に向いていて、輪郭の調整やクラスタの欠けを整える場面で頼りになります。
バケツはベタ塗りを素早く埋められるので、幹や葉の面をまとめる作業が速くなります。
オニオンスキンは前フレームを透かす機能で、アニメ制作では便利ですが、まず静止画の木を描く段階では出番がありません。
必要な操作だけに絞ると、画面を見る力がぶれにくいのです。

緑のパレットを3〜5色で組む

1本の木のパレットは、葉3〜5色、幹2〜3色、共通影1色に絞るのが扱いやすいです。
色を増やせば豪華に見えると思いがちですが、10色以上の緑を並べると似た色同士がぶつかり、かえって立体感が消えます。
少ない色で明暗のカラーランプを作ったほうが、影の置き場所と光の向きがはっきりします。
葉の影を青緑〜水色方向、ハイライトを黄緑〜黄色方向へ少しずらすと、緑でも単調になりません。

幹は葉と同じ塗り方にせず、縦の繊維を意識して面を分けると木肌らしさが出ます。
枝を2px未満に細くしすぎると、支えのない線に見えやすいので、太さを残したまま分岐させるのがコツです。
バケツは contiguous をオフにすると同色を一括置換でき、色の差し替えやランプ調整が速くなります。
配色に迷ったら、まず少ない色で塊を作ってから整えてみてください。

葉は『束』で考える — クラスタの作り方

葉を1枚ずつ追いかける描き方は、ドット絵の木をいちばんノイズっぽくしてしまいます。
先に円や楕円で樹冠の塊を置き、そこから束へ割っていくと、線ではなく面で見せる構造に切り替わるため、最初の段階から木らしさが立ち上がるのです。
描き込むほど良いと思って1px単位で打ち続けるより、まず大きな塊を整えるほうが早い。
これが崩れにくい樹冠づくりの出発点です。

円・楕円で樹冠の塊をブロックアウト

樹冠は、最初から葉の形を追わず、直径の違う円や楕円を重ねて大まかな塊として置きます。
完全な円のままだと作り物っぽさが出るので、外周には2〜3pxのランダムな凹凸を足し、少しだけ欠けた自然な輪郭に寄せるのがコツです。
縁を整えすぎると人工物に見え、逆に粗さがあると生きた茂みとして読まれます。

この段階で大切なのは、葉の記号を描くことではなく、光と影を受ける「面」を用意することです。
円を重ねているだけでも、手前に出る塊と奥に引っ込む塊が生まれ、後の色分けが効きやすくなります。
まず輪郭を作り、あとから情報を足す。
順番を逆にしないことです。

束（クラスタ）に分けて立体感を作る

塊ができたら、ブロッコリーの房のように束へ分けていきます。
樹冠全体をひとつの塊のまま扱うと平板になりやすいですが、束単位に区切ると影の入り方が変わり、立体感の土台ができます。
実際、葉のディテールを描き込むほど良いと思い込んで打ち続けた木は、ただの緑のノイズの塊でした。
そこから円で塊を取り直し、束で分けただけで、急に木として読めるようになったのです。

ここで意識したいのは、4px未満の細かいクラスタを増やしすぎないことです。
細かい点を敷き詰めると、テクスチャではなく不快なノイズとして先に目に入ります。
塊の形そのもので質感を示し、束の境目にだけ差を作るほうが、少ない色数でも情報量を保てます。
おすすめの考え方は、葉を描くのではなく、葉の集合が作るリズムを描くことです。

葉を描きすぎない — 余白に脳が補完する

全部の葉を描く必要はありません。
茂みの印象が出る程度に留めれば、見る人の脳が足りない部分を自動で補完してくれます。
むしろ描きすぎると、木そのものよりも線の密度が前に出てしまう。
余白は空白ではなく、木の厚みを支えるための空間として働きます。

縁を完全な円のまま塗ると、どうしても硬くて不自然でした。
そこに2〜3pxの乱れを足しただけで、外周が呼吸するように見え、一気に自然な茂みになったのは印象的でした。
描きすぎないことは手抜きではなく、脳に補完を任せる設計です。
木を整理して見せたいなら、削る判断のほうを先に覚えましょう。

似た束の配置を繰り返すと、樹冠にまとまりが生まれます。
変化を付けすぎると散らかった印象になるため、束の大きさと間隔にわずかなリズムを持たせるのがよいでしょう。
おすすめです。

光源を決めて葉に影とハイライトを入れる

葉の立体感は、光源を一つに決めるところから始まります。
左上のように向きを固定し、その光の当たり方を葉だけでなく幹や地面の暗さにも通すと、画面全体が同じルールでまとまるからです。
光を置いただけで満足せず、どこが明るく、どこが沈むかを最後まで揃えましょう。

光源を1つに決めて全要素に反映

全方向から光が当たるつもりで輪郭の内側を均一に暗くした木は、どうしてものっぺりした饅頭に見えました。
そこで光源を左上1点に決め直し、幹の片側、葉の上面、地面に落ちる影の向きをそろえると、同じ形でも厚みが急に立ち上がります。
理由は明快で、立体感は「暗い場所がある」だけでは生まれず、どちらから照らされているかが読めて初めて形として認識されるからです。

束ごとに影とハイライトを入れる

葉は1枚ずつ見るより、束（クラスタ）で見るほうが自然です。
光源側の束の上面にハイライトを置き、逆側と束の下に影を寄せると、もこもこした塊としての茂みが立ち上がります。
影をただ外周に沿って塗るのではなく、束のまとまりに合わせて明暗を分けるのがコツです。
葉の影の付け方には、普通に塗ってから影を入れる方法と、影色で塗ってから明るい色でくり抜く方法がありますが、後者は束感を作りやすく、中級者向きだと感じています。

ヒューシフトで緑を生き生きさせる

緑は明度差だけで押すと、すぐに濁って見えます。
影を青緑や水色方向へ、ハイライトを黄緑や黄色方向へずらすヒューシフトを入れると、同じ3色でも色が息をし始めるのです。
以前は影をただ暗い緑にしていたため全体が地味でしたが、青緑の影と黄緑のハイライトに振り分けた途端、彩度を無理に上げなくても生き生きした印象になりました。
ピロー（まんじゅう）シェーディングのように輪郭の内側だけを均一に暗くする塗り方は、形をふくらませるどころか、かえってぼやけた印象を強めます。

幹と枝を立体的に描く

幹と枝は、葉と同じ塗り方で扱うとすぐに平板になります。
幹には縦の繊維感があり、枝には立体を保てるだけの太さが要るからです。
まず幹の筋を光源に合わせて整え、枝は細くしすぎず、葉との接続まで含めて一つの塊として見せましょう。

幹は縦の繊維感で塗る

幹を横方向に均してしまうと、樹木ではなく板の側面のように見えます。
そこで縦の筋を意識して影とハイライトを置くと、樹皮の繊維が自然に立ち上がり、同じドット数でも密度のある見た目になるのです。
葉のうろこ状の塗り方と混ぜず、幹はあくまで縦の流れを軸にすることがポイントでしょう。

光源の扱いも幹ではそのまま立体感に直結します。
片側だけを明るくして反対側を落とすと、どこから光が当たっているかが一目で伝わり、葉との向きもそろって画面全体の説得力が増します。
輪郭線も黒で固めるより、暗い茶や暗い緑に寄せたほうが周囲になじみやすいです。
光源側の輪郭を1段明るくすると、さらに厚みが出ます。

枝を太めに描いて立体を保つ

枝は1pxの線で何本も描くと、木というより棒の集合に見えがちです。
実際、細く引きすぎた枝に影もハイライトも入らず、平面的でひ弱な印象になったことがありました。
2〜3pxに太らせてから明暗を足すと、ようやく丸みが出て立体として読めるようになります。
2px未満まで細くしすぎると立体化できない、という感覚はここで掴みやすいです。

枝の太さは、見た目の強さだけでなく構造の安定感にも関わります。
途中で先細りさせるにしても、芯になる太さを残しておけば影の置き場が生まれ、曲がりや分岐も表現しやすくなります。
細線で省略するより、少し太めに描いてから削るほうが、結果として軽く見えるのです。
おすすめです。

葉と幹のつなぎ目を整える

幹と葉の境目がくっきり分かれすぎると、木全体が別パーツの寄せ集めに見えます。
幹の上端を葉の塊で少し隠すか、数本の枝を葉の中へ差し込むと、接続部に奥行きが生まれます。
葉が上から被さり、枝が内部へ潜る関係を作ると、幹が地面から伸びている感じまで伝わりやすいです。

つなぎ目は、輪郭を消す場所でもあります。
境界線を全部残すのではなく、葉で隠れる部分を作ると前後関係が整理され、木の構造が自然になります。
幹、枝、葉を個別に描き切ったあとでも、最後に接点を見直してみてください。
そこが整うと、木は一気に生き物らしくなります。

針葉樹（マツ・モミ）の描き方

針葉樹のマツやモミは、広葉樹のように丸くふくらませるより、まず三角形のシルエットで全体を押さえると形が安定します。
最初に大きな当たりを置けば、枝葉を足しても崩れにくく、少ないドットでも「木らしさ」を保ちやすいからです。
丸い樹冠で描くと広葉樹に寄ってしまいがちですが、三角を土台にすると、樹種の印象が一気に締まります。

三角シルエットから始める

針葉樹は、広葉樹のようなふんわりした塊として捉えるより、先端が絞られた三角で見るほうが向いています。
上が細く下が広いこの形は、枝が幹のまわりに段々と付きやすい構造をそのまま受け止められるので、先に外形を決めておくと描写の迷いが減るでしょう。
丸い輪郭から入ると、途中で針葉樹らしさを足そうとしても情報が散り、結局広葉樹の延長に見えやすいのです。

段状に枝葉を重ねる

三角の中には、水平の段を下から上へ重ねていくと描きやすくなります。
各段をひとつの枝葉の層として扱い、上ほど小さく下ほど大きくすると、自然なクリスマスツリー状のリズムが生まれます。
以前、丸い樹冠のまま塗っていたときは、木全体がぼんやりしてマツにもモミにも見えませんでした。
ところが三角、段、ジグザグ輪郭へ切り替えた途端、同じ配色でも針葉樹として立ち上がったのです。
輪郭はなめらかにせず、段ごとに少しずつギザつかせてください。
針葉のとげとげした密度がそこに宿ります。

色は広葉樹より青みの強い濃緑を基調にすると、落ち着いた針葉樹らしさが出ます。
明るい緑でまとめると軽やかですが、マツやモミの重心の低い印象はやや弱くなるため、まずは暗めの緑で面を作り、必要な箇所だけハイライトを入れるほうが扱いやすいです。
背景の森でも、こうした濃い緑は遠景の壁として使いやすく、手前の樹木や建物を引き立てる土台になります。

広葉樹との影の違い

針葉樹の立体感は、段の下面に落ちる帯状の影で決まります。
広葉樹のように葉の束ごとの影を散らすのではなく、層と層の重なりからできる影を意識すると、三角の中に上下の奥行きが通ります。
ベタ塗りだけで済ませると平面に見えましたが、各段の下へ1段暗い帯を差し込んだ瞬間、層が前後にずれて見えるようになりました。
ここが針葉樹のおすすめの描きどころで、影を描くほど「枝が重なっている」説得力が増します。

木を並べて森の奥行きを作る

木を並べて森を描くときは、1本ずつを主役にしない方がまとまりやすいです。
木々を群れとしてひとつのシルエットにまとめ、前景・中景・遠景の3層で重ねるだけで、平面の背景に奥行きが生まれます。
遠景は彩度と明度を落として空に寄せ、手前との役割をはっきり分けてみましょう。

個でなく群れ（シルエット）で捉える

森を描く場面では、木の輪郭を1本ずつ細かく追うより、まとまった塊として見る発想が効きます。
横一列に同じ木を等間隔で並べたときは、どうしても書き割りのように見えましたが、樹冠を寄せてひとつのシルエットにした途端、背景全体の呼吸がそろいました。
個体差を削るのではなく、群れとしてのまとまりを先に置くのがコツです。

この考え方は、森の情報量を整理するためにも役立ちます。
枝葉を全部描き込まなくても、塊の大きさや高さの差があれば十分に森らしく見えるからです。
むしろ細部を増やしすぎると、画面の中で木同士が競い合ってしまいます。
まず群れを決め、そこから見せたい木だけを少しだけ立てると、視線の流れが自然になるでしょう。

前景・中景・遠景の3層で重ねる

奥行きを出すには、前景・中景・遠景の3層に分けて配置するのがわかりやすいです。
手前の木は大きく、幹や葉の形も少しだけ詳しく描き、中景はそれをつなぐ量として扱い、遠景は小さく簡略にします。
こうしてサイズ差を付けると、木の重なりが空間の距離として読めるようになります。

実際、同じ木を横に並べただけでは平坦でしたが、3層に分けて少しずつずらして重ねたら、森の奥行きが一気に出ました。
前の木が後ろの木を一部隠す配置にすると、密度も増します。
ゲーム背景なら層ごとにスクロール速度を変えるパララックスも効きますが、その前提になるのは、静止画の段階で層構造がきちんと読めていることです。
手前ほど速く、遠景ほど遅く見せる考え方を、まず描画の段階で組み込んでおきましょう。

遠景は彩度を落として空気感を出す

遠景の木を手前と同じ鮮やかな緑で描くと、どうしても全部が前に出て見えます。
そこで彩度と明度を下げ、淡い青緑に寄せると、木がぐっと奥へ引っ込みました。
空気遠近法の要点はここで、遠いものほど輪郭がやわらぎ、空の色に近づくほど距離が感じられるのです。
ディテールを減らすことと、色を冷ますことが、奥行きを支える二本柱になります。

この処理は単なる色替えではありません。
遠景を低彩度・低明度にすると、手前の木が自然に主役になり、画面全体の優先順位が整理されます。
結果として、森の密度があっても息苦しくならず、空間に抜けが残ります。
まず遠景を静かにしてから中景と前景を立てると、背景はおすすめです。
試してみてください。

よくある失敗とその対策

ピローシェーディングが崩れると、葉も幹も丸く見せたいのに輪郭の内側だけが均一に沈み、平たい饅頭のような印象になります。
最初に光源を1方向へ固定し、影を「面」ではなく束や段の単位で寄せ直すだけで、輪郭の丸さと立体感は両立しやすくなります。
初心者がつまずくのは、暗さを足せば形が締まると思ってしまう点です。

ピローシェーディングを避ける

輪郭の内側をぐるりと暗く塗るだけでは、凹凸の情報が消えてしまいます。
とくに葉や花びらのように重なりが多いモチーフでは、各パーツの面を見分けるための陰影が必要で、外周だけを落としても厚みは生まれません。
光を左上など1方向に決めたうえで、明るい面と暗い面の境目を少しずつずらし、塊ごとに影を入れ直すのが近道です。
こうすると、同じ葉でも手前と奥が読み分けやすくなります。

ノイズと色数過多を整理する

葉のノイズ過多は、細かい点を敷き詰めた瞬間に起きやすい失敗です。
4px未満のクラスタを減らし、点ではなく塊でテクスチャを見せると、画面がうるさくならず、葉脈や重なりも伝わりやすくなります。
色数の使いすぎも同じで、似た緑を10色以上並べるより、まず3〜5色のカラーランプで明暗を作るほうがまとまります。
実際、色を足すほど良くなると思って緑を増やし続けた時期は収拾がつかず、3色まで削って組み直したときにいちばん締まりました。

光源のブレと細すぎる枝を直す

光源バラバラの絵は、葉・幹・地面で影の向きが食い違い、見る側の目が迷います。
左上固定で影を置くと決めたら、全パーツでその約束を崩さないことが重要です。
以前は影を好きな所に置いていたため、葉だけ暗いのに幹は反対側が沈む、といったちぐはぐさが残りましたが、左上固定を徹底したら全体が一つの光でつながりました。
枝が細すぎる問題も同時に見直したいところで、1pxのままだと影が入らず棒に見えます。
2〜3pxに太らせて立体化できる幅を確保すると、幹との接続も自然になります。