こんにちは、デザイナーのゆうこです。
先月チームのみんなで長野合宿をしました。
長野オフィスは東京と比べると静かで、時間がゆっくり流れているような気がします。
仕事中に外の景色を見るたびに雪と山の絶景が見えて癒されました。
癒されるといえば、小さいイラストがわらわら動くのを見ていると可愛くて癒されますよね。イラストを用いることで、伝えたいメッセージをよりわかりやすく、直感的に示すことができます。
今回はそんな小さいイラストで描かれたアイソメトリックなイラストを使用したサイトをご紹介したいと思います。
目次
アイソメトリックとは？
アイソメトリックは、アイソメトリックプロジェクション（isometric projection）の略で、「等角投影法」ともいわれています。直交している3つの軸が120度に交わって見えるように投影して、物体を斜め上から見下ろしたような図形で、Webだけでなくインテリアの俯瞰図にも使用されています。
アイソメトリックの描き方
水平線と垂直線を書き、水平線に対して30度の線を書きます。幅・奥行き・高さを実物と同じ割合に取って、それぞれの点から各辺に平行な線を書き、立体の外形を下書きします。不要な線を消して仕上げたら完成です。
1.あの薬が街になっちゃった
https://www.borraginol.com/town/
ボラギノールが街になってました。ω
ENTERの付いている建物をクリックすると、その建物の中に入ることができ、中の様子もアイソメトリックなイラストで再現されています。ほかにも楽しい仕掛けがたくさん用意されているので、すべてのページを見たくなっちゃうサイトです。
2.丸の内15丁目プロジェクト
3Dの半球の上に、アイソメトリックな街が描かれています。
この街並みの地図が、そのままこのプロジェクトのロゴに使用されています。ラグビーのサイトということもあり、アイソメトリックな街の中を力強い矢印が勢いよく走り抜けます。
3.まるでふわっと浮いているようなサイト
EDIプラットフォームのサイトです。
綺麗な色合いのグラデーション背景が、アイソメトリックな街とよくマッチしています。ページをスクロールすると、ジェット機や雲がパララックス（視差効果）され、ふわっと浮いているように見えます。
4.にょきっと出てくる動きが気持ちいいサイト
紺色や白などブルー系で統一されたアイソメトリックなイラストを使用したサイトです。
等角投影法の線に沿ってビルがにょきっと出てきたり飛び跳ねて、気持ちのいい動きをします。
5.気になって最後まで見てしまうサイト
ウクライナの自動車保険のサイトです。
テキストだけでは説明が難しそうな事故シーンが、アイソメトリックなイラストでわかりやすく描かれています。
「何が起こるかわからない」というテキストとともに、車がUFOに持っていかれるシーンもあり、ユーモアがあって目が離せません。
まとめ
いかがでしたか？
どのサイトも見ていてどうなるかわくわくしますね。
アイソメトリックなイラストは、絵のタッチにより可愛くもかっこ良くもなるので、幅広く応用できそうです。もしアイソメトリックなイラストを使用しているいい感じのサイトがあればぜひ教えてください！
以上、ゆうこでした！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
