名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

TEL.0120-038-517 CONTACT

NEWS & COLUMN

お知らせ・コラム

SCROLL

DESIGN

ホームページの魅力を高めるパララックスについて

2023
.07.04

ホームページの魅力を高めるパララックスについて

ホームページを制作する際に、競合他者との差別化を図るための手段としてアニメーションを取り入れている企業が数多く存在しています。中でもホームページをスクロールした際によく見られるパララックス等のスクロールエフェクトは、ユーザーに対して単調な印象を与えてしまわないための手段としてもよく用いられています。そんなメリットもある一方で、ホームページに取り入れる際に注意すべき点もいくつかあります。
今回は、パララックス効果のご説明と、ホームページに取り入れる際の注意点をお伝えします。

【目次】
1. パララックスとは
2. パララックスを取り入れる際の注意点
 a. 表示速度に大きな影響を与えない程度におさめる
 b. 操作性が損なわれるほどの多用は避ける
 c. ターゲット層を考慮する
3.今回のまとめ

パララックスとは

パララックスは、直訳すると「視差」という意味を持っています。ホームページにおけるパララックスは、スクロールに応じて要素ごとに異なるスピードのアニメーションを付与することで視差を生じさせ、立体感や奥行き、リッチさが感じられる手法です。
そんなパララックスを取り入れることによりホームページにアクセントを加えることができ、ユホームページのクオリティ向上に繋げることが可能です。
また、ホームページに視差効果を与えることによりホームページにストーリー性を持たせやすくなり、プレゼン資料のようにコンテンツひとつひとつを印象付けることが可能です。さらに、動きやストーリー性が生まれることでユーザーのスクロール意欲を掻き立て、操作に飽きることなくホームページの滞在時間も長くなります。
他にも、インパクトが大きいホームページはユーザーによって拡散され、多くのユーザーの目に触れる可能性があります。

パララックスを取り入れているホームページ:+ea is

パララックスを取り入れる際の注意点

上述のとおり、パララックスには様々なメリットがありますが、ここではパララックスを取り入れることによる注意点をお伝えします。

表示速度に大きな影響を与えない程度におさめる

ホームページは、ローディング時間が3秒を超えてしまうと半数以上のユーザーが離脱してしまうとも言われています。そのため、パララックス等のアニメーションはトップページや内容がリッチなページのみ取り入れるなど、表示速度に大きな影響を与えない程度におさめるよう心がけましょう。

操作性が損なわれるほどの多用は避ける

普段からホームページの操作に慣れているユーザーでも、パララックス等のスクロールエフェクトを多用しているホームページは思いどおりに操作できず、使いづらいホームページだと判断してしまうおそれがあります。また、全体的に大胆なアニメーションを取り入れた結果、ユーザーはホームページの見た目だけに気を取られて企業が伝えたい情報を伝えきれていない場合もあるため、パララックスの多用は避け、適切に取り入れるよう心がけましょう。

ターゲット層を考慮する

ターゲットの年齢層が高いホームページにむやみにパララックス等のアニメーションを取り入れてしまうと、アニメーションに慣れていないユーザーは受け入れられず、離脱してしまうおそれがあります。さりげない程度の動きであれば問題ありませんが、ダイナミックな動きはターゲット層を考慮した上で導入を検討しましょう。

今回のまとめ

近年は、ホームページにアニメーションを取り入れることが一般化してきており、パララックスも珍しい動きではなくなってきています。アニメーションの有無でホームページの印象に差が生まれるため、アニメーションを取り入れていない競合他社との差別化を図りたい場合の手段としてパララックスを活用している企業も少なくありません。
しかし、業種やターゲット層によってはアニメーションを取り入れない方が適しているホームページもあります。ただ格好良くしたいからといった曖昧な理由で取り入れるのではなく、本当にパララックスが適しているのか、また、なぜパララックスを取り入れるべきなのかを明確にし、デメリットも理解した上で取り入れるようにしましょう。

AUTHOR

著者情報

執行役員 デザイナー

N.H.

大学を卒業後、新卒で株式会社オンカに入社し、WEBデザイナーとしてコーポレートサイトやポータルサイト、採用サイト、ECサイト、LPなど様々な種類かつ多種多様な業種のホームページ制作にオールマイティに対応。現在は、取締役・デザイナーチームのマネージャーとしてWEBデザインのさらなる品質向上に尽力している。

  • カラーコーディネーター AD
  • フードコーディネーター 3級
  • WEBデザイナー検定エキスパート

PAGE TOP