こんにちは。シュンです。今回noteのヘッダーサイズ変更に伴い、アドラブのヘッダーイラストを作成させていただきました。

アイソメトリックのイラストの効果と、作成したものについて解説させていただきます。

アイソメトリックとは

横幅、奥行き、高さの軸がそれぞれ120°の等角になるように描く図法。（等角投影法）
アイソメとも言われ、画像に焦点が無く、全て斜め上から見下ろしたように描かれていることが特徴です。

近年、Webデザインのトレンドの一つでWebサイトに使われることが増えているので紹介させていただきます。

メルペイ

ご存知メルカリのサービス「メルペイ」のトップページです。
俯瞰視点で描かれるため場面やシチュエーションを再現しやすいのも特徴です。
ファーストビューでどんなお店で使えるのか一目でわかります。
https://www.merpay.com/

ぶんぐまる

トップページの背景画像として使用されてるこちらのサイトは
文具などの小さな用品もアイソメトリックのイラストで描けばミニチュアのような親近感が演出できます。

イラストの文房具も丁寧に描かれ、文房具一つ一つ可愛く飛び跳ねたりします。
http://bungumaru.com/

ポラギノールタウン

アイソメトリックはイラストのサイズに区別無く描けるため、箱庭のようなデザインを作り出せます。遠近サイズ問わず配置しても違和感なく配置できます。

このサイトのように商品を町の一部として紹介することで年齢問わず親しみを持ってもらいやすいですし、サイトとしても細かな仕掛けがたくさんあるので誰でも楽しめます。
https://www.borraginol.com/town/

トリックアート

アイソメトリックは焦点がないため奥行きが上手く表現できないことを逆手に取り、トリックアートにもよく使用されています。（作りました。）
応用していくとこうしたトリックアートも作れそうです。

アドラブヘッダーについて

こちらがnoteのヘッダーサイズ規定変更に伴い作成したヘッダー全体。
横幅の比率が大きく変更され横長になったためヘッダーの一部分がマイページに表示されます。
表示される領域にアドラブのロゴと人を配置しています。

前述で説明したアイソメトリックのイラストを作成しました。宙に浮いた島を、アドパブリシティの地元「名古屋」に見たててイラストを考案しました。ヘッダー画像にどんなものが描かれているのか？？説明します。

画像は名古屋の街、食べ物です。カラーコーンは工事中、発展途上という意味合いで作成しました。

オアシス21（画像左上）
名古屋のシンボル的な建物の一つです。アドラブの前ヘッダーの撮影場所ということもあり描かせていただきました。

ナゴヤドーム、名古屋市科学館（画像右上）
こちらも代表する建造物の一つです。名古屋市科学館は世界最大のプラネタリウムがあることで有名です。ナゴヤドームは中日ドラゴンズの本拠地ですね。
※実際は建物同士がこんなに近くはありません。

小倉トースト（画像左下）
名古屋の喫茶店で出される軽食です。トーストに小倉餡とバターを乗せた名古屋飯（なごやメシ）。見た目のインパクトが強いですが、甘いものが好きな人にはオススメです。

「アドラブ」をイメージできるものも作ってみました。
人物は誰かに似せて作ったということはなく、遠目に見て人とわかるように作りました。

PCとデスク
私たりデザイナーが仕事をする上で必須なものでしたので作りました。
普段パソコンを使って仕事をすることが多く、デスクは画像ほどスッキリしていませんが、他にも本、カレンダー、ペンを人が持っています。

広告などの紙媒体（上）Webウィンドウ（下）
会社ではカタログ、パンフレット、Web制作も行っているので会社が具体的に何を作っているのかわかるようにイメージしやすいものにしました。

まとめ

アイソメトリックは...
・場面やシチュエーションが再現しやすい。
・親近感を演出できる。
・遠近の大きさ、サイズを気にせず配置可能。
・トリックアートにも応用できる。

最後まで見ていただき、ありがとうございました。（シュン）