いま人気のアイソメトリックデザインを使っていますか?

blog-hero-img目にしない日はない「アイソメトリックデザイン」。なぜメッセージを効果的に伝えられるのか解説します。

pen-icon2021.01.23rewrite-icon2021.10.08

Profile Pic

この記事の筆者:三好アキ(ウェブエンジニア)


「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。



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

このようなデザインを、最近の広告や本の表紙でよく目にしませんか?

isometric-example

当サイトのブログページにも使われていますが、これはアイソメトリックデザイン(Isometric Design)と呼ばれるもので、少しフワッと浮いているように見えるのが特徴です。

アイソメトリックとは?

アイソメトリック(Isometric)とは「等角」という意味で、この名前はアイソメトリックデザインに使われている技法に由来しています。

アイソメトリックデザインは、横・高さ・奥行きがそれぞれ120度になるように描かれおり、簡単にいうと平面(2D)に立体(3D)が描かれたデザインとなっているのです。

isometric-120rule

この角度のルールにはデザインがリアルに寄りすぎたり、または無秩序になるのを防ぎ、デザインにある種のまとまりをもたらす効果があります。

アイソメトリックデザインの現れた背景と使い方

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

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

flat-example フラットデザインの例 参照: https://www.vecteezy.com

そこで生み出されたのが、フラットデザインに3Dデザインを取り入れたアイソメトリックデザインで、シンプルさは維持しつつも奥行きがあるため、ビジュアル的によりパワフルで複雑なメッセージを伝えやすいメリットがあります。

フラットデザインよりもカラフルで親しみやすく、かつ写真よりも遊び心を感じさせるので、「トレンド感」や「真面目すぎないイメージ」を打ち出しやすく、それがスタートアップ企業やIT企業のコーポレートサイトで特にアイソメトリックデザインが採用されている理由だと思われます。

アイソメトリックデザインは、ページを開いたユーザーが一番最初に目にするイメージ(ヒーロイメージ)やインフォグラフィックス、そして地図に使うのが効果的で、下の2つの地図を比較すると、アイソメトリックデザインの方が情報伝達に優れているのがわかります。

map-flat-design フラットデザインの地図 参照: https://www.freepik.com

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

アイソメトリックデザインの使用例

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

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


• ボラギノール bolaginorl https://www.borraginol.com/town

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

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

その他、リブセンス楽天採用サイトDK-Powerなど。

アイソメトリックデザインを使うときの注意点

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

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

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

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

monoteinは、アイソメトリックをはじめとするウェブの最新トレンドを取り入れたウェブサイト制作を専門としています。

高いデザイン性と高いCV率を実現したウェブサイトに興味のある方は、コチラより遠慮なくお問い合わせください。

ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein

monoteinについての案内資料の無料ダウンロードはこちら。

「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。

無料相談