パララックス

定義

パララックスは、画面をスクロールしたときに背景と前景を異なる速度で動かすことで、平面の 画面に奥行きを与える効果です。その仕組みは現実の体験からそのまま借りてきています。走る車の 中から窓の外を眺めると、近くの街路樹はビュンビュンと速く通り過ぎるのに、遠くの山はゆっくりと ついてきます。このように距離によって動く速さが変わる現象が、私たちの目に遠近感を生み出します。 ウェブでも同じで、遠い背景はスクロールよりゆっくり動かし、近い前景は速く動かして速度に差を つけると、複数の層がそれぞれ違う距離に置かれているかのように立体的に見えます。

なぜ重要か

パララックスがうまく使われると、特にページ最上部のヒーローセクションに強い没入感が生まれます。 スクロールに合わせて層が微妙にずれながら動くと、画面が生きているような印象を与え、ユーザーが ページに長く留まってストーリーに引き込まれます。ただし、この効果は諸刃の剣です。動きが過剰だと 画面がごちゃついて見え、ひどい場合は実際に酔いやめまいを引き起こすことがあります。スクロールは ユーザーがコンテンツを読むために行う基本の操作なのに、そこに過度な動きが重なると、肝心の 読みやすさが損なわれます。さらに一部のユーザーはこうした動きに身体的に敏感に反応するため、 派手さより快適さを優先する抑えた感覚が欠かせません。良いパララックスは存在を主張せず、 奥行きだけをそっと添えます。だからこの効果を使うかどうか決めるときは、どれだけかっこよく 見えるかよりも、すべてのユーザーが快適に見られるかを先に考えるのがおすすめです。

よくある間違い

• 速度差を大きくつけすぎることです。背景と前景が極端に違う速度で動くと、ほのかな奥行きではなく めまいとして伝わり、ユーザーが画面を長く見ていられなくなります。
• 動きに敏感なユーザーをまったく考慮しないことです。人によってはこうした効果でめまいや吐き気を 感じるのに、それを止める手段が一つもなければ、そのユーザーはページを快適に見られません。
• 本文のように情報を読む領域にまでパララックスを重ねることです。文章を読もうとスクロールして いるのに背景とテキストが別々に動くと視線が揺れ、伝えるべき内容に集中しにくくなります。

実務のヒント

• 速度差は小さくしましょう。背景と前景の動きの差がほのかなほどむしろ洗練され、奥行きは十分に 伝わりながらもめまいを起こさず、ほとんどの場面で安全です。
• 動きを減らしたいというユーザーのシステム設定である prefers-reduced-motion を必ず尊重して ください。この設定がオンなら、パララックスをオフにするかごく弱く抑えて、敏感なユーザーも コンテンツを快適に見られるようにする必要があります。
• パララックスはコンテンツを引き立てる背景の演出であって主役ではありません。ヒーローのように 第一印象が大切な一つ二つの場所だけに惜しんで使い、情報密度の高い本文の領域では思いきって外すのが よいでしょう。効果が目立つなら、すでに少し過剰なのだと考えるとちょうどよいくらいです。

関連概念