こんにちは！ブダペスト在住Webデザイナーのみほこです。
最近はアニメーションが素敵なサイトを良くみるようになりましたね。モーションデザインともいうそうです。2023年のWebデザインのトレンドの1つでもあったようです。
例えば、動くイラストレーション、画像スライドショー、ボタンがホバーで色サイズが変わる、ページの読み込みの時に色が変わったり動くアイコンが出る、などがモーションです。
では、このモーション、何のためにあるのでしょうか。
1. 操作のわかりやすさ、見やすさ
1つ目の理由は、ページ上での操作を分かりやすくすることと、コンテンツの見やすさのためです。
ボタンをホバーした時に色が変わるなど動きがあると、クリッカブルであることがわかりやすいですね。
私のサイトでも付けてますが、ページ読み込みの時に色が変わりふわっと切り替わるタイプのアニメーションは、ページの内容が全て読み込まれるまでアニメーションで非表示にしてくれる役割も果たしています。このおかげで、ファイルの読み込み遅延の影響で一瞬発生するカクカクっとした動きを見ずにすんで、目にも優しいです。
画像スライドショーは、いくつかの種類の画像を見せたいときに、勝手にスライドしてくれて、便利ですよね。
2.雰囲気の演出
2つ目の理由は、雰囲気の演出。そのWebサイトのビジネスの、ブランディングやデザインをより素敵に見せるために、アニメーションを追加します。
例えばiPhoneの製品ページだと、スクロールアニメーションや動画で製品が360度違う角度から見えるような動きをつけてますね。これはiPhoneのデザインでも操作面でもどこにも隙のない美しさを見せているのだと思います。
私のこのサイトでも、フッターの下に女性がタイピングしているイラストアニメーションを置いていますが、これもブランディングのためのちょっとした演出です。私のサイトは基本とてもシンプルなので、ちょっとした遊び心を細部に加え、見る人を楽しませる工夫をしています。
なお、これはLottie（ロッティ）といって、とても軽いサイズの動画イラストレーションなので、サイトのデザインが物足りない時のアクセントにぴったりです。公式サイトで配布しているものは、ものによって商用フリーで利用できるので、ぜひ取り入れてみてください。（2024年10月時点、利用の際は規約をご確認くださいね）
話がずれますが、このLottieはAirbnbの会社が作ったものなんです。エアビー創業者はデザイナーでした。
以上、主に2つの理由から、Webサイトでモーションを使用します。
機能的で、さらに雰囲気を良くし、お洒落に見せてくれるので、使用しない手はないですが、いくつか注意点があります。
目的もなしに何でもかんでもにモーションをつけると、訪れた人が混乱してしまいます。なぜその動きをつけるのかを言語化できるとベストです。
また、そのサイトのターゲットにもよるでしょう。若者向けのカジュアルなブランドだったら、アクティブにモーションをつけても面白くいいかもしれませんが、年齢が高めの方がターゲットの場合は、見づらいですし、モーションはごく最低限がベターです。これらは、デザインの基本でもありますね。
全ての素晴らしいデザインには、必ず意味があります。
上記守りつつ、遊び心も加えて、あなたの想いが伝わるWebサイトにしてみてくださいね。
それでは、また！
