アクエリオンロゴスの公式ページ、WEBデザインを大解剖!

アクエリオンロゴス
アクエリオンロゴスのWEBサイトはWordpressで作られており、タブレットでもスマホからでも閲覧可能なレスポンシブルWEBデザインになっています。画面全体を使って広々見られる!

ローディング画面

サイトに入ってすぐ「TV ANIMATION 2015 SUMMER ON AIR AQUARION LOGOS」の巨大タイトルがローディング画面が4秒ほど表示されます。
アクエリオンロゴス 公式サイト_1
次のページ(というか下のレイヤー)が文字ごしにチラリと見えます。オンエア後にまた変化するかもしれない!背景は、金属もしくは機体のボディを意識した白黒グラデーションに方眼紙の線が入っています。もし背景一色だったらかっこよさが半減しているだろう。

トップページ

アクエリオンロゴス 公式サイト_2
ロディング画面から時間が経過すると自動的に切り替わります。ローディング画面の「TV ANIMATION 2015 SUMMER ON AIR AQUARION LOGOS」の巨大タイトルが今度はトップにあり、画面をスタイリッシュに見せるためのアクセントになっています。無いとあるとでは全然違って見えます。

メニュー

最近WEBデザインで流行中(?)のマウスオーバーで現れる左ナビ。フォントはシンプルなサンセリフが使われており、マウスオンすると斜線がかかる。ナビ背景は透過させて、後ろのメインビジュアルを大きく見せる事に特化させています。
アクエリオンロゴス_メニュー

キャラクター紹介

キャラクターの全身像を大きく見せたキャラ紹介ページ。
灰吹陽   アクエリオンロゴス 公式サイト_3
スクロールしないと搭乗メカも紹介文も見られず、ちょっと前なら紹介が画面内に収まるように修正させられたものですが、最近は便利なマウスが出て来ているおかげや、ユーザーにスクロールをさせまくるパララックスデザインがWEBデザイントレンドの一つになっているため、昔ほどマウスでスクロールする事はユーザーにとってストレスではなくなってきていると感じます。デザイナーはスクロールして見てもらいたいと思ったのでしょう。

機体紹介

こちらもキャラクター紹介と同じくメカの全身像を大きく使っています。「煌」の文字が特徴的です。烏龍茶でこんな感じのフォントを見た事があるが、手書きか・・・?
アクエリオン煌   アクエリオンロゴス 公式サイト_4
なんと360度回転させて見られる3DCGモデル付き!
360view

近年のロボットアニメのWEBサイトは、まるで機体のモニター画面のインターフェイスを意識したような、未来的でスタイリッシュなWEBデザインがカッコいいですよね!代表的なものに「革命機ヴァルヴレイヴ」や、「アルドノアゼロ」がありますが、この「アクエリオンロゴス」のWEBサイトに関しても同じ事が言えます。
機体を主役に見た時にイメージとして出てくる「重量感」「錆臭さ」「機動力(ウィーン ガシャン)」よりも、世界観を中心に見た時の「無機質」「未来的」を印象づける方が必要になって来ているのでしょうね。

おすすめ記事

4月・5月の気になるラノベでデザイン

2月・3月の気になるラノベデザイン

12月・1月の気になるラノベデザイン

【合併号】10月・11月の気になるラノベデザイン

毛筆風なのにゆるい!刀剣乱舞-花丸-のロゴデザイン