edge Recommends!
インスピレーションに溢れたサイトアイデア帳
今月号の記事
昨年から本格化し始めた「Flashにおける3D表現」が、新たな展開を見せ始めています。3DオブジェクトをFlashコンテンツ内で表示するという第一段階を経て、Flashコンテンツのユーザインタフェイスに3Dを上手に取り込んだサイトが登場してきているのです。3Dをユーザインタフェイス化することで、視覚的にはもちろん、操作性にも無限とも言える広がりと奥行きが生まれます。これまではWindows VistaやMac OS X LeopardといったOSレベルのインタフェイス手法だったのに対して、Flashが3D化することで、WebコンテンツやAdobe AIRを介したデスクトップアプリケーションも、同様の表現力をもつことができる。これもまた、Flash CS3＋ActionScript 3.0がもたらす大きなベネフィットと言えるでしょう。今月の Edge Recommends! では、そんな3D表現に長けた国内サイトをご紹介します。
100チアガール
http://100cheergirl.jp/
転職応援サイトである「イーキャリア」が展開するWebプロモーションサイト「100チアガール」。100人の女の子が転職を応援する映像をYouTubeにアップする一方、スペシャルサイトでは、ActionScript 3.0 と 3Dライブラリ「Papervision3D」を採用することで、チアガールの写真が3D空間の中でダイナミックに表現されている。このような表現手法は、OSレベルの3DイメージングAPIをフル活用することで実現するものだったが、計算処理が高速なActionScript 3.0によって、Webコンテンツとは思えない動きを見せてくれている。
3D表現以外にも、ユーザのローカルにデータを保存できるSharedObjectを使用して、チアガールの映像を閲覧済みか否かでサムネイルの表示を変える機能や、お気に入り機能などを実装。その他、投票機能やランキング表示機能、ブログパーツ展開など、さまざまなアイデアが盛り込まれているサイトとなっている。
デベロッパー名: ARCHETYP
カネボウ ALLIE
http://www.kanebo-cosmetics.jp/allie/
夏の日焼け止めの定番 Kanebo ALLIE（カネボウ アリィー）の商品サイトもまたFlash CS3 とPapervision3D を採用し、商品説明の各ページを立体的に配置することで、奥行き感のある動きが生んでいる。プレゼンテーションソフトなどで採用されている3Dによるページ遷移のアイデアをさらに発展させ、同列階層のページを横並びにし、各ページの第二階層以降を縦に並べたマトリクスを構成。ユーザがページを遷移する際に、3D的な動きと共に他のページも垣間見えるようにすることで、サイト構成を直感的に把握できる工夫が施されていて、Web上での新しいプレゼンテーション手法の萌芽が垣間見られる。
ブランディングを主軸とした商品サイトの場合、事細かに商品解説をするよりも「魅せるプレゼンテーション」に徹したほうが、結果として商品への印象を強く植え付け、深いインタレストを喚起でき、このサイトはその好例と言えるだろう。
デベロッパー名: 株式会社 ピクルス
Adobe - +Video
http://plusvideo.jp/
アドビの“+Video”サイトは、Flash CS3とPapervision 3Dによる3D表現に、制止画ではなくFlashビデオを融合させている。回転や拡大・縮小するパネルのひとつひとつにテクスチャとしてFlashビデオが埋め込まれおり、それぞれが独立した映像を再生している。これもまた、ActionScript 3.0とFlash Player 9の高速な処理能力がなせる技といえるだろう。
動きをよく見てみると、技術的なトライアルが垣間見られて面白い。パネルが集合しているときは、ひとつひとつのパネルが小さいので、映像の解像度も抑え目にしてある。そして任意のパネルをクリックすると拡大されるわけだが、拡大しきったところで3D処理が終わり、高精細なFlashビデオにシームレスに切り替わる。こうした技術的なテクニックを、ユーザから「妥協」と認知されることなく、いかに「表現」として成立させるかがクリエイターの腕の見せ所のひとつといえる。
