ドット絵で空と雲を描く手順とコツ

ドット絵の空と雲は、32x32のような小さなキャンバスでは、グラデーションの色数不足がそのまま縞模様として出やすい題材です。
Aseprite でベタ塗りの空を置くと帯が立ち上がりますが、境目にディザリングを足すだけで、色の切れ目がふっと消える手応えが生まれます。
空を滑らかに見せる鍵は、段階的な色設計に加えて、2色を市松状に混ぜて見せる技法を境目へ絞って使うことにあります。
さらに雲を丸い塊の集合として捉え、影とハイライトの向きをそろえれば、少ない色数でも昼空から夕焼けまで立体感のある表現へつながります。

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

完成形は、上下にグラデーションした青空の下へ、もこもこの白い雲をひとつ置いた絵です。
まずそのゴールを決めておくと、空の色をどう並べるか、雲をどれだけ丸くするかがブレません。
ここでは新規キャンバスの大きさ、空に使う色数、雲の立体化に必要な色、そしてAsepriteでの道具の準備までをそろえていきます。

この記事で描けるようになる空と雲

この手順で目指すのは、明るい昼空の中に、ふくらみのある積雲がひとつ浮かぶ構図です。
空は上ほど濃く下ほど淡い縦のグラデーションで、雲は白一色ではなく、影とハイライトを足して丸い塊として見せます。
最初から複数の雲を詰め込まず、ひとつの雲に絞ると、形づくりと陰影のつけ方に集中しやすくなります。

空をドット絵で描くときは、滑らかな変化をそのまま再現しようとすると帯状の境目が出やすいので、段階を細かく切る発想が要になります。
そこで、空は3〜5色のカラーランプで組み、雲はベース、影、ハイライトの最低3色で立体化する流れが扱いやすいです。
先に必要な色数の目安を決めておくと、後半のパレット設計で迷いにくくなります。

キャンバスサイズは32x32から

練習用の最初の一枚は、32x32から64x64の範囲がちょうどいいです。
ドット数が少ないほど全体のバランスを見渡しやすく、空と雲の関係を確認しながら描けますし、色数も管理しやすくなります。
いきなり大きいサイズにすると、空の帯が広がりすぎて色のブレが目立ちやすいので、まずは小さな面積で構成を固めるのがおすすめです。

Asepriteで新規32x32キャンバスを作り、昼空用の青を濃淡で3色ほどパレットに仮置きしてから描き始めると、作業の流れが安定します。
色を先に並べておくと、あとから迷いながら追加するよりも、空の上端・中間・下端をどう分けるかが見えやすいでしょう。
雲も最初は1つだけにして、輪郭と陰影の練習に集中してみてください。

ペンシルとグラデーションツールの準備

Asepriteでは、ペンシルツール（B）とグラデーションツール（Shift+G）を役割分担させるのが基本です。
ペンシルは1px単位で形を置くための道具で、雲の輪郭や影の調整に向いています。
グラデーションツールは空の下地を一気に塗るために使うと効率がよく、Bayer 2x2、4x4、8x8のディザリングを使えば、色のつなぎ目もなじませやすくなります。

空のグラデーションを3〜5色で組むときは、天頂を濃く、地平に向かって明るくする縦のランプを意識するとまとまりやすいです。
雲はベース色の上に、光の当たらない側へ影、光源側の上面へ1〜2pxのハイライトを足すだけでも、白い塊から少しずつ膨らんで見えてきます。
まずはこの2つの道具で、空を塗る作業と雲を彫る作業を分けて進めましょう。

空のパレットを設計する

空の色は、ただ青を上から下へ塗るだけでは平板になりやすいです。
まず天頂を濃く、地平を淡くする縦のカラーランプを組み、そこに明度差とわずかな色相の変化を重ねると、空気の厚みが出ます。
色数が少なくても設計次第で見栄えは作れるので、最初にランプの考え方を押さえておくと迷いにくくなります。

カラーランプとは何か

カラーランプとは、1つの面を暗い影から明るいハイライトまで順に並べた色の組です。
空を描くときはこの考え方を縦方向に使い、上の天頂を濃い青、下の地平を淡い水色にすると自然に見えます。
空は広い面積を一色で埋めると境目が目立ちやすいので、階段状の色をあらかじめ設計しておくことが、バンディングを抑える近道になります。

ステップ数を増やせばグラデーションは滑らかになりますが、ドット絵では使えるパレット枠を圧迫します。
そこで最初は3〜5色で組み、足りないところだけディザリングで中間色を補うのが効率的です。
Bayer 2x2や4x4のような市松配置を境目に限定して使えば、少ない色数でも段差が目立ちにくくなります。

ヒュー・シフトで奥行きを出す

ヒュー・シフトは、影を寒色の青紫寄りへ、ハイライトを暖色の黄寄りへずらす技法です。
単に明度だけを下げるより、暗部に少し青紫を含ませたほうが空気感が出て、同じ色数でも奥に引っ込む印象が作れます。
ドットを拡大して見たときに輪郭が硬くならず、面のつながりも保ちやすいので、空のランプには相性がいいでしょう。

青のランプを組むときも、明度差だけを頼ると平たい帯になりがちです。
彩度を少しずつ落とし、色相もわずかにずらすと、各ステップが単なる濃淡ではなく「空の奥へ向かう段差」として働きます。
夕方の空で黄みを持ったハイライトを置く場合も同じで、明るい部分ほど少し暖かくすると、光を受けている感じが自然になります。

昼空と夕焼け空の色の違い

昼空は青系のランプ、夕焼け空はcoral〜orange〜yellowの暖色を縦に並べると組み立てやすいです。
昼は天頂を濃く、地平を淡くして広い空気を見せ、夕焼けは下層にorangeやyellowを集めて光源の低さを示します。
ただし夕焼けでも上部に少量の青を1〜2色残すと、空全体が熱で均一に潰れず、まだ空が残っている印象になります。

色を入れ替えるだけで時間帯を切り替えられるのも、この設計の強みです。
上部の青を残すか、思い切って全部暖色に振るかで、夕方の余韻を残すか、日没直前の強い染まり方にするかが変わります。
まずは青系と暖色系の2本を用意し、同じ空の形に当ててみると、どの色が時間の変化を担っているかが見えやすくなります。

ステップ1：空のグラデーションを塗る

空を塗る最初の工程では、天頂から地平へ向かう上下方向のグラデーションを作ります。
濃い青を上、淡い水色を下に置くと、空に奥行きが生まれて画面全体の空気感が整うでしょう。
Asepriteならグラデーションツールを使い、上から下へドラッグするだけで一気に面を作れるので、まずは大きな色面の流れを決めてみてください。

上下方向にグラデーションを塗る

ドラッグの距離は、そのままグラデーションの落差になります。
短く引けば境目が急になり、長く引けば遷移がゆるやかになるので、空の高さや雰囲気に合わせて手応えを調整しましょう。
最初は広めに引いて全体をなじませ、必要に応じて塗り直すほうが、空の面が安定しやすいです。
Shift+Gでツールを呼び出し、上から下へまっすぐドラッグしてみてください。

バンディング（縞）が出る原因

ベタ塗りで色を段階的に置くと、色の切り替わりが太い帯として見えてしまいます。
これがバンディングで、特に天頂から地平へ流れる空のグラデーションでは、わずかな色差でも人の目が境目を線のように拾いやすいのです。
色数が足りないから起きる、というより、離れた面積の中で変化が急に見えたときに縞が前面へ出る現象だと考えるとわかりやすいでしょう。
まず縞が出る状態を意図的に作っておくと、どこを直すべきかも見えます。

ディザリングで境目をなじませる

ディザリングは、2色のピクセルを市松模様のように交互配置して、離れて見ると中間色に感じさせる技法です。
境界の帯に4x4ディザを足すと、色そのものを増やさなくても段差が細かく分散され、縞がほどけたように見えます。
Asepriteではグラデーションツールのディザリング欄をBayer 2x2、4x4、8x8に切り替えられ、No Ditheringから変更してドラッグすると自動でパターンが入ります。
ベタ塗りで縞が目立つ状態と、境界だけに4x4ディザを入れた後を見比べると、なじみ方の差がはっきり出るはずです。

ステップ2：雲の塊（シルエット）を置く

雲のシルエットは、まず白い面として塗るのではなく、丸い塊が寄り集まった量感として置くところから始まります。
外形が先に見えてくると、どこに雲が浮いているのかが一気につかみやすくなり、その後の陰影も迷いにくくなるでしょう。

雲は『塊』として捉える

雲を平面の白い面として塗ると、どうしても画面が平べったく見えます。
そこで最初に意識したいのが、雲は一枚の膜ではなく、丸い塊が複数寄り集まってできている、という見方です。
大まかな量感を先に置けば、空のどこに雲があるかが明確になり、細部を描き込む前でも形の説得力が出ます。
この段階では、細かなフチや陰影を追いすぎないほうがまとまりやすいです。
まずは白一色でも成立するくらいのシルエットを確保して、雲の「居場所」を決めましょう。

もこもこした輪郭の作り方

もこもこした輪郭は、一本の滑らかな線で描くより、小さなブロブを重ねて作るほうが自然です。
ペンシルで小さな円を3〜4個重ねるように置き、その外周をなぞって一つの輪郭へまとめると、綿のような柔らかい厚みが出ます。
縁を1px単位で少しずつ凸凹させると、均一な曲線では出せない有機的な揺らぎが生まれるのです。
ここで効くのは、大きさの違うブロブを混ぜることです。
全部を同じサイズで並べると、雲というより装飾的な丸の連なりに見えやすいですが、大小を交ぜると自然な不揃いが出ます。
輪郭の強弱は、雲の厚みや空気の含み方まで伝えてくれる要素になります。

積雲（もくもく雲）のシルエット例

練習に向くのは、積雲（cumulus）です。
夏空に浮かぶもくもくした雲で、丸い塊が積み重なった構造をしているため、影とハイライトの練習にそのままつなげやすいのが利点です。
薄くたなびく雲から入るより、まず積雲で塊感をつかんだほうが、雲らしい立体感を理解しやすくなります。
積雲のシルエットを描くときは、上面をふくらませ、下面を少し重たく見せると安定します。
白一色の段階でも、上に軽さ、下に密度を置く意識があれば、次の陰影工程へ自然に移れます。
まずはこの形を何度か繰り返して、雲を「面」ではなく「集合体」として捉える感覚を身につけてみてください。

ステップ3：雲に影とハイライトを入れる

雲の立体感は、光源の向きと影・ハイライトの置き方で決まります。
まず光を一方向に固定し、下面と光の反対側を整理すると、塊の向きが一気に読みやすくなるでしょう。
そこへ輪郭をなじませる処理を加えると、雲は空から浮きすぎず、ふくらみだけがきれいに残ります。

光源を1方向に決める

右上に太陽があると決めたら、雲全体の見え方もその前提でそろえます。
光の方向が曖昧なままだと、ある部分は明るく、別の部分は暗いのに理由がつかず、形の説得力が崩れてしまうからです。
ドット配置の前後で見ると、ただの白い塊だった雲に、左下の暗さが入った瞬間に奥行きが生まれます。
影色を置く場所が先に定まると、次のハイライトも迷わず決めやすくなるのです。

下面に影、上面にハイライト

影は雲の下面と光と反対側に、ベースより暗く青紫寄りの色で入れます。
ここでヒュー・シフトを使うと、単に暗くするよりも空気感が残り、影が沈み込みすぎません。
塊の谷間にも少し影を差し込むと、雲が一枚の輪郭ではなく、いくつかのふくらみが重なった形だと伝わります。
右上光源と決めて左下へ影を1色入れるだけでも、雲は急に立体的に見えるはずです。
ハイライトはその逆で、光源側の上面に置きます。

ハイライトは1〜2pxの細さに絞るのが効きます。
最も光が当たる頂点付近だけを拾うと、ふくらみのピークが強調されて雲らしい丸さが出ますが、全体へ散らすと表面がのっぺり明るくなってしまうのです。
実際、頂点だけに置いた場合は膨らみがはっきりし、広く撒いた場合は白っぽい膜のように見えます。
光は面ではなく、山のてっぺんに当てる感覚で描いてみてください。

アンチエイリアスで輪郭をなじませる

仕上げでは、輪郭のギザギザが目につく場所にアンチエイリアスを入れます。
輪郭と背景の間へ中間色を1px足すだけで、角がやわらぎ、雲が空に溶け込む見え方になります。
ジャギが残ると、せっかくの丸みが細かな段差で切れて見えるため、最後に一段だけ境界を整える工程が効いてきます。
輪郭を締めすぎず、空気へにじませる意識で仕上げるのがおすすめです。

よくある失敗とその対策

空や雲の失敗は、見た目の乱れ方で原因がかなり絞れます。
空が縞模様になるならグラデーションの段差、雲が平べったく見えるなら明暗差の弱さを疑うのが近道です。
さらに、直し方を間違えると、今度はディザリングのかけすぎでノイジーになったり、雲が綿あめのようにぼやけたりします。
症状ごとに手を分けて、色数と輪郭の扱いを切り替えましょう。

空が縞模様（バンディング）になる

空のバンディングは、広い面を少ない色だけで埋めたときに出やすい症状です。
とくに夕方の空や淡い青空のように、なだらかな変化を見せたい場面では、階段状の切り替わりがそのまま見えてしまいます。
対処は単純で、グラデーションの色数を1〜2色増やすか、境界にディザリングを足して段差を散らします。
実際には、空全体に均等に細かい粒を散らすより、色が切り替わる境目だけを狙って入れたほうが自然です。

縞模様が出た空を直すときは、色を足す方法とディザを足す方法を両方試すと整理しやすいです。
色数を増やす修正は、面のなめらかさを素直に回復させたいときに向いています。
いっぽうで、限られたパレットのまま雰囲気を残したいなら、境界付近だけにディザを置くほうが効きます。
おすすめは、まず段差の位置を確認してから、広い面はベタに保ち、切り替わりだけを処理するやり方です。

雲が平べったく見える

雲が平べったいときは、光源が定まっていないか、影とハイライトの明度差が弱すぎることが多いです。
雲はふわっとした形に見えても、立体感の核はかなり明確で、光を受ける側と沈む側の差が曖昧だと一気に厚みを失います。
光源を1方向に決め直し、影をもう1段暗く、ハイライトをもう1段明るくすると、面の向きがはっきりします。
調整の幅は小さくても、見え方は驚くほど変わるでしょう。

このタイプの修正では、雲の輪郭をいじる前に明度差を作るのが先です。
影とハイライトのコントラストを強めるだけで、のっぺりした塊がふくらんで見え、空中に浮いている感覚も出てきます。
実際、1段ずつ強めるだけで平べったい雲が立体化することがあり、そこからようやく細部の形を整えられます。
まずは光の向きを決め、次に陰影を割り切ってみてください。

ディザリングをかけすぎてノイジーになる

ディザリングは便利ですが、かけすぎると砂嵐のように見えてしまいます。
とくに広い面まで細かい市松模様で埋めると、空の静けさが失われ、見る側の視線が落ち着きません。
大切なのは、ディザを面全体の質感づくりに使うのではなく、色の境目だけに絞ることです。
広い部分はベタ塗り、切り替わりだけ市松、と役割を分けると整理されます。

ノイジーに見えたら、まずディザの面積を削ってみましょう。
境界付近だけに残すと、グラデーションのつながりは保ちながら、ざらつきだけを抑えられます。
逆に、空の広い範囲に散らしてしまうと、細かな点が主役になってしまい、雲の形や空気感が埋もれます。
色数が多すぎる場合も同じで、足す場所を誤ると見た目が散らかります。
おすすめなのは、広い面を静かに保ち、必要な場所だけを少しだけ整えることです。

次のステップ：応用と関連テクニック

完成した昼空のパレットは、暖色へ寄せるだけで夕焼けに、暗い青紫へ沈めて星を足せば夜空に変わります。
彩度を落とせば曇り空にもできるので、描画手順そのものを覚えるというより、同じ構図を色の組み替えで使い回す感覚が身につくでしょう。
32x32の青空をいったん仕上げてから塗り替えると、時間帯の違いが線ではなく色で立ち上がるのが分かります。
ここで得られるのは、1枚の空を別の情景へ展開する応用力です。

夕焼け・夜空への色替え応用

昼の空を夕焼けへ変えるときは、雲の形を描き直す必要はありません。
青をやや赤みのある橙や桃色へ置き換え、光が当たる側だけを明るく残すだけで、空気の温度まで変わったように見えます。
夜空に寄せるなら、青紫の濃い階調へ移し、星を小さく散らすと視線の止まりどころが生まれます。
曇り空はその逆で、彩度を落として空全体の差を狭めると、雲の輪郭が前に出すぎず落ち着いた印象になります。

このやり方の利点は、時間帯ごとに別構図を用意しなくてもよい点にあります。
まず昼空で光源の向きと雲の立体感を固め、その後にパレットだけを差し替えると、色の選択が絵の説得力を左右する感覚をつかみやすいでしょう。
色替えの手応えが出ると、次は朝焼けや薄暮にも広げたくなります。
おすすめです。

ゲーム背景・タイル化への展開

ゲーム背景で使うなら、空と雲はタイル化との相性が抜群です。
一定サイズのタイルとして端をそろえ、横方向に繰り返せば、スクロール中も広い空が途切れず見えます。
以前は2枚並べたときに継ぎ目が目立ち、同じ雲を置いたのに背景が不自然に分断されましたが、端をループ前提で描き直すと、その違和感は消えました。
端で雲の輪郭を切らず、続きが画面外へ流れていく形にしておくのがコツです。

さらに奥行きを出したいなら、空全体を遠景・中景・近景に分けて考えると整理しやすくなります。
近い雲ほど大きく輪郭を明確にし、遠い雲ほど小さく淡くすると、画面の奥へ視線が抜けます。
単なる背景素材ではなく、移動感や空間の広がりを支えるレイヤーとして扱えるのがポイントです。
ゲーム画面に置いた瞬間に、ただの空が場面の空気へ変わるはずです。

次に学ぶと良いテクニック

表現をさらに広げるなら、ディザリング単体の使い分けとカラーパレット設計を深掘りするとよいでしょう。
空と雲は、どちらの技法も試しやすい実践の場です。
明暗の境目をどう粒でなじませるか、そして少ない色数でどこまで雰囲気を保つかを意識すると、同じ32x32でも見え方が一段引き締まります。
色数を増やすより、配色の役割を決めるほうが効く場面は多いものです。

ディザリングは万能ではありませんが、薄い雲のにじみや夕焼けのグラデーションでは効果が出やすいですし、パレット設計はその効果を支える土台になります。
まずは空の色を3段階ほどに整理し、その上で雲の縁だけを調整してみてください。
そうすると、技法が別々の知識ではなく、1つの絵を成立させる連携だと分かってきます。
次の作品でも試してみてください。