デザイン その他

2024.02.02

Webデザインにおけるアニメーションについて考えてみた〜目的編〜

こんにちは!デザイナーのH.Abeです。

Webサイト制作をメインとしている私たちなので、日々たくさんのWebサイトに触れます。

その中で気づいたものが、「アニメーションがついているWebサイトって多いな〜」ということです。

そもそもなぜ動かしているのか?動かすことの理由とは?

そんなところがふと気になったので分析をしてみました。

アニメーションをつける理由とは?

理由はUX(ユーザーエクスペリエンス※)の向上ではないでしょうか。

※ユーザーがサービスやプロダクトを通じて得られる体験のこと

「動き」は注目を集めます。

効果的に用いることでユーザーを目的地に的確に導くことができたり、魅力的なサービスや商品、世界観をアピールすることができます。

実例と一緒に考えてみる

機能的なアニメーション

フコク生命公式サイト

ヘッダーのメニューが該当箇所です。

メニューにカーソルを重ねると詳細メニューが展開される動きがついており、ユーザーは目的の場所へと辿り着くことができます。

注目を集めるアニメーション

ハッピーキャップスプロジェクト | フェリシモ

「お申し込みはこちら」のコンバージョンに手書きラインが動くアニメーションがついています。

このようにすることで、ユーザーは自然と注目し、結果としてコンバージョン率の向上が見込めるのではないでしょうか。

世界観を表現するアニメーション

HAPPY OUTSIDE BEAMS | NEW BEPPU CITY GUIDE

別府といえば一番に連想されるのは「温泉」!ということで温泉の湯気のアニメーションが施されています。

ユーザーは「温泉」という身近なコンテンツを通して、BEAMSへの親しみやすさを感じることができるのではないでしょうか。

サイトの内容も砕けたものが多いので、ここで表現したい世界観は「親近感」「ラフさ」なのかなと考察しました。

まとめ

アニメーションをつける目的はUXを向上させることです。

様々な目的に合わせてアニメーションを施すことが重要です。

次回はアニメーションのメリット・デメリットについて分析をしてみようと思います!

この記事をシェアする

関連記事

  • 2023.12.28

    会社に置いてもらった本の話 その1

    制作

    デザイン

  • 2023.12.25

    ロゴもレスポンシブする時代

    その他

  • 2023.12.22

    文字の動きを考える

    その他

おすすめ記事

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

×