目次
アイソメトリック図法とは
等角投影図とも呼ばれ、立体を斜め上から見た状態の表現方法です。
等角というだけあって、ここが全て等しく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しています。
テキスト追従なので文字を打ち替えてもアイソメトリック！ やるぅ！
次回は実践編です
次回、実践編では実際の商品パッケージを参考にアイソメトリック化してみます。
