Webデザイントレンド定点観測 動きのあるSVGを活かしたデザイン

Creative Cloud UI/UX & Web

Webデザイントレンド定点観測

東京都渋谷区でフリーランス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で作成されたグラフィックを利用しています。

Seize Your Power

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がバラバラに用意され、画面内で重ねられていることが分かります。

Native vs Web

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で作成されています。

Albino Tonnina

RBS 6 Nations Championship 2014

ロイヤルバンク・オブ・スコットランド (RBS) がスポンサーをしている6カ国対抗ラグビー大会の、過去の対戦成績を表しているサイト。

それぞれの輪の色が「過去の対戦でどちらの国が勝ったか」を表していることが分かると、A国とB国のどちらが何回勝っているかを直感的に知ることができます。

このシンプルなサイトのパーツもSVGで用意されています。

RBS 6 Nations Championship 2014

Nat-Ant

デュッセルドルフの会社でアートディレクターをしているNatassa Antonopoulouさんのポートフォリオサイトです。

スクロールに追随して動くアイコン類がSVGで用意されています。

Nat-Ant

Guillaume JUVENET

21才のクリエイターGuillaume Juvenetさんのポートフォリオサイト。

シンプルながら味のあるSVGのイラストが、手で描かれたようなアニメーションで表現される、かわいらしいサイトです。

Guillaume JUVENET – Portfolio

Kévin Lagier’s Portfolio

こちらも若い、22才のフランスの学生Kévin Lagierさんのポートフォリオサイト。

細部まで凝って作られたサイトのグラフィックは、ほぼすべてSVGです。

Kévin Lagier’s Portfolio

と、ここまで見てくると、ご自分のサイトでもSVGを使ってみたくなるかもしれませんが、実装の際に気にすべきことにも、ちょっと触れておきましょう。

IE8以下やAndroid2.3以下などのSVG非対応のブラウザのために、「フォールバック(代替手段への切替)」または「注意書きページ」などの実装の検討が必要です。

たとえば冒頭のDipublic — Digital Advertising Agencyのサイトでは、IE10以下でアクセスすると、このようなちょっとひどい文言の注意書きページを表示します。

サイトの想定ユーザーを完全に割り切って考える場合には、このような対応にしてしまっても良いかもしれません……。ご自分のサイトが求める成果に応じて、取り入れるかどうかジャッジしてくださいね。

また、モバイル端末向けの注意点として、回線速度、ブラウザの描画性能などの制限も気に留めておきましょう。

最後に、SVGを作成する際の参考記事も挙げておきますので、チェックしてみてください。

旧バージョンと新バージョンでこんなにも違うワークフロー Illustrator編 第3回:Web制作に役立つ機能強化 | Adobe Design Magazine

モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」

(了)

POSTED ON 2014.09.4