フランスにある AccorHotels Arena で撮影されたたくさんの思い出が流れていく Coca-Cola 謹製の WebGL デモ
フランス発のプロモーションサイト？
今回ご紹介するのは、フランス製のサイトでホテルを運営する企業とコカ・コーラとのコラボレーション企画のサイトです。
サイト自体にあまり詳しい解説がないのと、フランス語で作られているということもあってあまり詳細な事情がわからないのですが……
たぶん、ホテルを利用した人たちの写真を共有しているサイトなのだと思います。WebGL の実装としてはシンプルですが、非常に完成度の高い、見ていて気持ちの良いサイトに仕上がっています。
コカ・コーラをイメージしたカラーとスプライト
今回のサイトはフランスで実際に今も運営されているホテルが舞台になっています。
恐らく、定点カメラというか、なにかしらのギミックをホテルに設置して企画が運営されたのだと思いますが、短いメッセージと共に、たくさんの写真が投稿されており、なかなか興味深いサイトに仕上がっています。
コカ・コーラがどういった形でホテルと組むことになったのかなど、ちょっとよく事情はわからないのですが、サイト全体がコカ・コーラのテーマカラーである赤で統一されており、デザインはとても素晴らしいですね。
キャプチャした画像だとちょっとわからないと思いますが、背景の赤は単なるベタ塗りの赤ではなく、微妙にテクスチャを使ってざらついた質感のような雰囲気になっています。
テクスチャの効果もあってか、大半の余白部分が真っ赤になっているにもかかわらず、あまり目に痛い感じもしません。
デモのトップページからいくつかナビゲーションにしたがってページを移動していくと、タイムラインのようなものが現れますが、これはどうやら文字通り時系列に並べられているみたいですね。
ドラッグしてカーソルを動かすことで、時系列をなぞるようにして移動していくことができます。
このとき、画面の下のほうに大量に表示されているスプライトが、まるで川の流れのように滑らかに動き、シンプルな図形の集合でしか無いのに妙に気持ち良いです。
さらにタイムライン上でクリック操作などを行えば、より詳細な、該当する時間軸で撮影されたと思われる写真たちを見ることができます。
写真のひとつひとつが、三次元空間を漂うような感じで配置されており、それぞれの写真には短いメッセージなども添えられているようです。
どういう仕組みでこれらの写真が撮られたのでしょうか。企画の詳細がわからないのがちょっともどかしい……
なにか、思い出を切り取ってみんなでアルバムを作ろうみたいな、そういう企画だったのですかね。細かいところはわかりませんが、こんなふうに自分たちで撮影した写真が、なにかしらのサイトで一同に並べられている様子を見るのはなんだかとても楽しそうです。
サイトのデザインや、WebGL をうまく利用した滑らかなアニメーションなど、見どころは意外とたくさんあります。ぜひチェックしてみてください。
