アイソメトリックとは？意味・特徴・ウェブデザインでの使い方を図解で解説

最近よく見かけるデザイン

最近、広告や本の表紙でよく次のようなデザインを目にします。

isometric-example

これはアイソメトリックデザイン（Isometric Design）と呼ばれるもので、少しフワッと浮いているように見えるのが特徴です。

「アイソメトリック（Isometric）」の意味は「等角」です。

これは使われている技法に由来しています。

アイソメトリックデザインは、横・高さ・奥行きがそれぞれ120度になるように描かれています。

平面（2D）に立体（3D）が描かれたデザインになっているのです。

isometric-120rule

このような角度のルールを持つメリット。

それは、デザインがリアルに寄りすぎたり無秩序になったりするのを防ぎ、全体に統一感をもたらすことです。

アイソメトリックデザインの前は、フラットデザインと呼ばれるスタイルが広く使われていました。

フラットデザインには、メッセージや意図をシンプル化して伝えやすいというメリットがあります。

しかしカーブや奥行きを取り除いたシンプルさ故に、複雑なメッセージは伝えるのが難しく、そしてあまりにも広く使われたため、デザイン自体の目新しさが失われてしまいました。

▼フラットデザインの例（参考：https://www.vecteezy.com） flat-example

そこで生み出されたのが、フラットデザインに3Dの要素を取り入れたアイソメトリックデザインです。

シンプルさは維持しつつも奥行きがあるため、ビジュアル的によりパワフルで複雑なメッセージを伝えやすくなっています。

また、カラフルで親しみやすく、また写真よりも遊び心を感じさせるので、「トレンド感」や「真面目すぎないイメージ」を打ち出しやすいのもアイソメトリックデザインの特徴です。

そのため、スタートアップ企業やIT企業のコーポレートサイトで特にアイソメトリックデザインを目にします。

アイソメトリックデザインは、ページを開いたユーザーが一番最初に目にするイメージ（ヒーロイメージ）やインフォグラフィックス、そして地図に使うのが効果的です。

例えば次の2つの地図を比較すると、アイソメトリックデザインの方が情報伝達に優れているのが分かります。

▼フラットデザインの地図（参考： https://www.freepik.com） map-flat-design

▼アイソメトリックデザインの地図（参考：https://elements.envato.com） map-isometric-design

アイソメトリックデザインは2018年ごろから海外のウェブサイトで使われ始め、2020年頃からは日本のウェブサイトでもよく目にするようになりました。

アイソメトリックデザインを使った日本のウェブサイトをいくつか紹介します。

• メルペイ／https://jp.merpay.com merpay

• ホクリクコム／http://www.hopnet.co.jp hokuricom

遊び心と真面目すぎないイメージを打ち出せるアイソメトリックデザインは、シリアスなテーマや題材には向きません。

全体をコミック調にして、「にぎやかさ」や「楽しさ」といった要素を濃くしてしまうからです。

また、アイソメトリックデザインを他のスタイルのデザインと併用しないように注意しましょう。

スタイルの一貫性が失われ、まとまりのない印象を生み出してしまいます。