欧州サッカー4大リーグ比較。HTML5使用インタラクティブ・インフォグラフィック

欧州サッカー四大リーグ インフォグラフィック html5 1

何かと比較されることの多い欧州サッカーの4大リーグ(プレミア・リーグ/リーガ・エスパニョーラ/ブンデスリーガ/セリエA)。

4つの切り口で比較したインフォグラフィックを紹介します。

欧州サッカー四大リーグ インフォグラフィック html5 2

インフォグラフィックはHTML5で制作されています。
Which is the World’s Best Football League?

比較1: Popularity

ソーシャル・メディアでのファン数、観客数、1試合あたりのテレビ平均視聴者数を比較しています。

たとえば観客数は。

欧州サッカー四大リーグ インフォグラフィック html5 3

比較2: Money

テレビ放映収入、選手の給料、賭け金額を比較しています。

たとえば選手の給料は。

欧州サッカー四大リーグ インフォグラフィック html5 4

比較3: Game

獲得タイトル数、FIFProワールド・イレブンに選ばれた選手数、1試合あたりのゴール数とカード数を比較しています。

たとえばゴール数・カード数は。

欧州サッカー四大リーグ インフォグラフィック html5 5

比較4: The Cost Of Being A Fan

チケットの価格、スタジアムでのドリンク価格を比較しています。

たとえばチケット価格は。

欧州サッカー四大リーグ インフォグラフィック html5 6

HTMLベースのインフォグラフィックである利点を活かし、インフォグラフィック内の個々の情報をSNS(Twitter/Google+/Facebook)に投稿できるようになっています。

欧州サッカー四大リーグ インフォグラフィック html5 7

それだけではなく、このインフォグラフィックを見て、四大リーグのうち一番だと思ったリーグを投票(Tweet)できます(と同時に、このインフォグラフィックを拡散する仕掛けに)。

欧州サッカー四大リーグ インフォグラフィック html5 8

Tweetの内容

Just seen this new #football infographic from @unibet – http://bit.ly/16CzG1Z – #LaLiga is definitely the #BestLeagueInTheWorld

静的な画像インフォグラフィックでは難しいレスポンシブ対応。

欧州サッカー四大リーグ インフォグラフィック html5 9

静的な画像インフォグラフィックと比べたときのWebインフォグラフィックの利点は以前書いた記事にまとめています。
Webデザインとしてのインフォグラフィック

プロフィール

櫻田潤
櫻田 潤(さくらだ・じゅん)

プログラマー、システムエンジニア、ウェブデザイナーを経て、2010年よりビジュアルシンキングを運営。あわせて、インフォグラフィックのデザインも始める。2014年、NewsPicksにインフォグラフィック・エディターとして参画。ビジュアルを用いた記事を多数、執筆デザイン。2017年よりNewsPicksのクリエイティブを統括。著書に『たのしい インフォグラフィック入門』『図で考える。シンプルになる。』ほか。