最近のWebサイトには、第一印象でユーザーの心を掴むためにファーストビューに動画や画像を大きく配置したりする「魅せる」サイトが多く存在します。
シンプルで使い勝手が良いサイトも良いですが、動きがあるサイトは見ていて楽しいですよね！
パララックスサイトは、要素ごとの動きの違いが面白くて無駄にスクロールをしてしまう自分がいます。
今回はユーザーをワクワクさせるような、パララックス効果を使っているサイトを調査してみました。
そもそも、パララックスとは？
スクロールした時に要素ごとに違うスピードで動かすことで、立体感・遠近感を演出することが出来ます。
画像やテキストのフェードや、拡大･縮小、回転など様々な動きをつけることが可能で、アニメーションを得意としています。”
文字で読むより実際に見たほうが早い！
ということで、いくつかパララックス効果を使用したサイトをご紹介します。
Mélanie F
こちらはシューズメーカーのWebサイトになります。色合いが華やか！
タイトルテキストが紡がれていくエフェクトが素敵ですね。
背景の丸や三角などの記号もスクロールに合わせて色が変わるので、商品の背景との統一感も出ています。
東京タワーに関するTwitterのツイートとともに、東京タワーの様々な写真を紹介するサイトです。
ツイートが下から上へ、泡のように上っていくのがなんだか感慨深いものがあります。
「朝」や「夕方」、「綺麗」など、特定のワードに反応してツイートを取り上げているようです。
東京タワーの色々な顔が見られるのも楽しいですね！
スカイガーデンヒル古田台
http://www.soken-home.jp/hiroshima/info2/
広島市西区のモデルハウスやモデルプランを紹介しているサイトです。
フェードのエフェクトしか使っていないのに、洗練された雰囲気が溢れ出ています…。
全くエフェクトを付けない場合とは、また印象が変わってきますね。
Every Last Drop
こちらは、私たちが一日に使う水の量が視覚的に分かるサイトになります。
ストーリー性があると、続きが見たいという衝動に駆られて、スクロールする手が止まりません！
パララックスは、ストーリー性を印象的に伝えることにも適しているということが分かります。
パララックス効果を使用する際に気をつけたいこと
今回、パララックスを使ったサイトを探していて、2点気になったことがあります…。
まず、多くのパララックス効果が盛り込まれたサイトだと読み込みに時間がかかってしまうということ。
そしてマウスホイールでの1回のスクロールに対する動きが小さいものだと、ユーザーを疲れさせてしまうということです。
ユーザーの大半はサイトの閲覧に対してスピード感を求めています。
読み込みが遅かったり、動きが小さかったりすると、ユーザーのストレスに繋がりかねません。
サイト制作でパララックスを使う際は、上記2点に気をつけていきたいですね。
まとめ
いかがでしたでしょうか。
サイトによって色々なエフェクトが使用されていて、見ていると楽しくなってきますね！
パララックス効果を使用したサイトはまだまだたくさんありますので、探してみると面白い発見が出来るかもしれません。
以上、新人デザイナーの堀井がお送りいたしました。
