「パララックス」をはじめとする「スクロールエフェクト」の魅力とは

パララックスを代表とするスクロールエフェクトの特徴・メリット、導入時の注意点について、国内外の典型事例を紹介しながら考察します。

2013年12月2日 11:03

※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

「パララックス」はWebデザインのトレンドとして2012年頃から流行り始め、現在はこの手法を利用したサイトをよく見かけるようになりました。そろそろブームが過ぎるのでは？という意見も聞こえますが、パララックス効果を代表とするスクロールエフェクトはアイディア次第でまだまだWeb利用者たちを魅了する可能性をたくさん秘めているのです。

パララックスとは？

パララックス（parallax）、直訳すると「視差」という意味です。もともと写真用語で、光学式ビューファインダーを使う際、レンズとの位置関係のズレにより、ファインダー視野と実際に撮影される画面にズレが生じる現象を指す言葉です。Webデザインにおけるパララックスは、スクロールといった動作に応じて、複数のレイヤー（層）にある視覚要素を異なるスピードで動かすことで視差を生み出し、立体感・奥行きを演出する手法のことを指します。最近では、本来の多重スクロール遠近効果の定義を超え、スクロール操作による視覚的エフェクト全般を「パララックス」と呼ぶこともありますが、本コラムではその全体を「スクロールエフェクト」と称しながら、パララックスを中心に考察していきます。

パララックスなどのスクロールエフェクトは何がすごい？

パララックスなどのスクロールエフェクトの流行には「格好いい」とか「面白い」といった単純な理由以外に、ちゃんとした裏付けがあります。

スクロールがもたらす操作性今はスクロールできるホイールマウスは主流になっていますが、昔はいちいちスクロールバーに移動しなければいけない時代もありました。最初にホイールによるスクロール体験をした時、感動すら覚えた方はいらっしゃるのではないでしょうか。パララックス等のスクロールエフェクトはその気持ちのいい動きを最大限に活かしています。勝手に再生する動画と違い、自分の操作で画面を動かしたり、好きなペースで進んだりできます。また、スクロールというシンプルな操作だけで、視覚効果を楽しめながらたくさん情報が得られるというメリットは言うまでもありません。
独特な情報の見せ方　一つのページに見せたい情報を全部提示することで、一般のサイトと違い、ページ遷移による待ち時間や感覚の分断が避けられます。また、ストーリー仕立てで見せたり、特別な空間を作り上げたりすることにより、統一した世界観の訴求や実体験のような演出が可能になります。更に、スクロール動作に応じて必要なところに説明文や関連情報を入れ、サイト内階層を作る面倒や一体感を損なうこともなく情報提供ができます。

このような快感を覚えさせる操作と連続する展開は、ユーザーの感覚を刺激して「次へ、次へ」と促し、より多くの情報を閲覧するアクション・モチベーションに繋がるのです。するとユーザーは、自然と一定の時間にサイトに滞在したり、繰り返しコンテンツを閲覧したり、更にリピート来訪したりすることが期待できます。そして、Webサイトから得た素晴らしい体験というプラス的印象と共に、商品・サービス・コンテンツ内容も来訪者の記憶に残こすことができます。

実際にパララックスなどはどう利用されているの？

今まで述べてきたパララックスなどのスクロールエフェクトの特徴や利点を踏まえ、代表的な国内外のWebサイトをいくつか紹介します。【東京スカイツリー】パララックスサイトの中でも有名な東京スカイツリーのホームページ。トップページにアクセスすると、ファーストビュー（最初に見える範囲）には営業時間や新着情報、おすすめ情報が表示されています。一見普通のサイトに見えますが、スクロールしていくと、スカイツリーの構造を先端から眺めていく仕掛けになり、一押し情報や各部分の説明も動きに応じて出てきます。全体の長さを感じさせることで、建物の高さを強調する狙いです。このような高層建築物をはじめ、高い・長い物を紹介する時、パララックスといったスクロールエフェクトは非常に効果的な表現手法であり、相性◎です。【Mario Kart Wii Experience】こちらNintendoオーストラリアのマリオカートWiiのサイトはまたパララックスを利用した傑作です。スクロールは縦ではなく、道に沿って横また斜めに進むようになっています。滑らかな動きと遠近感の演出により、カートが疾走している様子を見事に表現でき、キャラクターの表情が生き生きに見えて臨場感とゲームの楽しさが伝わってきます。下部に車に乗っているマリオが今いる位置を知らせてくれるところも分かりやすくてユーザービリティが高いです。【KIRIN‐澄みきり】こちらは、「キリンじゃなくちゃつくれないものを、もう一度つくろう。」という社内スローガンを掲げ、商品へのこだわりをWebならではの力で表現した新商品「澄みきり」のスペシャルサイトです。シンプルで洗練された高級感のある特徴を最大限に伝えるため、ページ内の構成要素を厳選し、GIFアニメを活用したシネマグラフにパララックスを掛け合わせ、ゆれる泡や缶をつたう滴などで「味」への想像を促します。国際賞「ペンとアワード2013」で銀賞を受賞したパッケージデザインをはじめ、ブランドを豪華にお披露目しようとオープニングアクトで缶をアンベールする華麗な演出や、開発者の熱い言葉など、本気感が伝わる一ページに仕上げています。【LION‐HYGIAハイジア】こちらのサイトのスクロールは「上から下へ」ではなく、「下から上へ」というちょっと変わった構成になっています。上に目指す矢印の動きや子供たちのかわいらしい表情と仕草は、つまらなくなりがちの効能説明を楽しくしてくれます。視覚要素が多い分、ブルーとホワイトの配色で清潔感とすっきり感を表現しています。サイトの下部と上部両方にグローバルナビを配置するのも使いやすさへの配慮です。【KathArt】「KathArt」はデンマークのデザイン会社で、そのホームページをスクロールしていくと社内見学ツーアのような体験ができます。オフィスはもちろん、社員の様子や仕事の現場も見たりできます。楽しそうに働いている雰囲気は画面越しで見ている人たちに伝わってきます。また進行に合わせて社員のプロフィールを表示し、しっかり情報を伝えると同時に親近感を与えます。会社の個性と技術力がこの体験型サイトに詰め込まれ、臨場感が溢れて遊び心も満載ですので、是非一度見ていただきたいおすすめのサイトです。

このようなサイトを作る時の注意点は？

今までたくさんスクロールエフェクトの素晴らしさを語ってきましたが、実際にこのようなデザインを導入するにあたり注意しなければいけない点がいくつかあります。多くの情報が一枚のサイトに集約されますし、それに伴い多くの画像も使われますので、なるべくサイトが重くならないように工夫する必要があります。面白さ・インパクトのある視覚演出効果を実現するために出来るだけ多くの要素を入れたがる気持ちは分かりますが、情報の錯綜により本来の訴求ポイントが見失ってしまう懸念もあります。奇抜さを求めるあまりに、各要素の「妥当性」「必要性」を無視していないか、またその動きはユーザーに不快感を与えていないか等、ユーザーエクスペリエンス（UX）を考慮した入念な設計、チェックも忘れてはいけません。そして、スクロールというシンプルの操作ですべての要素を動かすことになっていますので、利用デバイス、利用環境によって利用体験が悪くなったり、利用できなくなったりする可能性もありますので、確認と対策も事前に考えなければいけません。更に企画から実装まですべての作業段階において、クライアント、企画スタッフ、デザイナー、エンジニア間のコミュニケーションがいつも以上に必要とされます。細かい動き、微妙なニュアンスやイメージ、表現効果などに対する認識の一致・統一が常に求められるからです。

まとめ

パララックス等のスクロールエフェクトを、単なる「格好いいから」「流行っているから」等の理由で導入したいという考え方は本末転倒です。一貫した訴求があり、流れ（ストーリー）が感じられるような演出が必要な場合や、商品・サービスの特徴に合いメリットを活かせる場合でしたら、パララックスなどのスクロールエフェクト手法を導入する意義があります。どんな手法でサイトを作ろうとしても、最も大事で最初に考えるべきことは、何を伝えるかということに変わりはありません。くれぐれも慎重に吟味し、最も商品・サービスを分かりやすく、魅力的に伝える方法を選んで頂きたいです。

■本コラムの元記事はこちら
「パララックス」をはじめとする「スクロールエフェクト」の魅力とは