最近気になるWebデザイン アイソメトリックのイラストとは
イラストを使用したWebデザインは数年前よりWebデザインのトレンドとして取り上げられていることもあり、よく見かけるようになりました。中でも斜め上からの視点で書かれている一風変わったイラストが気になっているという方も多いのではないでしょうか。
斜め上から見たようなスタイルのイラストは、アイソメトリックという図法を使って描かれたイラストで、数年前から海外のWebサイトで多く使われるようになり、日本でもここ最近採用しているWebサイトが増えてきています。
アイソメトリックという聞きなれない言葉ですが、アイソメトリックとは、アイソメトリックプロジェクション（isometric projection）の略で、日本では「等角投影法」といわれています。これは建造物、立体物のイラストを描く時などに使われる図法で、横幅、奥行き、高さの軸がそれぞれ120°になるように描きます。立体感を表現できることで、平面的になりがちなWebサイトデザインに変化を持たせ個性的なWebサイトになることや、イラスト内に文字を組み込みやすく、言葉だけでは説明しずらい複雑な内容を説明しやすいことなどから、先進のサービスなどを紹介するWebサイトを中心に採用するWebサイトが増えているようです。
Webデザインとの組み合わせ方次第で様々な表現ができるアイソメトリックのイラスト。そんなアイソメトリックのイラストを使ったWebサイトをいくつかご紹介します。
via https://www.timekit.io/
単色の濃淡で構成されたアイソメトリックのイラストを使用しています。
メインビジュアルでは全体の世界観を表現し、下部でも使用方法の説明にイラストを使用しています。スクリーンと人を組み合わせ機能説明に使われるのもアイソメトリックのイラストの特徴です。
via https://truepill.com/
グラデーションの背景と合わせることで独自の世界観が表現できるアイソメトリックのイラスト。
このWebサイトではグラデーションに加えモチーフに動きを加えることでより魅力ある表現としています。メインビジュアルのほかにアイコンにもアイソメトリックなイラストを使用しています。
via https://www.framebim.com/
黄色とグレーの特徴的な色使いにアイソメトリックのイラストが上手くマッチしています。
建築物、構造物を表現することに長けたアイソメトリックのイラストが上手く活かされています。特徴の説明にアイコン的に使われているイラストの色使いも印象的で良いですね。
via https://mogney.com/
アイソメトリックのイラストはアニメーションと組み合わせることでより個性的で魅力あるものになります。
このWebサイトもスクロールアニメーションが使われ魅力的な表現となっています。
動きを加えることで、ユニークな印象を与えたり、色使いによってはアカデミックな印象を与えられたりと色々な表現ができるアイソメトリックのイラスト、見ているだけでも楽しく、つい引き込まれてしまいますよね。これからも様々なWebサイトで使われていくでしょうね。
