【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
サービスサイトやLPによく見かける斜めのレイアウト。とてもかっこ良いデザインですが、いざ自分で作るとなると、「あれ、どれくらい傾ければいいんだ……?」と困惑してしまうのでは?
ここで活躍するデザイン理論が、アイソメ図(等角図)です。
立体を斜めから見た図を描写する方法のことです。また、X、Y、Zの軸がそれぞれ等しい角度に見えるよう計算されたは、画像を目立たせるのに適したデザインです。
今回は、斜めレイアウトのWebデザインを叶える、アイソメ図の作り方Photoshopの制作画面と共にご紹介します。
文末には制作物の事例集もあるので、参考にしてみてください。
アイソメ図を作成する前に、ジオメトリックと平面構造の構築を理解しましょう。
ジオメトリックとは、直線を基本とする平行線や格子、三角、四角などを組み合わせた構成で、一定の合理的な規則性がみられる空間です。
ジオメトリックの考えをベースに、平面構造の上にジオメトリックでオブジェクト(アイソメ図)を組みたちます。
平面構造の種類は3つあります。
XY平面は、X軸とY軸で表される表面のこと。図のサイズはX軸とY軸によりますが、距離感知覚がZ軸で作られています。
YZ平面は、Y軸とZ軸で表される表面のこと。図のサイズはX軸とY軸によりますが、距離感知覚がX軸で作られています。
ZX平面は、Z軸とX軸で表される表面のこと。図のサイズはX軸とY軸によりますが、距離感知覚がY軸で作られています。
まず、XY平面のアイソメ図を作成します。
Adobe Photoshopを開いてください。また、長方形選択ツールで一辺400pxほどの四角を描いてください。
移動ツールで四角を選択し、heightを90%にしてください。
移動ツールを用いて、オプションバー からゆがみを-30度に設定してください。
では、XZ平面のアイソメ図を作りましょう。
Adobe Photoshopを開いてください。また、長方形選択ツールで一辺400pxほどの四角を描いてください。
移動ツールで四角を選定し、オプションバーから回転ツールで角度を-45度に設定してください。
オプションバーで四角のheightを56%に設定してください。
回転ツールで角度を+60度にしてください。結果、XZ平面の位置になります。
それぞれ”Alt” + “上矢印キー”および”Alt” + “右矢印キー”を押すと、四角の深さが広がり、Y軸に入ります。結果は、上のようなオブジェクトです。
クリッピングマスクを使って、色をつけると、上のようなオブジェクトになります。
Adobe Photoshopを開いてください。また、長方形選択ツールで一辺400pxほどの四角を描いてください。
移動ツールで四角を選定し、オプションバーから回転ツールで角度を-45度に設定してください。
オプションバーで四角のHeightを56%に設定してください。
回転ツールで角度を-60度にしてください。結果、YZ平面の位置になります。
それぞれ”Alt” + “上矢印キー”および”Alt” + “左矢印キー”を押すと、四角の深さが広がり、X軸に入ります。結果は、上のようなオブジェクトです。
クリッピングマスクを使って、色をつけると、上のようなオブジェクトになります。
アイソメ図を使えば、下記のような画像を作成してWebデザインが作れます
Mobikul(モビクル)とは、ECサービスのアプリを作成できるツールのこと。上のアイソメ図は、アプリのUIから取りました。
こちらは、Webkul(ウェブクル)というサービスのお問い合わせフォームにおける、アイソメ図の使用です。
こちらは、Cloudkul(クラウドクル)というECを最適化するサービスのホームページにおける、アイソメ図の使用です。
アイソメ図を作成するとき、図形を望んでいる形によって、作成法が異なります。また、上の作成法はあくまでスタートポイントであるため、この作成法を使い、どんどんアイソメ図を作成しましょう。CSSだけでも作れるので、ぜひ試してみてください。
(執筆:Nitish Khagwal 編集:Workship MAGAZINE編集部 提供元:Muzli)
Webデザインにおける3Dイメージ:3つのアプローチ手法
Workship MAGAZINE