あらゆる領域のプロフェッショナルが練り上げた珠玉の逸品！ 電通ランウェイのコーポレートサイトがすごい
ブルーのラインでランウェイを描き出す
今回ご紹介するのは株式会社電通ランウェイのコーポレートサイトです。
こちらのウェブサイト、WebGL はもちろん利用されているんですが、それ以外の部分にも見どころが多くとても見ごたえのあるウェブサイトとなっています。
実装を手掛けられた mount inc. さんの Twitter 上での言葉を引用すると……
メディアに強みを持つコミュニケーションカンパニーとしてのらしさやチャレンジングな雰囲気を伝えるため、言葉・ビジュアル全てを何度も議論を重ね作り上げています。
とのことです。
このあたりの背景をさらに深掘りした一連のツイートはとても読み応えのある内容になっていますので、気になる方は以下のツイートもチェックしてみるといいかもしれません。
リンク：
自分たちの在り方を具現化する
今回のウェブサイトでは、WebGL を使っている部分はそれほど多くありません。
まずトップページの冒頭、一番に目に飛び込んでくるのは動画です。
WebGL でこそありませんが、この動画がすごく素晴らしい内容になっていて、街や風景のなかに青いリボン状のラインが伸びていく表現は目を引きます。
スクロールするたびにセクションが切り替わり、それぞれのセクションごとに異なる動画とメッセージが用意されています。
セクションが切り替わる際の表現も凝っていて、白い靄のような、あるいは霧のような表現が見事です。
画面の外側にまで青いラインがはみ出しているかのようなデザインはビジュアルとしての迫力もさることながら、強いメッセージ性を感じさせる面白い表現ですよね。
これらの表現を実現するために結構大量の動画を読み込んでいるようですが、動作は軽快でストレスは感じません。
画面を一定量スクロールしてやると、最後のセクションでは WebGL を用いた表現も姿を現します。
ここでは青いラインが滑らかに動く様子を見ることができます。
青いラインは、始めはスッと線が引かれる感じで伸びていくのですが、最終的にはその線が後ろの方から消えていくような感じで描かれます。
この「線が引かれ、そして消えていく」表現、一見簡単そうに見えますが自分で実装するとしたらどうやってこれを実現するか、を考えてみると、今回の事例がより参考になるのではないでしょうか。
サイト内にたびたび登場する青いラインは、社名にもあるランウェイを想起させてくれるだけでなく、スピード感や躍動感、ひいては他者とのつながりや未来へ向けてなにかを紡いでいく様子をも連想させてくれます。
こういう抽象化されたオブジェクトをなんとなくサイト内に配置しただけの WebGL 事例、というのはたまに見かけるように思いますが……
今回の事例では使われている動画のクオリティや WebGL 実装との組み合わせ方など、プロジェクト全体としてのまとまりがすごくよく考えられているように感じました。
ぜひチェックしてみてください。
