アイソメトリックなイラストを採用しているwebデザインのショーケース

アイソメトリックなイラストを採用しているwebデザインのショーケース

斜め上から見ている感じで描かれたIsometric(アイソメトリック)なデザインイラストを採用しているwebデザインのまとめです。
いずれも基本的にはファーストビューで採用しているものになりますが、サイトによっては全体的にこのテイストを用いたイラストを採用していたり、ただイラストを配置するだけでなくアニメーションをつけたりナビゲーションの役割を持たしているところもあります。
要素や色の組み合わせ方、角度、影のつけ方など、こういったアイソメトリックなデザイン要素をサイトに取り入れようと考えている場合は参考になると思います。

株式会社メルペイ

株式会社メルペイ

ファーストビューでアイソメトリックなイラストで描かれた街並みが表示されており、PCサイズでは人が歩いていたり電車が走っているアニメーションつきムービーになっています。

ボラギノールタウン

ボラギノールタウン

こちらもアニメーション付きの街並みがアイソメトリックなイラストで描かれています。
配置されているものはそれぞれクリックで詳細情報などを見れるのですが、そこにもアイソメトリックなイラストが採用されています。

North Detail

North Detail

つながる科学研究所

つながる科学研究所

デバイス画面やホワイトボードなど、部分的にアニメーションをつけています。

Storyblok

Storyblok

RetailYouUP

RetailYouUP

Stedi

Stedi

アイソメトリックなイラストデザインとパララックスな動きを組み合わせています。

Chronicled

Chronicled

RUYA

RUYA

ファーストビューにあるイラストはデザインとして配置されているだけでなく、ナビゲーションとしての役割もあります。

Frame

Frame

Close the search window,
please press close button or esc key.