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

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

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

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

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

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

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

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

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

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

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