SVGでプロトタイプを作って学んだこと

会話のような勉強会

5月20日 SVG 勉強会 という小さな集まりに参加しました。株式会社まぼろしのデザイナーで、ポッドキャストにも出演していただいたこともある松田直樹さん（@readymadegogo）主催のイベント。勉強会という名だけあって、参加者全員が SVG のネタを持ち寄って、実装から可能性の模索まで様々な話題が挙がりました。

講師/生徒のような関係が生まれやすいセミナーのような場だと、どうしてもコミュニケーションが一方通行になりがちですし、参加側も受け身姿勢になってしまいます。 SVG に関する質問でもいいから、とにかく発表するという条件を設けることで、発表内容を聞きに行くという考えが薄れ、個々の積極性が増したと思います。発表者が話している最中もお構いなしに参加者が質問をするなど、会話をしているような発表時間はとても良いと思いました。

データを操作できる魅力を体感

勉強会では、SVG でプロトタイプを作ったときの経験を発表しました。プロトタイプツールは食わず嫌いでいろいろ試していますが、コードでコントロールできるのが魅力である SVG に何か可能性があるかもしれないと思ったのがキッカケです。d3.js のようなライブラリを使えば jQuery を使うような感覚で見た目や動きだけでなく、簡単なインタラクションも加えることができます。 SVG の書き出しにつかった Sketch ファイルも一緒にソースコードは GitHub のほうで公開されています。

yhassy/svg-d3-prototype

アセットをスライスしたり、最適化をしなくても、Sketch で書き出した SVG をそのまま使えるのは魅力です。要素の見た目や大きさを変えても、HTML の微調整をすることなく、結果を見ることができます。スクリーンをひとつひとつ PNG に書き出して、inVision のようなサービスへアップロードする手間もないですし、SVG なのでスマートフォンで確認することもできます。

JavaScript でできるマウスイベント（クリック、マウスオーバーなど）、CSS でできるスタイリングやアニメーションは d3.js で再現することができます。Sketch で作ったデザインのレイヤー名が ID として書き出されるので、それを指定することでコントールします。例えばアプリでよく見かける Navigation Drawer のような動きやインタラクションを数行のコードで実装することができます。アニメーションを組み合わせれば Fade in/out のような効果を入れた画面遷移も作ることも可能です。

Adobe Illustrator も同様にレイヤー名を ID として書き出すので、SVG でプロトタイプを作るというワークフローは Illustrator でも可能です。SVG でコントロールするには、レイヤーに意味付けしたり、要素の整理が必須になるので、構造化を念頭に置いたデザインをしてもらうための良いトレーニングになりそうです。

近年、便利なプロトタイプツールが次々と出てきているので、わざわざ SVG でプロトタイプを作るメリットより、デメリットのほうが際立つかもしれません。例えば SVG 内で要素をスクロールさせるには高い技術力が要しますし、せめて jQuery が書ける人でないと簡単に調整できるという実感が湧かないと思います。コードでデザインするなら Framer で良いではないかという意見もあるでしょう（有料という敷居はさておき）。

プロトタイプはひとつ作れば良いというものでもないですし、目的に応じてツールを使い分けるのが理想的です。また、仕事環境やデザイナーのスキルセットでツールの選び方が少し変わることがあります。幾つかのプロトタイプを自分のツールセットとしてもっている理由も、適材適所で効果的かつ早く作れるようになるためです。SVG プロトタイプはデメリットのほうが多いかもしれませんが、作ったものをそのまま動かせるというシンプルなワークフローと、ベクター画像以外の SVG の魅力に触れるには良い手法だと思います。

まとめ

あまり技術寄りの話をしないので、SVG 勉強会は良い口実になりました。SVG ファイルをプロトタイプとして使うのは多少無茶な手法ではありますが、ほどよい勉強と模索で SVG が動かせるようになれるので、ちょっとした達成感を味わえると思います。プロトタイプツールはたくさんありますが、意外とパソコン向けの Web サイトに対応していないのが少ないので、SVG プロトタイプツールはそういった場合に使える可能性があるでしょう。