アイソメトリックが印象的だったのでわかりやすく使いやすいデザインについて考えてみた
一昔前にwebデザインで「アイソメトリック」が流行りました。
簡単に言うと四角い部屋、立方体等を斜め上から見た図。
建築、インテリアにおいて「等角投影法」「アイソメ図」と呼ばれ、俯瞰図などで用いられています。
部屋や建物を上下左右前後の6面のうち、３面を平均的に表せると考えると合理的です。
今回はアイソメトリックが印象的だったのでわかりやすく使いやすいデザインについてご紹介します。
デザインにおいては～イラスト、～アート、～プロジェクション等と呼称され、奥行きを持ちながらも平面上で表現できるため、3D空間を2Dで表現する際に重宝されます。
幾何学的、フラット的なアプローチに親和性が高く、一部分のアクセントとしてもうまく使えればインパクトが出せます。
webデザインで「アイソメ」を使用する場合は画像データを作ることになると思いますが、数学的な理論を元に作るので、webデザイナーでもイラストレーターでもなく建築デザイナーが向いていそうです。
実際のサイト制作で使うcssと呼ばれる言語では数学的な理論で考えることもあり、近年では三角関数（sin, cos, tan）の計算まで可能になりました。
それを用いれば画像を作らずアイソメを表現できるかもしれませんが、どう考えても画像を作るほうが早いですね。
cssは「知っている」と「使いこなす」に大きな違いがあります。
cssは「web上ならどこで誰が書き込んでもそのようになる」という仕様がグローバルに発達していますが、一方では、iphoneでは意図した見た目にならなかったり、ブラウザ側が「発達」に対応できていない等、ままならないことがあります。
アイソメトリックのような図形を用いたデザイン概念が他にもないか調べましたが、デザインというより投影の方法論がでてきます。
1. 斜投影 (Oblique Projection)
・斜投影は、アイソメトリックに似た3D表現方法ですが、オブジェクトの一つの面を正面に向けた状態で描きます。通常、Z軸が奥行きとして斜めに表現されます。X軸やY軸は通常90度の角度で描かれますが、Z軸は任意の角度で表現されます。
・エンジニアリング図面や技術図、インフォグラフィックスで使用され、奥行きを持ちながらも簡単に理解できる図を作成するのに適しています。
2. パースペクティブデザイン (Perspective Design)
・パースペクティブ（透視図法）は、遠近感を強調するためのデザイン手法で、オブジェクトが距離と共に小さく見えるように描かれます。消失点（バニシングポイント）に向かってオブジェクトが収束するように描かれるため、非常にリアルな3D効果を得られます。
・ 絵画、建築パース、3Dアニメーション、ゲームデザインで使われ、現実的な視覚体験を提供します。
3. 等角図 (Orthographic Projection)
・等角図は、オブジェクトを複数の平面（通常は前面、側面、上面）から見た図を用いて表現する手法です。アイソメトリックとは異なり、各面が独立して描かれるため、3つの異なるビューを提供します。
・ エンジニアリングや製図、建築の設計図面で使用され、オブジェクトの正確な寸法や形状を理解するために役立ちます。
どれも発想の種にはなりそうですが、テーマとしてはアイソメトリックの似たような印象になりそうです。
～デザインと名のつくものは、得てして曖昧なものですが、下記はデザインの流行りや着想というより、いつも自然と選ぶ選択肢のようなものですね。
4. フラットデザイン (Flat Design)
・フラットデザインは、影やハイライト、グラデーションを使わず、シンプルで二次元的なデザイン手法です。形状、色、タイポグラフィに重点を置き、最小限の視覚効果で情報を伝えます。
・Webデザインやモバイルアプリケーションのインターフェースデザインに広く使用されており、ユーザビリティの向上やデザインの軽量化に貢献します。
5. グリッドデザイン (Grid Design)
・グリッドデザインは、垂直および水平の線で構成されるグリッドを用いて、デザイン要素を整列させる手法です。これにより、デザインが一貫性を持ち、視覚的にバランスが取れます。
・グラフィックデザイン、出版物、Webデザイン、ユーザーインターフェースデザインで広く使用され、ページレイアウトの作成に役立ちます。
ニューモーフィズムやレトロフューチャーのような、わかりやすいデザイン要素のほうが稀かもしれません。
何かをデザインする時に指標を決めることで迷わず効率的に進められることがあるので、「流行りの〇〇デザイン、あーわかる」というのが正義ですね。何の分野でも引き出しが多いことが正義です。
◆有限会社ユニバースデザイン：https://www.universe-hadano.com/
