スクロールするだけでタテ・ヨコ・ナナメに動くナイキのサイト

2012.05.28 16:30

ウェブサイトは紙の巻物のようにスクロールしていけば、コンテンツを限りなく盛り込めるようになっている。とはいえ、文字や画像が単純に下から上に流れていくだけでは面白くない。

その点、ナイキのキャンペーンサイト「CHOOSE YOUR FLIGHT」は、画面を下にスクロールするだけで、中の要素がタテ・ヨコ・ナナメに動き、それも立体的に見えるしかけを作っているところが興味深い。

「パララックス」と「コマ送りアニメ」を併用し立体化

シューズとソールで作った戦闘機が右上に飛び去る

「CHOOSE YOUR FLIGHT」はNBAの伝説的プレーヤー、マイケル・ジョーダンの名前を冠したシグネチャーモデルの最新作「Air Jordan 2012」のPRサイトだ。機能の異なる3種類のソール（中敷き）を紹介している。

トップ画面からスクロールしていくと、「CHOOSE YOUR FLIGHT」の文字がゆっくりとバラバラになり、左下から航跡を残してミサイルが画面右上に飛んでいく。それを追って水色の背景とともに、最初のソール「FLY OVER」の画像が現れる。

スクロールを続けると、今度は画面の左から右へ、黄緑色の背景と「FLY AROUND」というソールが流れていく。上から下へ操作しているのに、画面は左右に動いているところが面白い。

さらに進むと、オレンジ色の背景と「FLY THROUGH」のソールが下からのぼってくる。ナナメ→ヨコ→タテの動きだけでなく、ソールが空に舞い、回転しながらシューズの中に滑り込む動きもかっこいい。

ソールやシューズの動きには、以前も紹介した「パララックス（視差効果）」が使われている。背景やソール、シューズなどの動く時間を微妙にずらすことで、サイトに奥行きを感じさせているのだ。

「コマ送りアニメーション」の使い方も効果的だ。ソールが空中で回転し、シューズの中にすべりこむ場面は、コマ撮りした画像を次々と表示させることで、あたかも動画のような効果を出している。

スマホの限られた画面でも商品を立体的に紹介

このサイトはパソコン用とスマートフォン用があるが、いずれも3種類のソールを購入できるECサイトへの導線があり、ソーシャルメディアでの拡散を促すようにもなっている。

限られたサイト画面の中で立体的な動きをさせる技術は、今後さまざまな形で応用されると思われるが、特に注目したいのはスマートフォンにおける活用だ。

スマホユーザーは現在急増中で、Googleの調査によると2012年第1四半期の普及率は20％にものぼる。日本国民の5人に1人は所有していることになる。将来、ケータイやパソコンの所有率を超えるかもしれない。

この動きを広告主も注目しており、ウェブサイトもスマホに最適化したものから作り始める「スマホファースト」になりつつある。

一方でスマホには、画面が小さく、通信・処理速度が遅いなど、企業が自社の魅力を伝えるにはパソコンに比べると制約があると考えられている。

しかし「CHOOSE YOUR FLIGHT」のように、平面のウェブサイトを立体的に、静的なウェブサイトを動的に魅せるアイデアを使うことで、より表現力を高めていくことができるのではないだろうか。（岡徳之）