前置き
以下の動画で扱った内容です
高評価とチャンネル登録の方、どうぞよろしくお願いします内容
手順
- 書きたい内容を決める
- 使いたいフォントを選ぶ (手書きフォント系 or 筆記体系がおすすめです)
- その文字を上から塗りつぶす感じでパスを作成する (直線ツールとアンカーポイント追加ツールのみで可能です)
- パスの線に着色する（塗りを着色すると少し違う動作になるのでお気をつけください）
- 元の下書き文字を削除
- SVG形式で出力
- SVG Artista にてモーションをつける
- SVGをhtmlに貼り付けられる形で出力し、貼り付け
- 同時に生成されるcssもコピーして貼り付け
- 完成！
詳細説明
3. その文字を上から塗りつぶす感じでパスを作成する
動画では一本パスで描画していますが、一本でなくても構いません
多本に分ける場合は、レイヤーツールを使用して、再生したい順にそのパスを並べていただき、SVGとして書き出していただければその後の動きは一本パスの場合と同じです
メモ :
文字のアウトラインを作成してそれを直接使えばいいのではないか、と考えたのですが、それは塗りつぶしの方の要素のため、うまくいきませんでした
8. SVGをhtmlに貼り付けられる形で出力し、貼り付け
動画にある通りの動作で、右上の [＜/＞Get Code] の部分をクリックし、左部分のSVG形式のところをコピーして、webサイトの使いたい部分に貼り付けていただければ大丈夫だと思います
9. 同時に生成されるcssもコピーして貼り付け
8 の動作と同じように、css部分を丸のままコピーしてwebサイトのcssファイルに貼り付けていただければ大丈夫です
まさか、告知・SNS拡散一切なしの初投稿の動画を投稿後2分で20回も再生していただけるとは思いませんでした
みなさん、本当にありがとうございます
しかしながら、この動画を見てくださった方から「こんなに短い動画でやり方がわかるわけがない」とのお言葉をいただいたため、短文ながら、Qiitaの記事にまとめました
Youtubeの方も見ていただけると幸いです
なお、この内容でも不足している、もっと詳しく述べてほしい、と考える方がいらっしゃいましたら、コメント欄 (Qiita側でもYoutube側でも結構です) にその旨を書いていただけると幸いです
今後ともよろしくお願いします