色収差風のエフェクトが全編に渡って用いられ高級感あふれる仕上がりに！ ダッジ（Dodge）のウェブサイト
見せ方にこだわった演出たち
今回ご紹介するのは、自動車メーカー「クライスラー」が展開するブランドのひとつダッジ（Dodge）のウェブサイトです。
かつては独立した企業だった Dodge は、今では紆余曲折を経てクライスラーの部門のひとつになっているという形みたいなんですが、デザインは重厚な感じで、いかにもアメリカの車という感じ。
今回のサイトでも、どこか無骨で荒々しい感じのイメージが、見事にブラウザ上に体現されています。
リンク：
動画や画像をうまく活用した表現が楽しい
今回のサイトでは、自動車の 3D モデルは一切使われていません。
主に動画（ムービー）と、画像をインタラクティブに動かしながらレンダリングする擬似 3D のような見せ方で、うまくシーンを構成しています。
サイト全体に色収差みたいな独特の色ズレ演出が使われていて、ちょっと無骨な感じというか、無頼な雰囲気とでも言いましょうか…… どことなくワイルドさを感じさせるビジュアルになっています。
トップ部分では、最初にクオリティを選ぶボタンなどが表示され、その後、自動車を正面から見据えたようなシーンが登場します。
このシーンも含めて、イントロの演出では画像をうまく組み合わせて擬似的な立体表現が行われています。
マウスカーソルを動かすことで、ライトの強度が変化したりエンジンを吹かす音が聞こえたり、とても迫力がありますね。
また、この上の画像を見てもらうとわかるかと思いますが、ロゴの部分がグリッチと色収差を組み合わせたような演出で時々歪むように動きます。
この色収差っぽい演出は、シーンごとになにかしらの要素に対して絶えず使われていて、サイト全体の雰囲気を統一させるような役目を果たしています。
また、今回のサイトでは三種類の車種を見ることができるようになっているのですが、それぞれの車種の個別詳細ページでは、2D 画像と動画がシームレスに組み合わせられた、独特な演出を見ることができます。
これは静止画で説明するのが難しいのですが、切れ目なくシーンがつながる様子がとてもおもしろいです。
パネルやアイコンが登場し、部位ごとにより詳細な情報を見ることもできる。
自動車メーカーの WebGL 系サイトだと、これまでは 3D モデルを使って、ボディやインテリアの質感などに異常にこだわった事例が多かったような気がしますが……
今回のサイトは逆に 2D での演出に対する良い意味での割り切りみたいなものが感じられて、動画と画像で品質を底上げしつつ、インタラクティブ性を駆使してうまく演出が組み立てられていると感じました。
これはこれで、ひとつの正解というか、すごくかっこよくまとまっていると思います。
ぜひチェックしてみてください。
