No.003 SVGアニメーションについて

SVGアニメーションとは

SVGアニメーションはWebページ上で動きを表現する方法の一つです。
 
動きをつけることによって、
・ユーザーから注目されやすくなる
・メッセージ性が高くなる
といったメリットが期待できます。

SVGアニメーションの活用例

SVGアニメーションは特にWebコンテンツへの活用に適しています。
活用例としては以下のようなものがあります。

他にも、ロゴに動きをつける、グラフに動きをつけて直感的に分かりやすくするなど、SVGアニメーションには様々な活用方法があります。

ご覧いただいているメディア・ラボ公式サイトでも、
トップページや事業内容ページにSVGアニメーションを設置しています。
（一部に動画を使用しています）

SVGアニメーションの特徴

1．データサイズが小さい
なめらかな表現が可能な割にデータサイズが小さいという特徴があります。Webページの読み込み時間への影響を抑えながら動きを表現することができます。

2．ユーザーの操作に連動できる
「クリックしたら動く、形が変わる」など、ユーザーの操作とアニメーションを連動できるため、メッセージ性を高めることができます。

3．拡大・縮小しても画質が低下しない
大小にリサイズしても画質が落ちないため、ひとつのSVGアニメーションを様々な用途に使うことができます。 また、高解像度のディスプレイでも鮮明な画像を保ちます。

上記以外にも、カスタマイズによる自由度が高い、透過できるといった特徴もあります。

まとめ

SVGアニメーションは、Webページの読み込み時間への影響を抑えながらコンテンツに動きをつけることができる表現です。動きがつくことでコンテンツのメッセージ性が高まり、ユーザービリティやユーザー体験を向上させる効果が期待できます。

メディア・ラボ公式サイトのTOPページ内「制作の流れ」でも、各アイコンにSVGアニメーションを使っています。
>>TOPページ「制作の流れ」

少しでもご興味がありましたらお気軽にお問い合わせください。