ホームページやブログに「動き」を加えると、ユーザーの目を引くと言われています。でも正直、わたしも最初は「そんな派手なアニメーションなんて要る？」と軽く考えてました。
特にスクロールアニメーションは加減が難しく、やりすぎるとページが重くなったり、逆に何も伝わらなかったり…。
しかし、アニメーションの基本ルールに沿って適切に使えば、サイト全体の印象を大きく変える強力な武器になります。
今回は、そんな動きをつかった最新の実例サンプルをまとめてご紹介します。
「動き」を極めるWebアニメーション表現アイデア30選
ユーザーを魅了する「動き」を取り入れるコツ
動きを活用した魅力的なデザインがますます増えているのを実感。前回の実例サンプルまとめと比べて、控えめなスクロール追従型アニメーションに今後も期待です。
アニメーションを実装するときは、「UIアニメーションの基本ルール」に目を通しておけば、よりプロっぽい動きに仕上げることができます。
心地よさにこだわったページ遷移アニメーションのルールがこちら。
動きやアニメーションをウェブサイトに実装するときは、無料＆手軽に利用できるCSSツールがおすすめです。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
