30度などの角度で等角投影グリッド（線・ドット）を瞬時に作成。立方体を積んだ等角図の作図や、A4の等角方眼紙の印刷、SVG・PNGでの書き出しに対応しています。
グリッド設定
スタイル・サイズ
「印刷・PDF」はA4用紙に合わせて印刷します（印刷画面の送信先を「PDFに保存」にするとPDF化できます）。
等角図・アイソメトリックグリッド作成ツールとは？
本ツールは、「等角図（アイソメトリック図）」を正確かつ効率的に作成するためのグリッド生成ツールです。 30度の補助線でできた等角方眼を自由なサイズ・角度で作成できるほか、マス目をクリックして立方体を積み上げる作図モードも備えています。箱庭風のイラストやテック系のインフォグラフィック、技術の授業で使う等角図の下書き、印刷用の等角方眼紙（線・ドット）まで、ブラウザだけで完結します。
こんなシーンで便利です
テック系・SaaSサイトの図解制作
ITインフラやソフトウェアの仕組みをアイソメトリックなアイコンで説明する際のベースガイドとして。正確なパースがプロフェッショナルな印象を与えます。
技術・図面の授業での等角図の練習
A4の等角方眼紙を印刷して手描きの練習に。立方体を積むモードで見本の立体を作り、手描きの等角図と見比べながら確認することもできます。
ゲームデザイン・背景アセット
クォータービュー（斜め見下ろし視点）のゲーム画面や、タイルベースのマップチップを作成するための設計図として。ドット絵向けの26.57度（2:1）にもワンクリックで切り替えられます。
幾何学的な背景パターン制作
グリッドやドットそのものをデザイン要素としてPNGで書き出し。背景色付きにも透過にもできるため、Webサイトのセクション背景やSNS投稿のバリエーションとして使用可能です。
ロゴ・タイポグラフィの設計
文字を立体的に見せる「3Dタイポグラフィ」をパスで描く際、正確な角度を保つための下敷きとしてSVGデータを読み込んで使用できます。
使い方は簡単 4ステップ
- 「グリッド設定」で線（方眼）かドットかを選び、マスの大きさと角度（30度・26.57度などのプリセット）を設定します。
- 「スタイル・サイズ」で線の色・太さ、背景（透過／色付き）、キャンバスサイズを設定します。
- 等角図を描く場合は上部の「立方体を積む（等角図）」に切り替え、マス目をクリックして立方体を配置します。
- 「SVGをコピー」「SVGで保存」「PNGで保存」でデザインソフトへ、「印刷・PDF」で等角方眼紙として書き出します。
※垂直線をオフにすると、斜め方向のみのよりシンプルなダイヤモンド型のグリッドに変更することも可能です。
ご利用時の注意点
- ベクターデータの利点：SVGでコピー・保存した場合は、拡大・縮小しても線がぼやけることがなく、巨大なキャンバスでも鮮明に表示されます。
- 角度の微調整：数学的に正確なアイソメトリックは30度ですが、角度を変えることで独自のパース感（ディメトリック等）を演出することも可能です。
- 背景の設定：背景を「透過」にするとグリッド線以外は透明で保存され、「色を付ける」を選ぶと指定色で塗りつぶして保存されます。
- ドット方眼の上限：マスを極端に小さく・キャンバスを大きくするとドット数が多くなりすぎるため、その場合は表示されません。マスを大きくして調整してください。
アイソメトリック（等角投影法）の設計基準表
デザインの目的や使用ソフトに合わせた、最適なグリッド設定の目安です。
| 投影手法の種類 | 標準的な角度 | 主な用途・メリット |
|---|---|---|
| アイソメトリック | 30度 / 30度 | Web図解・SaaSアイコン。最も一般的で歪みが少ない。 |
| 等角図（技術・製図） | 30度 | 実長で描く立体図。A4の等角方眼紙を印刷して手描き練習に。 |
| ディメトリック | 15度 / 15度 | 少し俯瞰を弱めた表現。奥行きを強調したい場合。 |
| トリメトリック | 任意 (非対称) | 建築図面や独自のパース感。よりダイナミックな構図。 |
| ピクセルアート用 | 26.57度 | ドット絵（2:1比率）。アンチエイリアスを抑える設定。 |
| Figma/Ai用ガイド | 30度 | SVG書き出し後にレイヤーロックして下敷きとして活用。 |
【検索意図への先回り：なぜ30度なのか？】
アイソメトリックデザインにおいて30度（角度）が標準とされるのは、X軸・Y軸・Z軸が等しく120度で交わり、すべての辺が同じ比率で描けるためです。これにより、3Dソフトを使わずに平面（2D）上で正確な立体感を実現できます。
【デザインソフト別の活用ヒント】
Figma: 本ツールの「SVGコピー」機能で貼り付けた後、レイヤーを「Lock」し、不透明度を20%程度に下げると、最高精度の描画ガイドになります。
Illustrator: 「グリッドにスナップ」機能を併用することで、アイソメトリック・タイポグラフィやロゴ制作の作業効率が劇的に向上します。
※キーワード補足：アイソメ図、等角図、Isometric Grid、等角投影図法、等角方眼紙、アイソメトリックドット方眼、3D背景ガイド、グリッドパターン作成、テクニカルイラスト作成。
等角図・等角投影法の実践テクニック：立体図解のクオリティを高めるアセット連携と空間表現
ツールで生成した正確な等角投影グリッドを軸に、等角図の基本からプロの現場で多用される変形コマンドの応用技術、破綻のない空間レイアウトを構築するためのデザインワークフローを解説します。
等角図と等角投影図の違い：実長で描くか約0.82倍に縮めるか
どちらも幅・奥行き・高さの3軸が120度ずつ開いた同じ形の立体図ですが、等角投影図は理論どおり各辺を約0.82倍に縮めて描き、等角図は作図を簡単にするため実長（1倍）のまま描きます。
製図や技術の授業で「等角図」と呼ばれるのは多くが後者で、本ツールの30度グリッドのマス目を1単位として実長どおりに辺を数えていけば、定規を使わずに正確な等角図を描けます。
立方体の積み木から始める等角図の描き方
等角図に慣れないうちは、複雑な形をいきなり描くよりも立方体の組み合わせに分解して考えるのが近道です。
本ツールの「立方体を積む」モードで完成形を組み立て、上面・左面・右面の3方向がどの斜線に沿っているかを確認したうえで、印刷した等角方眼紙に同じ形を写していくと、奥行き方向の線の向きを取り違える失敗を防げます。
平面オブジェクトを一瞬で立体化するSSR手法の正確な数値パラメーター
一般的な2Dデザイン（正面図など）を等角投影の傾きへ正確に変形させるには、スケール、シアー、回転を組み合わせるSSR（Scale, Shear, Rotate）手法の数値を厳密に適用する必要があります。
Illustrator等の変形パネルで、まず垂直方向の倍率を86.602%に縮小（Scale）し、次にシアー角度を30度（またはマイナス30度）に設定（Shear）した上で、30度（またはマイナス30度）回転（Rotate）させることで、本ツールで生成した30度グリッドの斜面に1ミリの狂いもなく完全に一致する立体面を構築できます。
クォータービューの空間設計で前後関係の破綻を防ぐアイソメ重ね順の管理
パース（遠近感）のないアイソメトリック空間では、オブジェクトのZ軸（高さ方向・奥行き方向）の重なり順を視覚的に整理しないと、手前にあるべき構造物が奥の壁に埋もれるといった描画ミスが発生します。
デザインソフトのレイヤー構造をグリッドの列（奥から手前へ向かうライン）ごとに分割して管理し、座標軸の合計値が小さいオブジェクトから順番に背面へ配置していくことで、複雑な箱庭イラストやインフラ構成図でも重ね順の破綻を防ぐことが可能です。
Figmaのコンポーネント機能を活用した立体パーツのスマートな量産システム
インフォグラフィックやUIデザインの制作効率を最大化するには、基本となる最小単位の立体ブロック（立方体や円柱など）をあらかじめ本ツールのガイドに沿ってベクターデータで作成し、アセットとしてコンポーネント化（部品化）しておく運用が最も効果的です。
30度のグリッドマスに吸着させた共通のモジュールを複製し、タイルのように配置していくシステムを構築することで、個々のパスを手動で描き直す手間が省け、大規模なSaaS構成図やマップアセットの量産速度が劇的に向上します。
よくある失敗と対策
数学的に正確な30度とピクセルアート用の「26.57度」を間違えて線がジャギーになる
ドット絵やピクセルアートでアイソメトリックを描く際、30度のガイドをそのまま適用してしまうと、直線のピクセル比率が「2:1」にならず、線画に汚いギザギザ（ジャギー）が発生する失敗です。
💡 対策・解決策を見る▼
デザインソフトで「グリッドのスナップ機能」を設定せず、パスの結合点でズレが生じる
FigmaやAdobe IllustratorにSVGのアイソメトリックグリッドを配置しただけで満足し、オブジェクトの頂点をグリッドの交点に「スナップ（吸着）」させずにフリーハンドで描画した結果、拡大した際に数ピクセルの隙間やズレが発覚する失敗です。
💡 対策・解決策を見る▼
PNG書き出し時の「透過背景」を計算に入れず、デザインの色調とグリッド線が同化する
背景が透明なPNG形式でグリッドパターンを出力したものの、自分が作ろうとしているイラストの背景色（ダークモードの背景や濃いブルーなど）と同系色の線を指定してしまい、いざ重ねた時にガイドが全く見えなくなる失敗です。
💡 対策・解決策を見る▼
比率の歪みを考慮しない「単純な1.732倍（あるいは0.577倍）の数値入力」で立体感が崩壊する
アイソメ図を2Dの平面画像から変形（SSR手法：Scale, Shear, Rotate）して作成する際、正確な等角投影法の比率（高さ方向の86.602%縮小など）の知識がないままグリッドを無視して感覚でサイズ変更し、箱庭イラストの奥行きが不自然に歪む失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.標準的なアイソメトリックの角度は何度ですか
A. Webデザインやゲーム制作、等角図で一般的に使われる角度は30度です。本ツールではデフォルトを30度に設定しており、ピクセルアートに適した26.57度（2:1）やディメトリック風の15度もプリセットボタン1つで切り替えられます。小数点第2位までの数値入力にも対応しています。
Q.等角図を作成するサイトとして、立方体を積んだ立体の図も描けますか
A. はい、描けます。「立方体を積む（等角図）」モードに切り替えて点線の範囲のマス目をクリックすると立方体が置かれ、同じ場所をクリックするたびに上へ積み上がります。面ごとに明暗が自動で付くため、積み木の等角図や簡単な立体の作図、図解用のブロック表現に利用できます。
Q.等角方眼紙（アイソメトリック方眼紙）として印刷できますか
A. はい、印刷できます。キャンバスサイズを「A4縦」または「A4横」にして「印刷・PDF」ボタンを押すと、A4用紙に合わせて印刷されます。印刷画面の送信先を「PDFに保存」にすればPDFとして保存でき、線の方眼だけでなくドット方眼も選べます。
Q.等角図と等角投影図の違いは何ですか
A. 形は同じで、大きさの扱いが異なります。等角投影図は理論どおり奥行き・幅・高さを約0.82倍に縮めて描くのに対し、等角図は作図しやすいように実際の長さ（実長）のまま描きます。そのため等角図のほうが一回り大きく見えます。本ツールのグリッドはどちらの作図にも下書きとして使えます。
Q.SVG形式でコピーしたデータはFigmaやIllustratorで使えますか
A. はい、使えます。コピーしたSVGコードをデザインソフトのキャンバスに直接貼り付けるか、「SVGで保存」したファイルを読み込むだけで、拡大縮小しても線がぼやけないベクターデータとして、そのまま正確な描画ガイドラインに使用できます。
Q.書き出すグリッドの線の色や太さを後から変更できますか
A. 書き出す前に、設定パネルの「スタイル・サイズ」で線の色や太さをリアルタイムに変更できます。書き出し後に変更したい場合は、SVG形式で保存してデザインソフト上で編集を行ってください。
Q.生成ツールに入力した設定値や作成したグリッドデータはサーバーに保存されますか
A. いいえ、保存されません。本ツールはすべてのデータ処理をお使いのブラウザ内だけで完結させる設計で、外部サーバーへの送信や保存は一切ありません。機密デザインの試作にも安心してお使いいただけます。
Q.垂直線の表示を消して斜めの線だけのダイヤモンド型グリッドを作成できますか
A. はい、作成できます。グリッドの種類を「線（方眼）」にした状態で「垂直線を表示」をオフに切り替えると、斜め方向のグリッド線のみで構成されたシンプルなダイヤモンド型のガイドラインへ瞬時に変更できます。
Q.PNG画像として保存したときグリッド線の背景はどのようになりますか
A. 背景の設定が「透過」の場合は、グリッド線以外が透明な状態で書き出されるため、既存のイラストやWebサイトの背景にそのまま重ねて使えます。「色を付ける」を選ぶと、指定した背景色で塗りつぶしたPNGとして保存できます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。