####こんにちは！ばーんです
今回はテキストにアニメーションを付ける方法をご紹介していきたいと思います！
(めちゃくちゃ簡単で時間はかかりません！)
完成品はこちら↓

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="ExaMbrL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="moveText">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/ExaMbrL">
  moveText</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#まずはじめに
今回の対象者は、
「JSがそれほど理解できていない」
「デザインツールはAdobeXD」
という方が対象です。

Illustratorを使用されていたりJSが理解できている方は
「SVG　手書き風」
等で調べていただいた方が良いものができるかと思います。

##全体の流れ

###1,AdobeXDでSVGを使用する
###2,SVGからアニメーションを生成する
###3,HTMLに貼り付ける

という流れでお送ります。参考サイトは最後に記載しています。
1,は結構つまずきましたが、後は一瞬なので最後まで見ていただけると幸いです。

##1,AdobeXDでSVGを使用する

そもそもSVGって何？という話ですが、要は画像の拡張子の1つです。
スケーラブル・ベクター・グラフィックスの略です（詳しくは[こちら](https://webkikaku.co.jp/blog/webdesign/svg_for_webdesigner/)）。
通常の画像と違うのは、座標データ（パス）を持っておりテキストエディタで開けます。
<img width="1322" alt="Screen Shot 2020-01-25 at 18.44.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/a16d0863-cf34-bccf-f619-97a860a155a9.png">

SVG作成の流れは
1-1、テキストを作り装飾を行う
1-2、アウトライン（画像）化する
1-3、SVGで出力する

###1-1、テキストを作り装飾を行う
<img width="556" alt="Screen Shot 2020-01-25 at 18.36.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/c34551f8-cda3-08ba-6067-7fc7f6a05946.png">
テキスト作成の様子

<img width="818" alt="Screen Shot 2020-01-25 at 18.37.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/e3cbf108-5387-b0ff-65d6-599c873b498c.png">
装飾の様子（フォントの変更と境界線を太くしました）

今回のやり方で重要なのは
####塗り（fill）を無くし境界線をつけることです
今回のやり方では塗りがついているとアニメーションとして動きません。
（動くやり方もありますが今回は割愛します）

###1-2、アウトライン（画像）化する
簡単です。「⌘＋8」でアウトライン化できます。以上
※アウトライン化は文脈によって様々な使われ方をするので、知らない！という方は調べてみるといいかもです！

###1-3、SVGで出力する
簡単です。「⌘＋E」です。以上
<img width="606" alt="Screen Shot 2020-01-25 at 19.25.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/869a64ac-8dc8-5430-b22c-eb2b1f6914e6.png">
強いてあげるなら、⌘＋Eで↑こうなるので、フォーマットをSVGにしてCSSを選択すればOKです。

##2,SVGからアニメーションを生成する
https://maxwellito.github.io/vivus-instant/
こちらを開いてください。
<img width="726" alt="Screen Shot 2020-01-25 at 18.38.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/11b1124e-3126-2808-ab31-2aa62e386685.png">
こちらの右側に先ほどできたSVGファイルをドロップするだけでOKです
そして、左下のdownloadを押していただければアニメーションSVGの完成です。

ちなみに、画面左側の項目でアニメーションの種類や時間を変更できます。
アニメーションを確認したい場合はupdateを押していただければ確認できます。

##1-3、SVGで出力する
2つ方法があります。
**①テキストエディタに貼り付ける**
**②画像として貼り付ける**
です。
<img width="1322" alt="Screen Shot 2020-01-25 at 18.44.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/16a11963-6720-76d6-77ae-05c44277643a.png">

どちらでも可能ですが、①のほうが後々CSSやJSで修正できます。デメリットとしては長文になりますが、まぁ折りたためば見た目的には問題ありません…
②の場合は画像としてのみ編集が可能です。また、ファイルパスの指定が必要になります。

###以上です！！！

初めてでも10分あればできたのではないでしょうか？
慣れれば1つ数分でできます。

発展系としてはCSSを指定して、塗りを付ける
JSで筆書きのように見せるも可能です。
（[自分のサイト](https://newportfolio-baan.netlify.com/)はこれで表現しています）

##さいごに
いかがでしたでしょうか？
個人的にはまずは動くものを作る！は大切だと思っているのでこのやり方を紹介させていただきました。
ただ、できれば参考サイトなどから辿っていただき、内容の理解を深めていただけるといいのかなーと思います。
（僕自身は10h近く理解に時間かかりました…しかも完全にはまだ理解できていません><）

###参考サイト
「SVG手書きアニメーション（CSSだけのやり方と、JSも含めたやり方紹介）」
https://commono.co.jp/2016/12/27/svg-handwrite_anime_part2/

「ハンドアニメーション（とても内容が理解しやすいです！）」
https://theorthodoxworks.com/front-end/svg-handwriting-animation-js/

「SVGアニメーションの作成サイト」
https://maxwellito.github.io/vivus-instant/

「SVGアニメーションの作成サイト　の説明サイト。分かり易いです！」
https://paiza.hatenablog.com/entry/2017/06/15/%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%8D%E8%A6%81%E3%81%A7%E6%89%8B%E6%8F%8F%E3%81%8D%E9%A2%A8%E3%81%AESVG%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%87%AA%E5%8B%95%E4%BD%9C
[cv:issue_marketplace_engineer]

####こんにちは！ばーんです
今回はテキストにアニメーションを付ける方法をご紹介していきたいと思います！
(めちゃくちゃ簡単で時間はかかりません！)
完成品はこちら↓

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="ExaMbrL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="moveText">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/ExaMbrL">
  moveText</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#まずはじめに
今回の対象者は、
「JSがそれほど理解できていない」
「デザインツールはAdobeXD」
という方が対象です。

Illustratorを使用されていたりJSが理解できている方は
「SVG　手書き風」
等で調べていただいた方が良いものができるかと思います。

##全体の流れ

###1,AdobeXDでSVGを使用する
###2,SVGからアニメーションを生成する
###3,HTMLに貼り付ける

という流れでお送ります。参考サイトは最後に記載しています。
1,は結構つまずきましたが、後は一瞬なので最後まで見ていただけると幸いです。

##1,AdobeXDでSVGを使用する

そもそもSVGって何？という話ですが、要は画像の拡張子の1つです。
スケーラブル・ベクター・グラフィックスの略です（詳しくは[こちら](https://webkikaku.co.jp/blog/webdesign/svg_for_webdesigner/)）。
通常の画像と違うのは、座標データ（パス）を持っておりテキストエディタで開けます。
<img width="1322" alt="Screen Shot 2020-01-25 at 18.44.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/a16d0863-cf34-bccf-f619-97a860a155a9.png">

SVG作成の流れは
1-1、テキストを作り装飾を行う
1-2、アウトライン（画像）化する
1-3、SVGで出力する

###1-1、テキストを作り装飾を行う
<img width="556" alt="Screen Shot 2020-01-25 at 18.36.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/c34551f8-cda3-08ba-6067-7fc7f6a05946.png">
テキスト作成の様子

<img width="818" alt="Screen Shot 2020-01-25 at 18.37.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/e3cbf108-5387-b0ff-65d6-599c873b498c.png">
装飾の様子（フォントの変更と境界線を太くしました）

今回のやり方で重要なのは
####塗り（fill）を無くし境界線をつけることです
今回のやり方では塗りがついているとアニメーションとして動きません。
（動くやり方もありますが今回は割愛します）

###1-2、アウトライン（画像）化する
簡単です。「⌘＋8」でアウトライン化できます。以上
※アウトライン化は文脈によって様々な使われ方をするので、知らない！という方は調べてみるといいかもです！

###1-3、SVGで出力する
簡単です。「⌘＋E」です。以上
<img width="606" alt="Screen Shot 2020-01-25 at 19.25.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/869a64ac-8dc8-5430-b22c-eb2b1f6914e6.png">
強いてあげるなら、⌘＋Eで↑こうなるので、フォーマットをSVGにしてCSSを選択すればOKです。

##2,SVGからアニメーションを生成する
https://maxwellito.github.io/vivus-instant/
こちらを開いてください。
<img width="726" alt="Screen Shot 2020-01-25 at 18.38.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/11b1124e-3126-2808-ab31-2aa62e386685.png">
こちらの右側に先ほどできたSVGファイルをドロップするだけでOKです
そして、左下のdownloadを押していただければアニメーションSVGの完成です。

ちなみに、画面左側の項目でアニメーションの種類や時間を変更できます。
アニメーションを確認したい場合はupdateを押していただければ確認できます。

##1-3、SVGで出力する
2つ方法があります。
**①テキストエディタに貼り付ける**
**②画像として貼り付ける**
です。
<img width="1322" alt="Screen Shot 2020-01-25 at 18.44.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534071/16a11963-6720-76d6-77ae-05c44277643a.png">

どちらでも可能ですが、①のほうが後々CSSやJSで修正できます。デメリットとしては長文になりますが、まぁ折りたためば見た目的には問題ありません…
②の場合は画像としてのみ編集が可能です。また、ファイルパスの指定が必要になります。

###以上です！！！

初めてでも10分あればできたのではないでしょうか？
慣れれば1つ数分でできます。

発展系としてはCSSを指定して、塗りを付ける
JSで筆書きのように見せるも可能です。
（[自分のサイト](https://newportfolio-baan.netlify.com/)はこれで表現しています）

##さいごに
いかがでしたでしょうか？
個人的にはまずは動くものを作る！は大切だと思っているのでこのやり方を紹介させていただきました。
ただ、できれば参考サイトなどから辿っていただき、内容の理解を深めていただけるといいのかなーと思います。
（僕自身は10h近く理解に時間かかりました…しかも完全にはまだ理解できていません><）

###参考サイト
「SVG手書きアニメーション（CSSだけのやり方と、JSも含めたやり方紹介）」
https://commono.co.jp/2016/12/27/svg-handwrite_anime_part2/

「ハンドアニメーション（とても内容が理解しやすいです！）」
https://theorthodoxworks.com/front-end/svg-handwriting-animation-js/

「SVGアニメーションの作成サイト」
https://maxwellito.github.io/vivus-instant/

「SVGアニメーションの作成サイト　の説明サイト。分かり易いです！」
https://paiza.hatenablog.com/entry/2017/06/15/%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%8D%E8%A6%81%E3%81%A7%E6%89%8B%E6%8F%8F%E3%81%8D%E9%A2%A8%E3%81%AESVG%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%87%AA%E5%8B%95%E4%BD%9C


続きを読むには単価診断を受けてください（30秒）