アイソメトリックドット絵の描き方｜2x1で部屋を作る

等角投影は本来、3軸が120度で交わる消失点のない平行投影のことですが、ゲームではこの見え方をまとめてクォータービューと呼ぶ場面もあります。
この記事では、その関係を最初に整理したうえで、ドット絵で破綻しにくい描き方を32x16タイル基準で手順化します。

制作の現場で初心者が最初につまずくのは、30度の理屈をそのまま持ち込んで2x1の傾きがぶれることと、上・左・右の3面に明度差が足りず箱が平たく見えることでした。
ここでは例として、ガイド線を1本置いて床タイルを描き、例示的に高さ8pxの立方体を起こす順で手順を示します。
実際のプロジェクトではタイル規格や表示解像度に応じて（例：高さ6px／8px／16px など）調整してください。

30度の理論値より約26.565度の2x1ルールを使うほうが、ピクセルでは線がそろい、形の狂いを早い段階で止められます。
2x2床と高さ2タイルの壁で小さな部屋まで発展させながら、左上光源の配色、セルアウト、PNG保存を押さえれば、アイソメトリックの立体感は最短距離で身につきます。

アイソメトリックドット絵とは？普通のドット絵との違い

等角投影の基本

アイソメトリックドット絵は、等角投影の考え方をピクセルアート向けに運用した表現です。
基礎になるのは、3本の軸がそれぞれ120度で交わる平行投影で、透視図法のような消失点を持ちません。
そのため、手前の箱も奥の箱も同じ寸法で扱えます。
奥へ行くほど小さくなる透視図法とは、ここがまず決定的に違います。

この「奥でも大きさが変わらない」という性質は、見た目の特徴にとどまりません。
ゲーム制作では、タイルを敷く、通路幅を決める、家具や障害物を置く、クリック範囲や当たり判定を合わせる、といった実装上の都合まで一気につながります。
私もタイルマップ前提の画面を組むときは、この一定スケールの恩恵を何度も感じています。
オブジェクトの大きさが奥で変わらないと、レベルデザインの段階で1マス単位のルールを保ちやすく、同時にUIアイコンや選択カーソルの見え方も安定します。
画面構成と操作性が別々に崩れないので、箱庭や部屋表現で特に強い方式です。

一方で、通常の透視図法は遠近感そのものを魅力にできます。
背景イラストでは迫力が出ますし、視点誘導にも向いています。
ただ、ピクセル単位で管理するドット絵では、遠くのものを少しずつ縮める処理が線の整合を崩しやすく、タイル単位の接続も複雑になります。
階段、壁、床の交点が増えるほど、どこを1px削るかで破綻が見えやすくなります。
アイソメトリックはその点でルールが明快で、マップ、オブジェクト、キャラクターを同じ基準のまま並べられます。

製図上の理論値では、水平に対して30度の軸を使うのが等角投影の基本です。
ただしドット絵では、その30度線をそのまま打つと階段状のギザつきが不規則になり、線のクセが目立ちます。
そこで実務では、横に2px進んで縦に1px動く2x1ルールで近似するのが定番です。
この線は約26.565度で、理論上の30度より約3.435度浅くなりますが、ピクセルとしての並びはずっと安定します。
理論をそのまま持ち込むより、画面上で揃うことを優先するのがアイソメトリックドット絵の実践的な考え方です。

活用場面もはっきりしています。
一定スケールでタイル化できるので、地形の反復、建物の量産、家具配置、歩行可能マスの判定と相性がよく、パスファインディングの設計も整理しやすくなります。
街並み、工房、部屋、農場、ダンジョンのように、空間を積み上げて見せたい題材ではとくに力を発揮します。

比較の要点を短く並べると、整理しやすいのは次の3点です。

• 等角投影 vs 透視図法: 等角投影はスケールが一定で、タイルと判定を揃えやすい。透視図法は遠近感が強い一方、ピクセルでは縮尺管理が煩雑になる
• 黒アウトライン中心 vs セルアウト中心: 黒アウトライン中心は視認性を確保しやすく、セルアウト中心は面のやわらかさを保ちやすい
• アウトラインありブロック vs なしブロック: アウトラインありは単体で形を把握しやすいが、接地部で線がぶつかりやすい。アウトラインなしは面同士の接続が自然で、広い床や壁を並べたときに継ぎ目が整う

クォータービューとの関係

ゲームの文脈では、アイソメトリックドット絵をクォータービューと呼ぶことがあります。
見下ろしでも真上でもなく、斜め上から空間を見せる画面だからです。
ただし、この2語は意味合いに差があり、アイソメトリックは本来投影法の性質を示す言葉で、クォータービューはゲーム画面の見え方や演出を指す場面が多い、という違いがあります。

実際の現場では、この呼び分けを厳密に保つより、「どの規格で描くか」を共有するほうが先に来ます。
たとえば企画書にクォータービューと書かれていても、アート実装では2x1の斜線を使うのか、タイル基準は32x16なのか、キャラクターの足元をどの菱形に乗せるのか、といったルールを詰めないとアセット同士が噛み合いません。
名称が近くても、透視を少し混ぜた斜め見下ろしと、純粋なアイソメトリックでは制作フローが変わります。

読者目線では、クォータービューを「ゲームで見かける呼び名」、アイソメトリックを「その中でも消失点を使わず一定スケールで描く方式」と捉えると混乱が減ります。
街づくりや部屋づくりのゲームで見かける整った斜め画面の多くは、この整理でほぼ説明できます。

表現の方向性にも違いが出ます。
クォータービューとだけ考えると、見た目の気持ちよさを優先して角度や縮尺を場面ごとに変えたくなります。
アイソメトリックとして扱うと、床、壁、オブジェクト、キャラクターの接地基準を統一できるので、量産時の破綻が減ります。
マップを増やすほど、この差は効いてきます。

等角図と等角投影図（0.82倍）の違い

ここで一度、製図の用語も整理しておくと理解が深まります。
一般記事では「等角図」と「等角投影図」が同じ意味で使われることが多いのですが、製図では厳密に区別される場合があります。
等角図は実寸ベースで扱い、等角投影図は投影による短縮を反映して実寸の約0.82倍で表す、という整理です。

この違いは、工業製図や機械設計では意味があります。
立体を投影したときの見え方を、どこまで厳密に図面へ反映するかが関わるからです。
ただ、ピクセルアートの制作では、ここをそのまま持ち込むと運用が重くなります。
タイルサイズ、接地位置、当たり判定、アニメーション原点を実寸ベースで揃えるほうが扱いやすく、実際の制作でもそのほうが破綻しません。
アイソメトリックドット絵で32x16や64x32のタイルを使うときに、毎回0.82倍の縮みを意識して描くことはまずありません。

私自身、マップ用アセットを量産するときは、製図としての厳密さより「全素材が同じ菱形グリッドに乗るか」を優先しています。
壁を1タイル高くしたとき、椅子を半マスずらしたとき、キャラクターの足元が床の中心に乗るかどうかのほうが、画面ではずっと効くからです。
ピクセルアートでは、理論値を知ったうえで実寸ベースのルールに寄せるほうが、制作も実装も安定します。

この用語差を知っておくと、海外チュートリアルや製図系の説明を読んだときにも迷いません。
図学としては0.82倍の話が出てきても、ゲーム用のアイソメトリックドット絵では、タイルとピクセルの整合を優先した実寸運用が基本です。
理屈を理解したうえで、実務ではシンプルな基準に落とし込む。
その感覚が、アイソメトリックを単なる見た目ではなく、再利用できる制作ルールとして機能させます。

まず覚えたい2x1ルール｜なぜ30度ではなく26.565度なのか

アイソメトリックの理屈だけを見ると、軸は水平30度です。
ところがドット絵では、その理論値をそのまま打つより、横に2px進むごとに縦へ1px動く2x1ルールを基準にしたほうが線が揃います。
角度で言えば約26.565度で、30度より約3.435度浅い計算です。
この差は数字だけ見ると小さく感じますが、1px単位で積み上げるドット絵では見え方の安定に直結します。

2x1の強みは、階段状の並びが「2、1、2、1」と一定のリズムになることです。
ピクセルの段差が規則的なので、斜線が面として読めます。
箱の天面、壁の縁、床タイルの外周を同じルールで引けるため、単体の形だけでなく、隣り合うタイル同士の接続まで安定します。
アイソメトリックは線の角度が合っていても、段差の増減が1px混ざるだけで箱がねじれて見えます。
だからこそ、理論の30度より、ピクセル上で崩れない26.565度のほうが実務では強いわけです。

2x1線の描き方とセルフチェック

2x1線は、横に2px置いてから1px上がる、あるいは1px下がる、その繰り返しで作ります。
文字で見ると単純ですが、実際の作業では途中で「1pxだけ早く上がる」「3px進んでから上がる」といった小さな乱れが入り込みます。
この1か所の乱れが、箱の辺や壁の上端では想像以上に目立ちます。

描くときは、まず短い距離でリズムを固定すると崩れません。
たとえば斜めの辺を引くなら、最初の数段を「横2、縦1」で打ってから、そのパターンを末端まで延長します。
長い一本線として勢いで引くより、階段の単位を先に決めたほうが、途中でリズムが狂いません。

セルフチェックも同じ発想で行います。
斜線を角度として見るのではなく、横方向に走査して「2pxごとに1pxの上下が続いているか」を確認します。
見るポイントは2つだけです。
ひとつは、上がる位置が1段抜けていないか。
もうひとつは、同じ場所で余計に1段増えていないかです。
いわゆる「段差抜け」と「段差増し」で、このどちらかがあると、線の途中にだけ妙な引っ掛かりが生まれます。

私は壁や箱を描いたあと、完成形として眺める前に、辺の並びだけを横に追って確認します。
この見方に切り替えると、立体として見ていたときには気づかなかった1pxのズレがすぐ見つかります。
2x1は規則が単純なので、正しい線も、狂った線も、並びで見ればすぐ判別できます。

30度線が不利になる仕組み

30度線がドット絵で扱いにくいのは、理論値そのものが悪いのではなく、ピクセルの階段に落とし込んだときに均一な繰り返しになりにくいからです。
30度を1px単位で近づけようとすると、ある区間では2px進んで1px上がり、別の区間では1px進んで上がったり、3px進んでから上がったりします。
すると段差のリズムが崩れ、線の途中で粗さの密度が変わります。

この不均一さが、ジャギーの正体です。
ジャギーは単にギザギザしている状態ではなく、階段の幅が揃わないことで視線が引っかかる現象です。
2x1線のように「同じ段差が続く線」は、階段でありながら面の境界として読めます。
対して30度を無理に近似した線は、狭い段差と広い段差が混ざるため、線そのものより乱れが先に見えてしまいます。

この差は、一本線より立体で見るとさらに大きくなります。
箱の上辺だけ30度っぽく描いてしまうと、左右の辺とのテンポが合わず、天面の菱形が左右非対称に見えます。
床タイルを並べた場合も同様で、1枚では気にならないズレが、連続した瞬間に継ぎ目の波打ちとして現れます。
タイル接続が不安定になるのは、角度の理論誤差より、階段パターンの不統一が原因です。

つまり、ドット絵で欲しいのは数学的に30度へ寄せることではなく、ピクセルの並びが一定であることです。
2x1ルールはその条件を満たすので、箱、壁、坂、床のどこに使っても同じ調子でつながります。

ガイドレイヤーの置き方と使い回し

2x1ルールは頭で覚えるだけでも描けますが、制作では別レイヤーに2x1ガイド線を1本置くだけで精度が安定します。
やり方はシンプルで、キャンバスの端に2x1の斜線を長めに引き、そのレイヤーを残したまま定規代わりに使います。
箱の辺を引くときも、床タイルの角を取るときも、その線と平行かどうかを見比べれば、角度の整合がすぐ取れます。

この方法の利点は、毎回グリッド全体を敷かなくても、基準が一本あるだけで全体のズレを拾えることです。
とくに箱や壁を複数並べる場面では、どこか1辺だけ段差が1px増えていることがあります。
そんなとき、ガイド線と見比べると、狂った辺だけが浮いて見えます。
私もこの1本を置いてから、箱の天面と壁の上端が一気に揃う感覚を何度も味わいました。
修正箇所が形の違和感としてではなく、線のズレとして視覚的に浮き上がるので、直す場所が迷子になりません。

ガイドは作品全体で使い回せます。
床、壁、家具、階段と対象が変わっても、同じ2x1なら基準は共通です。
レイヤーを薄く表示しておけば、主線の邪魔にならず、必要なときだけ参照できます。
アイソメトリックの破綻は、複雑な立体から始まるのではなく、最初の1本の斜線の乱れから広がります。
だからこそ、ガイドを一本置く運用が、その後の全工程を支えてくれます。

準備｜キャンバス・グリッド・タイルサイズを設定する

推奨キャンバスとグリッド設定

描き始めの設定は、キャンバスを 150x150 にして、32x16の等角タイルグリッドを表示するところから入ると安定します。
このサイズは、床・壁・小物をひと通り置いても全体像を見失いにくく、しかもキャンバスが広すぎないので、最初の一枚を最後まで描き切りやすい構成です。
小さすぎると窮屈になり、大きすぎるとラフの段階で情報量が散ります。
150x150は、その中間で手が止まりにくい寸法です。

グリッドは、ただ表示するだけでも効果があります。
床タイルの外周、壁の立ち上がり、箱の天面の角が、同じ規則の上に乗るので、2x1の線が途中で乱れにくくなります。
私は最初のうちはグリッドを見える状態で下描きし、形が固まってから必要な場面だけ参照する運用をよく使います。
最初から全部フリーハンドで進めるより、角の対称性とタイル接続の狂いを早い段階で拾えます。

スナップは常時オンより、場面ごとに切り替えるほうが実務では扱いやすいものです。
床や壁の基準線を置くときはオンにすると位置が揃いますが、輪郭の微修正やディテールの打ち直しまでスナップに任せると、かえって意図したピクセル配置から外れることがあります。
基礎構造はグリッドに乗せ、仕上げでは必要な場所だけ外す。
この切り替えができると、整った箱形と柔らかいディテールを同じ絵の中で両立できます。

色の準備もこの段階で済ませておくと流れが止まりません。
まずは明・中・暗の3色を1セット用意して、上面、左面、右面に割り当てられる状態を作ります。
アイソメトリックは三面の明度差が見えれば立体として読めるので、最初から多色に広げる必要はありません。
Asepriteを使う場合は、両端の色を置いてGradientで中間色を作ると扱いやすいのが利点です。
ここでも色数を増やすより、三面の関係が一貫していることが効きます。

32x16 vs 64x32の使い分け

タイルサイズは 32x16 と 64x32 が基本です。
どちらも等角タイルとして成立しますが、向いている場面ははっきり分かれます。
導入として勧めやすいのは32x16です。
1タイルの情報量が絞られるぶん、何を省いても立体に見えるかが掴みやすく、箱、床、壁、階段といった基本形を短いサイクルで何個も試せます。
学習の歩留まりがよく、量産して手を慣らす段階で強い規格です。

64x32は、一段上の情報量を載せたいときに効きます。
木目、窓枠、段差、装飾の厚みなど、32x16では削るしかなかった要素を入れやすくなります。
そのぶん、読みやすい絵に持っていきやすい反面、角の破綻も表に出ます。
実際、64x32で描くと箱の角、壁のエッジ、タイルの継ぎ目に入った1pxの乱れが隠れません。
32x16では雰囲気で飲み込めたズレが、64x32だと形の崩れとして見えてきます。
見栄えが上がる規格というより、構造の精度がそのまま映る規格だと考えると選びやすくなります。

使い分けの目安を整理すると、最初の練習、タイルを並べる感覚の習得、小物や箱庭の量産には32x16が向きます。
ひとつのオブジェクトにもう少し説得力を持たせたい場面や、表示サイズに余裕があって面の情報を増やしたい場面では64x32が生きます。
逆に、学び始めた直後から64x32にすると、描き込みの自由度に引っ張られて、2x1の整合や三面の整理が後回しになりがちです。
まず32x16で「崩れない箱」を量産し、その感覚を持ったまま64x32へ移ると、拡大しても形が破綻しにくくなります。

キャンバス150x150との相性で見ても、32x16は扱いやすい組み合わせです。
収まりを考えながら小部屋や小物を試すのにちょうどよく、構図の外に逃げる前に画面の中で整理する癖がつきます。
64x32を同じキャンバスで使うと、ひとつひとつの要素が大きく、構図の調整余地が急に狭くなります。
タイルサイズは見た目の精細さだけで選ぶより、どの解像度で見せるか、何個並べるか、どこまで情報を載せるかで決めたほうが失敗が減ります。

PNG保存推奨・JPG非推奨の根拠

保存形式はPNG推奨です。
アニメーションや簡易な動きを扱うならGIFも選択肢に入りますが、静止画のドット絵ならまずPNGで問題ありません。
理由は単純で、ドット絵は1px単位の色の境界そのものが絵の情報だからです。
JPGが向かないのは、不可逆圧縮のため、場合によっては色が滲み、隣り合うピクセルの境界に意図しない色が混ざることがあるからです。
ドット絵では輪郭や色境界が重要なので、こうした滲みが目立ちやすく、PNGの使用を優先する理由になります。
JPGが向かないのは、不可逆圧縮で色が滲み、隣り合うピクセルの境界に余計な色が混ざるからです。
ドット絵では、輪郭線の黒と面の色、明部と暗部の切り替えがくっきり残っていることが見た目の前提です。
JPGにすると、その切り替え部分に中間色が発生し、意図していないぼやけが乗ります。
写真では目立ちにくい変化でも、ドット絵では輪郭のにじみ、角の濁り、パレットの汚れとしてすぐ出ます。
とくにアイソメトリックは直線と角の精度で見せる絵なので、この崩れが形の弱さに直結します。

色数を絞って描くほど、保存形式の差ははっきり出ます。
三面用に明・中・暗の3色を置いた小さな箱でも、PNGなら面の切り替わりがそのまま残りますが、JPGでは境界に別の色が混ざり、せっかく抑えたパレットが崩れます。
ドット絵では「何色使ったか」だけでなく、「その色がどのピクセルに置かれているか」までが設計です。
だから保存形式も制作工程の一部として扱う必要があります。

ステップ1｜32x16の床タイルと立方体を描く

32x16の菱形タイル

ここでは、床になる最小単位をまず正確に作ります。
基準にするのは 32x16の菱形タイル です。
アイソメトリックの床はこの形が崩れないだけで、並べたときの見え方が一気に安定します。

描き始めは、1pxペンで上端の頂点を1点打つところから入ります。
そこから右辺は「2px右、1px下」を1セットとして8回繰り返します。
すると右の頂点に着きます。
同じように、上端の頂点から左辺は「2px左、1px下」を8回で左の頂点です。
上半分ができたら、今度は右の頂点から「2px左、1px下」を8回、左の頂点から「2px右、1px下」を8回つないで下の頂点に落とします。
これで32x16の菱形が閉じます。

言葉で見ると単純ですが、実際の作業では4回目あたりから手の感覚でズレやすくなります。
そういうときは頭の中で数えるより、私は「2・1、2・1」と声に出して刻みます。
たったそれだけで誤差が目に見えて減りますし、8回で角に着地する感覚が手に残ります。
2x1の線は理屈で覚えるより、8ステップでぴたりと閉じる形を体で覚えたほうが早いです。

この菱形は、ただの床パーツではありません。
上面の情報をどう読むか、その基準線になります。
線が1マスでも乱れると、1枚だけ見ているときは気づきにくくても、複数枚を並べた瞬間に列が波打って見えます。
床を量産する前提なら、最初の1枚をきっちり閉じることがそのまま全体の精度になります。

タイルから立方体へ

菱形ができたら、そのまま立方体に変換します。
上面の左・右・下の3頂点から、それぞれ例として8px程度まっすぐ下に線を引いて高さを決める手順で説明します。
実際の高さはタイル規格や用途に合わせて調整してください。

次に側面を閉じます。
左側は、左頂点から下ろした垂直線の下端と、下頂点から下ろした前側の下端を「2px右、1px下」の右下がりで8ステップつなぎます。
これが左面の下側の稜線になります。
右側は、右頂点から下ろした下端と前下端を「2px左、1px下」の左下がりで8ステップつなぎます。
これで右面の稜線ができます。
見えない背面の稜線は、この段階では省略して構いません。
見える3面が読めれば、立方体として十分に成立します。

ここで意識したいのは、上面と左右面のつなぎ方を別々の作業として見ないことです。
上面の左右の辺と、側面の斜線は同じ2x1のリズムで対応しています。
上面だけ正しく、側面だけ別のテンポで引くと、箱の角がねじれて見えます。
逆に、上面の辺からそのまま落ちる感覚でつなぐと、少ない線でも立体がすっと読めます。

立方体にした瞬間、床タイルの段階では曖昧だった「どちらの面が前に出るか」も見えてきます。
上面、左面、右面の3面がつながると、アイソメトリックは消失点なしでも奥行きが成立します。
ここで形の理解ができると、あとで壁、段差、棚、建物に広げるときも全部同じ原理で組み立てられます。

角の処理とタイル接続のコツ

箱が描けるようになると、次に目立ってくるのが角の処理です。
とくに床ブロックとして並べる場合、接地側の輪郭が角で二重に重なると、そこだけ黒が詰まって汚れて見えます。
1個の立方体としては締まって見えても、タイル状に並べた瞬間に継ぎ目がうるさくなることが多いです。

そこで床タイル前提のブロックでは、接地側の輪郭を1px減らす処理が効きます。
輪郭線をそのまま全部残すのではなく、接続する辺だけ少し抜くと、隣のタイルと当たったときに線が重なりません。
輪郭を全て消すのではなく、中間色でセルアウトして輪郭の主張を弱める方法も合います。
黒線を残しながらつながりだけ柔らかくできるので、床面の列が途切れず見えます。

角の向きにも注目したいところです。
左面側で使う右下がり線と、右面側で使う左下がり線は、同じ2x1でも見え方が違います。
どちらの角を前に見せるかで、面の読み取りやすさが変わります。
床タイルの列方向と線の向きがそろっていると、継ぎ目が流れるようにつながり、面として認識されます。
反対に、列の流れと角の向きが噛み合っていないと、タイル同士は合っていても視線が途中で引っかかります。

実作業では、左面側の右下がり線は「左の壁が前にある」印象を作り、右面側の左下がり線は「右の壁が前にある」印象を作ります。
この差を意識して床の列や段差の向きを決めると、同じ箱でも読みやすさが変わります。
アイソメトリックでは、線の向きそのものが面の説明になっています。
角をただ閉じるのではなく、どの方向へタイルが伸びるのかまで含めて処理すると、最小単位の立方体からすでに空間の説得力が出ます。

ステップ2｜3面で考える配色と陰影の付け方

左上光源の3面ルール

立方体まで組めたら、次は線ではなく面で読ませます。
アイソメトリックの陰影は、光源を左上に固定すると判断がぶれません。
基本は上面を最も明るくし、左面を中間、右面を暗くする3段階です。
迷ったときは、上を100%、左を70〜80%、右を50〜60%くらいの明度差で切ると形が安定します。
ここで欲しいのはグラデーションの滑らかさではなく、どの面が光を受け、どの面が背を向けているかが一目で読める差です。

このルールが効くのは、消失点がなくても奥行きを説明できるからです。
上面がいちばん明るいだけで「天面」、左面が一段落ちるだけで「斜め左の壁」、右面がさらに暗いだけで「光の反対側」と認識できます。
面ごとの役割が固定されるので、箱が棚になっても建物になっても判断基準を持ち込めます。

影色は、元の色をそのまま暗くするより、少し低彩度寄りに倒したほうが濁りません。
彩度の高い色を直線的に暗くすると、狭い面積のドットでは色が詰まって見えやすく、右面だけ妙に重く見えることがあります。
そこで暗色側だけ少し落ち着かせると、面の差は保ちつつ情報が整理されます。
木箱でも石ブロックでも、この調整だけで「暗いのに汚れて見えない」状態に持っていけます。

ハイライトの置き方も、広く塗るより点で効かせるほうがアイソメトリック向きです。
上面の角や手前のエッジに1pxだけ置くと、輪郭が立って見えます。
広く入れると素材感が急に金属寄りになり、プラスチックのような硬さが出てしまいます。
私は3面をきっちり塗り分けたあと、角にだけ1pxのハイライトを足し、さらに接地側へ1pxの影を落としたところで一段締まる感覚があります。
形そのものは変わっていないのに、置き物だった箱が空間の中に据わった箱へ変わります。

床との関係を見せたい場面では、接地影も効きます。
オブジェクトの右下側に1pxぶんだけ影を置くと、浮遊感が消えて接地が明瞭になります。
面の暗色と同じ色をそのまま使うと輪郭と干渉するので、床色の上でちゃんと読める暗さを選びます。
たった1pxでも、箱の下に空気の層がなくなったように見えます。

3色パレットの作り方

小さなアイソメトリック素材では、色数を増やすより3色で役割を固定したほうが崩れません。
明色・中間・暗色の役割を決め、それぞれを一貫して割り当てると、面の切り替えが自然になります。
明色と暗色をあらかじめ決め、ツールのグラデーション機能やカラーピッカーで中間色を作る流れが扱いやすいのが利点です。
中間色を勘だけで選ぶと、明色とは合っても暗色と馴染まないことがあります。
両端の色を決めてから中間色を生成すると、3色が同じ色相系列でそろい、面の切り替えが自然になります。
4色制限の作例でも透明色を除けば実質3色運用になるため、この設計は低色数表現の基礎になります。
Asepriteなら、明るい色と暗い色を置いてGradientで中間色を作る流れが扱いやすいのが利点です。
中間色を自分で勘に頼って選ぶと、明色とは合うのに暗色とはつながらない、といったズレが起こります。
両端を先に決めて間を生成すると、3色が同じ系列の中でそろい、面の切り替えが自然になります。
4色制限の作例でも、透明色を除けば実質3色運用になるので、この設計はそのまま低色数表現の基礎になります。

3色で組むときの役割分担も明確です。
明色は上面の主色と1pxのハイライト、中間色は左面と光側の輪郭、暗色は右面と影側の締めに使います。
こうしておくと、色を足さなくてもハイライト・影・セルアウトまで一通り回せます。
特に32x16規模のブロックでは、面積が小さいぶん色の役割が曖昧だと一気に読みづらくなります。
色数が少ないほど不利に見えますが、役割が固定されるぶん画面の判断は速くなります。

影色を低彩度寄りにする理由も、この3色設計と相性がいいからです。
たとえば草や布のような色でも、暗色だけ少し落ち着かせると右面が沈み込みすぎず、上面との対比だけを素直に読ませられます。
逆に暗色まで鮮やかだと、面の違いというより色相の主張が勝ってしまい、箱の構造が後退します。
立体感を出したい段階では、色の派手さより面の関係を優先したほうが、完成したときの密度が上がります。
影色は、元の色をそのまま暗くするより、暗色側で彩度を抑えたほうが濁りにくくなります。
彩度の高い色を単純に暗くすると、狭い面積では色が詰まって重く見えやすいので、右面の暗色だけ少し低彩度に振ると全体のバランスが取りやすくなります。

セルアウトと黒アウトラインの使い分け

輪郭線は、入れるか消すかの二択ではありません。
アイソメトリックでは黒アウトラインだけで全周を囲むと視認性は上がりますが、面と線がぶつかって硬く見えることがあります。
そこで効くのがセルアウトです。
光に近い輪郭は黒のまま残さず中間色へ置き換え、影側だけ濃色で締めます。
輪郭が背景と馴染みながら、立体の読みは失われません。

たとえば左上光源なら、上面の左寄りや左面の外周は中間色に置き換える余地があります。
反対に、右面の外周や接地側は暗色か黒で締めると形が崩れません。
この選び方をすると、黒アウトラインだけで囲んだときよりも柔らかい印象になります。
単体のオブジェクトでも効きますが、床タイルや壁ブロックのように隣接するパーツが多い場面では差がはっきり出ます。
全部が黒で接すると境界だけが目立ちますが、光側の輪郭を溶かすと面の連続性が保たれます。

黒アウトラインが向くのは、小物を単体で見せたいときや、背景から確実に浮かせたいときです。
一方でセルアウトは、複数タイルをつなげたときのうるささを抑え、画面全体を一枚の面として読ませたいときに強いです。
アウトラインなしの表現もありますが、初心者の段階では輪郭をすべて消すより、残す場所と溶かす場所を決めたほうが制御しやすくなります。
輪郭を調整するというより、光の当たり方を線にまで延長して考える、と捉えると判断が早くなります。

接地影もこの考え方の延長線上にあります。
右下に1pxの影を落とし、影側のアウトラインを少し強めると、物体の重さが床に乗ります。
上側の輪郭はセルアウトで軽く、下側は暗色で締める。
この上下のコントラストがあるだけで、同じ立方体でも「置かれている」感じが生まれます。
ハイライト、影、セルアウトは別々の装飾ではなく、3面ルールを輪郭まで拡張した処理です。
ここまでそろうと、ドット数の少ない箱でも立体としての説得力がぐっと増します。

ステップ3｜箱を組み合わせて部屋・家具・小物に発展させる

2x2床と高さ2タイルの壁

単体の箱が描けたら、次はそれを置く場所を作ります。
入り口として扱いやすいのが、32x16の菱形タイルを2x2で敷いた小部屋です。
床が4枚だけなので全体を見失いにくく、しかも床・壁・家具の関係をひと通り練習できます。
私はこの「2x2床・高さ2タイルの部屋」の構成を何度も使っていますが、壁の占有比がちょうどよく、空間の把握と物量のバランスを同時に覚えられます。
狭すぎて家具が置けないこともなく、広すぎて画面が散ることもありません。

作り方は素直です。
まず床を2x2で並べ、その左辺と上辺に壁を立ち上げます。
壁の高さは2タイル分にすると、床面との比率が安定します。
アイソメトリックでは垂直方向をまっすぐ下へ落とすので、壁は床の辺から垂直に積み上げていけば成立します。
ドットとしては、垂直16px前後を目安に2段に分けて積むと把握しやすく、1段ごとの区切りも見失いません。
最初から一枚の高い壁として描くより、「高さ1の箱をもう一段重ねる」と考えたほうが破綻しません。

この段階では、部屋を建築物として描くというより、箱の集合として見るのがコツです。
床は薄い箱、壁は縦に伸びた箱です。
前のステップで扱った3面の明暗をそのまま当てはめれば、床と壁が別の向きを向いていることが自然に読めます。
床の上面が広く見え、左の壁と上の壁が立ち上がるだけで、単体練習だった箱が「空間の中の箱」へ変わります。

机・棚・箱物の作り方

家具も同じ発想で進めます。
机なら、先に天板の箱を置き、その下に脚の箱を差し込む。
棚なら、縦長の箱を作ってから内部を分割する。
この順番にすると、最初に全体の体積が決まり、そのあとで削る作業に入れます。
いきなり脚の細さや棚板の段数から考えると、寸法の整合が崩れて接地も曖昧になります。

机を例にすると、まず薄めの直方体で天板を置きます。
そのあと、四隅か手前側に脚の箱を足します。
この時点では脚もただの直方体で構いません。
見た目を整えるのはそのあとです。
角を1段落として丸みを出す、引き出しの分だけ前面を引く、天板を少し張り出させる、といった処理は、基本の箱が組み上がってから入れたほうが形の軸がぶれません。
棚も同様で、先に大きな箱を立て、その中を段で割ると読みやすい構造になります。
扉付きにしたいなら前面に薄い箱を追加し、オープン棚にしたいなら一部を引いて空洞を作ります。

有効なのは、主役になる面のコントラストを意図的に寄せる考え方です。
部屋の中に箱が増えると、全部が同じ調子で並んだ瞬間に前後関係が埋もれます。
そこで、見せたい机なら手前に来る面を少し強く締め、壁際の棚なら壁側のコントラストを抑えます。
左右どちらか一方の面に明暗差を寄せるだけで、「この箱が前に出ている」という読みが作れます。
物体を増やすほど色数を足したくなりますが、まずは箱同士の優先順位を明暗で整理したほうが、画面の密度が上がっても混線しません。

正面図ラフからの起こし方

箱だけでは収まらない形も出てきます。
背もたれ付きの椅子、斜めに切られた収納、小物の装飾が付いた家具などです。
そういう形は、いきなりアイソメトリックで考えるより、正面図のラフを一度描いたほうが早くまとまります。
正面図とは遠近を付けない直交投影の簡単なメモで、横幅と高さの比率だけ決めて、どこが出っ張り、どこが引っ込むかを整理します。

起こす手順は単純で、まず正面図ラフで寸法比を決め、次にそれをアイソメトリックの奥行きへ変換します。
横方向の長さは、部屋で使っている2x1の斜辺単位に置き換えて考えると処理しやすくなります。
たとえば正面で横に広い棚なら、アイソメトリックでは左右どちらへ何単位伸ばすかを先に決める。
高さはそのまま垂直に積み、奥行きは必要なぶんだけ箱を後ろへ足す。
この順に面ごとへ分解すると、複雑に見えた形も結局は箱の組み合わせに戻せます。

私は装飾の多い家具ほど、この正面図ラフを挟んだほうが迷いが減ります。
アイソメトリックの画面上だけで考えると、幅と奥行きと高さを同時に処理することになり、どこで寸法が狂ったのか見えなくなります。
正面で一度「この家具は横に何単位、高さに何単位」と決めておけば、あとは各面へ割り当てるだけです。
箱の段階で成立しているなら、取っ手や面取りのような細部を足しても崩れません。

この起こし方を部屋全体に使うと、単体練習からシーン制作へ自然につながります。
床を敷き、壁を立て、家具を箱で置き、複雑なものだけ正面図から逆算する。
そうすると一つひとつのオブジェクトを別物として描く感覚が薄れ、同じ規格の中で組み上げる感覚に変わります。
アイソメトリックのシーンは、上手い線を引くというより、同じルールの箱をどれだけ正確に積めるかで決まります。

よくある失敗｜線のズレ、角の破綻、のっぺりした陰影

2x1の崩れと検出法

アイソメトリックが読めなくなる原因は、凝った形そのものより、基本線の乱れであることが多いです。
実作業で見返していても、読めない原因の8割は2x1の崩れかコントラスト不足に収まります。
この二つだけ先に潰すようにしてから、レビュー時間が目に見えて短くなりました。

2x1の崩れは、斜線が「2・1・2・1」と進むべきところで、途中から「2・2」や「1・1」に化ける状態です。
一本の線だけ見ていると気づきにくいのですが、箱の左右辺、天面の奥行き、家具の天板の縁のどこかでこの乱れが出ると、同じ規格の中に別の角度が混ざったように見えます。
ピクセル上の等角方向は製図の30度そのものではなく、2x1の近似角で揃えて読む前提なので、この繰り返しが途切れた瞬間に面の向きが曖昧になります。

検出は、完成絵を眺めて違和感を探すより、各辺を一本ずつスキャンするほうが確実です。
左へ上がる辺、右へ上がる辺をそれぞれガイド線に重ねて、2マス進んだら1マス動く並びになっているかを端から追います。
私は修正時、形全体ではなく「この辺は2・1が何回続くか」だけを見るようにしています。
線の長さが短い小物ほど、1pxの乱れが目立つからです。

64x32タイルでは、途中の分割でもズレが起きやすくなります。
幅が広いぶん、棚の中央線や机の引き出し境界を感覚で置くと、面の中心が片側へ流れます。
そこで引っかかるのが奇数での分割です。
64x32の途中を奇数ベースで割ると、中央の稜線や取っ手の位置が半端になり、左右どちらかの面積がわずかに大きく見えます。
箱物の正面は偶数割、左右対称の構造は対称割を基本にしたほうが、中央線が素直に通ります。
見た目の気持ちよさは感覚の話に見えて、実際には分割の不均等が原因であることがほとんどです。

角・接地のピクセルタンジェント対策

初心者がもう一つつまずきやすいのが、角と接地の処理です。
箱をきれいに描けていても、輪郭同士が触れ合う場所で情報が渋滞すると、急にタイル全体が汚れて見えます。
原因は、見えるべき面と隠れる面の整理ができていないことと、アウトラインが重なって二重化していることです。

まず稜線は、全部を同じ強さで囲えばよいわけではありません。
前面にある面を優先して輪郭を取り、背面に回る線や床に接するエッジは省略したほうが、立体の読みが安定します。
特に床に置いた家具の下辺まで黒で閉じると、床との接地が「浮いている黒線」に見えやすくなります。
見える面を先に決め、その面の稜線だけを残す。
隠れる面の情報を引くと、箱の形はむしろ明快になります。

接地部では、ピクセルタンジェントにも注意が必要です。
脚の先端、箱の底辺、壁と床の継ぎ目などで、輪郭の端同士がちょうど1点だけ触れると、くっついているのか離れているのか判別しづらくなります。
これが起きると、物体の重さや置かれている位置が途端に曖昧になります。
接地側は黒輪郭をそのまま通すより、中間色でセルアウトして床色へなじませるか、接する片側の輪郭を1px引いて重なりを解消したほうが読みやすくなります。

タイルで並べる前提の床や壁では、この問題がさらに目立ちます。
各タイルを単体で完結させようとして四辺を全部黒で囲うと、接続時に境界が黒線二本分になり、継ぎ目だけが妙に太く見えます。
結果として、床面が一枚の面ではなく、黒いひびで分断された集合に見えてしまいます。
こういう場面では、接続する辺だけ輪郭を弱めるか、片側の輪郭を消して面の境界を色差で読ませるほうが整います。
アウトラインは視認性を上げる道具ですが、接続部では主張しすぎると逆効果になります。

のっぺり解消：明度差とハイライト

立方体の形が合っているのに立体に見えないときは、陰影がのっぺりしています。
多くの場合、左右面の明度差が足りません。
上面・左面・右面の三面構成に戻して、上を100%、左を70〜80%、右を50〜60%の基準へ再配置すると、面の向きが一気に読み取れる状態へ戻せます。
途中で色を増やした結果、左と右の差が詰まってしまうと、箱は正しいのに板のように見えます。

ここでも、見えるべき面と隠れる面の整理が効きます。
上面が広く見えるのか、正面が主役なのかで、どこに一番明るい色を置くかが変わります。
たとえば机の天板を見せたいなら、上面の明るさを確保して前面は抑える。
棚の正面を読ませたいなら、前に来る面のコントラストを少し強めて、奥まった側面は沈める。
全部の面を均等に丁寧に塗ると、情報量は増えても視線の置き場がなくなります。

ハイライトも、入れれば立体になるわけではありません。
面の向きが明度差で読めていることが先で、ハイライトはそのあとに材質を足すための処理です。
金属やニスのある家具なら、上面や手前の稜線に細く入れると効果がありますが、ベースの明暗が弱いまま明るい線だけ足すと、表面に白い傷が乗ったように見えます。
まずは左右面の差を戻し、そのうえで光を拾う場所だけに置く。
この順番を守ると、立体感と質感がぶつかりません。

色数が少ない場面ほど、線の正確さと明度差の二本柱で読む絵になります。
2x1が崩れていないか、左右面のコントラストが足りているか。
この二点から見直すだけで、角の破綻も接地の違和感も、修正箇所が明確になります。

次のステップ｜タイル化・アニメーション・応用視点

段差・坂道・壁タイル

ここから先は、立方体を単体で描ける状態から、並べて世界を作る段階です。
まず増やしたいのは、床の上に載る箱ではなく、床そのものの高低差です。
段差は「高さ違いの床タイル」、壁は「床の側面が見えている状態」と捉えると整理できます。
床面の菱形を基準にして、その下へ垂直方向の厚みを足すだけで、1段上がった足場や低い台座になります。
壁タイルも発想は同じで、上面を見せないぶん側面の面積を広く取るだけです。

坂道は、立方体の一部を削る感覚で考えると組みやすくなります。
特に使い回しが利くのが、斜面を2x1の流れに合わせて分割したパターンです。
斜面全体を毎回描き起こすより、半分、上り始め、上り切りのように面を分けてテンプレ化しておくと、接続の破綻が減ります。
私は坂を描くとき、まず上面の四角形を置くのではなく、どの稜線が等角方向に走り、どこから高さが変わるかを先に決めます。
斜面は見た目が自由に見えて、実際には「どの辺が2x1で続くか」を固定したほうがタイル同士の継ぎ目が落ち着きます。

練習の順番も、段階を飛ばさないほうが伸びます。
2x1のガイド線レイヤーを1枚用意して、床タイルを3枚並べ、その上に高さのある立方体を置き、そこから3色だけの木箱へ進み、最終的に2x2の小部屋まで組む流れにすると、線、面、接続、配置の4つを順番に確認できます。
部屋まで行くと、単体では気づかなかった壁の高さ合わせや、床と家具の接地の甘さが一気に見えてきます。

オニオンスキンでの簡単アニメーション

静止画で形が取れるようになったら、次は1枚だけ動かしてみると理解が深まります。
アイソメのアニメーションは、大きく動かすより、等角方向へ少しずつ積むほうが破綻が出ません。
オニオンスキンをオンにして、前後のフレームを見ながら1〜2pxずつずらすだけでも、箱を押す、持ち上がる、ふわっと揺れるといった動きが成立します。
動きの差分を雑に取ると形の誤差が増えますが、等角方向に沿って積み上げると、面の向きが保たれたまま変化させられます。

最初の題材には、木箱のフタの開閉が向いています。
平行移動だけでなく、面が回る感覚を練習できるからです。
私も最初はキャラクターの歩きから入るより、箱のフタを少しずつ持ち上げるほうが理解が早いと感じました。
フタの手前側をただ上げるのではなく、支点になる稜線を固定し、反対側の辺だけをフレームごとにずらしていくと、「面が回転している」見え方になります。
箱本体まで一緒に動かすと基準が消えるので、まずは土台を止めたまま、動く面だけを観察するのが近道です。

回転表現でも考え方は同じです。
すべての辺を一度に描き直すのではなく、どの稜線を軸にするかを先に決め、その軸から離れる辺ほど位置を変えると、形が崩れません。
アイソメは消失点でごまかさないぶん、1pxの扱いがそのまま説得力になります。
だからこそ、動きの練習でも大振りな変形より、小さな差分の積み重ねが効きます。

ゲーム実装とアイソメ図法の接続

絵として描けるようになると、次に気になるのが「この見え方をどうゲームの座標に乗せるか」です。
ここで押さえたいのは、タイルマップ上のマス目と、画面上で見える菱形の位置は別物だという点です。
アイソメ図法は消失点を持たない平行投影で、3軸は互いに120度で交わりますが、ゲームではその見え方を2次元座標へ変換して並べています。
描画ルールと実装ルールが噛み合わないと、絵は合っているのに当たり判定や配置だけがずれます。

実務では、原点と軸の定義を最初に固定しておくと混乱が減ります。
たとえば「タイルマップのxは右下方向、yは左下方向に進む」「高さは上方向へ積む」と決めておけば、床、壁、段差、キャラクターの立ち位置を同じルールで扱えます。
画面上の菱形は、タイル座標をそのまま並べたものではなく、xとyの進みを合成した結果として現れます。
ここを曖昧にしたまま絵だけ先行すると、家具を1マス右へ置いたつもりが見た目では斜め下へ滑る、といった食い違いが起きます。

制作と実装をつなぐ場面では、アート側も最低限の座標感覚を持っていると強いです。
代表的なタイル規格としては32x16や64x32が扱いやすく、どちらを選ぶにしても「1タイルの幅と高さ」「接地位置」「高さ1段を何pxで積むか」を先に決めておくと、アセットを追加しても崩れません。
私はゲーム用の素材を作るとき、完成絵を描く前に、足元の接地点とタイル原点だけは必ず同じ基準に揃えます。
2x1の見た目が整っていても、原点がバラバラだと配置のたびに手で補正することになり、量産で必ず詰まります。

学習の進め方としては、絵の練習と実装の理解を別物にしないことです。
床タイル3枚を並べる段階で「どのマスに置いたか」を意識し、高さ8pxの立方体を載せる段階で「何段ぶん上がったか」を数え、3色の木箱では「接地する底面がどのタイルに乗るか」を決める。
この積み重ねが、そのままアイソメ図法とゲーム実装の接続になります。
描いて終わりにせず、置ける、並べられる、増やせる形に持っていくと、アイソメ表現は一枚絵から箱庭へ広がっていきます。