もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

自社サイトのヒーロー部分に、ちょっとした工夫でSVGアニメーションを取り入れました。これまでは静的なビジュアルを置いていただけだったのですが、「最初に目に入る部分でもう少し印象を残せないか？」と考えたのがきっかけです。

今回は、ロゴの線がスッと描かれながら、塗りがフェードインするアニメーション。派手すぎない動きにすることで、見た人の視線を自然に引きつけつつ、ブランドの雰囲気もさりげなく伝えられるように意識しています。

制作には「SVG ARTISTA」というWebツールを使っています。SVGデータをアップロードするだけでアニメーションを付けられるので、コードを書かくことなく、細かい調整も直感的にできます。

また、SVGは軽いため、パフォーマンスにも安心感があります。ちょっとした動きですが、サイト全体の印象は確実に良くなったと感じています。

SVG ARTISTAの使い方

https://svgartista.net
左メニュー、[OPEN SVG]でアニメーションさせたいsvgファイルを開きます。今回は、文字の線と塗りを順に描画するアニメーションなので、読み込むsvgも線と塗りが必要です。文字をアウトライン化して1pxの線を付けています。
左メニューのanimation typeは[Animation]に設定します。

svgが読み込まれると、ステージでアニメーションの確認ができます。左のメニューでアニメーションのdurationやdelay、easing、directionなどの設定が細かくできます。

右上、[GET CODE]クリックで、svgのコードとcssコードが取得できます。それぞれをコピーして適用箇所にペーストすれば、実装できます。今回の実装はこちら