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

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

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

「形式は機能に従う」

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を使った各種インターフェースですが,こうした状況にも,これから少しずつ変化が訪れるかもしれません。

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

著者プロフィール

Lançamento(ランサメント)

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