Webデザイントレンド定点観測 動きのあるSVGを活かしたデザイン
東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。
閲覧端末の画面サイズ／ピクセル密度の多様化にともない、どのようなピクセル密度の画面でも描線のくっきりとした美しいSVGをグラフィックの要素として使うWebサイトが多く見られるようになっています。
表示環境にはまだ制限がある手法ですが、SVGをJavaScript等で制御したリッチなアニメーション表現で積極的に攻めるサイトも頻繁に目にする今日このごろ。誕生以来不遇な期間が長かったSVGですが、最近では比較的メジャーな雰囲気を感じられるようになってきました。
ということで、今月はSVGにJavaScript等で動きを加えたWebサイトを収集しましたので、さっそくご紹介していきましょう。
Dipublic — Digital Advertising Agency
まずは、こちら、イスタンブールの広告代理店のサイトから。
残念ながらこのサイトはIEでは閲覧できないのですが、ChromeやFirefox等でアクセスしてスクロールダウンしていくと、基板の配線のようなグラフィックが次々に展開されていきます。クリアな描線がスムースな動きで伸びていくのは、素直に気持ちよい視覚体験です。
HTMLソースを覗くと、挑戦的な「WARNING!」が記されていますが、その下部にSVGのソースが直接書かれていることが確認できます。
Dipublic — Digital Advertising Agency
Seize Your Power
国際的環境保護団体「WWF」の特設サイトです。
化石燃料に対する知識を伝えるため、縦に長い画面をスクロールさせることで、地球を掘っていくようなイメージを与えます。2カ所に埋め込まれた動画コンテンツ以外は、ほぼSVGで作成されたグラフィックを利用しています。
How sustainable is your smartphone? – interactive | Guardian Sustainable Business | theguardian.com
イギリスの大手新聞社「The Guardian」のサイトの、特設コンテンツです。「CLICK TO LAUNCH」をクリックすると「How sustainable is your smartphone? （スマートフォンの持続可能性は？）」と題したコンテンツを閲覧できます。
この中では、スマートフォンを分解し使用されている素材について分析していますが、それぞれのパーツがSVGで美しく描かれています。このような機械の描写には、SVGのシャープさが似合います。
How sustainable is your smartphone? – interactive | Guardian Sustainable Business | theguardian.com
Native vs Web
PeakfijnとFrontismeというオランダの会社が作っている、「ネイティブアプリかWebアプリか」をジャッジしてくれるサイトです。
質問に答えていくと、自分（が作るもの）がネイティブアプリとWebアプリのどちらに向いているかを教えてくれますが、それにともないアバターのグラフィックが変化していきます。
ソースを辿っていくと、「裸のアバター」「顔や髪などのパーツ」などのSVGがバラバラに用意され、画面内で重ねられていることが分かります。
Google Adwords: Es tiempo de vender más
スペイン語でGoogle Adwordsを紹介するページです。時計がモチーフのデザインで、分針秒針などもSVGで作られており、閲覧端末の現在時刻を表示してくれるようです。
時計内にマウスカーソルを重ねると、説明のイラスト（これもSVG）が表示されます。
クリックすると、そのカテゴリの説明が、SVGを使ったアニメーションで閲覧できます。
Google Adwords: Es tiempo de vender más
One Design Company – Chicago
シカゴにあるデザイン会社のサイト。
サイト上部のメイングラフィック（アニメーション）は、ソースを辿っていくと、1つのSVGファイルの中にすべてのパーツが収められており、それがJavaScriptでコントロールされていることが分かります。
One Design Company – Chicago Web Design
Volume 1: A Guide to Making Things
マンチェスターにあるFieldworkというデザイン会社が作ったコンテンツです。
「A Guide to Making Things（物作りのためのガイド）」というタイトルで、右下の丸いボタンをクリックしていくと、いくつかのトピックを読んでいくことができます。それぞれのトピックに添えられたSVGが、アニメーションになっています。
Volume 1: A Guide to Making Things
Albino Tonnina
「full-stack web developer」なAlbino Tonninaさんという方のポートフォリオサイトです。ページにアクセスすると、最初にスクロールダウンするように、アニメーションと言葉で促されます。
スクロールの動きにつれて、糸のような線が追随して描画されていきます。ちりばめられたイラストレーションがSVGで作成されています。
RBS 6 Nations Championship 2014
ロイヤルバンク・オブ・スコットランド (RBS) がスポンサーをしている6カ国対抗ラグビー大会の、過去の対戦成績を表しているサイト。
それぞれの輪の色が「過去の対戦でどちらの国が勝ったか」を表していることが分かると、A国とB国のどちらが何回勝っているかを直感的に知ることができます。
このシンプルなサイトのパーツもSVGで用意されています。
RBS 6 Nations Championship 2014
Nat-Ant
デュッセルドルフの会社でアートディレクターをしているNatassa Antonopoulouさんのポートフォリオサイトです。
スクロールに追随して動くアイコン類がSVGで用意されています。
Guillaume JUVENET
21才のクリエイターGuillaume Juvenetさんのポートフォリオサイト。
シンプルながら味のあるSVGのイラストが、手で描かれたようなアニメーションで表現される、かわいらしいサイトです。
Kévin Lagier’s Portfolio
こちらも若い、22才のフランスの学生Kévin Lagierさんのポートフォリオサイト。
細部まで凝って作られたサイトのグラフィックは、ほぼすべてSVGです。
と、ここまで見てくると、ご自分のサイトでもSVGを使ってみたくなるかもしれませんが、実装の際に気にすべきことにも、ちょっと触れておきましょう。
IE8以下やAndroid2.3以下などのSVG非対応のブラウザのために、「フォールバック（代替手段への切替）」または「注意書きページ」などの実装の検討が必要です。
たとえば冒頭のDipublic — Digital Advertising Agencyのサイトでは、IE10以下でアクセスすると、このようなちょっとひどい文言の注意書きページを表示します。
サイトの想定ユーザーを完全に割り切って考える場合には、このような対応にしてしまっても良いかもしれません……。ご自分のサイトが求める成果に応じて、取り入れるかどうかジャッジしてくださいね。
また、モバイル端末向けの注意点として、回線速度、ブラウザの描画性能などの制限も気に留めておきましょう。
最後に、SVGを作成する際の参考記事も挙げておきますので、チェックしてみてください。
旧バージョンと新バージョンでこんなにも違うワークフロー Illustrator編 第3回：Web制作に役立つ機能強化 | Adobe Design Magazine
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
（了）