デジタルマーケティングやWebアプリの企画開発を手がけるtadashikuのメンバーが、いま話題のサイトをピックアップ。UIやフロントエンドの技術を中心に、サイトの裏側に迫ります。
|
|---|
アディダスが立ち上げた、フットボール向けシューズブランド「predator lethal zones」のキャンペーンサイト「predator lethal zones」。このスマートフォンサイト、操作感がたまらなく気持ちいいです。ついつい、細部まで見てしまう、商品が欲しくなってしまうサイトです。なにがそんなに気持ちいいのか、UIに注目してみましょう。
アディダスのキャンペーンサイト「predator lethal zones」
軽くスムーズなスクロール
一度のスクロールで最後まで移動できるほど軽快なスクロール
Webブラウザーの標準のスクロールよりも軽く、少ない力ですいすい進んでいきます。このスクロールは「iScroll」というJavaScriptライブラリーを利用し、フリックに対するスクロールの加速度を大きく設定することで実現しています。
Webサイトではめずらしい固定メニュー
Webアプリにはめずらしい固定メニュー
右上のメニューボタンをタップすると、メニューが表示され、ページ内の各コンテンツに移動できます。
iOSのネイティブアプリではよく見かける固定タブ形式のメニューですが、モバイルWebサイトではあまり見られません。iOS 5未満のSafariでは固定配置を実現するCSS（position:fixed;）が非対応だったためです。この制約はiOS 5でなくなりましたが、今でものiOS 4以下のOSを使用しているユーザーは利用できないため、先述したJavaScriptライブラリー「iScroll」で解決しています。
イージング処理された滑らかなアニメーション
左右のボタンを押すことによって滑らかにアニメーションする
「line up」のコンテンツでは、左右のボタンを押すとアニメーションで次の製品を表示していきます。この気持ちいいアニメーションの正体は、イージングと呼ばれる加速、減速処理です。次の商品に行くとき、または戻るとき、徐々に減速しながら停止しているのがわかります。イージング処理によって、滑らかな気持ちいいアニメーションを実現しています。
このイージング処理はCSS3アニメーションを使い、transition-timing-functionのパラメータで指定します（3次ベジェ曲線的に速度を変化させています）。
滑らかな回転アニメーション
ボタンを押すと回転して次の特徴が表れる
「lethal zones」では、ボタンを押すと回転してアニメーションし、製品の特徴を表示します。CSS3のtransform:rotateを使用してボタンを回転させ、先述のイージング処理もされています。
スマートフォンのサイトでは、いかに遷移を少なく、待たせずに情報を表示するかがポイントです。predator lethal zonesではスクロールを滑らかにし、固定メニューで瞬時に移動させることで機能性を高めています。また、CSS3アニメーションを使い、気持ち良く、多くの情報を表示しています。CSS3以前では、JavaScriptのライブラリーが必要でしたが、CSS3によって簡単に実装することができるようになりました。
短い“隙間時間”で閲覧されるスマートフォンのサイトでは、機能性はもちろんのこと、アニメーションのようなちょっと楽しくなる仕掛けが重要になってくるでしょう。CSS3アニメーションのほかにも、HTML5のCanvasやインラインSVGでよりリッチな表現ができます。これからどんどん楽しいモバイルWebアプリが出てくることを期待したいです。
※この記事はtadashikuブログのエントリーを再編集したものです。
著者：株式会社tadashiku
デジタルマーケティング戦略立案、Webサイト•アプリの企画開発、PR、編集•ライティングを専門とするコミュニケーションカンパニー。オープンソースのJavaScriptライブラリー「jAction」の開発プロジェクトを立ち上げ、リッチなスマホウェブアプリ開発の効率化を独自の方法で追求している。Web Professionalでは、Facebookモバイルアプリ開発の連載も展開中。
