美しい! 格好良い! インフォグラフィックスまとめ記事って最近よく目にしますね。
一目見ただけで引き込まれる作品ばかりで、自分も沢山ストックしてます。
ちなみに、インフォグラフィックスとはデータ・情報・知識をダイアグラム、チャート、グラフ、マップ、ピクトグラムなんかでビジュアライズしたものです。
インフォグラフィックスまとめも面白いんですが、検索すると分かるように
膨大な数のインフォグラフィックスがひっかかります。
ですので、今回はWeb屋らしくHTML5(XHTML) / CSS3 / JavaScript あたりで実装されている
インフォグラフィックなWebを集めてみました。まだそれほど数が多くないので...
Flashで作ったインフォグラフィックスも沢山あるんですが、今回はFlashは抜きで。
A WORLD OF TWEETS
世界中のTwitter利用頻度をリアルタイムでビジュアライズ
o(●´ω｀●)oすごいワクワクする。
Visualizing the World Cup
ワールドカップ決勝進出12カ国の歴史を振り返る
o(●´ω｀●)oワクワクする。
HTML5 & CSS3 READINESS
使用中のブラウザの対応状況をビジュアライズ
o(●´ω｀●)oワクワクする。
Dribbble
Dribbleのインタラクティブなインフォグラフィック
o(●´ω｀●)oうっとりワクワクする。
For The Record
o(●´ω｀●)oワクワクする。
NIPPON COLORS
日本の伝統色
o(●´ω｀●)oワクワクが止まらないよ。
themanyfacesof
o(●´ω｀●)oワクワクする。
Wicked CSS3 3d bar chart
o(●´ω｀●)oワクワクした。
LINE25 InfoGraphic
チュートリアル:http://goo.gl/3D3kc
globalwebindex
選択項目がグラフィックになっている。遷移しながら見れるのがいいね。
o(●´ω｀●)oワクワクした。
RailsTips
フッターが月ごとの記事数のグラフになっている。エレメントの一部がインフォグラフィックスなのは探せば沢山ありそうです。
ちょっぴりワクワクしたo(●´ω｀●)o
その他気になったインフォグラフィックス関連リンク
WTF is HTML5
Creative Examples Of Infographics
ツイッターの歴史と現状が一枚の絵でわかるインフォグラフィック
The Facebook Story In An Infographic
Color of the Year 2010: By The People [infographic]
色に関するインフォグラフィックス
思わず見入ってしまうほど優れたデザインのインフォグラフィック50枚まとめ
The Best Infographics
FlowingData
information aesthetics
調べるときりがないのでこのへんで。
インタラクティブなインフォグラフィックのWebつくってみたいですね。
インフォグラフィックスについてもっと知りたい人にはこの本がおすすめ。