アイソメ図(等角図)の作り方。斜めレイアウトの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平面

4

ZX平面は、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(モビクル)

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

2. Webkul(ウェブクル)

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

3. Cloudkul(クラウドクル)

25

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

まとめ

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

(執筆:Nitish Khagwal 編集:Workship MAGAZINE編集部 提供元:Muzli

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship