キャラクターの躍動感に思わず驚嘆！ SEIKO の腕時計 WIRED シリーズ「WW」のウェブサイト！
3D キャラクターがグイグイ動く！
今回ご紹介するのは、時計メーカーとしては日本人にはおなじみの SEIKO のブランドのひとつ、WIRED のシリーズとして販売されている WW のウェブサイトです。
これ、WW は「ツーダブ」と読むみたいなのですが、いわゆる日本のストリートカルチャーをイメージして作られているブランドのようです。
今回のサイトでは、そんなストリートカルチャーを強くイメージしたたくさんの演出が 3D モデルを利用して表現されています。
リンク：
ジャンプアクション時の残像演出など見どころ満載
今回のサイトは、PC 版とスマートフォン版でそれぞれ URL がちょっとだけ異なるようなんですが、自動的に実行環境に合わせて内容が変化するようになっているみたいです。
ここでは、PC 版のキャプチャ画像を掲載するのですが、スマートフォンで閲覧している場合は、きちんと縦長のレイアウト用にカメラワークなどが適切に変化するようになっています。
顔に WW の模様が刻まれた、うさぎのようなキャラクターが 3D 表現の中心です。
アニメーション（3D キャラクターのモーション）が、かなりぜいたくに複数パターン用意されており、グイグイ動きます。
基本的には、縦方向にスクロールして進んでいくような構造になっていて、なにか操作を行うたびに、自動的にコンテンツの内容（3D シーンの内容）が変化します。
最初のタイトルのフェーズでは、画面横からスケーターのようにキャラクターが滑って登場すると、軽く屈伸運動を行ったあとに、画面の手前側に向かって滑り出します。屈伸してから滑り出すなど小さな動きにも細かなこだわりが感じられます。
そして次のフェーズ（画面上に 01 と表示されている場面）では、キャラクターが火花を散らしながら滑っていくのですがさらにスクロール操作を行って 02 のシーンへと変化すると、ここでキャラクターの影がまるで残像のように描かれる演出が発生します。
アニメーションの速度も急激にスローモーションのようにゆっくりになるので、すごく迫力がありますね。
この残像が見える演出が、なんともかっこいいですね……
それぞれのフェーズごとに、どのような姿勢でジャンプアクションを行うのかは微妙に異なっていて、カメラアングルもまったく別のものが使われているので、飽きること無く次々とページを進めていくことができると思います。
また、メニューを開いたときや、あるいはトップページで画面をクリックしたままホールドした場合などに見ることができる演出では、画面全体が二値化されたかのようなモノクロのシーンに変化したりもします。
このあたりも、すごく変化球的な演出ではあるのですが、インタラクションをうまく取り入れたデザインになっていると思いました。
トップページ部分で画面の中央やや下あたりに表示される「What is WW ?」と書かれたボタンをクリックすると、WW の製品ラインナップを見たり、シリーズの詳細について見ることもできます。
こちらのページでは CSS を使ってグリッチエフェクトが実装されていたりするのですが、黒い背景でビシッときれいに構図も決まっていて、全体的にすごくクールな印象に仕上がっていると思いました。
私はストリートカルチャーとか、実は実体験としてはほぼ触れてこなかった世界ではあるのですが……
そんな感覚の人間から見ても、ストリートの雰囲気がしっかり感じられる、完成度の高いサイトになっていると思います。
ぜひチェックしてみてください。
