Freelance Wanted
WEBサイトでは印刷物ではできないような動きのあるデザインを実現することができます。
WEBサイトに動きを付ける方法は動画・Gif画像など様々ですが、今回はSVGアニメーションを使用して効果的に動きを付けてるサイトをご紹介します！
目次
SVGアニメーションとは？
SVGアニメーションというのはSVG形式のベクターデータをもとにCSS・JavaScriptを使って動かすことを言います。
動画を入れ込むよりも軽量で、SVGなので拡大縮小しても劣化しないのがメリットです。
デメリットはプログラムや制作ソフトの知識が必要になるので導入に少し手間がかかることですかね。
見出しのSVGアニメーション
見出しにSVGアニメーションが取り入れられているサイトを紹介します。
同じ見出しのアニメーションでも違う動きをしています。
リライル会計事務所
このサイトでは見出しの英字箇所にSVGアニメーションを使用しています。
見た目的には細い線の英字で、線をたどって現れるような動きになっています。
こういった動きを取り入れることで目を引くので英字のみでもどういったコンテンツがあるのかをしっかり認識しやすくなります。
クリックのできるリストにもSVGアニメーションが使用されており、ホバーすると線に沿って色が変わるようになっています。
また、このサイトでは見出しのみでなくキャラクターのイラストにもSVGアニメーションを使用しています。
効果は目玉が動いたり、体が伸び縮みしたりしていています。
キャラクターごとに動き方が違うので単調にならず、会社の明るい雰囲気が伝わります。
READY for HAPPINESS SUMMER!
このサイトではメインビジュアルのキャッチコピーや見出しなどにSVGアニメーションが使用されています。
キャッチコピーと見出しはそれぞれフォントや動きが違います。
キャッチコピーは子供が手書きをしたようなフォントで少しずつ震えているような動きをしています。
子供の活発さを表現しているようですね。
見出し部分はゴシック体のフォントに一文字ずつ飛び跳ねて表示されるような動きをしています。
色もカラフルなのでポップなイメージになり子供服のサイトにピッタリな効果ですね。
また、風船やお花のイラストもゆらゆら動いたり、浮き上がるように上に移動する風船もあって可愛らしいです。
READY for HAPPINESS SUMMER! | B:MING by BEAMS
イラストのSVGアニメーション
イラストにSVGアニメーションが取り入れられているサイトを紹介します。
線を描くという点では同じですが、そのあとの表示の仕方によっての印象が違うので要チェックです。
東京のWeb制作会社 モノクス
このサイトは線イラストが少しずつ完成しているような様子を表現しています。
完成形になるまでに少し待ちますが、どんなイラストになるかが気になりつい見てしまいますね。
イラストで興味を引くことが出来ればそこに続く文章も読んでもらうことが出来るので、よりサイトの内容を伝えやすくなります。
ただ一筆書きのようなイラストになるのでお問い合わせフォームの握手しているイラストのように簡素なものなら問題ないですが、複雑なイラストになってくると書き込みが増えて線も複雑になるので使用するには注意が必要です。
滋賀県近江八幡市に根差す歯医者-クラウド歯科
このサイトではSVGアニメーションで枠を線で描いた後に色や画像が乗るようになっています。
例えばメインビジュアルですが、歯のようなカラチの枠が描かれた後にお姉さんと子供の画像が重なるような動きをします。
こうすることで見せたい静止画像にも動きを付けることが出来ます。
他にもお知らせの所で雲と丸のSVGアニメーションで描き、スタッフ募集のボタンを重ねることでボタンに目を向けさせクリック率アップに繋げることが出来ます。
下層ページでは見出しの背景に図形を表示させたり、見てもらい情報に目を向けさせる工夫がされています。
ロゴのSVGアニメーション
メインビジュアルにロゴが多く表示されるサイトはいくつもありますが、その中でも動きがあると会社のイメージがしやすくなります。
デイラボ
こちらのサイトはロゴの一文字一文字をフェードさせたり、色を変えることでロゴを表示させています。
「アスベスト分析結果を1DAYで」というキャッチコピーをもとに最初に「1DAY」を表示させ、「1」をフェードさせ「D」の色を一部変えるような演出にすることでキャッチコピーとロゴの両方の印象を付けるような動きになっています。
このようにロゴの意味を考えさせるような動きを付けているのはコーポレートサイトとしてとても有用な動きになっていますね。
アスベスト分析 ・検査 | デイラボ | 業界最速 | アスベスト調査サポート
合同会社KAMENOCO
こちらのロゴは甲羅の部分を描かれた後にしずくが落ちるようなアニメーションから全体が書かれていきます。
サイトのデザインはボタンなどで液体が飛び散るような図形を所々に使用しているのでサイトのテイストに合わせた動きになっていて良いと思いました。
「かめ」のようにコツコツと、こころに「のこ」るデザインを。 | 合同会社KAMENOCO
アイコンのSVGアニメーション
アイコンはものや表示数によっては動きを付けるとうるさくなってしまうので注意が必要ですが、ちょうど良い動きの付いたサイトを見つけたので紹介します。
Armadillo Home Warranties
このサイトではメインビジュアルのイラストと「Offerings」「Partners」のアイコンでSVGアニメーションを使用しています。
アイコンはサイズが小さいと動きが分かりずらくなるので余白を取って大きめに表示しています。
動きもあまり大きく動いたり、一つのアイコンで動いている箇所が多いと動きがうるさくなってしまい近くの文章などを読みたいときに気が散ってしまいます。
なのでこのサイトでは動きはシンプルに少しだけ、ゆっくり動かすことで周りの要素の邪魔をすることなく効果的な動きを付けることが出来ています。
Armadillo Home Warranties | The New Age Home Warranty Plan
ローディング画面のSVGアニメーション
ローディング画面にSVGアニメーションが取り入れられることでページ表示のラグなどを全く感じさせなくなるような効果のあるサイトを紹介します。
pixiv リクエストページ
「クリエイターとファンでつくる あたらしい”好き”のかたち」というキャッチコピーの好きを表したハートのアイコンの動きと、そこからそのハートがページタイトルのREQUESTの「Q」と重なりそのままメインビジュアルの背景が表示される流れがスムーズでとても良いと感じました。
他にも下の方に行くとシンプルにテキストとアイコンがあるだけのデザインですが、この箇所にスクロールしてくるとハートが反応するように動くのでワンポイントがかわいいです。
Basecamp Inc.
こちらのサイトではロゴのSVGアニメーションをメインビジュアルではなくローディング画面で行っています。
メインビジュアルではイラストに動きを付けているのでどちらもメインビジュアルではなく、ローディング画面と分けることでお互いに影響されることなく効果的な動きを付けることが出来ています。
飛び跳ねた丸からテントのイラストやテキストが合わらわれる動きがポップな感じでサイトの雰囲気と合っています。
Basecamp Inc. | Basecampは東京のデザイン インキュベーション スタジオです。
まとめ
いかがだったでしょうか？
ただのSVGを表示するよりも少し動きを付けてあげるだけで今どきで魅力的なサイトになります。
今回紹介したサイトのほかにも様々な動きを付けているサイトはたくさんあるので色々参考にして自分のサイトにも取り入れてみてください。
最後までお読みいただきありがとうございました。