INSPIRATION

【Web デザイン】アイソメトリックのイメージを取り入れた素敵なWebサイト10選

当サイトに掲載する素敵なWebサイトを毎日収集していて、斜め上から見たような立体的なイメージ(アイソメトリックプロジェクション)を取り入れたサイトよく見るようになりました。立体感があって印象的なデザインになるのでショーケースをまとめて見ました。
 

アイソメトリックとは

アイソメトリックプロジェクション(isometric projection)の略です。
日本語では等角投影法と言います。

横幅・奥行き・高さの3方向で作る角度がそれぞれ120度になるように描く図法です。簡単に言うと斜め上から見たイメージで、立体感が出せるのが特徴です。インテリアのふかん図などに使用されることが多いので、見たことある方も多いと思います。
 

取り入れる上でのメリット・デメリットは?

取り入れた理由が「なんとなくよく見て素敵だから」ではデザイナーとしては失格です。アイソメトリックのイメージを取り入れる際のメリット・デメリットを考えてみましょう。
 

メリット 

奥行き・立体感を出して他のイメージとの差別化した印象的なイメージにできる。

この後紹介する多くのサイトではメインやキービジュアルにアイソメトリックのイメージ採用しています。そこからわかるのは「ここぞ」という場面で使用することでユーザーの印象に残るイメージにすることができるということです。
 

非現実なイメージでさらに印象を

アイソメトリックのイメージでは等身大以上の大きなスマホにハシゴで登っていたり、ノートPCを台にして人が立っていたりとジオラマの世界のように非現実です。だからこそ、単調なイメージから脱出できます。

このような非現実な表現を、サイトでアピールしたいサービスや商品と置き換えることができればオリジナリティーもあり、ユーザービューのフックにできます。
 

デメリット

アイソメトリックのイメージを採用する意図がなければトレンドに乗っかっただけのデザインになってしまう

印象的なアイソメトリックのイメージですが、サイトのイメージに採用する明確な意図はあるでしょうか?もし思い当たる理由がなければ一度冷静に考えてみるのも大事です。

最近の素材サイトはハイクオリティーなものが揃っていますが、それをそのまま使用するだけではクリエイターとしては残念です。メリットで触れたとおり、サイト独自の表現を考えましょう!
 

トレンドが過ぎたら時代遅れのサイトに

最たるデメリットがこれです。流行っている間はいいのですが、それが過ぎ、また新しいトレンドが来ると、当然それ以前のものは「古く」なります。私の感覚では、だいたい2年周期でトレンドが変わっていますので、それも考慮して取り入れるか決めましょう。
 

アイソメトリックのイメージを取り入れた素敵なWebサイト

実例で見るのが一番!それでは「アイソメトリックのイメージを取り入れた素敵なWebサイト」を見ていきましょう。

丸の内15丁目プロジェクト


 

株式会社グラッドキューブ


 

ボラギノールタウン|ボラギノール公式ブランドサイト


 

SANGETSU Recruit 2020 | 株式会社サンゲツ新卒採用情報


 

つながる科学研究所 | SNS運用・コンサルティング


 

株式会社メルペイ


 

Campus Camp | 名古屋造形大学卒展 | 大学院修了展


 

ちびっこうべ


 

建築施工図の株式会社Noah Design(ノアデザイン)


 

Change the Work|RaNa design associates, inc.(株式会社ラナデザインアソシエイツ)


 

おしゃれなサイトをまとめた記事もぜひチェックしてみてください。

まとめ

アイソメトリックのイメージを取り入れたWebサイトは印象的なサイトばかりでしたね。素材サイトでも「アイソメトリック(isometric)」で検索するとたくさんのクリエイティブを刺激するイメージが出てきてワクワクします。機会があればぜひ自身のサイトデザインにも取り入れてみたいですね。

くどいですが、取り入れる際は「なぜアイソメトリックのイメージなのか」はしっかりと考えてから採用しましょう。
 

それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!
 

改良版【jQuery】コピペでOK!画像や動画を親要素にフィットさせて中央に表示する
NEXT INSPIRATION
【CSS】CSSだけで作るアコーディオンメニュー
PREVIOUS INSPIRATION