スタッフブログ

コーディングラボのスタッフから、
日々のつぶやきをお届けします。

パララックスが効果的なサイトについて

Webで人気の視差効果とは

日本語では視差と訳されるパララックス。コンパクトカメラなどで見られる現象のことで、実際に覗いているファインダーと、写真を撮るための撮影レンズが離れているために、ふたつの画像には差が生じます。もともとはこの現象のことを言う写真用語だったのですが、今ではWeb用語としても使われています。階層のように重なった複数の画像を、それぞれ違う速さで移動させることによって、画面には奥行きが生まれます。これによりユーザーに立体感や遠近感を感じさせる演出効果をパララックス効果というのです。この効果を使ったWebページは大体において1つのページで作られています。そのため、次のページに移るための読み込み時間を少なくすることができ、ストレスフリーを実現できると言えるでしょう。ただし、1ページが大きすぎると逆に読み込み時間が長くなってしまうので注意が必要です。その他にも、ユーザーが自分で画面をスクロールなどすることによって、ユーザー自身のペースで動きを進めることができるので、操作しているという満足感を与えることができたり、次から次へと誘導させて情報をもたらしていることによって、サイトにとどまっている時間を長くさせたりする効果もあります。では、実際にどのようなサイトがこの効果を用いて制作されているのでしょうか。参考になるサイトを紹介します。

参考になるサイトとは

大塚製薬
http://www.otsuka.co.jp/ohn/
オロナインH軟膏の公式サイトです。パッケージがくるくると回り、ファスナーが開いたり閉じたりします。

株式会社コンテンツ
http://www.contents.ne.jp/
株式会社コンテンツの公式サイトです。動きが多い上に、いつまでもスクロールさせることができます。

パララックスはJava ScriptであるjQueryのプラグインを使ったり、Java Scriptを使わないでCSSで実装したりするという方法もありますが、自力でのコーディングが無理そうだと感じたなら、プロにコーディング代行を依頼するのも、手段の一つといえます。プロの手法を見ることは、今後の勉強のためにも役立つのではないでしょうか。