エンジニアの副業は週1からでも可能？副業の例や探し方も解説
- ITエンジニア
- 副業
アイソメ図（等角図）の作り方。斜めレイアウトのWebデザインを格好良くキメる
サービスサイトやLPによく見かける斜めのレイアウト。とてもかっこ良いデザインですが、いざ自分で作るとなると、「あれ、どれくらい傾ければいいんだ……？」と困惑してしまうのでは？
ここで活躍するデザイン理論が、アイソメ図（等角図）です。
立体を斜めから見た図を描写する方法のことです。また、X、Y、Zの軸がそれぞれ等しい角度に見えるよう計算されたは、画像を目立たせるのに適したデザインです。
今回は、斜めレイアウトのWebデザインを叶える、アイソメ図の作り方Photoshopの制作画面と共にご紹介します。
文末には制作物の事例集もあるので、参考にしてみてください。
アイソメ図（等角図）とは？
アイソメ図を作成する前に、ジオメトリックと平面構造の構築を理解しましょう。
ジオメトリックとは？
ジオメトリックとは、直線を基本とする平行線や格子、三角、四角などを組み合わせた構成で、一定の合理的な規則性がみられる空間です。
平面構造とは？
ジオメトリックの考えをベースに、平面構造の上にジオメトリックでオブジェクト（アイソメ図）を組みたちます。
平面構造の種類は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度に設定してください。
4. 回転ツールで角度を変更する
オプションバーで回転ツールで角度を+30度にしてください。結果、XY平面の位置になります。
5. Z軸にXY平面のオブジェクトを複製する
それぞれ”Alt” + “下矢印キー”を押すと、四角の深さが広がり、Z軸に入ります。結果は、上のようなオブジェクトです。
6. カラーをつける
クリッピングマスクを使って、色をつけると、上のようなオブジェクトになります。
XZ平面のアイソメ図
では、XZ平面のアイソメ図を作りましょう。
1. 四角を描く
Adobe Photoshopを開いてください。また、長方形選択ツールで一辺400pxほどの四角を描いてください。
2. 回転ツールで角度を変更する
移動ツールで四角を選定し、オプションバーから回転ツールで角度を-45度に設定してください。
3. heightを設定する
オプションバーで四角のheightを56%に設定してください。
4. 回転ツールで角度を変更する
回転ツールで角度を+60度にしてください。結果、XZ平面の位置になります。
5. Y軸にXY平面のオブジェクトを複製する
それぞれ”Alt” + “上矢印キー”および”Alt” + “右矢印キー”を押すと、四角の深さが広がり、Y軸に入ります。結果は、上のようなオブジェクトです。
6. カラーをつける
クリッピングマスクを使って、色をつけると、上のようなオブジェクトになります。
XZ平面のアイソメ図
1. 四角を描く
Adobe Photoshopを開いてください。また、長方形選択ツールで一辺400pxほどの四角を描いてください。
2. 回転ツールで角度を変更する
移動ツールで四角を選定し、オプションバーから回転ツールで角度を-45度に設定してください。
3. Heightを設定する
オプションバーで四角のHeightを56%に設定してください。
4. 回転ツールで角度を変更する
回転ツールで角度を-60度にしてください。結果、YZ平面の位置になります。
5. X軸にXY平面のオブジェクトを複製する
それぞれ”Alt” + “上矢印キー”および”Alt” + “左矢印キー”を押すと、四角の深さが広がり、X軸に入ります。結果は、上のようなオブジェクトです。
6. カラーをつける
クリッピングマスクを使って、色をつけると、上のようなオブジェクトになります。
アイソメ図を使用した斜めレイアウトのWebデザイン事例集
アイソメ図を使えば、下記のような画像を作成してWebデザインが作れます
1. Mobikul（モビクル）
Mobikul（モビクル）とは、ECサービスのアプリを作成できるツールのこと。上のアイソメ図は、アプリのUIから取りました。
2. Webkul（ウェブクル）
こちらは、Webkul（ウェブクル）というサービスのお問い合わせフォームにおける、アイソメ図の使用です。
3. Cloudkul（クラウドクル）
こちらは、Cloudkul（クラウドクル）というECを最適化するサービスのホームページにおける、アイソメ図の使用です。
まとめ
アイソメ図を作成するとき、図形を望んでいる形によって、作成法が異なります。また、上の作成法はあくまでスタートポイントであるため、この作成法を使い、どんどんアイソメ図を作成しましょう。CSSだけでも作れるので、ぜひ試してみてください。
（執筆：Nitish Khagwal 編集：Workship MAGAZINE編集部 提供元：Muzli）
Webデザインにおける3Dイメージ：3つのアプローチ手法
Workship MAGAZINE
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
All the design inspiration you need. It’s like crack for designers. And good for you too!
この記事はMuzliからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
Creating Isometric Illustrations—Made Simple with the Geometric Technique
