Twitterでブログ更新情報を配信中

【CSS】SVGファイルの作り方!CSSを使った手書き風アニメーション

アニメーションをつけて動きのあるサイトにしたい時ありますよね。見ている側も楽しくなりますし、制作者側としても注目してほしい情報に誘導できますから、デザインに合わせてぜひ取り入れたいところです。

一方で、アニメーションと聞くとJavascriptを使ったり、覚えるCSSプロパティも多いのではと思う方もいるかもしれません。安心してください。元となるSVGファイルを用意して、いくつかの専用プロパティが分かるようになれば高度なスキルは不要です。

今回はコピー&ペースト用のソースコードもあるので、手順通りの操作で簡単スムーズにアニメーションができるようになりますよ!

SVGファイルとは

SVGファイルとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、イラストレーターで作成するデータと同じベクターデータです。このため、SVG化した文字や画像は拡大、縮小してもきれいに表示することができます。

テキストエディタでの編集が可能で、HTMLと組み合わせることでCSSやJavascriptを用いて回転や移動などのアニメーションをつけることができます。

SVGファイルを作成

まずは素材となるSVGファイルを作成していきます。イラストレーターを起動してアートボードを用意。ツールボックスから文字ツールを選び、任意の文字を入力します。手書き風にしたいので、英単語にすると尚良いです。

イラストレーターで文字を入力

文字の大きさとフォントを変更します。補助メニューからそれぞれ調整します。今回は大きさを100px、フォントをSegoe Scriptにしました。

フォントをSegoe Scriptに設定

選択ツールに戻して文字を選択し、右クリックします。メニューからアウトラインを作成をクリック。これでパスに変換(文字を図形化)されました。

文字のアウトラインを作成

つづいてアセットの書き出しパネルにオブジェクトをドラッグ&ドロップします。書き出すデータ形式の種類からSVGを選びます。

アセットをsvgで書き出し

ファイル名を分かりやすくlogoと入力し、データを選択してから書き出します。

アセット名をlogoと入力

SVGファイルを開く

作成したSVGファイルをエディタで開きます。数字はすべて座標を表しており、さらに一つ一つの文字がパス(path)で区切られています。今回の場合は8つあるはずです。

svgファイルをテキストエディタで開く

別途HTMLファイルを作り、SVGファイルのデータをbody内にコピー&ペーストします。

body内にsvgコードをコピー&ペースト

ファイルをブラウザで見てみましょう。文字が表示されていればOKです。

ファイルをブラウザで確認

CSSでアニメーションをつける

それではアニメーションさせていきましょう。CSSファイルを作成します。

cssファイルを作成

HTMLのhead内に読み込ませます。

cssファイルを読み込ませる

CSSファイルにはこちらのソースコードをコピー&ペーストします。ブラウザを更新して再度確認すると文字が縁取られ、塗りの色がついていくアニメーションになるはずです。

@charset='utf-8'

#logo {
position: absolute;
}

path {
fill: none; /*塗り*/
stroke: #000; /*線の色*/
stroke-dasharray: 2000;/*線の間隔*/
stroke-dashoffset: 0;/*線の開始位置*/
stroke-width: 1;/*線の太さ*/
animation: write 3s ease-in forwards;
-webkit-animation: write 3s ease-in forwards;
}

@keyframes write {
0% {
stroke-dashoffset: 2000;
fill:transparent;
}
50% {
fill:transparent;
}
100% {
stroke-dashoffset: 0;
fill:#000;
}
}

@-webkit-keyframes write {
0% {
stroke-dashoffset: 2000;
fill:transparent;
}
50% {
fill:transparent;
}
100% {
stroke-dashoffset: 0;
fill:#000;
}
}

SVGファイルをオンラインツールで作成

SVGファイルを作りたいけど、そのためにAdobeの契約をするのも面倒ですよね。そんなときはSVG Artistaというオンラインツールを使ってみましょう!

左側のメニューからアニメーションをつけて、最後に右上のGET CODEで作成したソースコードをコピーできます。その隣にあるPLAYでSVGデータを再生しながら調整できるのでとても便利ですよ!

SVG Artista公式サイト

SVGファイルを使った参考サイト

SVGファイルを使ったサイトも見ていきましょう。

RINGO

まずは、焼きたてカスタードアップルパイ専門店RINGOのWebサイト。画面中央にあるRINGOと書かれたロゴタイトルがSVGの部分です。手書き風とは異なり、各文字がユニークなブロック体でアニメーション色の強い動きになっていますね。

同じ英語でもデザインの違いによってオリジナリティの高いサイトへと変わります。

焼きたてカスタードアップルパイ専門店RINGOのWebサイト
出典:焼きたてカスタードアップルパイ専門店RINGO

TOKYO ART FLOW

次は二子玉川のアートフェスティバルTOKYO ART FLOWのWebサイト。ファーストビューを流れるピンクのバーがSVG部分です。こちらはイベントのシンボルであるバーが一定の間隔で動いており、記憶に残りやすい模様になっていますね。

文字の可読性を考える必要はありますが、範囲やパターン次第で与える印象も変わるでしょう。またJavascript以外にも繰り返しができる表現として使いどころは多いですね。

二子玉川のアートフェスティバルTOKYO ART FLOWのWebサイト
出典:TOKYO ART FLOW

SVGファイルの作り方からアニメーションするまでを解説しました。実際のサイトで使われている手法を見ると、文字だけではなく模様としても多く活用されることがわかりました。この他にも建築物やOA機器など、複雑な形をしたものを今回の文字の縁取りと同じ感覚でなぞるようにアニメーションで形作ることもできますよ。

SVGは素材サイトで配布されるデータとしてもよく扱われている種類ですから、イラストレーターを使った作成方法と合わせて利用してみてくださいね!