アイソメトリック図形は、立体感のあるイラストや図解を作るときに便利な表現方法です。
正面から見た平面的な図形とは違い、少し斜め上から見たような見え方になるため、奥行きや空間の広がりを表現しやすくなります。Webサイトのアイコン、サービス紹介の図解、資料の挿絵、アプリ画面の説明などでもよく使われます。
ももっぺも、デザインツールやAIツールの記事を書くときに、ただの平面図だけでは少し味気ないと感じることがあります。そんなときにアイソメトリック風の図形を使うと、画面に立体感が出て、記事内の説明画像やサムネイルにも使いやすいと感じました。
この記事では、Illustratorで基本図形を変形し、アイソメトリック風の図形を作る流れを紹介します。
- 縦・横・高さの比率を等しく保つ
- 斜めから見た立体感を表現する
- 立体感と奥行きが感じられるように見える
アイソメトリック図法（Isometric）は、立体物を斜め上から見たように表現する図形のことです。3Dの立体を遠近感をつけずに平面的に表現する技法です。
建築パースやゲーム、UIイラストなどでよく使われており、近年ではWebデザインや資料作成でも人気があります。
奥行き・高さ・幅の方向が一定の角度で表現されるため、立体感がありながらも、整った印象に見せやすいのが特徴です。
3Dソフトを使わなくても、Illustratorの変形機能を使えば、平面の図形からアイソメトリック風の形を作ることができます。
たとえば、正方形をそのまま置くと平面的に見えますが、角度をつけて変形すると、床や箱の面のように見せることができます。星やハートなどの図形も、同じ考え方で変形すれば、少し立体感のあるパーツとして使えます。
アイソメトリック図法には、以下のようなメリットがあります。
- 情報が整理されて見やすい
- 幾何学的でデザインに統一感が出る
- UIや資料に使うと「わかりやすさ」が向上する
- 複雑な構造でもシンプルに見せられる
特にUI/UXデザインでは、「構造を直感的に理解させたい場面」で非常に有効です。
また、アイソメトリック図形を使うと、平面のデザインに奥行きを足すことができます。
たとえば、次のような場面で使いやすいです。
- Webサイトの説明図
- サービス紹介のアイコン
- 資料やスライドの挿絵
- アプリ画面の図解
- サムネイルやバナーの装飾
- デザイン記事の補足画像
特に、機能説明や仕組みの説明では、ただ文字で説明するよりも、図形を使った方が理解しやすくなることがあります。
アイソメトリックは、かわいい雰囲気にも、ビジネス寄りの雰囲気にも使いやすい表現です。色や線の太さを変えるだけで、やわらかい印象にも、シャープな印象にも調整できます。
Illustratorでアイソメトリック図形を作るメリットは、ベクター形式で編集しやすいことです。
一度作った図形は、拡大・縮小しても画質が劣化しにくく、色や線幅もあとから変更できます。記事内の小さな挿絵として使ったり、サムネイル用に大きく配置したり、用途に合わせて調整しやすいです。
また、Illustratorには長方形、角丸長方形、楕円形、多角形などの基本図形が用意されており、ライブシェイプではコーナーや辺数などを後から調整できます。基本図形を作ってから変形することで、アイソメトリック風の図形も作りやすくなります。
星形を作りたい場合はスターツールも使えます。Adobe公式でも、スターツールはアートワーク内に尖った形を作成できるツールとして案内されています。
アイソメトリック風の図形を作るときは、基本図形をそのまま使うのではなく、変形を組み合わせます。
今回のような手順では、主に次の流れで作ります。
- 元になる図形を用意する
- 拡大・縮小で縦横比を調整する
- 水平方向または垂直方向に傾ける
- 回転を加える
- 必要に応じて色や線を整える
最初は星や四角形など、シンプルな図形で試すのがおすすめです。複雑な図形から始めると、どこがどう変形されたのか分かりにくくなるため、まずは単純な形で感覚をつかむと理解しやすいです。
まず、アイソメトリック化したい図形を用意します。
星形、四角形、ハート、角丸四角形など、好きな形で試すことができます。最初は星形や四角形のように、形の変化が分かりやすい図形を使うと練習しやすいです。
図形を作るときは、線幅や塗りをあとから調整できるように、元の図形をコピーして残しておくと安心です。
次に、図形の縦方向を縮めます。
アイソメトリック風に見せるには、図形をそのまま回転するだけではなく、少し高さをつぶしてから角度をつけると自然に見えます。
今回のように、縦方向を50％に縮小すると、図形が少し平たくなり、斜めから見たような印象に近づきます。
この数値は絶対ではありません。作りたい見た目によって、50％より少し高めにしたり、低めにしたりして調整できます。
次に、水平方向に角度をつけます。
アイソメトリック表現では、左右方向に斜めの流れを作ることで、奥行きがあるように見せます。今回のように、シアーや変形機能を使って角度をつけると、平面の図形が斜めに倒れたような見え方になります。
このとき、角度のプラス・マイナスを変えると、傾きの向きも変わります。右向きの面を作りたいのか、左向きの面を作りたいのかによって、数値を調整します。
最後に、図形を回転して向きを整えます。
回転を加えることで、アイソメトリック風の斜めの面として見えやすくなります。複数の図形を組み合わせる場合は、同じ角度でそろえると、全体に統一感が出ます。
たとえば、星形・四角形・ハートなどを同じルールで変形すると、同じ世界観のパーツとして並べやすくなります。
拡大縮小ツール、または、変形ツールで調整できます
シアーツールや変形ツールで調整できます
回転ツールや変形ツールで調整できます
線で構成された図の場合は、大きく歪んで見えるのでアウトライン化する前の線の状態で変形させることがおすすめ。
Adobe Illustratorでアイソメトリック図法を作る最大のメリットは、数値で正確にコントロールできることです。
- 角度（30°）を正確に指定できる
- シアー（傾斜）で簡単に変形できる
- パスとして編集可能
そのため、デザインの再現性が高く、プロダクトデザインやUI素材として使いやすいのがポイントです。
アイソメトリック図法には、基本的なルールがあります。
- X軸・Y軸をそれぞれ30度で傾ける
- Z軸は垂直（そのまま）
- サイズは遠近で変えない
このルールを守ることで、自然で美しいアイソメトリック表現になります。
ももっぺがアイソメトリック図形を作ってみて感じたのは、難しそうに見えても、基本は「縮小・傾き・回転」の組み合わせだということです。
3Dのような本格的な立体表現を作ろうとすると難しく感じますが、シンプルな図形を少し斜めにするだけでも、画面に奥行きが出ます。
特に、星形やハートのような図形をアイソメトリック風にすると、普通に置くよりも少し動きが出て、装飾パーツとして使いやすいです。
最初から完璧な立体図を作ろうとせず、まずは小さなアイコンや背景パーツから試してみるのが良いと感じました。
Illustratorでは、基本図形を変形することで、アイソメトリック風の図形を作ることができます。
アイソメトリック図形は、立体感や奥行きを出したいときに便利です。Webサイトの説明図、資料の挿絵、記事のサムネイル、バナーの装飾など、さまざまな場面で活用できます。
作り方のポイントは、図形をそのまま回転するのではなく、縦方向の縮小、傾き、回転を組み合わせることです。最初は星形や四角形など、シンプルな図形から試すと分かりやすいです。
ももっぺは、アイソメトリック図形は「難しい立体表現」ではなく、平面のデザインに少し奥行きを足すための便利な表現だと感じました。記事内の図解やサムネイルに取り入れると、デザインに少し立体感を出せそうです。
