パララックス(Parallax)
ウェブサイトをスクロールしたときに表示画面が遅れて出てくるサイトを見たことは無いでしょうか。それによって立体感を生み出してサイトに迫力を出す演出をしています。この技術のことを業界用語でパララックスと言います。
単語として知らなかったと言う人も多いかと思います。知っていて使わないのと、知らずに使わないのでは大きく意味合いが異なるので、是非これを機会に覚えてください。上手く使えば自社の商品をより立体的に見せる事が出来る非常に優れた手段です。
[adstext]
[ads]
パララックスの意味とは
パララックスとは視差効果という意味で、ウェブ上でスクロールに応じて特定の要素を違うスピードで複数回表示させることによって物体が遅れて出てくるように感じる表現方法です。
パララックスの由来
語源もその通り視差という意味になるので、目の錯覚を利用した表現方法といえます。テキストだけではイメージが湧きにくい部分もありますが、いろいろなサイトを見て、発見してあれ？と感じる感性も重要です。
パララックスの文章・例文
例文1.サイトがパラドックス表示になっており臨場感を演出している
例文2.パララックスを不必要に使いすぎるとユーザにとっては使い勝手が悪くなってしまう
例文3.パララックスをどの程度かけるかによって見え方が大きく異なる
例文4.むやみにパララックスをかけても逆にサイトの反響が悪くなる
例文5.商品の奥行きまで感じさせたいのであればパララックスをかけるのは最適な手段だ
現時点でパララックスを利用しているサイトはそれほど多くありませんが、特に高級感を出したかったり、立体感や奥行きを幅広く表現したいという場合にはもってこいの施策になります。ただし、ただカッコイイからという理由だけでつけてもユーザにとってはUXが悪くなってしまうので、そこは考慮する必要があります。
- [adsmiddle_left]
- [adsmiddle_right]
パララックスの会話例
-
ふと思ったんだけど、Web上でスクロールした時に表示画面が遅れて出てくるサイトがあるけど、あれは何なんだろうか？知ってたりする？
-
知ってるよ！それはパララックスって言って「視差効果」の事を指すよ！
-
視差効果？
-
この説明だけでは伝わらないかもしれないけど、Web上におけるパララックスはスクロールなどの動作に応じて、複数のレイヤー（層）にある要素を異なるスピードで動かすことで「立体感や奥行きを演出」しているんだよ！
パララックスとは、視差効果とも呼ばれ、スクロール時の動きに演出を加えるようなデザイン手法です。
「部分ごとに動くスピードや、動く方向に差をつける」というイメージですね。
Webデザインではスクロール効果としてパララックスがよく取り入れられています。webデザインの勉強をしていたりスキルアップをしたい方は是非覚えておきたい知識ですね。
パララックスの類義語
パララックスは専門用語のため、類義語はありません。
パララックスまとめ
いかがでしたでしょうか？
これまで見てきたサイトの中で、あれはパララックスだったなと思い出すものもあるかと思います。ユーザのことを考えた上で使用するのであれば非常に効果的な施策ではあるので是非、試してみてください。
なお、パララックスを実際にどのように使用したら良いのかやどんな商材と相性が良いのかという点はWebサイト上にたくさん情報がアップされていますので、そちらを随時チェックしてみてください。利用にあたってはプラグインを導入することで案外簡単に出来ますので、導入の障壁はそれほど高くありません。自社の商材と比べてみて、相性が合うかどうかで決めてください。