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

サービスサイトやLPによく見かける斜めのレイアウト。とてもかっこ良いデザインですが、いざ自分で作るとなると、「あれ、どれくらい傾ければいいんだ……?」と困惑してしまうのでは?

ここで活躍するデザイン理論が、アイソメ図(等角図)です。

立体を斜めから見た図を描写する方法のことです。また、X、Y、Zの軸がそれぞれ等しい角度に見えるよう計算されたは、画像を目立たせるのに適したデザインです。

今回は、斜めレイアウトのWebデザインを叶える、アイソメ図の作り方Photoshopの制作画面と共にご紹介します。

文末には制作物の事例集もあるので、参考にしてみてください。

アイソメ図(等角図)とは?

1

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

ジオメトリックとは?

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

平面構造とは?

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

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

XY平面

2

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

YZ平面

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

ZX平面

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

アイソメ図の作り方

XY平面のアイソメ図

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

1. 四角を描く

5

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

2. heightを変更する

6

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

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

7

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

4. 回転ツールで角度を変更する

8

オプションバーで回転ツールで角度を+30度にしてください。結果、XY平面の位置になります。

5. Z軸にXY平面のオブジェクトを複製する

9
それぞれ”Alt” + “下矢印キー”を押すと、四角の深さが広がり、Z軸に入ります。結果は、上のようなオブジェクトです。

6. カラーをつける

10
クリッピングマスクを使って、色をつけると、上のようなオブジェクトになります。

XZ平面のアイソメ図

では、XZ平面のアイソメ図を作りましょう。

1. 四角を描く

11

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

2. 回転ツールで角度を変更する

12

移動ツールで四角を選定し、オプションバーから回転ツールで角度を-45度に設定してください。

3. heightを設定する

13

オプションバーで四角のheightを56%に設定してください。

4. 回転ツールで角度を変更する

14

回転ツールで角度を+60度にしてください。結果、XZ平面の位置になります。

5. Y軸にXY平面のオブジェクトを複製する

15

それぞれ”Alt” + “上矢印キー”および”Alt” + “右矢印キー”を押すと、四角の深さが広がり、Y軸に入ります。結果は、上のようなオブジェクトです。

6. カラーをつける

16

クリッピングマスクを使って、色をつけると、上のようなオブジェクトになります。

XZ平面のアイソメ図

1. 四角を描く

17

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

2. 回転ツールで角度を変更する

18

移動ツールで四角を選定し、オプションバーから回転ツールで角度を-45度に設定してください。

3. Heightを設定する

19

オプションバーで四角のHeightを56%に設定してください。

4. 回転ツールで角度を変更する

20

回転ツールで角度を-60度にしてください。結果、YZ平面の位置になります。

5. X軸にXY平面のオブジェクトを複製する

21

それぞれ”Alt” + “上矢印キー”および”Alt” + “左矢印キー”を押すと、四角の深さが広がり、X軸に入ります。結果は、上のようなオブジェクトです。

6. カラーをつける

22

クリッピングマスクを使って、色をつけると、上のようなオブジェクトになります。

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

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

1. Mobikul(モビクル)というアプリのUI

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

2. Webkul(ウェブクル)というサービスの問い合わせフォーム

24

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

 3. Cloudkul(クラウドクル)というECを最適化するシステムのLP

25

こちらは、Cloudkul(クラウドクル)というECを最適化するサービスのホームページにおける、アイソメ図の使用です。

まとめ

いかがでしょうか?

アイソメ図を作成するとき、図形を望んでいる形によって、作成法が異なります。また、上の作成法はあくまでスタートポイントであるため、この作成法を使い、どんどんアイソメ図を作成しましょう。CSSだけでも作れるので、ぜひ試してみてください。

こちらもおすすめ!▼

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ