地図表現やイントロデモが秀逸！アゼルバイジャンで行われる F1 グランプリの特設サイト

doxas : 2018-02-27 14:29:59

紫色の統一感もお見事

今回ご紹介するのは、アゼルバイジャンで行われるフォーミュラ１、つまり F1 のグランプリの特設サイトです。

最初のロード完了と同時に表示されるイントロ部分のほか、地図の実装が WebGL で行われており、いずれも統一感のある世界が構築されておりなかなか本格的です。

フロントエンドの文脈で全体を眺めてみると、WebGL 以外のところもそつなくしっかりと作り込まれており、バランスの取れた仕上がりになっています。

今回のサイトは F1 の世界を隅々まで楽しめるような、情報量が結構多いサイトになっています。

今回のグランプリの開催地であるアゼルバイジャンについての情報や、F1 のレースを楽しむための情報、さらには現地のホテルなどについて言及されているところもあり、やはり人気のモータースポーツであることをうかがわせる作りですね。

WebGL の実装としては大きく二箇所あり、ローディングが完了した直後に表示されるトップ部分のイントロデモでは、ロードが終わったあとの、3DCG が表示される瞬間からちょっと注目したい演出が入っています。

具体的には、ロードが終わったあとに、いきなりパッと絵が出てくるのではなく、明滅しながらフェードインするように CG が出てくるのですが、これがなかなか良くできています。

上の画像はそのフェードインの瞬間を撮影したものですが、当記事の冒頭の画像と見比べてみると、背景に映り込んでいる建造物の窓から漏れるライトの光が消えていたり、画面中央にある文字が若干霞んでいたりするのがわかりますかね。

割と一瞬のアニメーションではあるのですが、こういう細かな演出がビジュアルの質をさりげなく高めていて、なかなか写真や動画では表現できないような、高い表現力を得ているように思いました。

また、この冒頭のイントロデモでは、風の流れをラインやスプライトのようなパーティクルで表現しているのですが、こういうのもなかなか動画とかでは高精細に表現するのが難しかったりするので、WebGL の持つ特性をうまく活かしていると感じました。

さらに、サイト内にあるアゼルバイジャンについて知ることのできるページを見ると、今度はバードビューというか、アゼルバイジャンを空の上から見下ろしているような感じの風景を見ることができます。

こちらはそれらのマップの上に文字やラインなどが表示されたりしつつ、その土地についての情報や、レースのコースに関する情報などを見ることができるようになっています。

スクロール操作してやるとかなりぐいぐいカメラの視点を動かすこともでき、非常に迫力があります。

全体的に、紫色と赤をベースにした配色がなされているのですが、いわゆる普通の文章が書かれているコンテンツのところは、白い背景で文字も読みやすく、デモ部分との住み分けがかなりハッキリとなされているのが特徴的で素晴らしいと思いました。

F1 の世界は好きな人は本当に深く楽しめると思うのですが、車やレースにあまり興味がなかったりすると、どうしてもその魅力を知らないまま、食わず嫌いな感じで捉えてしまいがちなのかなあという気もします。

今回のサイトは、そういったユーザーでも戸惑いのないように、F1 に関する様々な情報や現地の情報が掲載されており、内容的にも素晴らしいコンテンツになっていると感じました。