ピックアップ

欧州サッカー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年12月よりNewsPicks編集部でインフォグラフィックス・エディターとして記事執筆。研修・インベント講師や書籍執筆も行なっている。著書に『たのしいインフォグラフィック入門』ほか。

12 Sep, 2013