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

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

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

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

「形式は機能に従う」

Form Follows Function

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

図7 Jongmin Kimによる実験的プロジェクト、⁠Form Follows Function』
図7 Jongmin Kimによる実験的プロジェクト、『Form Follows Function』
credit:Jongmin Kim

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

図8 HTML5のCanvas要素などを使った作品が、多数用意されている
図8 HTML5のCanvas要素などを使った作品が、多数用意されている

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

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

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

図9 Flashでも、以前は個人による実験的ウェブサイトが多数存在していた(画像はyugop.com⁠)
図9Flashでも、以前は個人による実験的ウェブサイトが多数存在していた

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

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

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

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

おすすめ記事

記事・ニュース一覧