豊富な素材とランニングフォームを選び自分だけのオリジナルランナーを走らせる！ Nike React が面白い！
自分だけの組み合わせを探してみよう
今回ご紹介するのは、スポーツ用品メーカーとして有名なナイキ（NIKE）の特設サイトです。
今回のサイトは、カタカナ表記で「ナイキエピックリアクト」という名前の、シューズ製品の特設サイトのようなのですが、いくつかの素材やランニングフォームの中から、独自にセレクトした組み合わせでオリジナルのランナーを生み出すことができるというちょっと変わった面白いサイトになっています。
素材は結構種類も多いですし、ランニングフォームやシューズの色など、選択できるパターンは結構豊富です。
自分だけのオリジナルランナーを作って楽しむことができます。
多彩な素材の質感や躍動感を楽しむ
今回のサイトは、スポーツ関連用品を主に製造しているメーカーのサイトらしい、非常に躍動的なアニメーションや、楽しげな雰囲気がとても素晴らしいです。
ページのロードが終わると早速 WebGL のシーンが始まるのですが、そこにはいくつかのプリセットで組み上げられたランナーの姿が描かれます。
素材にはバブル（泡）や羽などのちょっと表現が難しいようなものもあり、最初からいきなり見ごたえのあるシーンからスタートします。
ランナーが駆け抜けると羽が舞い上がる様子など、とても迫力があっていいですね。
このサイトでは、自分だけのオリジナルのランナーを生み出すことができるようになっており、次のページに進むとまずは素材を選択するページが出てきます。
素材は画面のやや下のあたりに横一列に並べられているので、この中からふたつ、任意のものを選択します。
最後に選択されたものから順番に、ふたつの素材がアクティブになるようになっているので、ポチポチと好きな素材を選びましょう。
素材を選び終わったら、次にランナーのようなシルエットのパーティクル人間（笑）が出てきますので、そこで任意のランニングフォームを選択します。
飛び跳ねるように楽しげに走るランナーの姿や、黙々と駆け抜けていくジョガーの姿が、まるで目に浮かぶかのようにリアルなモーションになっています。
最後に、シューズの色を選択できるようになっており、これらの全ての選択が終わると、選択した素材と、選択したフォーム、さらに選択したシューズの色をメインカラーとした、オリジナルのランナーの姿が描き出されます。
組み合わせはかなりの種類にのぼる上、ランナーの体のどの部分にどの素材を使うのかもクリック操作で切り替えできるようになっているので、自分だけのオリジナルランナーが作れるというのも、まんざら大げさではないですね。
これは楽しい。
とにかく軽快で楽しいアニメーションと、過不足なくほどよい品質で描かれる CG の組み合わせで、本当に躍動感のある見事なサイトに仕上がっていると思います。
WebGL とスポーツ用品という組み合わせでいうと、アディダス、あるいは国内で言えばデサントなどが思い浮かびます。
今回のナイキのサイトを見ても、やはりダイナミックな動きがスポーツというジャンルととても相性がいいんだなってことを実感させられますね。
カメラワークなどを含む 3D 的な見せ方というところも工夫が凝らされており勉強になりますし、シンプルで無駄のないインターフェースで、直感的にサクサク操作できるのもとても素晴らしいデザインだと思います。
とてもレベルの高いサイトになっていますので、ぜひチェックしてみてください。
