いま,見ておきたいウェブサイト

第6回 INTERNAVI REALIZATION,NIKE AIR TROUPE design battle

この記事を読むのに必要な時間:およそ 1.5 分

良くするために意識する

『NIKE AIR TROUPE | design battle/NIKEiD.』

Nikeのスニーカー,NIKE AIR TROUPE(ナイキ エア トゥループ)のスペシャルサイト,⁠NIKE AIR TROUPE design battle』です。

図7 スニーカーがダンスするトップページ

図7 スニーカーがダンスするトップページ

credit: Root Communications, undefined Inc., MotLa

オリジナルのスニーカーをデザインして投稿すると,ユーザーの審判によってランキングが決まるという内容になっています。デザインしたスニーカーは、ブログパーツにすることも可能です。

図8 ランキング画面の細部にもこだわりが感じられる

図8 ランキング画面の細部にもこだわりが感じられる

各コンテンツの雰囲気や,使用しているオリジナルフォント,グラフィックの細部などにもこだわりを感じさせる,統一感のあるウェブサイトになっています。

気遣いを生むために

図9 画面下にスニーカーの3Dモデルが表示される

図9 画面下にスニーカーの3Dモデルが表示される

このサイトで注目したのは,⁠JOIN THE BATTLE」というスニーカーをデザインするコンテンツです。構成する各パーツの色を変更しながら,オリジナルスニーカーを作るという内容ですが,色を変更する仕組みがとても使いやすく仕上がっています。

スニーカーの色変更したいパーツを選択すると,画面下にそのパーツの色が変更された,小さなスニーカーの3Dモデルが一覧表示されます。一見,よくある色変更の仕組みに見えますが,色の付いた3Dモデルがプレビューを兼ねることで,⁠どの色を選択すれば,自分の持つイメージ通りになるのか」が非常に分かりやすくなっています。

また,3Dモデルが動く(ダンスする)ことで,スニーカーを履いている時のカラーバランスを確認することができたり,色を変更したパーツが確認しやすいように3Dモデルの視点が移動したりと,非常に細かい部分まで気の利いた仕組みになっています。

制作に携わったundefined Inc.の村山健さんのBlogには,この素晴らしいアイデアを実装するまでの経緯が書いてあるので,ぜひ参照してみてください。

ウェブサイトにおけるこのような気遣いは,問題意識を持ち続け,それを少しでも良くしようと考えていなければ,なかなかできるものではありません。今まで何気なく使ってきた仕組みや,それらの使い勝手などを常に意識しながら,ウェブサイトの制作をしていきたいなと思いました。

"NIKEiD(http://nikeid.jp)"とは
  • NIKEiDとはNIKEの商品をWeb上でカスタマイズできるシステムです。
  • 自分だけのNIKE商品を手にする事が出来る喜びと共に,カスタマイズする経験を提供するのがNIKEiDです。
  • 組み合わせは何万/何億通り。アイテムには英数字でお好みのパーソナルiDを入れる事ができます。

というわけで,今回も最後まで読んでいただき,ありがとうございました。それでは次回をおたのしみに。

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。