ドット絵の背景に奥行きを出す描き方

ドット絵の背景が平面的に見えるのは、手前と奥で彩度やコントラスト、描き込み量に差がなく、脳が距離を読み取れないからです。
ゲーム会社で背景用の森を量産していた頃、最初に描いたステージが全部同じ緑でつぶれてしまい、先輩に「奥と手前で色を変えろ」と言われて、ようやく空気遠近法の意味が腑に落ちました。
奥行きは特別な才能ではなく、遠景・中景・近景に分けて、それぞれの役割に応じて差をつけることで生まれます。
この記事では、遠景は空気、中景は塊、近景は主役として整理し、色の変化だけでなく重なりやサイズ、上下位置まで使って、ドット絵背景に自然な奥行きを出す方法を見ていきます。

背景がのっぺり見える原因と奥行きの正体

背景がのっぺり見える原因は、手前と奥のあいだに差がなく、脳が距離を読み分けられないことにあります。
彩度もコントラストも情報量も同じままでは、遠近関係が消えてしまい、画面全体が一枚の板のように処理されるのです。
奥行きは才能ではなく、距離ごとの差を意図して積み重ねることで生まれます。

のっぺり背景に共通する3つの症状

のっぺり背景には、だいたい共通する症状があります。
たとえば手前の草も奥の山も同じ鮮やかさで、輪郭まで同じくっきり感を保ったままだと、距離の情報が消えてしまいます。
新人時代、遠くの山まで細かく描き込んだことがありますが、むしろ手前に飛び出して見えました。
描き込みを削った瞬間、ようやく奥へ引っ込んだ。
あの差は忘れにくい体験です。

もうひとつは、画面のどこを見ても密度が揃っている状態です。
遠景・中景・近景の3層に分けるなら、本来は遠景ほどシルエット中心、中景は形を読ませる塊、近景は見せ場として描き込む役割になります。
ところが全部に同じ量の線や模様を入れると、主役の位置がぼやけます。
背景は「全部を描く」より「どこを引くか」が効く場面だと考えると整理しやすいでしょう。

脳が奥行きを感じる5つの手がかり

人間が奥行きを感じる手がかりは、重なり・大小・上下位置・空気遠近法・運動視差の5種類です。
重なりは手前の物が奥を隠すことで前後を示し、大小は同じ種類の物が遠いほど小さく見えるという読み取りを支えます。
上下位置は地平線に対する配置で距離感を補い、空気遠近法は遠いほど彩度とコントラストが弱まり、色が空気に溶けていくように見せます。
さらにゲーム背景では、手前ほど速く、奥ほど遅く動かす運動視差が効きます。

ドット絵では特に「情報量・彩度・コントラスト」を距離ごとに変えるのが基本です。
遠いほど少なく、弱く、淡くする。
近いほど多く、強く、くっきりさせる。
森の背景を完成させたとき、近景の草だけ彩度を上げた瞬間に画面へ空間が生まれたことがありますが、あれはまさに手前を基準点にして、奥を引かせたからです。
パララックスを入れる場面でも、遠景は10〜20%、遠景寄りの層は20〜40%、中景は40〜60%、近景はほぼ同速といった差を付けると、動きだけでも立体感が立ち上がります。

この記事で目指す完成イメージ

この記事で目指すのは、背景を「描き込む」ことではなく、距離の差を設計できる状態です。
遠景は空や山で空気感を受け持ち、中景は木立や建物の塊で形を読ませ、近景は草や地面で画面の重心を作る。
この役割分担がはっきりすると、何を増やすべきかではなく、何を減らすべきかまで見えてきます。

逆説的ですが、遠景は描き込みすぎないほうが奥に見えます。
情報を削ると寂しく感じるかもしれませんが、距離の手がかりが立ち上がるのはそのあとです。
おすすめは、まず近景だけを基準にして、そこから一段ずつ弱めていくこと。
そうして3層の差を作れれば、プレイヤーが画面を引いて見たときに、自然と奥行きが伝わるはずです。

奥行きを設計する3層構造

3層構造で奥行きを作るときは、まず画面の役割を遠景・中景・近景に分け、どこに空気を置き、どこで形を読ませ、どこを主役にするかを決めます。
遠景は低彩度でシルエット中心、中景は塊として見せ、近景で描き込みとコントラストを強めると、視線は自然に手前へ寄ります。
平面的に見える背景ほど、距離ごとの差が薄いものです。
だからこそ、最初に3層へ切り分ける手順が効きます。

遠景・中景・近景の役割分担

遠景は空・遠い山・雲で、大気感そのものを担う層です。
ここは情報を入れすぎず、輪郭も細部も抑えて、画面の「空気」を作る役に徹します。
中景は木立や建物の塊として地形やシルエットを読ませる部分で、形のまとまりが見えるだけでも場面の理解が進みます。
近景は手前の地面・草・標識のように、キャラやプレイヤーが触れる主役の層です。
ここにいちばん視線を集めると、画面が立ち上がります。

この分け方を先に決めておくと、後から何をどこまで描くかで迷いません。
ステージ背景を1枚絵の感覚で詰めた結果、修正地獄になった経験は少なくありませんが、遠景・中景・近景をレイヤー分けする習慣に切り替えると、直す場所が明確になって作業が一気に軽くなります。
中景の建物群も、いきなり窓や屋根の装飾から入るのではなく、まず1色のシルエットで置いてから細部を足すと、建物が「群れ」として読めるようになります。

情報量を手前に集中させる配分の考え方

奥行きは、距離ごとの情報量を均等にしないことで生まれます。
遠景はシルエットだけ、中景はそこそこ、近景はしっかり描き込む。
この差がつくと、脳は自動的に手前を基準に画面を解釈し、遠近の関係を拾いやすくなります。
逆に、どの層も同じ彩度・同じコントラスト・同じ密度で埋めると、背景全体が一枚の面として処理されやすいのです。

ドット絵では、この配分がとくに効きます。
遠景は低彩度・低コントラスト・最小ディテール、中景は中間の彩度で輪郭を保ちつつ描き込みは控えめ、近景は最高彩度・最強コントラスト・最も描き込む、という差をつけてみてください。
空気遠近法も同じ考え方で、遠いほど色を空の側へ寄せ、明暗差を縮めると距離感が出ます。
近景だけは基準点として色とコントラストを強く残すのがコツです。

レイヤーを分けて描くと後工程がラクになる

レイヤーを物理的に分けておく利点は、見た目以上に大きいです。
色調整を層ごとに一括でかけられるので、遠景だけ薄く霞ませたり、近景だけコントラストを残したりする調整がやりやすくなります。
修正のたびに画面全体を塗り直す必要がなくなるため、背景の詰め直しが落ち着いて進むでしょう。

さらに、遠景・中景・近景を別PNGとして分離できれば、そのままパララックス素材に転用できます。
ゲーム背景では、手前ほど速く、奥ほど遅く動かすだけで運動視差が生まれ、静止画では出しにくい奥行きが一段増します。
最奥を1フレーム1ピクセルから始める考え方も扱いやすく、整数でズレが揃うのでピクセルパーフェクトを保ちやすいです。
イラストとして仕上げても、後でゲーム用に流用しやすい。
おすすめの作り方です。

空気遠近法で距離ごとに色を変える

空気遠近法では、遠いものほど彩度を下げ、明暗差を縮めるほど奥行きが出ます。
山や丘が霞んで見えるのは、色が薄まるだけでなく、明るい面と暗い面の差まで弱まるからです。
ドット絵でもこの変化をパレットで再現すると、少ない色数でも距離感がはっきりします。

彩度とコントラストを遠いほど落とす

遠景を近景と同じ濃い緑で塗ると、画面の手前と奥がつながって見えます。
そこで彩度を半分ほど落とし、暗部と明部の差も詰めると、輪郭がやわらいで一気に遠くへ引っ込みます。
実際、近景と同じ濃い緑で塗っていた山に青を混ぜただけでも、空気をはさんだような距離が生まれました。
ポイントは色を変えること自体より、色の勢いを弱めることです。

この処理が効くのは、遠くの物体ほど空気の層を多く通るからだ。
空気中でコントラストが削られると、細部よりも塊として見えるようになり、輪郭の情報も減っていく。
ドット絵では、1色ごとの差が大きいほど形が締まって見える反面、遠景まで同じ強さで描くと奥行きが死にます。
だから遠い層ほど明暗差を圧縮し、近景だけはくっきり残す切り分けが効きます。

遠景の色相を空の色へ寄せる

遠景は彩度を落とすだけでなく、色相そのものを空へ寄せると自然です。
昼間なら青み、夕方なら赤みを足すと、空気の色がそのまま遠景に乗ったように見えます。
遠くの山がうっすら青く感じられるのはこのためで、空の色側へずらしたパレットは、距離だけでなく時間帯の空気まで運んでくれます。
夕方ステージで遠景を青のまま残すと違和感が出ましたが、遠景パレットを赤側へ寄せた瞬間、空と山の温度がそろいました。

この考え方は、色を「物体の固有色」だけで決めないところに面白さがあります。
空気遠近法では、遠景は空そのものの影響を受ける面として扱うので、緑の山でも青や赤に少し引き寄せると距離が出るのです。
見た目の派手さを保ちたいなら、近景に鮮やかな基準を置き、遠景は空の側へ寄せて対比させましょう。
そうすると手前の色が生きてきます。

層ごとにパレットを分けて段階を作る

ドット絵では色数が限られるため、1つの共通パレットで全部を処理するより、層ごとに専用パレットを用意するほうが扱いやすいです。
遠景は明度を空に近づけてコントラストを圧縮し、中景はその中間、近景は明暗差を最大に残す。
こうして段階を分けると、画面の奥から手前へ視線が自然に流れます。
層の差がはっきりするので、何をどこに置くべきかも決めやすくなります。

この段階作りで迷ったら、まず遠景を空に寄せ、次に中景をその橋渡しにし、最後に近景だけを強く残してください。
全部を霞ませると画面がぼやけますが、手前にハッキリした基準点を1つ置けば、遠景の淡さがむしろ際立ちます。
おすすめです。
遠近の差を一度に詰め込まず、3層で組んでみてください。

重なり・サイズ差・上下位置で空間を作る

重なり、サイズ差、上下位置の3つは、色を使わなくても奥行きを立ち上げられる基本の手がかりです。
とくにオーバーラップは強く、手前の物が奥の物を少し隠すだけで、前後関係は一瞬で読めるようになります。
そこに「遠いほど小さい」というサイズの差と、画面下を手前、地平線に近いほど奥とする上下位置を重ねると、背景の説得力がぐっと増します。

オーバーラップで前後関係を断定する

オーバーラップは、空間表現のなかでも最初に効く手がかりです。
手前の木が奥の山の輪郭をわずかに隠すだけで、見る側は迷わず「木が前、山が後ろ」と判断できます。
色や描き込みで説明する前に、まず要素を重ねて配置すること。
平坦に見えた草原に、手前の枯れ木を1本だけ大きく置いたとき、画面が急に深くなった感覚は、まさにこの効果でした。
重なりの作り方は難しくなく、前景に少し大きめの物体を置き、中景と遠景の輪郭を一部だけ隠すだけでも成立します。

サイズの大小で距離を語る

同じ種類の物は、遠いほど小さく描くと距離が読みやすくなります。
木なら木、建物なら建物というように種類をそろえて比較すると、近景の木は大きく、中景の木は中くらい、遠景の木立は小さくという段階づけがそのまま空間の奥行きになるのです。
ここで大切なのは、単に縮めることではなく、サイズ差に一定のリズムを持たせることだ。
大きさが無秩序だと遠近の規則が崩れるため、同じ並木でも「手前は幹を太く、奥は枝葉を簡略化する」といった整理が効いてきます。
形が似ているものほど、このルールは強く働くでしょう。

地平線と上下位置で奥行きを示す

上下位置は、背景全体のスケールを決める最後の支柱です。
画面下にある要素ほど手前、地平線に近いほど遠いという原則を守ると、空間の読み取りが安定します。
実際に地平線を画面の上1/3に置くと空が狭く窮屈に見え、下1/3へ下げると空が広がって一気に広大さが増しました。
どこに地平線を置くかで、同じ草原でも印象は別物になるわけです。
オーバーラップとサイズ差で前後を固め、上下位置で視界の広さを決める。
そこへ空気遠近法を重ねれば、形の手がかりと色の手がかりが噛み合い、説得力のある背景になります。
おすすめです。

ディテールとエッジで距離感を強める

遠景は細部を追うほど情報が散らばり、距離感が弱まります。
ドット絵では、むしろシルエットの塊として読ませ、内部の点描や模様を思い切って省いたほうが、画面の奥に引っ込んだ空気が出やすいです。
描かないことが奥行きを作る、という感覚がここでは効いてきます。

遠いものは情報を間引いて塊にする

遠い要素は、輪郭と大きな面だけで成立させるのが基本です。
森の奥や山並みを一本一本の木として追っていくと、遠景なのに情報が前へ出てきてしまい、画面全体が平板になります。
そこで内部の点描や枝葉の細部を大胆に省くと、形だけが静かに残り、視線は自然と手前へ戻ってきます。
暗い緑の塊に上部のハイライトだけを置く描き方に切り替えたら、森を描く時間が半分になり、しかも奥行きは増した。
省略が手抜きではなく、距離を設計する操作になるわけです。

近いものは描き込んでテクスチャを足す

近景は逆で、ディザリングやハイライトを足して情報量を増やします。
地面の質感、草の一本一本、石の角の光を少しずつ入れると、画面の前面に触れられるような密度が生まれ、遠景との差がはっきりします。
近景の岩にディザリングで明暗を加えたとき、岩肌が手前に飛び出して見え、画面の前後感が一気に締まりました。
細部を増やすほど近く感じるのは、視界の中で「見えている努力」がそのまま距離の近さとして読まれるからです。

エッジの強弱でピントをコントロールする

距離感を決める最後の仕上げが、エッジの扱いです。
遠景の輪郭を背景と近い色で弱めれば、アンチエイリアスのような疑似的なぼかしになり、空気に溶けた印象が出ます。
逆に近景はくっきり締めると、そこだけにピントが合っているように見える。
主役のキャラやプレイヤーが立つ場所には、必ずそのシャープさを残しましょう。
すべてを霞ませるのではなく、見せたい一点だけを鮮明に保つことで、視線誘導と奥行きが同時に成立します。

パララックス（多重スクロール）で奥行きを動かす

パララックス（多重スクロール）は、手前と奥でスクロール速度を変え、画面に奥行きをつくる技法です。
近いものほど速く流れて見える運動視差をそのまま利用するため、単純な平面の背景でもスクロールした瞬間に立体感が立ち上がります。
初めて組むなら、まずは速度差をつけること自体が主役だと考えるとでしょう。

パララックスが奥行きを生む仕組み

パララックスの核は、同じ横移動でもレイヤーごとに見かけの流れ方が変わる点にあります。
奥の山や雲をわずかに遅く動かし、草や建物の前景をカメラとほぼ同速にすると、視線は自然に手前を基準に距離を読み取ります。
初めてUnityで組んだときに奥の山を速くしすぎて手前に見えてしまったことがありましたが、速度比を逆にしただけで景色が一気に奥へ引き込みました。
距離の錯覚は、速度の差で決まるのです。

この仕組みが効くのは、脳が「近いものは速く流れる」と経験的に知っているからです。
だからこそ、背景をただ動かすのではなく、画面のどこを基準に見せたいかを先に決める必要があります。
中心になるレイヤーが定まると、周囲のレイヤーはその補助として働き、スクロール量が少なくても深さが出ます。
迷ったら、主役を一枚に絞ってしまいましょう。

レイヤー別スクロール速度の目安

速度配分は感覚だけで決めるより、目安を持ったほうが安定します。
空はカメラ速度の10〜20%か固定、遠景は20〜40%、中景は40〜60%、近景はほぼ同速が扱いやすい配置です。
手前ほど速く、と覚えておけば、山脈、森、地面の順に段階をつけやすくなります。
比較すると、奥ほど「動いた気がしない」くらいでちょうどよいでしょう。

この表のように、各層が互いに干渉しすぎない幅を持たせるのがコツです。
すべてを同じ比率で動かすと平坦になりますし、差をつけすぎると奥行きが破綻します。
最初は遠景を控えめに、近景をしっかり速くしてみてください。
おすすめです。
そこから少しずつ調整すると、狙った空気感に寄せやすくなります。

静止画レイヤーをそのまま素材化する

最奥レイヤーを1フレーム1ピクセルから始め、手前のレイヤーを順に速くしていくと、ピクセルのズレが整数で揃いやすくなります。
ドット絵では、この揃い方が滲みを防ぐ鍵です。
端数の移動が積み重なると輪郭がにじみ、せっかくのピクセルラインが崩れます。
整数幅で流せる設計にしておけば、画面が動いても線が締まったまま残るのです。

遠景・中景・近景を最初から分けて描いておく利点も大きいです。
静止画として完成した背景を、そのままPNGで分離するだけでパララックス素材に変えられます。
イラスト用に描いた背景をゲームへ流用できるので、あとから背景を描き直す手間が消えます。
私はこの形で組んでおいたおかげで、背景制作から実装までをほぼそのままつなげられました。
作業はゼロ手間に近く、かなり気持ちよく進みます。