CSSアニメーション

これまでは動きを付けるにはシステム負荷が高いJavaScriptが必要になっていましたが、CSSの進化により、CSSだけでアニメーションなどの動きを付与することが可能になりました。そのため、システムには少ない負荷で付加価値をつけることができるので、Webサイトをより魅力的なコンテンツにすることができます。

CSSアニメーションもデザインの一部

デザインにCSSアニメーションを絡めることでより魅力的な世界観を表現することができます。
たとえば、海関連のサイトでは横線を波のようにウェーブさせたり、装飾をゆっくり動かしたり、気泡を全体に散らばせたりと、デザインに躍動感・立体感が生まれるのでユーザーの興味を引くことが出来ます。

また、注目を集めたいボタンやコンテンツは、強い色を使ったり、大きくしたりなど見た目による表現は大切です。
そこで、CSSアニメーションによる動きを追加することで、ユーザーの目に留まりより注意を引くことができます。

コンテンツの邪魔にならず、ユーザーに分かりやすく伝えられるため、近年のWebサイトでは一般的になっています。

ユーザービリティの向上

ユーザーの動作に合わせて動きを演出することが出来るので、心地よい操作や見せ方が出来ます。
一般的に見るのが、スマートフォンサイトのメニューに使われている三本線アイコンです。
アイコンをタップすると×に変形したり、画面の横からメニューが表示されるので、ユーザーには直感的で分かりやすく表現することができます。

処理が早くて滑らかな動き

従来のアニメーションは主にJavaScriptを使用しており、処理が重いので環境によっては動きが鈍いことがありましたが、CSSアニメーションは処理が軽いので動きが滑らかに表現されます。
弊社ではマルチデバイスに対応できるCSSアニメーションをポイントに使用して魅力的なサイトを制作いたします。