MENU

パララックススクロールとは

目次

パララックスとは?

パララックス(parallax)、直訳すると「視差」という意味です。
もともと写真用語で、光学式ビューファインダーを使う際、レンズとの位置関係のズレにより、ファインダー視野と実際に撮影される画面にズレが生じる現象を指す言葉です。
Webの世界におけるパララックスとは、スクロールすることにより、複数のレイヤー(層)にある視覚要素を異なるスピードで動かすことで視差が発生し、立体感や奥行きなどの効果を演出する手法のことを指します。

パララックススクロールは動的に表示を切り替えて見せ、個性的な効果を表現することにより、サイトを印象づけることができるので、企業の特設サイトやキャンペーンサイトにも比較的多く使われます。

しかし、パララックススクロールの技法自体はすでに多くのサイトで採用されており、新しさは失われつつあります。
パララックスのメリットやデメリットを正しく理解した上で、独創的なレイアウトやUX設計をする必要があります。

パララックススクロールがもたらす効果

スクロールすることで生み出す演出に、ユーザーは興味を持ちやすくなります。
ユーザーに先進的なデザインを楽しんでもらい、能動的にスクロールしてもらえるため、SEO的にはサイトへの滞在時間が伸びる効果も期待できます。

パララックススクロールを使った制作上の注意

PCとタブレット・スマートフォンではスクロール量が異なったり、スクロールイベント発生中のJavaScriptの実行が制限されたり、CSSの条件が異なるため、ユーザエージェント(UA)やJavaScriptなどで分岐する必要があります。
そのため開発コストは一般のサイトに比べ多くかかります。

OSやブラウザ、機種ごとの対応分岐が増え、ページの読み込みが遅くなりユーザに不快感を与えるサイトにならないよう、UX(ユーザーエクスペリエンス)を考慮した設計も必要です。また、不必要なアニメーションにより、訴求したいものが伝えられなくなってしまわないように気をつける必要があります。どこのボタンを押せばいいのかユーザーが混乱してしまうようなデザインや文字の視認性、可読性にも気をつけましょう。

パララックススクロールを使ったサイト事例

ポルシェ

http://porschevolution.com/#1950s

金子眼鏡

https://www.kaneko-optical.co.jp/

Tillamook

https://www.tillamook.com/

Every Last Drop

http://everylastdrop.co.uk/

ブラウザのサポート状況

パララックススクロールのエフェクトを使うと、通常のページに比べ、多くの時間をブラウザチェックに費やすことになります。IE8以下などのCSS3に対応していないブラウザや、あまりシェアの高くないブラウザは対応しないようにするか、考慮したデザインにするなどの工夫をする必要があります。

2022 年 6 月 16 日にInternet Explorerの公式サポートは終了しました。
IPA情報処理推進機構
https://www.ipa.go.jp/security/announce/ie_eos.html

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

肩書:Webプログラマー兼Webライター
名前:ゆいちゃん
経歴:ライド株式会社ではコーポレートエンジニアとしてWebサイトの開発・保守・運用を行う。
   ホテルマン、総合商社で勤務していた経験から顧客との対話は大切にしている。
   IT系と育児系の情報収集が得意。
保有資格:ITパスポート
使用言語:HTML/CSS, PHP
好きな言葉:Done is better than perfect.

目次