いま,見ておきたいウェブサイト

第99回 Visualizing 50 years of The Rolling Stones,The Good Man,Form Follows Function

この記事を読むのに必要な時間:およそ 2 分

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

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

Visualizing 50 years of The Rolling Stones

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

図1 ⁠Visualizing 50 years of The Rolling Stones』

図1 『Visualizing 50 years of The Rolling Stones』

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

図2 ツアーで移動したコンサートの場所を,線で結んで表現している

図2 ツアーで移動したコンサートの場所を,線で結んで表現している

年ごとにコンサートツアーの軌跡とその飛行距離が表示されますが,人気の高まりとともに,その規模が拡大していくのがわかります。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などは,大きな注目を集めています。

図3 インフォグラフィックなどで利用されている「D3.js」

図3 インフォグラフィックなどで利用されている「D3.js」

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

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

The Good Man

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

図4 Pedro Ivo Hudsonによるアニメーションプロジェクト,⁠The Good Man』

図4 Pedro Ivo Hudsonによるアニメーションプロジェクト,『The Good Man』

credit:Pedro Ivo Hudson

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

図5 楽曲に合わせた,シンプルなアニメーションが展開していく

図5 楽曲に合わせた,シンプルなアニメーションが展開していく

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

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

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

図6 Adobe Systemsが提供するアニメーション制作ツール「Adobe Edge Animate」

図6 Adobe Systemsが提供するアニメーション制作ツール「Adobe Edge Animate」

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

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。

コメント

コメントの記入