Hatena::ブログ(Diary)

聴く耳を持たない(片方しか)

2015-05-24 SVGを使用してる企業・団体のサイトを22ヶ国、160件以上調べてみた

このダイアリーでは過去に何度かSVGの記事を書いているのですが、それに対する反響で

SVGって未だに使ってるところを見たことが無い

とか

いつになったら使えるようになるのか

永遠に普及しなさそう

みたいな意見をよく見かけます。

そうした反応にカチンときた……というほどではないのですが、納得してもらうには実例を挙げて反論するのが分かりやすいだろうな、と考えてSVGの利用状況を調査してみました。

かといって個人サイトの利用例を挙げるだけでは説得力がないでしょうから、著名な企業や団体でのSVG採用事例をリストアップしてみた次第です。


そしてもう一つの動機として、Webサイトの制作現場でSVGの導入を検討する際に、同僚や上司、またクライアントからの同意を得る・説得する手段としても、既に実際に利用している企業や団体を提示できれば話を進めやすいだろうな、……といった狙いもあります。

例えば

あの有名な会社やこの自治体でも今や使っていますよ

といった具体的な例示があれば、相手側からしても安心感があるでしょうし。


調査対象

冒頭にも書いた通り、採用事例として紹介できるようなリストを作成するのが目的ですから、個人サイトやWebデザイナーのポートフォリオのようなブログはここでは対象外とします。同様の理由でSVGを扱っていて当然なW3CMDNInkscapeなども除外、Wikipediaもそうですね*1

今回は企業や団体、政治家または自治体などのWebサイトを中心に独自に調査しました。

簡易目次



結果的にはタイトル通り様々な国でSVGの採用事例を収集したのですが、まずは代表的な企業や団体の事例をピックアップして紹介します。


代表的な利用の例

アメリカで採用事例

アメリカの企業の例として最も有名なのはAppleでしょう。

いわゆるRetinaディスプレイを導入したころから、積極的にSVGを採用しているのが特徴で、様々な部分にSVGを配置しています。Appleのロゴマークや各種アイコンを拡大してもキレイなままにできるのがSVGの特徴ですね。

Googleも、Analyticsではグラフの表示にSVGを使用していますし、


Trendsではグラフに加えて地図の表示にSVGを活用しています。

また他にもGoogle Mapsや、YouTubeなど色々なサービスで使っていますね。


一般の企業・団体

IT関連の企業以外だと、The New York TimesLos Angeles TimesThe Wall Street Journalなどの新聞社や、アメコミの出版社Dark Horse Comicsでも使われていますし、テレビ放送局ではCBSFOXもSVGを利用しています。

(The New York Timesのロゴを拡大したスクリーンショット)


他にも衣料品の分野ではGAP、食品関連だとコーヒーチェーンのStarbucksも。

(スタバのロゴである双尾の人魚セイレーンもSVG)

スポーツ関連

スポーツの分野ではメジャーリーグ全チームのWebサイトでロゴがSVGで作成されているのが大きな点でしょうか。

The Boston Red Soxの公式サイトより)


自治体や公共・教育機関、政治家

自治体だとコロラド州政府ペンシルベニア州政府ユタ州政府のページで使用されていますし、ロサンゼルス市観光局などや、美術館・動物園もヒューストン美術館ジョージア水族館でも積極的に活用されています。

特に意欲的なのが大学の公式サイトで、例えばミシガン州立大学ではpicture要素でSVGを使うなど他のサイトでは見られない先進的なSVGの利用をしています。


政治家では、大統領のオバマ氏、元国務長官のヒラリー氏、上院議員のマケイン氏の公式サイトで使われていました。特にヒラリー氏は大統領選も視野に入れているためか、ロゴのデザインをWebサイトでも大きく印象付けるように配置していますね。当然そこにもSVGが使われています。

その他、下院議員や州知事の公式WebサイトでもSVG採用事例は多数見られます。


アメリカ以外の国々

アメリカ以外の国々でも新聞社や美術館、大学などでSVGは使われていますね。


(ロゴにSVGを使ったイギリスの労働党バース大学


新聞社だと英国ではThe EconomistThe Guardianに加えて大衆紙The Sunも。他にはフランスのLe FigaroLe Monde、オーストラリアのThe Australian Financial Reviewなど。

(フランスの日刊発行の新聞 Le Figaro



(トルコの飲料品メーカーSIRMA

欧米以外の事例だと、インドの化粧品メーカーMaroma、トルコの飲料品メーカーSIRMAもありますが、特筆したいのはイランのリンク共有サービスBalatarinと、ロシアのポータルサイトYandexです。

(ロシアだとYahoo!やGoogle的なポータルサイトのYandex

いずれも当地では多くのアクセス数を集める大規模なサイトであるためか、SVGを積極的に使う点もそうなのですが、ラスター画像にはWebPを配置するなどフロントエンドのパフォーマンス向上を図る施策が参考になります。個人的にはイランのWeb事情はそんなに進んでいない……みたいな偏見があったのですが、思っていた以上にしっかりしていて驚きでした。


日本の事例

日本の企業だとトヨタ自動車SONYブリヂストンサントリーでSVGが使われていましたが、……実はいずれも国内向けのページでは未使用で国際版のWebサイトでのみ使用している、という状況です。


国内向けのページでも使用しているのはコニカミノルタ江崎グリコがあります。


新聞社では日本経済新聞日刊スポーツがロゴにSVGを利用していますね。



政党では民主党の公式Webサイトで地図の表示をSVGで行っています。

従来ではこうしたコンテンツはFlashで作成されるケースが多かったわけですが、こうしてSVGで作る事例も増えてくるかもしれませんね。


以上、いくつかの代表的な企業・団体などを取り上げましたが、この調子で紹介するときりが無いので以後は一気に並べていきます。


SVGを活用している企業・団体のサイト

それぞれ国別に並べ、22ヶ国、160件以上をピックアップしました。またSVGの利用形態によって分類し、

  • Inline SVG - インラインSVGで利用したケース
  • img要素 - img要素で利用したケース
  • CSS - 主にCSS background-imageなどで利用したケース
  • その他 - それ以外の要素での利用事例、object要素など

などの観点からそれぞれのWebサイトでの利用状況を分析しています。また「スプライト」については、従来のCSSスプライト的な手法か?SVG独特のuse要素を使った手法か?を示しています。


アメリカ
サイトInline SVGimg要素CSSその他スプライト
IT関連の企業
500px
about.me
Adobe Systems
AppleCSS
Autodeskuse要素
BMC Software
Box
CodePenuse要素
Diigo
Dropbox
Ello
Evernoteuse要素
Flipboard
Google
IFTTT
KickstarterCSS
LiveJournaluse要素 / CSS
MailChimp
MicrosoftCSS
Motorola
PayPal
Qualcomm
reddit
SoundCloud
Square
TechCrunch
TOPSY
TripAdvisor
tumblr
Vimeo
Vine
WANELO
サイトInline SVGimg要素CSSその他スプライト
新聞・出版社など
The New York TimesCSS
Los Angeles Times
The Wall Street Journal
Dark Horse Comics
National Geographic
テレビ局
CBS
FOX
その他、一般の企業
Abbott Laboratories
GAP
Macy'sCSS
Mondelēz
Nordstromuse要素
Starbucks
Urban Outfitters
Xerox
スポーツチーム
NYヤンキーズ 他、メジャーの全球団
NFL
New England Patriots
San Diego Chargers
Dallas Cowboys
サイトInline SVGimg要素CSSその他スプライト
政治家の公式サイト(敬称略)
Barack Obama - 大統領use要素
Hillary Rodham Clinton - 元国務長官
John McCain - 上院議員
Mark Kirk - 上院議員
Rand Paul - 上院議員
Rob Portman - 上院議員
Orrin Hatch - 上院議員
Bernie Sanders - 上院議員
Mike Lee - 上院議員
Paul Cook - 下院議員
Doris Matsui - 下院議員
Ken Buck - 下院議員use要素
Frank Pallone - 下院議員
Paul D. Tonko - 下院議員
Alma Adams - 下院議員use要素
アーカンソー州知事
アイオワ州知事
ノースカロライナ州知事
州政府、自治体関連
アイオワ州観光局
イリノイ州政府観光局CSS
コロラド州政府
コロラド日米協会use要素
サウスダコタ州観光局
ネバダ州観光局use要素
ペンシルベニア州政府
ユタ州政府
ユタ州立公園
ロサンゼルス市観光局
フィラデルフィア市観光局
ジャクソンビル市観光局input
要素
エルパソ市観光局
サイトInline SVGimg要素CSSその他スプライト
美術館・動物園など
ヒューストン美術館
J・ポール・ゲティ美術館
セントルイス動物園
ジョージア水族館
テネシー水族館
大学
デューク大学use要素
コーネル大学
シカゴ大学CSS
ブラウン大学
ミシガン州立大学picture
要素
南カリフォルニア大学CSS
マイアミ大学
ライス大学
イギリス
サイトInline SVGimg要素CSSその他スプライト
労働党
The Economist
The Guardian(The Observer)
The SunCSS
TESCO
バース大学
インペリアル・カレッジ・ロンドン
アングリア・ラスキン大学
シェフィールド大学
レディング大学
シティ大学ロンドン
ストラックライド大学
王立芸術院
チェスター動物園
イタリア
サイトInline SVGimg要素CSSその他スプライト
Corriere della Sera - 日刊新聞
La Stampa - 日刊新聞CSS
UCサンプドリア
ACチェゼーナ
カターニア市
ミラノ市
ミラノ・トリエンナーレ
オーストリア
ウィーン美術史美術館
BILLA - スーパーマーケットチェーンuse要素
オランダ
タイラース美術館
デン・ハーグ市美術館
NU.nl - オランダのニュースサイトCSS
ギリシア
アクアワールド水族館
スペイン
レアル・マドリード
FCバルセロナ
ソフィア王妃芸術センターCSS
チェコ
サイトInline SVGimg要素CSSその他スプライト
Albert - スーパーマーケットのチェーン
デンマーク
ECCO
ドイツ
Die Zeit - 週刊発行の全国紙
Bild - 日刊新聞
METRO - 業務用スーパー
ZKM - 美術館
ノルウェー
ムンク美術館
フィンランド
ヘルシンキ現代美術館
フランス
サイトInline SVGimg要素CSSその他スプライト
Le Figaro - 日刊新聞
Le Monde - 日刊新聞
Viadeo - フランスのSNS
トゥールーズ市
ニース市
ナント市
ベルギー
ベルギー王立美術館CSS
ロシア
Yandex - Yahoo!のようなポータルサイトCSS
トルコ
SIRMA - 飲料メーカー
イラン
Balatarin - diggのようなリンク共有サービス
オーストラリア
The Australian Financial Review - 日刊新聞
ビクトリア国立美術館
タロンガ動物園
南アフリカ
ツーオーシャンズ水族館
インド
Maroma - 化粧品などの会社
フィリピン
OLX.ph - マーケットプレイス
日本
サイトInline SVGimg要素CSSその他スプライト
トヨタ自動車
SONYuse要素
ブリヂストンCSS
サントリー
コニカミノルタ
江崎グリコ
はてな - はてなブログ
日本経済新聞
日刊スポーツobject
要素
神戸ビエンナーレ
民主党object
要素

続いて、このリストの選定条件の説明です。

ピックアップの条件

今回の条件としては、仮にアイコン一つだけであってもSVGを表示していればOKとします。しかしいくつか除外する状況もあります。

  • SVGを表示している
    • ただしSVGフォントは除外
    • 外部ライブラリ・サービスの場合は除外
    • グラフ表示のみの場合も除外
    • WordPressなどのテンプレートそのままの場合は除外

それぞれの除外の条件を解説すると

SVGフォントは除外

例えばデンマークの靴メーカー「ECCO」ではロゴにWebフォントを使っています。

@font-face{
	font-family:'ecco';
	src:url('/css/Ecco/ecco.eot');
	src:url('/css/Ecco/ecco.eot?#iefix') format('embedded-opentype'),
	url('/css/Ecco/ecco.svg#ecco') format('svg'),
	url('/css/Ecco/ecco.woff') format('woff'),
	url('/css/Ecco/ecco.ttf') format('truetype');
	font-weight:normal;
	font-style:normal
}

こうして複数のブラウザ向けにSVGを含め様々な種類のWebフォントを用意するのはよくあるのですが、SVGフォントはChromeではサポートされなくなり(Windows XP,Vista用を除く)、現状は余程古いiOS Safari・Opera向けでなければ設定する必要性がありませんし、近い将来使われなくなるのは確実です。

そのためSVGフォントだけではノーカウントとします。


外部ライブラリ・サービスの場合は除外

ルーブル美術館の公式サイトは一見SVGを表示してあるように思ってしまうのですが、

よく調べるとこれは各種Webサービスを表示する外部ライブラリAddToAnyによるものなので、こうしたケースは除外します。

他にはAddThisZooverGoogleMapsYouTubeの埋め込みでもSVGを利用していますが、同様にノーカウントです。


グラフ表示のみもノーカウント

ブラジルの経済紙「Valor Econômico」ではグラフにSVGを使っています。

これはグラフ作成ライブラリHighchartsによるもので、こうしたライブラリは他にもD3.jsが有名ですね、あとはFusionChartsなども。

このような使い方を今回のテーマに含めるかは悩む部分ではあるのですが、ここでの主眼はグラフ作成ライブラリ採用事例の紹介でないために除外することにしました*2

ただせっかくなので一応、採用事例をいくつか挙げると、

などで使われています。

WordPressなどのテンプレートそのままの場合は除外

例えばアメリカの下院議員John Kline氏の公式サイト

ではスマートフォンなどの幅が狭い状態でのハンバーガーボタンがSVGです。

そのため今回の条件に合致しているように見えるのですが、

これはルーマニアのIcyPixels社によるWordPressのテンプレート

を使っているだけなので、こうしたケースは除外します。

同様にIcyPixels社のテンプレートは、いずれも下院議員(敬称略)

の公式サイトで採用されていますが、同じく除外。



次はそれぞれ企業・団体のSVGの使い方について詳しく見てみましょう。

SVGの活用の仕方

SVGを利用する用途として最も多いのはロゴやアイコンですね。

SVGをロゴやアイコンに使う

ブリヂストンの海外版の公式サイト)

企業や団体のロゴにSVGを使うのは最もよく使われる手法です。

パソコン向け、携帯機器向けいずれの環境でも必ず配置する要素ですし、スマートフォンの拡大機能で大きく表示させてもくっきりして見れるのは重要な利点ですね。


アイコンではアメリカのジョージア水族館の使い方が上手く、

こうしてアニメーションの効果も加えられるのもSVGの利点の一つですね。


SVGを地図に使う

先に紹介した民主党もそうですが、

地図にSVGを利用するのもよく見られる活用の仕方です。

(米国上院議員Mark Kirk氏の公式サイト)


(イタリアのミラノ市


(チェコのスーパーマーケットのチェーン Albert

地図を表示するライブラリはGoogleMapsなど様々なものがあるのですが、こうしてSVGで作成すると実際の地形よりも分かりやすい形状で見せられるので閲覧者にも使いやすくなります。


SVGをグラフに使う

The Wall Street Journalではグラフの表示にSVGを使用)

除外する条件でも挙げたのですが、グラフの表示にSVGを使うのも定番の用途です。


その他

Googleで「天候 新潟」などと検索すると気象予報が表示されます。

その際の「風」の矢印でSVGが使われています。この矢印は同じSVGファイルで、風向きによって角度を変えたり、風速の合わせて大きさが変化するなど、拡大縮小に強いベクター形式の特性を活かした利用をしています。


まとめ

やたらと長い記事になりましたが以上、様々な国で調査したSVG利用状況でした。

冒頭で書いた通り、実際の制作現場でSVGを使いたい、という提案をしてもなかなか同意を得られない・クライアントに理解してもらえないケースは少なくないんじゃないかな、と思っています。そうしたときにこの記事で紹介した事例を元に説得の材料になれればいいかなー、と考えています。


蛇足その1

この記事のような調査結果は、誰が調べても同じ内容になりますから著作権法における創作性のある著作物としては扱われないため、自由にプレゼンなどに利用できます。


蛇足その2

ちなみに調査の方法は思いつく限りのWebサイトを片っ端から調べる。

それだけでした。

具体的にはアメリカの全50州、オバマ政権の閣僚、上院議員100人・下院議員432人の公式サイト、国内だと47都道府県、政令指定都市20市、参議院議員242人、衆議院議員475人の公式サイト、プロ野球12球団、J1&J2リーグ 40チームなどを調査しました。こういうリストは先行して誰か他にやっている人がいないかな?と一応調べてみたのですが、見つからなかったので自力でコツコツと。

例えばトルコでの採用事例を探すために、当地のプロサッカーチームの公式Webサイトを全てチェックしたものの、どこも利用していなかったので今度は各チームのスポンサー企業を洗っていったり。

結局、国会議員ではゼロで徒労感はありましたが。


蛇足その3

今回の調査で様々な事例を調べてまた別な発見もあったのですが、それは他の記事にする予定。


関連記事

過去に書いたSVG関連記事

SVGの学習に役立つサイトや書籍の紹介
SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました! 114個
SVG未対応ブラウザのシェアって今どれくらいか?2015年5月版


追加

  • 2015年05月25日 はてな(はてなブログ)を追加
  • 2015年05月26日 Googleでの利用事例を紹介

*1:ただAdobe社のようにSVG規格策定に関わった企業をどう扱うかについては悩む点ではありますが

*2:Highcharts,D3.js,FusionCharts以外のライブラリであっても

トラックバック - http://d.hatena.ne.jp/rikuo/20150524