CJ Column

コラム

最近気になる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サイトで使われていくでしょうね。

K.K  アートディレクター

コラム一覧に戻る
シトラスジャパン チラシ・フライヤー デザインサービス

お問合せ

以下のフォームにご入力の上、送信ボタンをクリックしてください。

企業名 企業名を入力してください
お名前 [必須] お名前を入力してください
メールアドレス [必須] メールアドレスを入力してください
電話番号 電話番号を入力してください
お問い合せ内容 [必須] お問い合わせ内容を入力してください

個人情報保護方針

個人情報の取り扱いについて

個人情報の取り扱いについて同意してください

ログインをすると、
会員限定記事を全文お読みいただけます。

パスワードを忘れた方へ

  • ログインIDを入力してください。
  • ログインIDを正しく入力してください。
  • パスワードを入力してください。
  • パスワードを正しく入力してください。
  • ログインID、パスワードが間違っています。


ログイン実行中

ログイン完了!ページを再読込します。