ネットの世界ではやれHTML5だCSS3だと騒がれておりますが、そのHTML5を利用したワールドカップのインフォグラフィックを見つけたのでご紹介したいと思います。

≫ HTML5 Experiment: Visualizing the World Cup



HTML5ってのはHTMLの5回目になる大幅改定版の仕様で、XMLの0といった難しい説明は長くなるので、各自で調べて頂くとして（≫ Webの3つの問題を解決する「HTML5」とは何なのか – ＠IT）。今までは画像とかFlashを使わないと表現できなかったことがHTMLで表現できちゃうんだぜ、みたいなこともこのHTML5の新機能と言われていて、それを活用したのがこちら。



上段にあるのが各国の国旗、ファイナルに進んでいる国というのは、ワールドカップの歴史のなかで12ヶ国しかないんですね（ドイツと西ドイツを同一カウント）。で、この国旗にカーソルを合わせると、下段の各大会へとラインが出ます。これが、その国が決勝に進んでいる大会ということ。決勝で勝った場合は青、負けた場合は赤で表現されています。上図はブラジルにカーソルを合わせた場合のインフォグラフィック。すごくわかりやすいですね。

今度はカーソルを下段に合わせてみます。こうすると、大会ごとに決勝に進んで来たチームがどこの国かわかります。



こちらは1986年にカーソルを合わせたところ。西ドイツとアルゼンチンにラインが伸びているのがわかります。このように、大会ごと、また国ごとにワールドカップの決勝の歴史を振り返ることができます。以前紹介したコレも似たようなインフォグラフィックでしたね。

≫ これはすごい！W杯に出場する736人の選手がどこでプレーしているのか一目瞭然なFlash

サッカーのデータをこうやってわかりやすいインフォグラフィックで表現するの大好きです。しかもこれからはこうやってHTML5でやっちゃったりするんだから、すごい時代になったなーと実感します。

実際に触ってみてください
≫ HTML5 Experiment: Visualizing the World Cup


商品画像


インフォグラフィックス

商品副データ情報をデザインする視点と表現木村博之誠文堂新光社この著者の新着メールを登録する発行年月：2010年08月登録情報サイズ：単行本ページ数：255pIS...


Supported by 楽天ウェブサービス


・ヴェルディユースの小林祐希が何だかとてもイイ選手だった件
・浦和レッズのゴール裏は必ずコールや手拍子をしないといけない？
・記者会見での質問は、結構難しい。
・便器でサッカーが楽しめる素敵なアイテム
・ソックリすぎて見分けがつかない18人のサッカー選手たち