Illustrator アイソメトリック図法研究① | 基礎編 – ガイド作成と数値

アイソメトリック図法とは

等角投影図とも呼ばれ、立体を斜め上から見た状態の表現方法です。
等角というだけあって、ここが全て等しく120°(下図参照)。また座標の軸がともに30°傾いています。

建築やテクニカルイラストで使用されていますが、WEBデザインのトレンドになったことでWEB上でもよく見かけるようになりました。
アイソメ図と略されていたりします。

step1:アイソメトリック図法のガイドとなる升目を作成する

まずは作図のためのベース作りです。
長方形グリッドツール(直線ツールのあたりにある)を選択した状態でドキュメント内をクリックすると「長方形グリッドツールオプション」が開きます。
幅と高さを同じ数値に、分割の線数も水平・垂直同じ数値にします。分布は0%のまま。
下のオプションは両方外してOK。

ここでは縦横200mm、20分割で作成しました。
作成した長方形グリッドの線を調整します。線を細くし色を変更します。好みになりますがガイドらしく水色にしました。

長方形グリッドを45度回転させます。

「オブジェクト」>「変形」>「拡大・縮小」で、拡大・縮小の垂直方向のみ57.74%をかけます。

この変形により、座標のx軸が30°、y軸が-30°の線の升目になりました。

「表示」>「ガイド」>「ガイドを作成」でガイドにしちゃってもいいんですが、線が太くなってしまうのが嫌なのでレイヤーを分けてロックをかけています。

note

57.74%ってなんの数値よ?
1÷√3=0.57735026919…
≒57.74%
その平方根は何?どっから来たの?とまだ気になる人は数学が詳しい人に聞こう!
(私は考えるのを放棄しました)

step2:アイソメトリックな図形を描く

アイソメトリックならアピアランスで「3D」>「押し出し・バベル」をかければいいじゃないか!
ってそれも手なんですが、奥行きの調整がイマイチうまくできない、円の場合「アピアランスを分割」後に曲面部がやたら細かく分割されてしまう、など多々気に食わないとこがあります。
そして「押し出し・バベル」で終わったらアウトプットにならない!ということで、今回は「押し出し・バベル」を使わないやり方で進めます。

四角で構成されるシンプルな図形の場合

四角で構成されるシンプルな図形なら、作成したグリッドに沿ってペンツールで描いていけば出来上がります。
「表示」>「スマートガイド」を選択しておくと、グリッドの交差地点にズレずにポイントを打てます。

多角形、丸、文字などの場合

まずはダメな例

「イラレならシアーあるっしょ。簡単っしょ。」とシアーで30°(方向:垂直)をかけてみます。
角度は合ってるのですが、デブになってしまいました。横幅を調整すれば……とスリム化をはかると今度は角度がズレてしまうダメなパターン。

上はダメな例です(わざわざ作図する必要があったのかどうかはともかく)。

正しい例

ここでまた不思議な数値が出てきます。
(呼び方は色々あるようですが、この記事ではそれぞれ上面、左面、右面と呼ぶことにします)

拡大・縮小 シアー 回転
上面 水平 81.65%・垂直 70.71% シアー 30°(水平) 回転 -30°
左面 水平 81.65%・垂直 70.71% シアー -30°(水平) 回転 -30°
右面 水平 81.65%・垂直 70.71% シアー 30°(水平) 回転 30°

拡大・縮小の水平81.65%・垂直70.71%は共通で、シアー・回転が30°だったり-30°だったりそれぞれのパターンとなります。
(上面については、実はガイド作成で使った45°回転+高さ57.74%と同じ結果になります。他の面と合わせてシアー・回転を使いたいのでこちらの数値で進めます)

毎回数値を打ち込むのも大変なので、便利なアクションを活用しましょう。一回設定しちゃえば次から一瞬です。アクションの設定方法については下記参照。
Photoshopのアクションと同じです。

Illustrator のタスクを自動化するアクションを使用

カードリンクがうまく作動してないので、ボタンリンクも設置しました。

海外のアイソメトリックを解説した記事を見ていると、水平方向の縮小無しで垂直のみ86.602%にしてシアー&回転をする説明が多くあります。
それでもいいのですが、元の図形よりひとまわり大きな立体ができあがってしまうので、やはり面倒でも拡大・縮小の水平81.65%・垂直70.71%で進めた方がやりやすいですね。

note

81.65%ってなんの数値よ?
√2÷√3=0.81649658092

70.71%ってなんの数値よ?
1÷√2=0.70710678118
√2÷2=0.70710678118
のどっちか。

86.602%ってなんの数値よ?
√3÷2=0.86602540378

それ以上のことは分かりません。

おまけ

角丸について

角丸をかけた図形をアイソメトリックにしたい場合は、変形をかける前に角丸を付けた方がいいです。
各面にしてからだと、鋭角と広角とで丸みの付き方が違うので違和感が出てしまいます。

コロさんの場合

アピアランスの鬼、コロさんがアピアランスでアイソメトリックテキストのTips動画をUPしています。
テキスト追従なので文字を打ち替えてもアイソメトリック! やるぅ!

次回は実践編です

次回、実践編では実際の商品パッケージを参考にアイソメトリック化してみます。