アイソメトリックとは、立体の製図法のひとつである「等角投影法」のことで、わかりやすく表現すると、対象物を「ななめ上」から見下ろすような視点で描かれた図のことをいいます。
近年、このアイソメトリックの手法で描かれたイラストをWebデザインに取り入れるサイトが増えており、有料でベクター画像を提供する素材サイトなどでもよく見かけます。
今回の記事では、2020年のトレンドのひとつである「アイソメトリックな」デザインを取り入れたWebサイトの事例をご紹介します。
アイソメトリックとは？
アイソメトリックとは、正確にはアイソメトリック・プロジェクトション（Isometric Projection）」を略した言葉で、日本語では「等角投影法」といわれる立体の製図法のひとつです。
具体的には、下図のように直角に交わる3つの軸の角度がそれぞれ120度になるように描くことで、できあがる図は対象物をななめ上から見下ろしたような形になります。
アイソメトリックの手法を活用したイラストは、平面でありながら対象物を立体的に表現することができるため、ビルや家が並ぶ街並みを俯瞰したようなイラストによく使われています。
また、人物や機械・ガジェットなど、複数の細かいアイテムを同じパースで揃えて描くことで、統一感のある世界観を演出したイラストにも多く用いられています。
アイソメトリックなイラストが得意とするのは、街や暮らしの様子や、製品やサービスと生活との接点、機械やツールと人の関わりなど、複数の要素の「つながり」や「関わり」を見せたいシーンをすっきりと、統一感をもって表現することのように感じます。
また、イラストのパーツとWebサイトのアイコン、ボタンなどの色味やテイストを揃えやすいため、Webサイト全体を統一感のあるデザインにしやすくする効果もあります。
アイソメトリックの手法で描かれたイラストの例
アイソメトリックなイラストを活用したWebサイト
では、アイソメトリックなイラストは実際にWebデザインにどのように取り入れられているのでしょうか。
具体的にみていきましょう。
株式会社DK-Power
ダイキン工業から生まれたスタートアップ企業であり、水道管の水流から電力を生み出す発電会社である同社のWebサイトでは、電気自動車などが走る電装化された街並みと、その下にある水道管をおしゃれな雰囲気のイラストで表現しています。
株式会社小矢澤商店
古紙リサイクル事業を行う同社のWebサイトでは、アイソメトリックの手法で描かれた丸みのあるイラストが採用されています。事業の環境や暮らしへの貢献を緑のある街並みで表現。サイト内のアイコンやモチーフもイラストが活用され、統一感があります。
株式会社サンゲツ 2021新卒採用サイト
https://www.sangetsu.co.jp/recruit/
壁紙や床材、カーテンなどのインテリア素材のメーカーである同社の採用サイトは、アイソメトリックなイラストで部屋を表現。風に揺れるカーテンで、同社製品のある空間の心地よさをうまく表現しています。
ぶんぐまる
約40,000点の品ぞろえを誇る文具販売店の同社は、たくさんの文房具のイラストで豊富な品揃えを表現。さまざまな種類の文房具がありますが、アイソメトリックの手法でグリッドを揃えて配置してあるため、すっきりとした統一感があります。
アイソメトリックなアニメーションを活用したWebサイト
アイソメトリックなイラストにアニメーション効果をつけた表現も増えてきています。動きのおもしろさのあるサイトの例を見てみましょう。
TDK株式会社 「こんなところにTDK」
https://www.jp.tdk.com/athletic/experience/
鳥瞰した街並みに、車や電車が走る様子、人が歩く様子がアニメーションでかわいらしく表現されています。ピンアイコンをクリックすると、産業や製品に生かされているTDKの製品・技術の紹介が現れます。
天藤製薬株式会社「ボラギノールタウン」
https://www.borraginol.com/town/
ボラギノールの製品でできた街並みには、車や飛行機が走っています。ピンアイコンをクリックすると製品の歴史や製品に込められた想いを知ることができます。
楽天株式会社 新卒採用サイト
https://corp.rakuten.co.jp/careers/graduates/
アイソメトリックの手法で描かれた同社のサービスのモチーフが並ぶ街並みに、実際の社員の写真が同じグリッドで配置されています。製品・サービスの暮らしへの貢献とそれに携わる社員の活躍が感じられるデザインです。ページ下までイラストが続いているため、スクロールする楽しみがあります。
株式会社 PLAN-B 「SEARCH WRITE」
SEO対策の自動化ツールであるSEARCH WRITEのWebサイトは、ネットワークをイメージさせるアイソメトリックなイラストに動きをつけてアクセントをプラスしています。
株式会社グラッドキューブ
データ解析プラットフォームを提供する同社は、社名ロゴのイラストを飛び出すアニメーションで表現。アルファベットやシンボルマークもアイソメトリックな表現がしやすいモチーフです。社名やサービス名をデザインのメインに取り入れて印象付けたいときにも向いています。
ウクライナの自動車保険会社
自動車事故のシチュエーションをアニメーションで表現。スクロールすることでさまざまな事故のケースが現れ、ついつい下まで見たくなる仕掛けです。事故現場には会社を表すピンアイコンが表示され、サービスの必要性を親しみやすく、わかりやすく表しています。
まとめ
このように、アイソメトリックの手法を取り入れたイラストは、多くのWebデザインに取り入れられています。
近年、企業サイト、コーポレートサイト制作の現場では、環境ページでSDGsへの貢献を表現したり、採用サイトで事業と人々の暮らしの関わりを表現したりするニーズが高まっています。
さまざまな情報を、統一感をもって表現できるアイソメトリックなイラストは、このような場合にも向いているかもしれません。
また、冒頭にも述べたように、素材サイトやテンプレートサイト等でもたくさんのアイソメトリックなイラストが提供されており、それらの素材をアレンジしたり、動きを加えたりしてオリジナリティをプラスしているサイトも多いようです。
国内・海外も含めてさまざまなデザインを参照しながら、トレンドのアイソメトリックなデザインを取り入れてみましょう。
