パララックスサイトという言葉をご存知でしょうか。
Webデザインのトレンドとして近年流行り始め、現在はこの手法を利用したサイトをよく見かけるようになりました。
パララックスの効果として代表的なスクロールエフェクトはアイディア次第でWebユーザーたちを魅了する可能性を多く秘めています。
今回は、Webデザインに取り入れるパララックスの効果、特徴やWebサイトを作る際の注意点について紹介していきます。もくじ
◆パララックスとは
パララックスとは、視差効果とも呼ばれ、要素ごとにスクロールした時の動き方をずらすことにより奥行きのある立体的なページに仕上げるデザイン手法になります。
多様なデザイン、レイアウトと組み合わせることができ、実装するためのプラグインもjQueryを中心に、今では様々なものがあるため比較的簡単に実装することができます。
要素やごとに印象を大きく変えられるので、Webデザインのクオリティを大きく引き上げることが可能になります。
参考までにこちらではパララックスのサイトを多く紹介しています。
◆パララックスの特徴
パララックスによる視覚効果の特徴について、またどのようなことが可能になるのかについて紹介します。
・デザインにアクセントを加えられる
パララックスを使うことでページに動きを持たせることができ、デザインにアクセントを加えることができます。
例えばスクロールするたびに要素が浮き上がってくるようなデザインのサイトは、次はどんな表示がされるのだろうという興味をユーザーに持ってもらうことができます。
背景画像についても、ただ表示するだけでなくパララックスを導入することでより魅力的なWebページに仕上げることができます。
・ストーリー性のあるページを作ることができる
パララックスはストーリー性のあるサイトと相性のいいデザイン手法になります。
テキスト中心で表現する以上に、画像や動画、アニメーションを使って説明した方が分かりやすいということはデザインにおいては多々あり、そこにさらにパララックスを取り入れたデザインを作成するとオリジナリティの溢れる豊かなページを作成することができます。
・ユーザーを楽しませることができる
パララックスの大きな特徴はスクロールに応じたアニメーションなどの動きによってユーザーを楽しませることができる点です。
簡単なアニメーションをWebデザイン上で実装できるのはパララックスの特徴と言えます。
◆Webサイトを作る際の注意点
・なるべくサイトが重くならないように工夫する
多くの情報が一枚のサイトに集約され、それに伴い多くの画像も使われます。
面白さ・インパクトのある視覚演出効果を実現するために多くの要素を入れがちになるため、情報過多により訴求ポイントを見失わないように気をつけましょう。
・各要素の「妥当性」「必要性」を無視していないかどうか
奇抜さを求めるあまりに動き自体がユーザーに不快感を与えていないか、ユーザーエクスペリエンス（UX）を考慮した設計になっているかどうかチェックする必要があります。
・デバイス、利用環境の確認と対策
スクロールというシンプルの操作ですべての要素を動かすことになっているため、利用環境によってうまく表示されなかったり、利用できない可能性があります。
・企画から実装まで作業段階における認識の一致と統一
細かい動き、微妙なニュアンスやイメージ、表現効果についてクライアントをはじめ、制作チーム内での認識の統一が必要なため、細やかなコミュニケーションが必要になります。
◆まとめ
パララックスを取り入れる際は、気をつけて導入しないとスクロールする度に動きがガタガタしてしまったり、ページの内容よりもアニメーションばかりに目がいき本当に伝えたい事が伝えられなくなる可能性があります。
Webデザインとしてのページの目的と作成する理由を忘れずに、デザイン手法についての知識を深めながらユーザビリティを考えたデザインを目指しましょう。