パララックスとは？

この記事を読むための時間：5分

パララックスとは

パララックス（英：parallax）とは、英語で「視差」という意味です。

視差は、二地点での観測地点の位置の違いによって、対象店が見える方向が異なることや、その角度差という意味があります。

つまり、視差を利用することで「部分ごとに動くスピードが違う」「動く方向が違う」「遠近差がある」といった効果を生むことができます。

この記事では、このパララックスの効果を取り入れたWEBサイトについて解説していきます。

パララックスサイト

パララックスサイトは、視差の効果を取り入れたWEBサイトのことを指します。

具体的には、パララックスによって、画面をスクロールした場合などに「別々の要素が動き出す」「スピード感が出る」「奥行きを演出する」といった効果が適用されているWEBサイトのことを指します。

パララックスサイトのメリット

WEBサイトにパララックスの効果を取り入れることで、どんなメリットがあるのでしょうか？

ユーザーの興味を惹きつけられる

パララックスによって動きのあるサイトを演出することができるため、通常の静的なサイトよりもユーザーの興味を惹き込みやすいというメリットがあります。

強調したい部分を目立たせることができる

サイトの中で強調したい部分にたいしてパララックス効果を付与することもできます。

そうすることで、強調したい部分をピンポイントで目立たせることも可能です。

オシャレなサイトになる

パララックスによってサイトに動きが出ることで、スタイリッシュなデザインのサイトにすることができます。

運営しているWEBサイトにたいして、ユーザーから「オシャレ」「かっこいい」というイメージを持ってもらいたい場合は、パララックスを取り入れるメリットが大きいでしょう。

ストーリー性を持たせたページにできる

ユーザーがページをスクロールするのに合わせて、コンテンツが現れるようなサイトにすることも可能です。

こうすることで、伝えたい順番にユーザーに情報を伝えることができます。つまり、「商品の写真→商品の説明」のように、ストーリー性を持たせた演出のサイトに仕上げることができます。

パララックスサイトのデメリット

反対に、パララックスを取り入れるデメリットにはどういったものがあるのでしょうか？

ユーザーが使いづらいと感じる可能性がある

パララックスの効果を大いに使って商品の魅力を訴求したサイトを作ったとしても、「情報量が多すぎてよくわからない」「見たいコンテンツを探し出せない」というユーザーがいる可能性があります。

特に、年配の方だと先進的なサイトの閲覧に慣れていない方が多いと考えられます。

そのため、ユーザーのターゲット層によっては、シンプルで整然としたサイトのほうが好まれる場合があるということを覚えておきましょう。

表示速度が遅い

画面いっぱいに画像を使ったり、アニメーションをつけると、その分表示されるまでの速度も遅くなってしまいます。あまりに重かったり表示速度が遅かったりするサイトは、せっかく凝ったサイトでもユーザーがすぐに離脱してしまいます。

そのため、ある程度パララックス効果を使いたい部分を厳選してサイトを作成するなどして、表示速度を落とさないよう気を配る必要があります。

制作コストが高い

単純に動きのあるオシャレなサイトにしたいと思っても、アニメーションのパターンは何万通りにもわたります。それを自分で制作するとなると、JavaScript等の高度なプログラミング技術が必要です。

さらに、WEBサイトの制作を委託する場合にも、静的なサイトのイメージを伝えるのに比べてイメージのすり合わせに時間がかかります。

また、昨今ではパソコンよりもスマートフォンでサイトを閲覧する人が多いため、スマートフォンとのレスポンシブ対応も必要となります。しかし、スマートフォンではパソコンと全く同じ難しいアニメーション等は入れられないため、パソコン版とスマートフォン版でそれぞれデザインを考えなくてはなりません。

パララックス効果を取り入れる際の注意点

パララックスサイトのメリットやデメリットを踏まえた上で、実際にパララックス効果を取り入れたサイトを作る際に注意すべき点について解説します。

データ量を多くしすぎない

パララックスによる効果を演出しようとしすぎて、画像やアニメーションなどのデータを多く使用しすぎると、サイトが重くなりユーザーの早期離脱にもつながります。

そのため、パララックスによる効果と、データ量のバランスに気を配ってサイト設計をしていく必要があります。

情報を詰め込みすぎない

パララックス効果によって主張したい情報がたくさんあるからといって、情報を詰め込みすぎてしまうと、結局何をアピールしたいサイトなのかユーザーにわかりづらくなります。

そのため、何を目立たせたいのかを明確に絞り込むことが必須です。

全てのページで使うことは避ける

サイト内の全てのページでパララックスを使ってしまうと、ユーザーに疲労感を与えてしまう可能性があります。

パララックスによる効果を最大限に活かすためには、あくまで限定的に使用することを意識しましょう。

パララックスが適しているサイトかどうかを検討する

サイトを閲覧するユーザー層によっては、静的でシンプルなサイトのほうが好まれる場合もあります。

そのため、自分のサイトが果たしてパララックスを取り入れることが有効であるかどうかは、事前にきちんと検討しておきましょう。

パララックスサイトの事例

ここでは、パララックスの効果を大いに活用したサイトの事例を見ていきましょう。

• FireWatch（http://www.firewatchgame.com/）
  サイトの上部にパララックスを取り入れています。ユーザーが画面を下にスクロールするにつれて、サイトの深部に足を踏み入れている感覚になるような効果を演出しています。
• The Boat（http://www.sbs.com.au/theboat/）
  パララックスのメリットでも解説した、ストーリー性のあるサイトを演出しています。サイトを閲覧しているユーザーは、スクロールするにつれて映画を見ているかのようなストーリーを感じることができます。
• Koshiki Stay（http://koshiki-stay.jp/）
  観光地の風景写真などがパララックスによって美しく配置されています。ただ写真を並べるよりも、パララックスによる動きがある分目に留まりやすく、観光地の素晴らしさをユーザーに強く訴求しています。
• SONICJAM（https://www.sonicjam.co.jp/）
  アニメーションをふんだんに利用した、先進的なコーポレートサイトになっています。この会社はIT企業のため、サイトを閲覧するであろうユーザー層ともパララックスの効果がマッチしています。

まとめ

事例で紹介したサイトをはじめ、パララックスサイトはオシャレで洗練されたイメージをユーザーに持たせることが可能です。また、ユーザーの興味を惹いたり、情報の訴求にも大きく効果があります。

その反面、すぐにコンテンツにたどり着きたいと考えているユーザーや、動きのあるサイトに慣れないユーザーにとっては不便さを感じさせてしまう可能性もあります。

そのため、自分の運営しているサイトにパララックスが必要などうか、しっかり検討した上で導入するようにしてください。