【連載:HTML5事例】アディダスに学ぶスマホUI、ユーザーを回遊させ滞在時間を伸ばす、4つの特徴

このエントリーをはてなブックマークに追加

predator lethal zones

これから不定期ですが、HTML5でつくられたサイト事例を特徴とともにご紹介していこうと思います。第一弾は、アディダスが立ち上げた、フットボール向けシューズブランド「predator lethal zones」のキャンペーンサイト「predator lethal zones」を紹介します。このサイト、操作感がたまらなく気持ちいいです。ついつい、細部まで見てしまう、欲しくなってしまうサイトです。なにがそんなに気持ちいいのかを解説します。

軽くスムースなスクロール

一度のスクロールで最後までいってしまう

普通のブラウザのスクロールよりも軽く、少ない力ですいすい進んでいきます。このスクロールは「iScroll」というjavascriptのライブラリを使用することにより実現しています。フリックに対してスクロールさせるときの加速度を大きくしています。

Webアプリにはめずらしい固定メニュー

Webアプリにはめずらしい固定メニュー

右上のメニューボタンをタップすると、メニューが表示され指定の箇所にスクロールしてくれます。

iPhoneのアプリでは、よく見る固定タブ形式のメニューですが、モバイルWebアプリではあまり見られません。その理由はブラウザの制約にありました。固定メニューを実現するCSSのパラメータがモバイルのsafariでは非対応になっていたのです。この制約はiOS5でなくなりましたが、今でものiOS4以下のOSを使用しているユーザーには使うことはできません。このサイトではその課題を先述したjavascriptライブラリ「iScroll」で解決しています。

イージング処理された滑らかなアニメーション

左右のボタンを押すことによって滑らかにアニメーションする

line upの箇所では、左右のボタンを押すとアニメーションして、次の製品を見ることができます。この気持ちいいアニメーションの正体は、イージングと呼ばれる加速、減速処理です。次の商品に行くとき、または戻るとき、徐々に減速しながら停止しているのがわかります。この処理によって滑らかな気持ちいいアニメーションを実現しています。

ちなみに、これはCSS3アニメーションを使い、transition-timing-functionのパラメータを指定していました(3次ベジェ曲線的に速度を変化させていました)。

滑らかな回転アニメーション

ボタンを押すと回転して次の特徴が表れる

lethal zonesの箇所では、ボタンを押すと回転してアニメーションし、次の特徴をみることができます。もちろん先述のイージング処理もされています。こちらもCSS3で、transform:rotateを使用しています。

スマートフォンのサイトでは、いかに遷移を少なく、待たせずに情報を表示するかがポイントです。このサイトではスクロールを滑らかにし、固定メニューで瞬時に移動させることによって機能性を高めています。また、CSS3アニメーションを使い、気持ち良く、多くの情報を表示させています。CSS3以前では、javascriptのライブラリが必要でしたが、CSS3によって簡単に実装することができるようになりました。

時間がない中で閲覧されるスマートフォンのサイトでは機能性はもちろんのこと、アニメーションのようなちょっと楽しくなる仕掛けが重要になってくるでしょう。HTML5ではCSS3アニメーションの他にも、canvasやSVGタグの追加でよりリッチな表現が可能になっています。これからどんどん楽しいモバイルWebアプリが出てくることを期待したいです。

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Both comments and trackbacks are currently closed.

Comments Closed

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ