ドット絵で城を描く手順|石壁とパースの基礎
ドット絵で城を描く手順|石壁とパースの基礎
城のドット絵は、城壁・塔・門・屋根の4部品に分解すると、64x64pxでも手順を追って描きやすい題材です。まずシルエットで構図を固め、つぎに城壁の長方形と塔の箱を置き、石壁テクスチャ、影とハイライト、仕上げへ進めば、初心者でも迷いにくくなります。
城のドット絵は、城壁・塔・門・屋根の4部品に分解すると、64x64pxでも手順を追って描きやすい題材です。
まずシルエットで構図を固め、つぎに城壁の長方形と塔の箱を置き、石壁テクスチャ、影とハイライト、仕上げへ進めば、初心者でも迷いにくくなります。
城がのっぺり見える原因は光源を固定しないことにあり、左上か右上の1方向に揃えて全体の影を統一すると立体感がぐっと増します。
塔は最初に真四角の箱として描き、縦方向の暗・中・明のランプを足していくと円柱らしく見えてきます。
完成イメージと城を描く前の部品分解
城は、城壁・塔・門・屋根の4部品に分けて考えると、最初の一歩がぐっと軽くなります。
全体像を先に小さく決めておけば、細部に迷って形が崩れるのを防ぎやすいでしょう。
ドット絵では64x64pxのような小さめのキャンバスから始め、輪郭と配置を固めてから描き込みを足す流れが扱いやすいです。
この記事で描く城のサイズと雰囲気
完成形は、まず64x64pxで成立する小さな城を想定すると組みやすくなります。
白紙に最初のアタリを置く段階では、塔を2本、中央に城門という最小構成だけでも十分に城らしい印象が出ますし、城壁の横幅を画面の8割ほどに取れば、少ないドットでもシルエットの安定感が出ます。
もっと情報量を増やしたくなったら128x128pxに上げると、石の段差や屋根の形に余白が生まれます。
このサイズ感が役立つのは、ドット絵では1ドットの判断がそのまま輪郭の説得力に直結するからです。
最初から大きく描きすぎると、装飾を足す前に全体の重心がぶれやすい。
だからこそ、小さく始めて「城らしい塊」が見えるかを先に確かめる進め方がおすすめです。
城を4つの部品に分解して考える
城は複雑に見えますが、実際には城壁、塔、門、屋根の4部品に分けると見通しが一気に良くなります。
城壁は横長の壁、塔は縦長の円柱や箱、門は城門のアーチ、屋根は塔の上に乗る円錐屋根として捉えると、それぞれが単純な図形の組み合わせに落ち着くからです。
最初にこの部品分解で全体をつかんでおくと、どこから描くかで迷いにくくなります。
体験的にも、64x64pxの白紙にまず塔2本と中央の門だけを置くと、部品分解の感覚がすぐつかめます。
城壁の横幅を画面の8割ほどにして左右へ塔を立てるだけでも、最小限のドットで城らしいシルエットが成立するはずです。
そこから屋根を足すと高さの変化が生まれ、城門を入れると入口の意味が生まれる、という順で考えると整理しやすいでしょう。
全体の描く順序
描く順序は、ラフのシルエット、城壁と塔の基本形、石壁テクスチャ、影とハイライト、細部の仕上げという5ステップで進めます。
最初に輪郭だけを固めておくと、後半で装飾を足しても構図が崩れません。
とくに城は面積が広く、細部に先に入ると全体の比率が見えなくなるため、この順番が効きます。
準備段階ではアンチエイリアスを切り、グリッドを表示して直線や繰り返しを揃えやすくしておくと作業が安定します。
城壁の石壁は目地の線から入り、石の面、陰影の順で整えるとまとまりやすいです。
ゲームのタイル素材として使うなら、16x16px単位で城壁の石を設計しておくと、後で城壁や塔へ流用しやすくなります。
使い回しを前提に部品を作る発想が、仕上がりの統一感にもつながるでしょう。
準備:キャンバス設定とパレット作り
アンチエイリアスを切ること、グリッドを出すこと、石用の4色ランプを先に組むこと。
この準備だけで、城の輪郭は早い段階からドット絵らしい硬さを保てます。
さらに影と光にヒューシフトを入れておくと、少ない色数でも石壁の厚みが出やすくなります。
アンチエイリアスをOFFにしてグリッドを表示する
新規キャンバスで真っ先にアンチエイリアスをOFFにし忘れると、輪郭に中間色が混ざって「なんかドット絵っぽくない」状態になりやすいです。
ペン、塗りつぶし、拡大縮小の各処理で境界がにじむと、1px単位で立てた壁や塔の輪郭が曖昧になり、城の硬さが消えます。
最初の設定で防げる典型ミスなので、ここは作業開始時の固定手順にしてしまいましょう。
あわせてグリッドを表示すると、石やレンガの並びをマス目に沿って揃えやすくなります。
城は直線と繰り返しが多いモチーフなので、微妙なズレが積み重なって崩れるのを避けやすいのが利点です。
ラフ段階でも、塔の幅や城壁の段差をグリッドに乗せておくと、あとから細部を足しても形がぶれにくくなります。
石用カラーランプ(4色)を作る
石の基本パレットは、『暗い影・中間・明るい中間・ハイライト』の4色を1つのカラーランプにまとめるのが扱いやすいです。
1つの面をこの4色だけで塗ると、面ごとの色味がそろい、石壁がばらついて見えません。
城壁や塔のように面積が大きい部分ほど、色数を増やすより先に、同じランプで統一するほうが仕上がりが安定します。
実際にグレー一本のランプで塗ると、無難ではあるものの、石の温度や素材感が出にくいです。
そこから青みの影と暖色の光に振ったランプへ変えて同じ石壁を塗り比べると、後者のほうが明らかに立体的に見えます。
城全体でも色数は8〜16色程度に抑えるとまとまりが出るので、石だけでなく屋根や旗まで含めて、まず少ない色で描き切る意識が効いてきます。
ヒューシフトで影を青く・光を暖色に
ヒューシフトは、単なる明暗差を「温度差」に変えるための考え方です。
影側を青寄り・低彩度に、ハイライト側を黄寄り・高彩度にずらすと、平面的なグレーよりも石の厚みと空気感が出ます。
左上か右上の1方向に光源を固定したうえでこのずらし方を入れると、塔の円柱感や壁面の面替わりが読み取りやすくなります。
ただし、光を強くしすぎるとピロシェーディングのように全周が均一に明るくなり、境界で同色が連なるとバンディングも起きやすいです。
なめらかにしたい部分だけは少量のディザリングでつなぎ、ほかは色面をはっきり分けたほうが城らしい重さが残ります。
石壁、塔、城門の半円アーチ、矢狭間まで同じ光の向きで揃えると、画面全体の説得力が一段上がるでしょう。
ステップ1:シルエットと城壁・塔の基本形
城は、まず1色のシルエットで全体のアタリを取ると形が決まります。
塔の高さ、城壁の幅、左右の重心をここで固めておくと、あとから線画やテクスチャを重ねても崩れにくいです。
細部を急ぐより、最初に大きな塊を置くほうが仕上がりは安定します。
1色のシルエットでアタリを取る
最初の段階では、色を増やさずに城全体をひとつの塊として見ます。
塔を高くするのか、城壁を広く取るのか、入口をどこへ寄せるのかをこの時点で決めるだけで、後工程の迷いが減ります。
シルエットが読める城は、細部が少なくても「城だ」と伝わるからです。
城壁の長方形と塔の箱を置く
城壁は横長の長方形、塔は縦長の箱か円柱として置くと扱いやすいです。
塔は城壁より高く、細く描くと一目で城らしい印象になりますし、64x64なら幅8〜12px程度の塔が描きやすいでしょう。
ここで塔を1本だけ高く、もう1本を少し低くしてみると、同じ形の繰り返しよりも動きが出ます。
左右対称すぎる配置は整って見える反面、印象が平坦になりやすいので、片側へ門を寄せるだけでも見栄えは変わります。
銃眼(クレネル・マーロン)を交互に刻む
城壁上部に銃眼を入れると、ただの長方形が一気に城壁へ変わります。
凸のマーロンと凹のクレネルを約1:1の高さで交互に並べ、等間隔で刻むことが肝心です。
歯型のリズムが揃うと輪郭に緊張感が生まれ、遠目でも石造りの防壁らしく見えます。
銃眼を入れた瞬間に形の印象が切り替わるので、ラフ段階でも効果を確認しながら進めるとよいでしょう。
対称性は便利ですが、城の絵では単調さの原因にもなります。
塔の数や高さに差をつけ、片側だけ少し張り出しを作るだけで、画面に視線の流れが生まれます。
きれいに揃えすぎないことが、むしろ城らしさにつながるのです。
ステップ2:石壁テクスチャをタイルで作る
石壁やレンガのテクスチャは、形を先に決めてから面を塗ると崩れにくくなります。
目地の線を格子状に引いて骨組みを作り、その上で石の面を埋める順番にすると、1枚のタイルの中で配置がそろいやすいからです。
さらに、16x16pxの単位で作っておけば、城壁にも塔にも同じ模様を貼り回せます。
面白いのは、手で石を並べる感覚よりも、先に線を置くほうが仕上がりの秩序がはっきり出ることです。
目地の線から描き始める
石壁は、いきなり石の色を置くより、先に目地の線を1色で引いたほうが整然とします。
目地が先にあると、各石の大きさと位置が見えやすくなり、面を塗る段階で迷いにくいからです。
実際、格子状に目地を敷いてから石を塗ると、フリーハンドで石を並べるときより配置がそろいやすくなります。
最後に影とハイライトを足せば、輪郭だけでなく立体感も自然に乗ってきます。
この順番は、細部を描き込むための下準備というより、全体の秩序を作る作業です。
石の数を増やす前に境界を決めておくと、1枚のタイルの中で破綻しにくく、あとから修正しても全体が崩れにくいでしょう。
面を塗るときは、中央まで強く塗り込まず、継ぎ目まわりの変化を軸に組み立てると見通しがよくなります。
おすすめです。
レンガを互い違いに積む
レンガ風に見せたいなら、段ごとに横半分ずらす互い違い積みにすると本物らしくなります。
真上にそろえた並びは規則正しすぎて人工物の印象が強まりやすいのに対し、ずらした並びは石積み特有の重量感が出るうえ、反復の単調さもやわらぐからです。
城壁や塔のように面積の大きい構造物では、このずれが視線の流れをほどよく分散してくれます。
互い違いにする利点は、見た目だけではありません。
段差のリズムがつくことで、同じ色数でも面に変化が生まれ、のっぺりした印象を避けやすくなります。
石やレンガの幅をきっちり揃えすぎなくても、段ごとのずれがあるだけで全体が落ち着いて見えるでしょう。
おすすめ。
タイルとして繰り返せるように継ぎ目を合わせる
16x16pxのタイルとして作るなら、左右と上下の継ぎ目がつながるかを最初から意識しておく必要があります。
タイルの端に置いた線や影が反対側に自然につながれば、城壁へコピー&ペーストで敷き詰めたときに継ぎ目が目立ちません。
1枚の完成度を上げるだけでなく、同じ1枚を何度も使い回せるのがタイル化の強みです。
ゲーム用タイルマップにもそのまま流用しやすく、手数を増やさずに面を広げられます。
さらに、テクスチャの密度は上げすぎないほうが扱いやすいです。
石の継ぎ目や角だけにディテールを置き、面の中央は控えめにしておくと、繰り返したときのノイズ感が減ります。
細部を詰め込みすぎると、1タイルでは見栄えがしても、壁全体ではうるさくなりがちです。
16x16pxの中で抑える場所を決めておけば、塔にも城壁にも貼り回したときに画面が締まります。
試してみてください。
ステップ3:光源を決めて影とハイライトで立体感を出す
最初に光源を一つだけ決めると、城全体の見え方が驚くほど揃います。
画面の左上か右上に固定し、塔・城壁・屋根の影の向きを同じ基準で通すと、各パーツが別々の部品ではなく、ひとつの立体としてまとまって見えるからです。
ここではまず、その光の約束事を決めてしまいましょう。
光源を左上か右上に固定する
ステップ1で四角い箱のように見えていた塔に、左暗・右明のカラーランプを縦に流し込むと、形の印象は一気に変わります。
明暗の向きがそろうだけで、面の切り替わりが読みやすくなり、見る側は「箱」ではなく「奥行きのある建物」として認識しやすくなるのです。
城の別パーツでも影の向きを統一すると、全体の光が一方向から差しているように感じられておすすめです。
塔を円柱として影とリムライトで丸くする
塔は円柱として扱うと描きやすくなります。
暗→中→明の3〜4階調を横方向に並べ、片側をしっかり暗く、反対側を明るくすると、平面的な四角柱ではなく丸い胴体に見えてきます。
さらに影側のふちへ1pxのリムライトを入れると、輪郭が少しだけ持ち上がり、金属や石の縁に残る反射光のような気配が出ます。
ステップ1の箱にこの処理を重ねると、塔が急に「立つ」ので、ぜひ試してみてください。
バンディングとピロシェーディングを避ける
試しに塔の全周を均等に明るくすると、たしかに塗りは整って見えますが、急にのっぺりします。
これがピロシェーディングで、正面から光を当てたように全体が同じ調子になるため、立体の向きが消えてしまうのです。
明暗の境界でも同じ色が帯のように連なるとバンディングが目立つので、境界をなだらかにしたい場面ではディザリングで少量だけ混ぜましょう。
市松状のドットを挟むと、段差を崩しつつ輪郭の芯は保てます。
光を一方向に戻した瞬間、立体感が復活する対比は分かりやすく、ここが影付けの肝です。
円錐屋根は、瓦を下ほど大きく、上ほど小さく重ねると奥行きが出ます。
しかも屋根だけが別の光で照らされているように見えると違和感が出るため、塔本体と同じ光源に沿って影を入れ、城全体の陰影の向きをそろえましょう。
こうすると屋根の斜面が自然に読めて、塔との接続部にも厚みが生まれます。
細部の瓦は主役ではありませんが、並び方と影の方向を合わせるだけで、城の説得力はぐっと増します。
ステップ4:城門・窓・旗など細部の仕上げ
城門の仕上げで最初に効くのは、アーチの形です。
上部を半円に整え、内側を一段暗い色で塗るだけで、平らな壁面だった場所に奥行きが生まれ、ここが入口だと自然に伝わります。
左右対称のなめらかな曲線にすると城門らしさが強まり、土台や壁が少しラフでも全体が締まって見えます。
城門のアーチと奥行きを描く
跳ね橋を添えるなら、アーチの直下に重心を置くとまとまりやすいです。
木の板や金具を細かく描き込む前に、まずは入口の黒さと輪郭を優先すると、城の顔としての説得力が出ます。
細部は後から足せますが、門のシルエットだけは最初に決めておきましょう。
矢狭間と窓を点在させる
矢狭間は、塔や城壁に縦長の細い長方形をぽつぽつ置くだけで十分に機能します。
幅を1〜2pxに抑えることで、窓としての軽さを残しつつ、防御施設らしい硬さも出せます。
数を増やしすぎると壁面が穴だらけに見えるので、塔ごとに数本ずつ散らして密度を調整すると、画面のリズムが整います。
窓と矢狭間は似て見えても役割が少し違うため、どちらも同じ強さで描かないほうがいいでしょう。
城の中で何を見せたいかが定まると、細い開口部は背景の情報として働きます。
主役は壁の量感で、矢狭間はその緊張感を補う脇役です。
旗で主役(フォーカルポイント)を作る
塔の先に旗を1つ置くと、視線がそこへ集まり、グレー基調の城でも画面に芯が通ります。
彩度の高い色を1点だけ使うと、石色との対比がはっきりして、遠目でも印象が残りやすいです。
実際、旗を足した瞬間に、静かだったシルエットの中へ視線が吸い寄せられる感覚が出ます。
アクセントは旗だけでなく、必要なら小さなランプにも広げられます。
ただし優先順位は明確で、門、窓・矢狭間、旗、その後に装飾という順で考えるのが扱いやすいです。
あれもこれもと入れるとごちゃつくので、城の主役を1〜2点に絞ってみてください。
よくある失敗とその対策・次のステップ
城を描いたときにまず目立つ失敗は、のっぺり感、ごちゃつき、そしてパースの崩れです。
原因を分けて見ると直し方も明快で、光源をそろえる、テクスチャを減らす、色数を絞るだけでも見え方は変わります。
そこを整えたうえで、アイソメトリック(クォータービュー)やタイル化へ進むと、表現の幅が一気に広がるでしょう。
症状別チェックリスト
城がのっぺりして見えるときは、光源の位置が絵の中で揺れていることが多いです。
とくに全部の影が別々の向きを向いていると、面の奥行きが読み取れません。
左上から光が当たる前提にそろえ直し、影の向きを1方向に統一してから、最後にハイライトをまとめて置くと立体感が戻ります。
修正の順番を固定しておくと、どこが平坦さの原因なのか追いやすいはずです。
画面がごちゃごちゃする場合は、石の継ぎ目や角以外にまで細かな模様を入れすぎていることが多いです。
面の中央までディテールを埋めると、遠目では全部が同じ強さでぶつかって見えます。
継ぎ目と角だけに陰影を残し、中央は単色に戻すと、城の輪郭がすっと立ちます。
色が濁るなら、城全体の色数を8〜16色に絞り、石は4色ランプで統一するとです。
パースが崩れたときの直し方
塔が立体に見えないときは、真四角の箱のまま塗ってしまっている可能性があります。
円柱として見せたい部分に、暗→中→明のカラーランプを縦に流すと、丸みの方向がはっきりします。
逆に、上下の面で明暗が入れ替わると形が破綻しやすいので、まずは一方向の厚みを決めてから面を足すと安定します。
塔だけでなく、壁の張り出しや屋根の厚みにも同じ考え方を使ってみてください。
のっぺりした城を直すときは、全部の影を左上光源に揃え直す作業がいちばん効きます。
最初は地味でも、影の向きが合った瞬間に石垣の段差や塔の前後関係が読みやすくなり、修正前とは別物に見えるでしょう。
パースが崩れている箇所を見つけたら、先に箱としての向きをそろえ、次に面の厚みを足す流れで整えてください。
次に挑戦したい応用テクニック
基本の形と陰影が安定したら、次はアイソメトリック(クォータービュー)の城に挑戦してみてください。
正面向きの城よりも奥行きの取り回しが増え、塔や城壁をどう組むかで印象が大きく変わります。
そこから城壁の石壁を16x16タイルに分けて城下町のタイルマップへ広げたり、旗のはためきをドット絵アニメーションにしたりすると、静止画の技術がそのまま応用へつながります。
城を起点に学べる範囲は広いです。
応用を始めるときは、いきなり全部を盛らず、まず一つだけ要素を増やすのが扱いやすいでしょう。
たとえば塔の丸みを強める、壁の継ぎ目をタイル化する、旗に2〜3コマの動きを入れる、といった具合です。
どれも小さな変更ですが、積み重なると画面の密度が上がり、制作の手応えも出てきます。
順番に試してみてください。
ゲーム会社でドット絵グラフィッカーとして10年以上の経験を持つ。ファミコン・スーファミ時代のレトロゲームに影響を受け、現在はインディーゲームのアート制作を手がける。制作テクニックの体系化に情熱を持つ。
関連記事
ドット絵 スライムの描き方|32x32でぷるぷる質感を作る
スライムは、32x32のキャンバスと12色前後のパレットで立体表現を学ぶのに向いた、球体に近い単純なドット絵キャラクターです。丸い形を置くだけならすぐ描けますが、ただの色の塊から抜け出すには、影とハイライト、そして半透明の見せ方が決め手になります。
横向きキャラのドット絵の描き方|5ステップ実践
横向きキャラとは、RPGやアクションゲームの移動スプライトで標準的に使われる視点のドット絵であり、正面絵とは比べものにならないほど顔の出っぱりや重心の置き方が効いてきます。
ドット絵で木と森を描く手順とコツ
ドット絵で木を描くときのつまずきは、葉を1枚ずつ打とうとしてノイズの塊にしてしまうことにあります。32x32で広葉樹を描く場面でも、葉を束として捉え直し、円や楕円で樹冠の塊を先に作るだけで、画面は驚くほど整理されるのです。
ドット絵で空と雲を描く手順とコツ
ドット絵の空と雲は、32x32のような小さなキャンバスでは、グラデーションの色数不足がそのまま縞模様として出やすい題材です。Aseprite でベタ塗りの空を置くと帯が立ち上がりますが、境目にディザリングを足すだけで、色の切れ目がふっと消える手応えが生まれます。