初日のキーノートの冒頭、Internet Explorer 9のHTML5対応を紹介するデモンストレーションの中で、異彩を放つクリエイティブが紹介されました。面白法人カヤックが提供する「SVG女子（Girl⁠）⁠」です。

SVG女子とは？

SVG女子とは、その名のとおり、SVGで描かれた女子を表現したクリエイティブです。
Internet Explorer 9がサポートしたSVGやHTML5のGPUアクセラレーションを活用したSVGレンダリングによるアニメーションとなっており、IE9の進化を表現したキャンペーンサイトになっています。
「⁠SVG女子がなぜ生まれたのか？」「⁠SVG女子の世界デビューの感想は？」「⁠この次の展開は？」などSVG女子の全貌について、面白法人カヤックJavaScriptエンジニアの吾郷協氏に伺いました。

世界デビューしたSVG女子

Q： まず始めに、MIX11のキーノートで紹介された感想を教えてください。

吾郷： まず、紹介された作品の中で「最も異彩を放っていたなぁ」というのが率直な感想です（笑⁠）⁠。紹介されたとき、会場からどよめきがあがったのがすごく嬉しかったですね。SVGという技術、アニメのインパクト、どちらに対しても評価していただけたと受け止めています。

IE9の機能を最大限に活用

Q： SVG女子はどういう経緯で誕生したのですか？

吾郷： 2010年07月に日本マイクロソフト様から声がかかったのが最初のきっかけです。当時、Internet Explorer 9（IE9）のリリースに向けて「IE9はここまで進化したよ！」というHTML5のショーケースをつくってほしいというオファーを受け制作に至りました。
そのときの要望として、

• HTML5/CSS3/SVG対応　
• 新しいJavaScriptエンジン　
• 互換性と相互運用性

がありました。
とくに「HTML5/CSS3/SVGによる表現力やIE9のハードウェアアクセラレーション、新しいJavaScriptエンジンのパフォーマンスを活かした、世界を驚かすコンテンツを用意してほしい」という部分を意識し、さらに「日本から発信するコンテンツなのだから日本らしさにこだわりたい。そして、そこにHTML5ならではのエッセンスを入れてほしい」というニーズがあり、方向性が定まりました。
加えて、弊社カヤックの行動指針の1つである「漫画⁠」⁠、そしてCool Japanと言われる分野の1つ、ジャパニメーションをIE9の機能をフルに活かして表現する企画ということを落とし込んでいったところ、今の「SVG女子」の原型が誕生しました。

コマを活かしたSVGの表現力

Q： 日本らしさ、インパクト、技術、これらの組み合わせからSVG女子が誕生したのですね。SVG女子というネーミングもとてもユニークですね。
それでは、SVG女子の特徴について教えてください。

吾郷： 技術的な面では、IE9がサポートしたSVGやHTML5のGPUアクセラレーションを活用したSVGレンダリングによるアニメーションという点が一番の特徴です。もう1つが、gihyo.jpでの連載でも取り上げられているjsdo.itをプラットフォームに使っている点です。jsdo.it上ではSVG女子アニメのタイムラインや構成も変更可能となっています。ユーザ参加型のパラパラAnimationができるのもSVG女子ならではですね。

Q： 今回、IE9に特化した作品とも受け取れるのですが、そのあたりは意識しているのですか？

吾郷： いえ、特別にIE9だから、ということを意識してはいません。というのも、IE9を含め、それぞれのブラウザが日々進化をし続けており、今は表現に関してブラウザ間の大きな差異はないと思っています。ですから、開発している最中も、IE9だからできる機能/できない機能というのを入れているつもりはないですね。ただ、繰り返しになりますが、当初のニーズにもあったように、IE9で強化されたGPUアクセラレーション、SVGの描画速度については意識しています。

Q： なるほど。では、SVGでアニメーションを作成するに当たってどのあたりを工夫しましたか？

吾郷： 最も工夫したのが、映像アニメーションをコマに落とす作業、「⁠アニメの最適化」です。元となるアニメは神風動画さんによるものです。これをそのまま使うとなると、データサイズが非常に大きくなり、サイトで扱うには無理があります。そこで、元のアニメの品質を落とさず、かつ、SVGで表現できる線画に落とし込むという作業を、弊社内の多くのデザイナーの協力を得て実現しました。
たとえば、線の本数を減らしたり、色味のある部分については特定の部分を塗った上で、レイヤを重ねて表現したりしています。こうすることで、元の素材が持っていた表現力は落とさずに、データサイズを落とすことができます。

未来のブラウザへの期待

Q： さて、今回のMIX11では、早くも次のInternet Explorerのバージョン、IE10のPlatform Previewがお目見えしました。エンジニアの視点から見て、Webブラウザの進化に対してコメントはありますか？

吾郷： IEだけではなく、他のブラウザに対しても言えることですが、これまでブラウザベンダが注力していた部分、とくにプログラマが不満に思っていた部分がかなり改善できていると感じています。たとえば、描画速度などは本当に改善されてきています。
開発者の視点では、ブラウザ上での開発効率に期待したいですね。Webの開発を行うとき、サーバサイドの開発環境が整っている一方で、フロントエンド側のツールはまだ少ないように感じています。たとえばJavaScriptのテストやデバッガツールです。このあたりは、ぜひブラウザベンダに注力してもらいたい点です。

4月26日、SVG女子日本デビュー！

Q： 最後に、日本のSVG女子リリースに向けてメッセージをお願いします。

吾郷： 今回、SVG女子を作成していてい感じたのが、技術的要素が強い部分については海外へのプロモーションを意識する必要があるなという点です。ブラウザの標準化が進むとともに、Webのグローバル化というのが進んでいます。
SVG女子に限った話ではないですが、弊社が提供しているwonderfl（wonderfl build flash online）やjsdo.itでも海外のユーザが多数おりますし、MIX11に参加させて頂き、これからはますます海外へ目を向ける必要があることを再認識できました。今後は、SVG女子のように世界公開の後に、日本公開という、日本のWebクリエイティブが増えていくかもしれません。

さて、SVG女子の日本公開はIE9日本語版のリリース日である2011年4月26日0時です。リリース後には、ぜひIE9日本語版をダウンロードし、SVG女子を楽しんでください。jsdo.itを使えばSVG女子をforkできますので、ぜひ皆さんに、新しいSVG女子を生み出してもらいたいですね。
最後に、今回、日本マイクロソフト様と一緒に仕事をさせていただいて感じたのが、いわゆるネットの大手企業と、弊社のようなベンチャー企業のコラボレーションというのは非常に相性が良いという点です。そこで重要なのが、アイデアと技術です。これからも、日本のクリエイター、ベンチャー企業が、どんどん世界に向けて情報を発信していくことを願っています。

• SVG女子：2011年4月26日0時公開
  http://jsdo.it/event/svggirl/