webサイトにロゴアニメーションを付けたい時、実装の方法3パターン

webサイトを制作していて、企業ロゴやちょっとしたアクセントにアニメーションを付けたいと思うことがあると思います。
実装したいアニメーションによって方法を検討する必要はあるかと思いますが、こんな場合にこんな方法を使えます、のようにパターン別で3つまとめます。

svg+cssのみで実装

svgを使って出来ることは、塗りと線の変化、拡縮・回転・移動、パスの変形、パスに沿ったアニメーション等CSSプロパティ、SMILで実現できることは基本的に実現可能です。
例えば、ロゴマークの縁取りをなぞるアニメーションを実装したい場合、使えます。

See the Pen
LOGO
by KOHIMOTO (@kohimoto)
on CodePen.

工程としては、①svgの用意②cssでアニメーションを付けるが必要になります。
 
どちらの方法も載っていて、一番わかり易かった参考記事を載せさせていただきます。
参考:ロゴをリッチに!?SVGアニメーションの簡単作成
 

svg+css+Vivus.jsで実装

文字のロゴマークを一文字ずつ手書き風になぞって書きたいという場合に効果的です。

See the Pen
LOGO vivus.js
by KOHIMOTO (@kohimoto)
on CodePen.

 
工程としては、①svgの用意②svgに合わせたマスクの準備③Vivus.jsとcssの設定が必要になります。

それぞれの作り方や設定方法については、下記2つのサイトがとても参考になりました。
参考1:Vivus.jsで絵描き風のSVGアニメーションをする
参考2:イラスト・オブジェクトの動き-SVGアニメーション2-
 

Lottie+cssで実装

svgだけではできない、少し複雑なアニメーションを取り入れたい時に便利です。

See the Pen
practice_Lottie
by KOHIMOTO (@kohimoto)
on CodePen.


 
工程としては、①Adobe After Effectsでアニメーション作成②アニメーションをjsonファイルで書き出し③Lottie-Playerを利用しソース化④css調整が必要になります。
 
それぞれの詳しい使い方は下記サイトが参考になりました。
Lottie使い方参考:webアニメーションをお手軽に!「Lottie」を使ってみた!
After Effects使い方参考:挫折させないシェイプレイヤー入門#01 -塗りと線について-【AfterEffects/チュートリアル】
 
 
どんなアニメーションを実装したいか、また、デザイナーなのかコーダーなのか等でも実装できる幅が変わってくると思いますので、用途にあった方法を見つけてみてください!

WORKS制作実績