Webでテキストアニメーションする方法

　この記事では，Webでテキストアニメーションする方法をご紹介したいと思います．ポートフォリオサイトなどをはじめとするオシャレなサイトでよく見かけるアレです．

▽ 今回作るもの（完成イメージ） ▽

大まかな流れ

　以上が大まかな流れとなります．プロ仕様のソフトを使って，より高品質なテキストアニメーションを実現するという方法もあるかとは思いますが，今回は無償で簡単に実現する方法をご紹介します．
今回ご紹介する方法でも，趣味の範囲で簡単にWeb開発を行う分には，満足いただけるかと思いますので，ぜひ最後までご覧いただけると幸いです．

実践編

下地となるSVGの準備

　今回のテキストアニメーションですが，残念ながら「テキストファイルや画像ファイルであれば，何でもOK！」という訳ではありません．
SVGと呼ばれる専用のフォーマットで用意してあげる必要があります．

　SVGとは，「Scalable Vector Graphics」の略であり，ベクター形式の画像フォーマットになります．一般的な画像フォーマットであるPNGやJPEGは，ピクセルで表現・管理されているのに対し，SVGはXML形式で表現・管理されています．従って，SVGはテキストエディタ（コーディング）によって画像を自由自在に編集することができるのです．

　さらに，今度はSVG形式であれば何でも良いという訳でもありません．後述の通り，Vivus.jsと呼ばれるライブラリを使用するため，これに対応する形式で準備する必要があります．

INKSCAPEのダウンロード・インストール

　まずは，SVGを作成するための専用ソフトである「INKSCAPE（インクスケープ）」をダウンロード・インストールします．以下のURLからダウンロードし，お使いの環境に合わせてインストールしてください．

https://inkscape.org/ja/

こちらは，無料でSVGを作成するための措置になります．既に「Adobe Illustrator（アドビ イラストレーター）」のライセンスをお持ちの方，より高度なデザインにこだわりたい方は「Adobe Illustrator」を使うという方法もあります．（Adobe Illustratorを使った具体的な方法は，他のブログ記事やYouTube等で多数紹介されています．）

テキストの作成

　Inkscapeを立ち上げ，左側のサイドメニューから「テキストツール」を選び，クリックします．
さらに，キャンバス上でクリックすると文字を入力出来るようになりますので，お好みの文字を入力してください．アルファベットの場合，フォントは筆記体（Olivia など）にすると映えるかと思います．

ストロークとパス変換（重要）

　テキストアニメーションの実装においては，ここが重要になります．この工程を怠ると，テキストアニメーションが実装できなくなります．

テキスト入力が完成したら，タブメニューの「オブジェクト → フィル/ストローク（ショートカットキー：Shift＋Ctrl＋F）」をクリックします．ここでは，文字の塗りつぶしを編集します．

　デザインが完成したら，SVGファイルを書き出してください．（Inkscapeの名前を付けて保存オプションから.svg拡張子を選択して保存することで，SVGを書き出すことができます．）

vivus.jsの適用

　Webページ・Webアプリケーションをnpm環境下（Next.js 等）で開発している場合は，例によって「npm install vivus」でライブラリをインストールすることができますが，この記事では初心者の方が手っ取り早く実装できるよう，最も簡単な方法をご紹介します．

　大変ありがたいことに「Vivus instant」というサイトが用意されています．
こちらのサイトに先ほど書き出したSVGファイルをアップロードします．逐一プレビューを確認できますので，パラメータ（持続時間やループの有無，アニメーションの種類 等）を調整しながら，自分好みのアニメーションを実装してください．

　満足のいくアニメーションが実装できたら，「Download」ボタンをクリックしてSVGファイルを保存します．これでアニメーション付きSVGファイルの完成です！