アイソメ図（等角図）の作り方。斜めレイアウトのWebデザインを格好良くキメる

アイソメ図（等角図）とは？

アイソメ図を作成する前に、ジオメトリックと平面構造の構築を理解しましょう。

ジオメトリックとは？

ジオメトリックとは、直線を基本とする平行線や格子、三角、四角などを組み合わせた構成で、一定の合理的な規則性がみられる空間です。

平面構造とは？

ジオメトリックの考えをベースに、平面構造の上にジオメトリックでオブジェクト（アイソメ図）を組みたちます。

平面構造の種類は3つあります。

XY平面

XY平面は、X軸とY軸で表される表面のこと。図のサイズはX軸とY軸によりますが、距離感知覚がZ軸で作られています。

YZ平面

YZ平面は、Y軸とZ軸で表される表面のこと。図のサイズはX軸とY軸によりますが、距離感知覚がX軸で作られています。

ZX平面

ZX平面は、Z軸とX軸で表される表面のこと。図のサイズはX軸とY軸によりますが、距離感知覚がY軸で作られています。

アイソメ図の作り方

XY平面のアイソメ図

まず、XY平面のアイソメ図を作成します。

1. 四角を描く

Adobe Photoshopを開いてください。また、長方形選択ツールで一辺400pxほどの四角を描いてください。

2. heightを変更する

移動ツールで四角を選択し、heightを90%にしてください。

3. ゆがみで角度を変更する

移動ツールを用いて、オプションバー からゆがみを-30度に設定してください。

アイソメ図を使用した斜めレイアウトのWebデザイン事例集

アイソメ図を使えば、下記のような画像を作成してWebデザインが作れます

1. Mobikul（モビクル）

Mobikul（モビクル）とは、ECサービスのアプリを作成できるツールのこと。上のアイソメ図は、アプリのUIから取りました。

2. Webkul（ウェブクル）

こちらは、Webkul（ウェブクル）というサービスのお問い合わせフォームにおける、アイソメ図の使用です。