アニメーションをつけて動きのあるサイトにしたいとき。
いくつか方法はありますが、文字を手書き風に表現するなら今回の方法が最適です。
流れとしては、元となる「SVGファイル」を作成して、CSSの値で動きを調整するだけ。
JavaScriptを使うような高度なスキルは不要です。
その代わりとして覚えるプロパティは「全6種類」。プラスして「@keyframes(キーフレーム)」というアニメーションを細かく制御する構文が必要です。
少し複雑に感じたかもしれませんが、サンプルのコードもあるので、動きを確認しながら進めてみてください。
SVGとは
「SVG」とは、Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略。
正式名にも入っている通り、Adobe Illustratorから作るデータと同じ「ベクターデータ」です。
「ベクターデータ」は、対象を拡大、縮小しても劣化せず、きれいに表示できるのが特長。
そのため、イラストやアイコン、テキストなどを表現することに向いています。
唯一、違うのは「SVGファイル」が、テキストエディタで「コード編集可能」なところ。
HTMLと組み合わせることで、回転、移動などのアニメーションを、CSS、JavaScriptで細かく調整できるようになります。
複雑な形状になると、その分ファイルが重くなるので、サイズに気をつけて作成してください。
SVGファイルを作成
まずは元となる「SVGファイル」を作成していきます。
Illustratorを開いてアートボードを用意。「文字ツール」でテキストを入力します。

今回は手書き風にしたいので、日本語よりも英語にすると尚良しです。
つづけて「文字サイズ」と「フォント」を変更します。値は任意。
サンプルは、文字サイズを「200px」、フォントを「Segoe Script」にしています。

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

ここでレイヤーパネルに移り、グループ、レイヤーに名前をつけてください。

必須ではありませんが、本記事では構成を確認するために名前を入れています。
入力が終わったら、テキストを「アセットの書き出し」にドラッグ&ドロップ。

あとで分かりやすいようにファイル名を変更し、データ形式を「SVG」にしてから書き出します。

SVGをエディタで開く
作成した「SVGファイル」をエディタで開きます。
一面に並んだ数字はすべて座標を示していて、一つひとつの文字がパス(path)で区切られています。
サンプルの「animation」の場合は、path
が9つあればOK。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140.82 168.36"><g id="レイヤー_2" data-name="レイヤー 2"><g id="logo"><g id="animation"><path id="a" d="M144,72.85A15.7,15.7,0,0,1,142,79.93a46,46,0,0,1-4.25,6.89A149.52,149.52,0,0,1,125,102q-6.69,6.89-13.52, ....
<g id="レイヤー_2" data-name="レイヤー 2"></g>
のような部分は削除するか、名前を半角英数字に変えてください。
このままではアニメーションできないので、HTMLファイルを作ります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- ここに貼り付けます --> </body> </html>
作成したら「SVGファイル」のコードをすべてbody
の中に貼り付けます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140.82 168.36"><g id="logos" data-name="logos"><g id="logo"><g id="animation"><path id="a" d="M144,72.85A15.7,15.7,0,0,1,142,79.93a46,46,0,0,1-4.25,6.89A149.52,149.52,0,0,1,125,102q-6.69,6.89-13.52,..."/> </g></g></g></svg> </body> </html>
HTMLファイルをブラウザで確認。文字が表示されていればOKです。

CSSプロパティの確認
下表はアニメーションでよく使うプロパティです。
プロパティ | 値 | 意味 |
---|---|---|
fill | #000000 | 要素の色 |
stroke | #000000 | 要素の枠の色 |
stroke-dasharray | 数値 もしくはnone | 破線の間隔(数値は複数可) |
stroke-dashoffset | 数値 | 破線の開始位置(負の値可) |
stroke-width | px /em /pt /pc /cm /mm /in | 線の太さ(単位は省略可) |
animation
については指定できる値が多いため、こちらをご覧ください。
全て指定する必要はなく、このあとのサンプルコードの内容が入っていればOK。
プロパティ | 値 | 意味 |
---|---|---|
animation-name | 任意の名前 | アニメーション名 |
animation-duration | 0s | 所要時間 |
animation-timing-function | ease /ease-in /ease-out /linear | タイミング(複数可) |
animation-delay | 0s | 開始時間 |
animation-iteration-count | 1 | 再生回数 |
animation-direction | normal /reverse /alternate /alternate-reverse | 再生方向(複数可) |
animation-fill-mode | none /forwards /backwards /both | 実行前後の状態(複数可) |
animation-play-state | running /paused | 実行と停止(複数可) |
animation-timeline | 指定した任意の名前 | アニメーション名を指定 |
その他に下表のプロパティで調整できます。
プロパティ | 値 | 意味 |
---|---|---|
fill-opacity | 0~1 | 要素の色の透明度 |
stroke-opacity | 0~1 | 要素の外枠の色の透明度 |
stroke-linecap | butt /round /square | 線端の形状 |
stroke-linejoin | miter /round /bevel | 角の形状 |
CSSでアニメーションを設定
最後にCSSでアニメーションを実装していきます。
HTMLファイルのhead
にスタイルを読み込ませます。
<link rel="stylesheet" href="./css/style.css">
CSSファイルには以下のコードを貼り付けてください。
これで文字が縁取られ、塗りの色がついていくアニメーションの完成です。
/* --- 中央寄せ --- */ section { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 500px; /* 任意 */ } /* --- テキスト --- */ path { fill: none; /* 1,塗りの色 */ stroke: #000; /* 2,線の色 */ stroke-dasharray: 2000; /* 3,破線の間隔 */ stroke-dashoffset: 2000; /* 4,破線の開始位置 */ stroke-width: 1; /* 5,線の太さ */ animation: handwriting 3s ease-in forwards; /* 6,名前 時間 タイミング 終了後の状態 */ } /* --- アニメーション --- */ @keyframes handwriting { 0% { fill: transparent; /* 1,塗りの色 */ stroke-dashoffset: 2000; /* 4,破線の開始位置 */ } 50% { fill: transparent; /* 1,塗りの色 */ } 100% { fill: #000; /* 1,塗りの色 */ stroke-dashoffset: 0; /* 4,破線の開始位置 */ } }
下位バージョンのブラウザに対応するときは、ベンダープレフィックスをつけてください。
/* --- 中央寄せ用ベンダープレフィックス --- */ section { -webkit-transform: translate(-50%,-50%); } /* --- テキスト用ベンダープレフィックス --- */ path { -webkit-animation: handwriting 3s ease-in forwards; } /* --- アニメーション用ベンダープレフィックス --- */ @-webkit-keyframes handwriting { 0% { fill: transparent; stroke-dashoffset: 2000; } 50% { fill: transparent; } 100% { fill: #000; stroke-dashoffset: 0; } }
SVGをオンラインで作成
「SVGファイル」を作りたいけど、Illustratorがないのでできない・・・という人は、
代わりに「SVG Artista」というオンラインツールを使ってみてください。
使い方は、左のメニューからアニメーションを設定して、右上の「GET CODE」でコードをコピーするだけ。
その横にある「PLAY」を押せば、SVGデータを大きな画面で再生することもできます。
まだプロパティに慣れていない、実際に見ながら細かく調整したいときにとっても便利!

SVGを使ったサイト例
参考までに「SVGファイル」を使ったサイトをご紹介します。
こちらは、焼きたてカスタードアップルパイ専門店「RINGO」のWebサイト。
画面中央にある、RINGOと書かれたロゴタイトルがSVGの部分です。

手書き風の文字とは異なり、テキストがユニークなブロック体で、アニメーション色の強い動きになっています。
同じ英語でも、デザインの違いで、オリジナリティの高いサイトになりますね。
おわりに
「SVGファイル」の作り方から、アニメーション設定までの流れは以上になります。
今回は実務でよく使われるテキストを例にしましたが、
より複雑な形をした「建築物」や「OA機器」などに同じような動きをつけることもできますよ。
ものによっては一から作ると時間がかかるので、素材サイトの利用を視野に、作成、実装していきましょう。
アニメーションは、商品の世界観を作ることも、注目してほしい情報へ自然に誘導することもできる表現です。
制作するデザインに合わせて、少しずつ取り入れてみてください。