「アイソメトリックイラスト」を使用したWebデザイン

みなさん、こんにちは。ウェブラボデザイナーチームです。
今回は、近年、目にすることが増えた「アイソメトリック図法」を用いたイラストを取り入れているWebサイトをご紹介します。

アイソメトリック図法とは

アイソメトリック図法（＝等角投影図法）とは、立体図法の一種。立体を斜め上から見るように描かれた、3つの直交する座標軸が互いに120度になる図法です。「アイソメトリック」を略して「アイソメ」とも呼ばれています。建築やインテリアの俯瞰図にも使用されています。
 
立体的でカラフルなアイソメトリックイラストは、インパクトやトレンド感を出したいときに効果的です。しかし、いざデザインに取り入れてみようと思っても、特徴的すぎてどのように取り入れたら良いのか迷う方も多いのではないでしょうか。そこで今回は、アイソメトリックイラストを効果的に使用しているWebサイトをご紹介します。

01：製品＋街並み　日常生活との親和性を表現してみる

ボラギノール株式会社(https://www.borraginol.com/town/)

アイソメトリックは建築やインテリアの俯瞰図としても使用されるように、建築物や車、機械など街並みを表現するのが得意な手法です。このボラギノールのサイトでは、その特色を活かして街並みを表現しています。しかし、よく見てみるとトラックや飛行機、建物がボラギノールの製品でできていることがわかります。製品と街並みを組み合わせることでインパクトがありユニークな世界観ながらも、製品が日常生活において身近な存在であることが表現されています。

02：単色＋線画　ミニマルなデザインとアイソメイラストを組み合わせてみる

東洋ハイテック株式会社　新卒採用サイト(https://www.toyohi.co.jp/recruit/)

アイソメトリックイラストといえば「立体的でカラフル」な印象を持つ方が多いのではないでしょうか。そこが特徴であるものの、トレンドのシンプルですっきりとしたミニマルなデザインに取り入れたい場合には、少しネックに感じてしまうかもしれません。そんな時は思い切って配色を絞り、色がついている面を減らしてミニマルなデザインに近づけてみるのはいかがでしょうか。
このサイトでは、従来のアイソメトリックイラストとは異なり、ミニマルなデザインに合うように色使いを最小限に抑え、線でイラストが描かれています。シンプルですっきりとしたデザインにしたいときだけでなく、他のアイソメトリックイラストを使用したサイトとの違いやオリジナリティーを出したいときに試してみたい手法です。

03：写真＋アイソメイラスト　コラージュのような表現にしてみる

楽天株式会社 新卒採用サイト(https://corp.rakuten.co.jp/careers/graduates/)

アイソメトリックイラストのカラフルで先進的な印象は、企業の明るく活気がある雰囲気を表現したいときにぴったりです。しかし、画像と組み合わせようとすると少し煩雑な印象に感じてしまうかもしれません。このサイトでは、実際の社員の画像がイラストと同じ画角で撮影されており、人物写真とイラストをコラージュのように組み合わせることで、煩雑な印象になるのを防いでいます。

まとめ

今回ご紹介したアイソメトリック以外にもたくさんのイラスト手法があります。しかし、イラストの流行スタイルは入れ替わりが早く、今流行している手法も2年後には廃れてしまうと言われています。そのため、ただ「流行っているから」というだけでデザインに取り入れるのではなく、サイトの目的に合ったイラストを考慮することが大切です。目的に合ったイラストを使用してオリジナリティーのあるサイトを作っていきましょう。