アニメーションをつけて動きのあるサイトにしたいとき。
いくつか方法はありますが、文字を手書き風に表現するなら今回の方法が最適です。
流れとしては、元となる「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機器」などに同じような動きをつけることもできますよ。
ものによっては一から作ると時間がかかるので、素材サイトの利用を視野に、作成、実装していきましょう。
アニメーションは、商品の世界観を作ることも、注目してほしい情報へ自然に誘導することもできる表現です。
制作するデザインに合わせて、少しずつ取り入れてみてください。
