グリッド設定
スタイル
Advertisement
アイソメトリック・グリッド生成とは？
本ツールは、「等角投影法（アイソメトリック）」を用いたデザインを正確に、かつ効率的に作成するためのグリッドガイド生成ツールです。 奥行きのある箱庭風のイラストや、テック系のインフォグラフィック、アイソメトリック・タイポグラフィなど、3Dのような立体感を2Dで表現する際に欠かせない「30度の補助線」を自由なサイズで作成できます。
こんなシーンで便利です
テック系・SaaSサイトの図解制作
ITインフラやソフトウェアの仕組みをアイソメトリックなアイコンで説明する際のベースガイドとして。正確なパースがプロフェッショナルな印象を与えます。
ゲームデザイン・背景アセット
クォータービュー（斜め見下ろし視点）のゲーム画面や、タイルベースのマップチップを作成するための設計図として活用できます。
幾何学的な背景パターン制作
グリッドそのものをデザイン要素としてPNGで書き出し。Webサイトのセクション背景や、SNS投稿のバリエーションとして使用可能です。
ロゴ・タイポグラフィの設計
文字を立体的に見せる「3Dタイポグラフィ」をパスで描く際、正確な角度を保つための下敷きとしてSVGデータを読み込んで使用できます。
使い方は簡単 4ステップ
- 「グリッド設定」でマスのサイズ（グリッド幅）を調整します。
- 必要に応じて「角度」を変更します（通常は30度のままでOKです）。
- 「スタイル」セクションで、作業しやすい線の色と太さを設定します。
- 「SVGをコピー」でデザインソフトに貼り付けるか、「PNGで保存」で画像として書き出します。
※垂直線をオフにすると、斜め方向のみのよりシンプルなダイヤモンド型のグリッドに変更することも可能です。
ご利用時の注意点
- ベクターデータの利点：SVGでコピーした場合は、拡大・縮小しても線がぼやけることがなく、巨大なキャンバスでも鮮明に表示されます。
- 角度の微調整：数学的に正確なアイソメトリックは30度ですが、あえて角度を急にすることで独自のパース感（ディメトリック等）を演出することも可能です。
- 背景の透明度：PNG書き出し時は、グリッド線以外の背景は透明（透過）状態で保存されるため、既存のデザインに重ねて配置しやすくなっています。
Advertisement
アイソメトリック（等角投影法）の設計基準表
デザインの目的や使用ソフトに合わせた、最適なグリッド設定の目安です。
| 投影手法の種類 | 標準的な角度 | 主な用途・メリット |
|---|---|---|
| アイソメトリック | 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背景ガイド、グリッドパターン作成、テクニカルイラスト作成。
よくある質問（FAQ）
Q.Figmaへの取り込み方は？
A. 「SVGをコピー」をクリックした後、Figmaのキャンバス上で Ctrl+V (Cmd+V) を押すだけです。パスデータとして認識されるため、後から個別に色を変えることもできます。
Q.グリッドが細かすぎて見えにくい場合は？
A. 「マスのサイズ」を大きくするか、「線の太さ」を 0.5px 以上に設定してみてください。作業画面のズーム倍率に合わせた調整を推奨します。
Q.スマホでも使えますか？
A. プレビューと生成は可能ですが、正確なデザイン作業のガイドとして使用する場合は、PCでのSVG書き出しを強く推奨します。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。