30度の角度がついた等角投影グリッドを瞬時に作成。 幾何学的なイラスト制作のガイドとして、またそのまま背景パターンとしても利用可能です。
グリッド設定
スタイル
アイソメトリック・グリッド生成とは？
本ツールは、「等角投影法（アイソメトリック）」を用いたデザインを正確に、かつ効率的に作成するためのグリッドガイド生成ツールです。 奥行きのある箱庭風のイラストや、テック系のインフォグラフィック、アイソメトリック・タイポグラフィなど、3Dのような立体感を2Dで表現する際に欠かせない「30度の補助線」を自由なサイズで作成できます。
こんなシーンで便利です
テック系・SaaSサイトの図解制作
ITインフラやソフトウェアの仕組みをアイソメトリックなアイコンで説明する際のベースガイドとして。正確なパースがプロフェッショナルな印象を与えます。
ゲームデザイン・背景アセット
クォータービュー（斜め見下ろし視点）のゲーム画面や、タイルベースのマップチップを作成するための設計図として活用できます。
幾何学的な背景パターン制作
グリッドそのものをデザイン要素としてPNGで書き出し。Webサイトのセクション背景や、SNS投稿のバリエーションとして使用可能です。
ロゴ・タイポグラフィの設計
文字を立体的に見せる「3Dタイポグラフィ」をパスで描く際、正確な角度を保つための下敷きとしてSVGデータを読み込んで使用できます。
使い方は簡単 4ステップ
- 「グリッド設定」でマスのサイズ（グリッド幅）を調整します。
- 必要に応じて「角度」を変更します（通常は30度のままでOKです）。
- 「スタイル」セクションで、作業しやすい線の色と太さを設定します。
- 「SVGをコピー」でデザインソフトに貼り付けるか、「PNGで保存」で画像として書き出します。
※垂直線をオフにすると、斜め方向のみのよりシンプルなダイヤモンド型のグリッドに変更することも可能です。
ご利用時の注意点
- ベクターデータの利点：SVGでコピーした場合は、拡大・縮小しても線がぼやけることがなく、巨大なキャンバスでも鮮明に表示されます。
- 角度の微調整：数学的に正確なアイソメトリックは30度ですが、あえて角度を急にすることで独自のパース感（ディメトリック等）を演出することも可能です。
- 背景の透明度：PNG書き出し時は、グリッド線以外の背景は透明（透過）状態で保存されるため、既存のデザインに重ねて配置しやすくなっています。
アイソメトリック（等角投影法）の設計基準表
デザインの目的や使用ソフトに合わせた、最適なグリッド設定の目安です。
| 投影手法の種類 | 標準的な角度 | 主な用途・メリット |
|---|---|---|
| アイソメトリック | 30度 / 30度 | Web図解・SaaSアイコン。最も一般的で歪みが少ない。 |
| ディメトリック | 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背景ガイド、グリッドパターン作成、テクニカルイラスト作成。
等角投影法の実践テクニック：立体図解のクオリティを高めるアセット連携と空間表現
ツールで生成した正確な等角投影グリッドを軸に、プロの現場で多用される変形コマンドの応用技術や、破綻のない空間レイアウトを構築するためのデザインワークフローを解説します。
平面オブジェクトを一瞬で立体化する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度のSVGガイドをそのまま適用してしまうと、直線のピクセル比率が「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度など、用途に合わせて数値を自由に変更して生成可能です。
Q.SVG形式でコピーしたデータはFigmaやIllustratorで使えますか
A. はい、使えます。コピーしたSVGコードをデザインソフトのキャンバスに直接貼り付けるだけで、拡大縮小しても線がぼやけないベクターデータとして、そのまま正確な描画ガイドラインに使用できます。
Q.書き出すグリッドの線の色や太さを後から変更できますか
A. 生成前に本ツールのプレビュー画面にあるスタイルセクションで、線の色や太さをリアルタイムに変更できます。書き出し後に変更したい場合は、SVG形式で保存してデザインソフト上で編集を行ってください。
Q.生成ツールに入力した設定値や作成したグリッドデータはサーバーに保存されますか
A. いいえ、保存されません。本ツールは完全ローカル処理型の安全設計であり、すべてのデータ処理はお使いのブラウザ内だけで完結します。外部サーバーへの送信や保存は一切ないため、機密デザインの試作にも安心です。
Q.垂直線の表示を消して斜めの線だけのダイヤモンド型グリッドを作成できますか
A. はい、作成できます。本ツールのステップに記載されている通り、垂直線の設定をオフに切り替えることで、斜め方向のグリッド線のみで構成されたシンプルなダイヤモンド型のガイドラインへ瞬時に変更可能です。
Q.PNG画像として保存したときグリッド線の背景はどのようになりますか
A. PNG形式で保存した場合はグリッド線以外の背景が完全に透明な透過状態で書き出されます。そのため、すでに作成しているイラストやWebサイトの背景色の上に、そのまま重ねて配置してガイドとして活用できます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。