アイソメトリック風のイラストや図形を作るときに便利なのが、アイソメトリックガイドです。
アイソメトリックガイドとは、斜め方向にそろった補助線のことです。
このガイドを作っておくと、図形や線を同じ角度で配置しやすくなり、立体感のあるイラストやパーツを整えて作ることができます。
たとえば、箱、建物、スマホ画面、カード、アイコン、図解パーツなどをアイソメトリック風に作りたいとき、目分量で角度を合わせると少しずれて見えることがあります。
そんなときにガイドを用意しておくと、角度や位置を確認しながら作業できるので、仕上がりが整いやすくなります。
ももっぺも、アイソメトリック図形を作るときに、毎回感覚で角度を合わせるより、先にガイドを作っておく方が安心だと感じました。
この記事では、Illustratorでアイソメトリックガイドを作成する流れを、初心者向けに紹介します。
アイソメトリックガイドは、アイソメトリック表現を作るための補助線です。
アイソメトリック表現では、図形を斜め上から見たように見せるため、左右の斜め方向や縦方向の角度をそろえることが大切です。
ガイドがない状態でも作ることはできますが、複数の図形を組み合わせる場合、少しずつ角度がずれてしまうことがあります。
ガイドを使うと、次のような作業がしやすくなります。
- 図形の角度をそろえる
- パーツの位置を合わせる
- 奥行きのある図解を作る
- アイコンや装飾を整えて配置する
- 複数の図形に統一感を出す
特に、アイソメトリック風のイラストを複数作りたいときは、最初にガイドを作っておくと作業がラクになります。
アイソメトリック風の図形は、少し角度がずれるだけで違和感が出ることがあります。
たとえば、四角形を斜めにしたパーツをいくつか並べるとき、角度がバラバラだと、同じ空間に置かれているように見えにくくなります。
逆に、ガイドに沿って配置すると、図形同士の向きがそろい、全体がきれいに見えます。
デザインでは、こうした小さなズレが見た目の印象に影響します。
特に図解やアイコンは、細かいところがそろっているだけで、完成度が高く見えます。
ももっぺのサイトのように、IllustratorやFigmaなどの操作方法を説明する記事では、図形やサムネイルの見た目が整っていると、記事全体も読みやすくなります。
今回の流れでは、Illustratorの長方形グリッドツールを使ってガイドを作成します。
長方形グリッドツールで格子状の線を作り、それを変形して斜めのガイドにしていきます。
作った線は最後にガイド化することで、作業中の補助線として使えるようになります。
まず、ツールバーから長方形グリッドツールを選択します。
長方形グリッドツールは、四角い枠の中に縦横の線をまとめて作れるツールです。
通常は表のようなグリッドを作るために使いますが、今回はこのグリッドを変形して、アイソメトリック用のガイドとして使います。
ツールバーに表示されていない場合は、ツールの一覧から探して選択します。
次に、アートボード上に正方形のグリッドを作ります。
最初は、できるだけ縦横の比率が整った正方形にしておくと扱いやすいです。
グリッドの線が細かすぎると見づらくなるため、最初は少し大きめのマス目で作るのがおすすめです。
あとから変形してガイド化するので、この時点ではきれいな正方形グリッドが作れていれば大丈夫です。
次に、作成したグリッドを垂直方向に縮小します。
今回の例では、垂直方向を 66.602％ に設定しています。
この数値を使うことで、アイソメトリック風に変形しやすい比率に近づけることができます。
この工程は、ただグリッドを小さくするというより、斜め方向に変形したときの見え方を整えるための準備です。
数値を見ると少し難しそうに感じますが、最初は手順通りに入力すれば問題ありません。
慣れてきたら、自分の作りたい見た目に合わせて微調整してもよいです。
次に、グリッドを水平方向に -30度 傾けます。
アイソメトリック表現では、30度の角度がよく使われます。
そのため、ガイドも30度の方向にそろえておくと、図形やパーツを配置しやすくなります。
ここで重要なのは、角度をそろえることです。
図形ごとに角度が違うと、見た目に統一感が出にくくなります。
続いて、グリッド全体を -30度回転 します。
この工程によって、アイソメトリックらしい斜め方向のガイドになります。
先ほどの傾きと回転を組み合わせることで、平面のグリッドがアイソメトリック用の補助線として使いやすい形になります。
変形後は、斜めの線が均等に並んだ状態になります。
この線に沿って図形を配置すると、角度のそろったアイソメトリック風のデザインを作りやすくなります。
最後に、作成したグリッドをガイド化します。
メニューから、
表示 ＞ ガイド ＞ ガイドを作成
を選択します。
これで、グリッドが通常の線ではなくガイドとして扱われるようになります。
ガイド化すると、作業中に図形を配置するときの目安として使いやすくなります。
必要に応じて、ガイドをロックしておくと、誤って動かしてしまうのを防げます。
ガイドの大きさは、縦横比を固定した状態で拡大縮小して調整する
アイソメトリックガイドを作ったら、ガイドに沿って図形を配置していきます。
たとえば、四角形を斜めに変形したり、星形やハートなどの図形をアイソメトリック風に配置したりするときに使えます。
ガイドはあくまで補助線なので、必ずすべての線にぴったり合わせる必要はありません。
ただ、基準になる角度があることで、全体のバランスを取りやすくなります。
初心者のうちは、次のような使い方がおすすめです。
- 四角形をガイドに沿って配置する
- アイコンの角度をそろえる
- 同じ向きのパーツを複数並べる
- 背景に薄く図形を配置する
- 立体風のカードや箱を作る
ももっぺが実際に作ってみて感じたのは、アイソメトリックガイドは一度作っておくとかなり便利ということです。
最初は数値入力が少し難しく見えますが、手順通りに進めればガイド自体は作れます。
一度ガイドを作っておくと、アイソメトリック風の図形を配置するときに、角度の確認がしやすくなります。
特に、星形やハート、四角形などを斜めに配置したいときは、ガイドがあるだけで作業が安定します。
アイソメトリック表現は難しそうに見えますが、ガイドを使うと「どの角度に合わせればよいか」が分かりやすくなるので、初心者でも試しやすいと感じました。
Illustratorでアイソメトリックガイドを作っておくと、斜め方向にそろった図形やイラストを作りやすくなります。
作り方の流れは、長方形グリッドを作成し、垂直方向に縮小、水平方向に傾け、回転してからガイド化するという手順です。
一度ガイドを作っておけば、アイコン、図解、サムネイル、資料用イラストなど、さまざまな制作に応用できます。
ももっぺは、アイソメトリックガイドは「きれいな角度で図形をそろえるための下準備」だと感じました。
アイソメトリック風の表現に挑戦したいときは、まずガイドを作ってから進めると、作業しやすくなると思います。
