Webサイトに空間的な広がりを持たせるパララックススクロールとは？
トレンド
パララックススクロールは、平面的なWebサイトを「錯覚により立体的に見せる手法」です。サイトの方向性に合わせた使い方をすれば、商品やサービス、企業ブランドのイメージ向上に役立ちます。その一方で、画面の「動き」だけに注目されてしまい、「本当に伝えたいこと」が分かりにくくなってしまうおそれもあります。今回は、パララックススクロールを導入する際に知っておくべきメリットとデメリット、ならびに注意点について紹介します。
こちらもオススメ
パララックススクロールとは？
パララックススクロールは、Webページに複数のレイヤー（層）を使うことで、ページに奥行きを与える手法です。パララックス（parallax）は「視差」を意味する英単語で、平面的なWebページを錯覚により立体的に見せることを意味しています。
例えば、画面をスクロールさせる際に各レイヤーが動く速度を変化させると、画面に奥行きがあるように見せることが可能となり、立体感のある表現を実現できます。
パララックススクロールのメリットとデメリット
続いては、パララックススクロールの特長を紹介します。まずは、パララックススクロールのメリットとデメリットについて説明します。
パララックススクロールを使うメリット
パララックススクロールには、以下のようなメリットがあります。
- ストーリー性のある演出
- ユーザの興味を引く
- アピール力の強化
画面に奥行きを感じさせることで、表現が広がり、ストーリー性のあるWebサイトを演出できます。ゲームや動画に慣れた世代にとって、平面で表現されたコンテンツだけでは物足りなさを感じる場合もあります。パララックススクロールを利用することで、ユーザの興味を引く、ユニークな演出を実現できるようになります。また、Webサイトに面白みを加えられるため、アピール力の強化にもつながります。
パララックススクロールを使うデメリット
一方、パララックススクロールを使うことによりデメリットが生じる場合もあります。主なデメリットとしては、以下のようなものが挙げられます。
- ブラウザチェックに時間がかかる
- デバイスに合わせた設定が必要
- 画面が表示されるまでに時間がかかる
- 適応できないユーザもいる
パララックススクロールはブラウザによって表示結果が異なる場合があるため、Webサイトを作成する際は複数のブラウザでの動作確認が必要となります。また、複数のレイヤーを利用しているためデータ量が増大し、環境によっては画面表示が遅くなってしまうおそれがあります。表示速度の低下は、ユーザをいら立たせる原因にもなります。
パソコンとモバイルデバイスでスクロールの様子が異なったり、うまく動作しなかったりする場合は、それぞれの環境に合わせた設定を追加しなければなりません。そのほか、パララックススクロールの視差効果は「乗り物酔い」のような現象を引き起こす場合があることにも注意しなければなりません。その結果、ユーザがコンテンツの内容に集中できず、離脱を招く可能性もあります。
パララックススクロールを導入するときの注意点
パララックススクロールを使って魅力的なサイトを作成するには、以下のような点に注意する必要があります。
1.データ量の増大
パララックススクロールを導入するページは、縦長のページでないと効果が表れにくくなります。このとき、画像データを多くしすぎるとデータ量が大きくなってしまいます。パララックススクロールの効果とデータ量のバランスを見極めながら設計していく必要があります。
2.情報を詰め込み過ぎない
パララックススクロールを用いたページに情報を詰め込みすぎると、「何をアピールしたいページなのか？」が分かりづらくなります。よって、伝えたい情報をなるべく絞り込む必要があります。
3.限定的に使う
複雑すぎるパララックススクロールを用いたり、すべてのページにパララックススクロールを導入したりすると、ユーザに疲労感を与える可能性があります。効果を最大限にするためには、限定的な使用を意識しなければなりません。
4.視覚効果が有効なサイトであるかを検討する
Webサイトの性格によっては、視覚効果がかえって邪魔になるケースもあります。自社サイトのコンセプトと照らし合わせて、「パララックススクロールが有効であるか」を十分に検討しておく必要があります。
5.パララックススクロールを使用する意図を明確にする
なぜそこで立体的なイメージが必要なのか、パララックススクロールを使用する意図が明確でないと、ユーザに伝わるものも曖昧になってしまいます。単なる技術的な自己満足とならないよう導入の目的を意識します。
パララックススクロールを効果的に活用した事例
より具体的なイメージを膨らませるために、パララックススクロールを上手に活用したWebサイトの例をいくつか紹介しておきましょう。パララックススクロールの活用を検討する際の参考としてください。
Tio Luchín
映画のタイトルバックを思わせる文字配置と、個々に移動する美しい写真群がおしゃれです。手でつまめそうな立体感のおいしそうな食材も、グルメユーザたちの目を楽しませてくれそうです。
TOKYO BASE
URL：http://www.tokyobase.co.jp/
動画とパララックススクロールの巧みな組み合わせがクールなサイトです。長いひとつのページでブランドコンセプトの説明が完結しており、見る人を飽きさせません。上から重なる画面と下から出現する画面が、パララックススクロールの多様な使い方に気付かせてくれます。
まとめ：自社サイトに適した活用方法かを見極める
パララックススクロールを取り入れることにより、奥行きがあり、訴求力のあるWebサイトを実現できます。その一方で、表示速度が遅くなったり、画面が複雑になったりするなど、ユーザビリティーの低下が懸念されるケースもあります。訪問するユーザが明確な意図を持っている場合（情報を探そうとしている場合のように）、こうした視覚効果は邪魔になります。パララックススクロールを導入する際は、自社サイトとの親和性を十分に見極める必要があります。
こちらもオススメ
