パララックス、カルーセル、アコーディオン…覚えておきたい、Webサイトの「動きの演出」 事例詳細|つなweB

Web制作会社との打ち合わせの中では動きの演出に関する専門用語が飛び出すこともあります。事前に把握しておくことで、より円滑な打ち合わせができるでしょう。

 

 シンプルなデザインのWebサイトでも、ちょっとしたアニメーション効果を加えるだけで印象がガラリと変わります。Web制作会社にとっては、動きのある要素が他との差別化を図る「腕の見せ所」だったりするのです。

一昔前までは、「Flash」という技術を使ってWebアニメーションを実装することが多かったのですが、すでにFlashはサポートを終了しています。代わって今は、JavaScriptを使ってWebアニメーションを実装することが増えてきました(動画やGIFアニメの埋め込みなど、それ以外の技術を使うケースももちろんあります)。制作会社からは「jQuery」「Pjax」「Ajax」という言葉が出てくるかもしれませんが、いずれもJavaScriptで使われる技術の一部だと捉えておくと、混乱が少なくなります。

Web制作のデザイン段階では、制作会社から動きの挙動について口頭で説明をされることがあると思います。その際、代表的なアニメーション要素の呼び名を覚えておくと、コミュニケーションが円滑に進むようになるでしょう。

 

 

Webサイトにアニメーション効果を取り入れると、上質感や躍動感など、訪問者の印象をコントロールすることができます。使い方次第で絶大な効果を発揮しますが、無闇に使いすぎると逆効果となってしまう可能性もあります。

1つ目は、肝心の内容が伝わりにくくなってしまう可能性です。過度なアニメーション効果に目が奪われて、内容が頭に入ってこないのでは困りものです。2つ目は、訪問者の行動を邪魔してしまう可能性。特に、すでに1度Webサイトを訪れたことがある人の場合、見たいコンテンツが決まっているのにアニメーション効果が邪魔をして先に進めないのはストレスにつながります。

Web制作のことを考えているときに印象的なアニメーションのWebサイトに出会うと、自分たちのWebサイトにも取り入れたくなってしまうかもしれません。しかし、Webサイト全体のブランディングやユーザビリティを損なわないように考えることも大切です。制作会社と相談しながら、程よいバランスで取り入れていくのがいいでしょう。

過度なアニメーション効果は、肝心の内容が頭に入ってこなかったり、何度も訪問した人にとってストレスにつながったりすることがあります
※Web制作・運用バイブル 2022(2021年11月8日発売)掲載記事を転載