【2021年トレンド】今人気のアイソメトリックイラストを使った印象的なWebサイト3選

制作・技術

こんにちは!デザイナーのちかです。
昨今色々なデザイントレンドが生み出されていますが、去年ぐらいから注目されている「アイソメトリック」というデザイン手法はご存知ですか?

アイソメトリックとは?
傾斜させた立体を、間口・奥行き・高さの3方向で作る角度がそれぞれ120度になるように描き、一つの図で対象物の3面を同程度に表す投影図法。インテリアの俯瞰(ふかん)図などに使用されることが多い。◇「アイソメトリックプロジェクション(isometric projection)」の略。「等角投影法」ともいう。「アイソメ」と略す。
(コトバンク引用)

少し分かりにくいかもしれませんが、
もう少し簡潔に説明すると、「立体的なものを斜め上から見下ろした視点で描く」手法のことで、このような手法で描かれたイラストを取り入れたWebデザインがトレンドの兆しを見せています。

このイラストはグラデーションを用いず、シンプルな色使いながらも立体感を表現することが出来るので、フラットデザインでよくあるのっぺりとした印象も解消できるうえに、サイト全体で使う事で一つの世界観として演出することが出来ます。
シンプルでありながらもユーモアを感じさせることが出来る「アイソメトリック」という手法が、いまスタンダードになっているフラットデザインとはとても相性が良いのです。

アイソメトリックイラスト Webサイト3選

今回はそんな今熱い「アイソメトリックイラスト」を使ったおしゃれなサイトをご紹介します。ぜひ制作の参考にしてみてください!

天藤製薬株式会社「ボラギノールタウン」

https://www.borraginol.com/town/
アイソメトリックイラスト+アニメーションで、一つの街を表現されています。
サイトコンセプトの「タウン」とマッチしていて、世界観をうまく作り上げられています。

 

東洋ハイテック株式会社 新卒採用サイト2023

https://www.toyohi.co.jp/recruit/
こちらも+アニメーションで、工場の様子を作り上げています。
配色もサイトカラー統一されているため、こちらもうまく世界観を作り上げられています。

 

Auto-IDフロンティア株式会社

https://www.id-frontier.jp/
写真とアイソメトリックイラストを融合してデザインされているサイト。
ポイントでシンプルなアニメーションも設定されていて、飽きさせない構成になっています。

 

まとめ

いかがでしたでしょうか?
一言に「アイソメトリック」と言っても、色々な表現が可能なので、きちんとサイトのコンセプトやターゲットに合致すれば、おもしろい表現となる事でしょう。

それだけにバランスも難しいので、取り扱う上では色々と注意点もありますが、手法の一つとして調整してみてはいかがでしょうか?

制作・技術
follow
プロフィール

おいしい紅茶とお菓子があれば頑張れる、Webデザイナーです。
Webの最新トレンドや、実務で使えるテクニックまで、お役立ち情報を配信していきます!

follow
超インハウスWebサイト運用 to-ch(トーチ)