ここ数年ご無沙汰だった雪が降り，溶けずに残った雪が氷となって，まだまだ足元を危うくしている今日このごろ，皆様いかがお過ごしでしょうか。今回も個人的に感じた，素晴らしいサイトの特徴をいくつかお話したいと思います。

コンサートツアー，50年の軌跡

Visualizing 50 years of The Rolling Stones

2012年に結成50周年を迎えたThe Rolling Stones（ザ・ローリング・ストーンズ）のコンサートツアーを視覚化したコンテンツ，『⁠Visualizing 50 years of The Rolling Stones』です。

ウェブサイトでは，1963年から2005年まで行われたコンサートの場所を線で結びながら，The Rolling Stonesがツアーで世界各国を移動した様子が視覚化されています。

年ごとにコンサートツアーの軌跡とその飛行距離が表示されますが，人気の高まりとともに，その規模が拡大していくのがわかります。50年間でThe Rolling Stonesが移動した距離は，約100万Km。このイギリスのロックバンドの偉大さが確認できるコンテンツです。

データの可視化は，新たなコンテンツを生むか

『Visualizing 50 years of The Rolling Stones』で表示される「The Rolling Stonesが移動した50年間のデータ」は，Wikipediaからデータを取得した位置情報のデータベースから，「⁠Cartodb.js」というJavaScriptライブラリを使って視覚化されています。

大量のデータを利用して視覚化を行うためには，当然，大変な手間がかかります。このため最近では，手軽に視覚化するためのウェブサービスや各種ライブラリも増えてきており，NYTimes.comの美しいインフォグラフィックなどで利用されている「D3.js」などは，大きな注目を集めています。

世の中には，目には直接見えない，数多くの情報が存在しています。こうしたライブラリの使用が広がることで，新たな視点から膨大な情報が視覚化され，今までにないコンテンツが誕生していくことを期待したいと思います。

意欲的なアニメーションプロジェクト

The Good Man

ブラジルのデザイナーPedro Ivo Hudsonによって制作された，実験的なアニメーションプロジェクト，『⁠The Good Man』です。

ウェブサイトでは，Husky Rescueの楽曲「The Good Man」（⁠歌詞を画面の下部に表示可能）に合わせて，単純ながら，雰囲気のあるアニメーションが展開されていきます。

CSSを使ったアニメーションは拡大するか

この『The Good Man』で展開されるアニメーションは，CSS3のAnimationプロパティを駆使しています。拡大や縮小，移動や回転といったシンプルな表現がほとんどですが，楽曲の歌詞に合った印象的なものとなっています。

こうしたアニメーションをCSSで制作する場合，動きをイメージしながら，animationプロパティの数値を設定していくのですが，複雑な動きを実現するのは非常に難しいため，制作を手助けする「Adobe Edge Animate」のようなツールが，続々と登場しています。

『The Good Man』では，「⁠Google Web Fonts」の利用や，画像が一切使われていないことなども注目すべき点ですが，個人的には，パララックス（視差）表現のように，こうしたCSSを使ったアニメーション表現が広がっていくかを注視していきたいと思っています。