ナイキ、アディダス、グーグルも採用!人気のデザイン表現“パララックス効果”の仕組み

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

ナイキやアディダス、グーグルなど先進的なデジタルキャンペーンで知られる企業が先んじてウェブサイトに取り入れている表現手法があります。それが“パララックス効果”です。まずは、その効果を体験いただければと思います。

パララックス効果の名を世に知らしめた「NIKE BETTER WORLD

 このウェブサイトの役割は、ナイキのCSR活動を広くPRすること。米広告代理店「Wieden+Kennedy」や、デザインディレクターIan Coyle氏らが製作を手がけており、サイトでは環境負荷が小さくなるよう開発されたThe Free TR Fit、100%リサイクルされているシューズボックスなどが紹介されています。

人間の視点をずらすことで、奥行きを感じさせる

先ほどのNIKE BETTER WORLD、サイトに“奥行き”を感じませんでしたか?3D技術を使っているわけでもないのに、平面であるはずのウェブサイトに奥行きを感じたのは“レイヤー(層)”が分かれているからです。

レイヤーが分かれているとはどういうことか?噛み砕いて解説します。マウスで下にスクロールしていくと「SPORT IS OUR PASSION〜」「One shoe does good,〜」のように文字が書かれている部分と、「ハードルを越えている男性」「宙を舞っているシューズ」のような画像とが、異なるスピードで動いているように見えないでしょうか?

このように二つの部分を異なるスピードで動かすことで、人間の視差=視点のずれを作り出し、速く動いている部分を手前に、遅く動いている部分を奥に感じさせる効果を“パララックス効果”と呼びます。

パララックス効果を採用しているウェブサイトをもう少しご紹介します。

アディダス「アディダス×サッカー日本代表」

グーグル「THE GUIDE TO THE App Galaxy

東京スカイツリー

もう少し身近な例をお話しすると、電車に乗っているときにも同様の体験=視差を感じることができます。電車に乗っていると、すぐ近くを通過する電信柱やすれ違う電車はものすごいスピードで走り抜けていくように感じます。一方で、遠くのビルや歩いているひとなどの景色はゆっくりと動いているように感じます。ひとは、物体の大きさや焦点だけでなく、この動く速度も含めて、そのモノが近くにあるのか遠くにあるのかを判断しています。

パララックス効果を演出するための2つのプラグイン

一見リッチに見えるパララックス効果ですが、jQueryで効率的に制作することができます。使用するプラグインはこの2つです。このプラグインをインストールした上で、背景画像とスクロール量を調整すれば、視差を作り出すことができます。

jQuery Easing Plugin

jQuery.ScrollTo

パララックス効果を使うことで、縦長のサイトを効果的に活用することが可能になります。サイトの長さは、技術的には限りなく長くできるので、情報の階層をリンクで示す煩わしさを避け、クリックせずにスクロールだけで情報が得られることは、訪問者にとってもメリットがあるといえるでしょう。

ウェブサイトの滞在時間や来訪頻度を高めるために、ウェブサイトのUX(ユーザー・エクスペリエンス=ユーザーが経験する楽しさやここちよさ)の重要性がウェブ業界で説かれています。サイトのコンセプトやコンテンツによっては、このような効果も使えるのではないでしょうか。

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

This entry was posted in blog. Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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