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

コンサートツアー、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を使ったアニメーション表現が広がっていくかを注視していきたいと思っています。

「形式は機能に従う」

Form Follows Function

アメリカ・ニューヨークのデジタルエージェンシー「First Born」に所属するインタラクティブ・デザイナー、Jongmin Kimによる実験的プロジェクト、『⁠Form Follows Function』です。

"アメリカ建築の三大巨匠"の一人である建築家Louis Sullivanの有名な言葉、「⁠形式は機能に従う（form follows function ⁠）⁠」をタイトルに用いたこのウェブサイトでは、HTML5のCanvas要素、CSS3のTransformプロパティ、JavaScriptなどを駆使した作品が公開されています。

クリックすると地面から生えてくる樹木やドラッグで揺らぎが変化する波、3Dのキャンベルスープ缶や渦を巻くタイポグラフィーなどの作品は、数年前にはよく目にしていた、Flashを使った実験的なウェブサイトを思い起こさせます。

試行錯誤が進める、技術の広がり

以前はFlashと比較にならなかったJavaScriptの描画処理も、GPUを併用するライブラリによっては、非常に高速な描画を実現するものが登場しています。最近では、池田泰延さんによるBlog『ClockMaker Blog』の「HTML5関連技術のWebGL(three.js)とFlash(Away3D)のパフォーマンス比較」が話題となりました。

現在、さまざまな場面で利用されているFlashは、「⁠ActionScript」によるプログラミング機能が強化された後、個人を中心とした実験的なウェブサイトが続々と登場したことで、その守備範囲を大きく拡大していきました。

ブラウザの対応状況などを考えれば、現時点で積極的にWebGLを採用するウェブサイトが広がる可能性は、まだまだ低いと思われます。とはいえ、"表現する"ために必要不可欠な描画の高速化が進めば、今後『Form Follows Function』のような実験的プロジェクトは増加していくことでしょう。

個人的には、「⁠今までFlash（ActionScript）を経験してきたユーザーによる、JavaScriptを使ったインターフェースの実装」という流れが、これから強くなることを期待しています。まだまだ"堅い"感じがするJavaScriptを使った各種インターフェースですが、こうした状況にも、これから少しずつ変化が訪れるかもしれません。

というわけで、今回も最後まで読んでいただき、ありがとうございました。それでは次回をおたのしみに。