スクロールを楽しくする、パララックスデザイン
パララックスを取り入れて飽きないページを作りたい！
前回は、ページ遷移のない縦長のページに人気があることをご紹介しました。
ページが長いと閲覧に疲れてしまうため、スクロールアニメーションを取り入れ、飽きのこない工夫をすることもおすすめしました。
そのスクロールアニメーションのひとつに「パララックス」が挙げられます。よく聞く言葉ですが、具体的にどのようなデザインなのでしょうか。今回はパララックスデザインについてまとめてみました！
パララックスとは？
パララックスは「視差」のことです。
Webサイトにおけるパララックスデザインでは、スクロールによって各要素を異なるスピードで動かしたり、移動や拡大、フェード等のアニメーションを発生させたりします。そのように視差効果をつくることでWebページに奥行や遠近感を生み出します。
上手に取り入れることで表現の幅を広げ、スクロールのワクワク感や、会社・サービスの個性がより感じられるサイトをつくります。
具体的にパララックスがどのような動きになるのか、一部を簡単にまとめたものがこちらです。
パララックスデザインではこれらを応用して、サイトに合ったエフェクトの構成、動的なページに作りこみます。
パララックスデザインのメリット
パララックスでサイトにレイヤーや立体感、動きを作ることで、どのような効果を得ることができるのでしょうか。
- 面白い、心地よいアニメーションで最後までスクロールしたくなる
- 印象に残れば、リピート率の向上が期待できる
- サイトの世界観をより表現できる
- 凝ったサイト、個性的なサイトという印象でブランドのイメージアップに
- ストーリー性を持たせ、伝えたいことをアピールしやすい
- 滞在時間が延びることはSEO対策にも有効
スクロールアニメーションが面白いと、ユーザーはワクワクしながら読み進めることができます。「次はどんな風に動くのか」「読み進めるのが楽しい」等、楽しさや驚きを体感してもらえたら嬉しいですね。
また、上手に取り入れれば、伝えたいことを効果的にアピールすることが可能になります。分かりやすい説明、視線誘導、商品の訴求にも役立てられます。
パララックスデザインのデメリット・注意点
パララックスデザインはサイトに合わせて取り入れることで高い効果を得られることが分かりました。ですが、用途によってはユーザーにストレスを与えてしまうことがあります。導入にはいったいどのような点に気をつければよいのでしょうか。デメリットを挙げてみました。
- 表示速度が遅くなる
- アニメーションが大きすぎると読みづらくなる
- どのように操作すればよいかわかりにくいことも
- 制作期間やコストがかかる
アニメーションにJavaScriptを使用することが多いため、ページの読み込みに時間がかかることがあります。どんなに素晴らしいページでも、ページが開かれるのが遅ければローディング中にページを閉じられてしまうことも。「サイトはカッコいいけど、内容を読むのが面倒」ということの無いよう、気をつけたいですね。
また、動きが大きすぎるとそちらが気になって、内容に集中しにくくなることも考えられます。
パララックスデザインは今や珍しいもので無く、使えばよいというわけではありません。サイトのコンセプトに合わないもの、アニメーションばかり強調された内容が理解しにくいページは、ユーザーにとってはストレスになってしまいますね。
下記に注意点をピックアップしました。
- アニメーションを使いすぎないこと
- 最も訴求したいことを中心に考える
- 伝えるための設計を練ること
- 対象のユーザーを絞り、好みを考えること
新しいものに興味のある方なら面白いと感じてもらえることでも、サイト操作に自信のない方にとって、あまりに個性的なUIだと敬遠されてしまうでしょう。ユーザー層に合ったデザインを心がけることが大切ですね。
おわりに
平面のページが立体的な空間に変わることによって、よりサイトの世界観を表現しやすくなることが分かりました。また、「ワクワク」「楽しい」とポジティブな感情を引き出す仕掛けをつくり、長いページでも途中で離脱されずに読んでもらえるようなページ構成をしていきたいですね。
感情が動けば印象に残ります。
お客様にリピートされない理由の一つに、「忘れられてしまう」というものがあります。そのようなリスクも軽減できるのではないでしょうか。
小さなものからダイナミックなものまで「パララックス」には多様な表現があります。サイトのコンセプトを伝えるのにどのように取り入れるのが効果的かを踏まえて設計することが大切です。実装に時間がかかることもあり、制作の際にはぜひ希望するイメージをご相談いただければと思います。
無料相談
