2016年8月20日（土）に開催された WCAN mini 2016 Vol.2 SVG Maniax in Nagoya で、制作したSVG絵本「ピヨスケとたまごのぼうし」についてライトニングトークとして発表しました。

もともと、私は学生時代は絵本専攻を選択していて、「Webなら読者が参加できる絵本を作れるのでは？」という思いも少し持ちつつこの道を選択した理由でもあったので、個人的には念願のWebでの絵本制作でした。

今回はSVGがテーマだったため、SVGの技術を使った絵本を制作しました。私が作成した絵本は以下のリンクからご覧いただけます（※ SVGの学習用の制作物のため、一部ブラウザで正常に動かないことがあります。CSSアニメーションを使っているので、IEやEdgeでは正常に動きません。デスクトップのChrome・FireFoxでは正常に動きます。Safariでは6ページ目が動きません）。

制作した絵本

• ピヨスケとたまごのぼうし

スライド

紹介できなかったスライドの分を追加しているので、当日参加されていた方もぜひご覧ください。

スライドの目次

• 使ったSVGテクニックの紹介
• いいところとつまずいたところ
  • パーツごとに動かしたい！
  • 歩かせたい！
  • たまごを割りたい！
  • SVG DOMアニメーション& pattern要素
• まとめ

SVGを使って絵本を作ってみて感じたこと

絵本を作ってみて改めて感じたSVGのいいところをまとめると、コードでもあり画像でもあるところです。

たとえば、スライドの中で紹介している「パーツごとに動かしたい！」は、class属性が適用でき、パーツ部品ごとに画像を書きださなくても良いというコードならではのメリットですが、「歩かせたい！」ではCSSのstepを使ったアニメーションなので、jpgやpngでもできるようなアニメーション方法です。

SVGは、コードでも画像でもあるので、複数の実装方法があり、その中から自分の知識や技術に合わせていいとこ取りできるのはとても良いところだと思います。

さらに、中にはSVGならではのアニメーションもできるので（例えばスライド中の「たまごを割りたい！」）、画像やCSSよりは表現の幅が広くなります。

ちょっとした修正作業について

SVGはコードでもあるので、あとの修正作業もとても助かった部分がいくつかありました。たとえば、線の太さを変えたいときは、あとからCSSの値を調整して変更ができるのでとても楽でした。

今後やってみたいこと

• レスポンシブ対応
• ドラッグ&ドロップなどを利用した読者が参加できる絵本の制作
• アニメーションにJSを使う

今回はSVGの良いところ、ということでとくに気にせずCSSのアニメーションを使ってしまいましたが、今度は各ブラウザに対応するためにもJSにチャレンジしたいですね。