VIBRAM FIVEFINGERS
主にアウトドア用シューズを手掛けるイタリア「Vibram」が同社の代名詞と言える５本指のスニーカー「FiveFingers」のマイクロサイトをローンチ
ナイキに代表されるようにスニーカーにいろいろなテクノロジーを詰め込むのではなく、FiveFingersはシンプルに体にフィットするというということを訴求するためのサイト。
男女それぞれの体に描かれたペイントがナビゲーションとコンテンツを兼ねているという設計になっています。
体を中心にすえるというメッセージを表現に落とし込んでいるのはわかりますし、発想としては面白いです。ただ結果として非常に分かりづらいナビゲーションになっており、せめてクリッカブルなところは色を変えたり反応を変えたりといったことを行って、ユーザにもっと分かりやすくした方がいいように思います。
ダンシング・タイポグラフィー
最近こういう話題は取り上げてなかった気がしますが、Flashを非常にうまく使ったページ。
右側にあるスライダーを上下させることで、「Never Gonna Give You Up」の歌詞から、それを歌うRick Astleyの動きを歌詞で形作ったムービーへとモーフィングするというもの。
インタラクティブ・デザイナー「Roman Cortes」氏の作品。
ありがちと言えばありがちかもしれませんが、その動きがとても気持ちいいです。
ASHERROTHMUSIC.COM
すでに話題になってますが、AR(拡張現実)を非常に巧みに使ったサイトがローンチしています。それが
アッシャー・カードと呼ばれるクレジットカード大のカードとともにアッシャー・ロスやアッシャーの友達が撮った画像を使い、その画像をFLARToolkitで解析、アッシャーカードの位置や文字を割り出して、画像を背景として立体的なナビゲーションメニューを表示するという手法をとっています。アッシャーが撮った画像は毎日アップロードされているようで、様々な画像に切替えることが可能です。
これはAsher Rothが「自分がどんな人間なのかファンに見せられるサイトにしたい。ファンに自分が彼ら彼女らと変わらない存在で普通の人間なんだということを伝えたい。サイトはそういうレベルでファンと関われるものでなければならない」という意思を元に開発されたもので、文字通りアッシャー・カードを持ち運ぶことでファンとともにアッシャー・ロスの日常がトップページとして表示されるサイトになっている。
今後は次のアルバムの表紙にアッシャーカードが掲載され、それを使ってユーザ自身で撮った写真をアップロードできるようになる模様。
エージェンシーはBBH NY。制作はVERB NYとAID-DCC、Katamari。
FLARToolkitをウェブカムを使ったARものではなく、若干動きの滑らかさにかけるものの、ナビゲーション用画像解析につかっているところが面白い。しかもAsher Rothの意思の表現に落としたときの方法としても、ユーザが中心となってお気に入りのアーティストのサイトのトップページを飾ることができるという方法が本当に素晴らしい。
Che : 10 years
直接的な表現は出てきませんが、会社でみるには適しません。性的な表現が含まれます。
ベルギーの男性雑誌「Che」が創刊10周年を記念して、1年間の無料購読が当たるキャンペーンを実施。
The Blow Job
(要Flash;ウェブカム、マイク必須)
ウェブカムに向かって息を吹きかけるとその音に反応して、女性のスカートがめくれるという仕掛け。めくった人に無料購読キャンペーンに応募する資格が与えられる。（いろんな人が息をふきかけている映像がサムネイルで表示されます）
エージェンシーはDuval Guillaume
Blow Jobというドキっとさせるサイト名からそのギミックまで、男性誌という特徴を見事に表現に落とし込んだそのセンスが素晴らしいです。
10 Downing Tweets
後2週間ほどで実施されるイギリスの総選挙のTwitterを使った動向調査サイトが面白い。
10 Downing Tweets
(要Flash)
制作は、twentysix。
OAuthを使って認証し、どの党を支持するか投票でき、さらに各党のハッシュタグを含むtweetが表示されている。
注目すべきは、そのシステムに加えて、表現方法。デフォルメされた各党首のイラストはもちろん、データの表現、小気味良い動き、それらすべてがかなり高いレベルで、気持ちいい。
日本の夏の参院選でも同様のサイトが登場するでしょう。それらにも注目です。
Jay Jays Dance Off
ムービー中にアノテーションでインタラクティブに商品情報を入れ込んだDIESELのサイトが話題になっていますが、それと同じようにムービーに商品情報を入れ込んだサイトがローンチ。しかももう１工夫して。
オーストラリアのファストファッションブランド「Jay Jays」のカタログサイト。制作はおそらくvisualjazz。
クリックをカメラに見立て、ダンサーをクリックすると写真をとったかのようにムービーがストップし、ダンサーの来ているJay Jaysの洋服の情報が表示される仕組み。さらに3Dメガネをかけることで3D表示もされるというもの。
そして面白いのは、下記のように3Dメガネをオーストラリア中のJay Jaysの店舗で配っている点。店舗を起点として、メガネを配ることでウェブに誘導しているのが興味深いです。
またダンサーの洋服情報が動的に表示されるのに少し驚きました。
Uniqloがやっていた気がしないでもないのですが、このようにムービーとカタログをマッシュアップする方法はこれからどんどん出てくるのかもしれません。
Quake 2 on HTML5
すでに非常に大きな話題となっていますが、HTML5を使った驚きのゲームが登場。それは
その驚愕のプレイムービーを御覧下さい。
(Youtube;要Flash;BGMあり;RSSリーダによっては表示されません)
これは、Quake2をJava Web Startに移植したJake2をGWTに再移植したもの。オープンソース。3DのレンダリングにはWebGLを使用し、ファイルシステムアクセスにはローカル・ストレージを使用。さらにBGMを再生するためにHTML5 audioを使い、それらに加えてオンライン対戦を実現するために、websocketsを利用しています。
ChromiumかWebkitで動作します。上記サイトにはこのQuake2を動作させる方法も書かれています。やってみたところ、僕の環境ではChromium(5.0.360.0 [43152])で動きました。Macbook(Core2Duo2.2Ghz)で20-25fps程度。
Flashはもちろん、Native Clientを使わずにこれだけのクオリティのものが作れることに本当に驚きです。ただ技術的な敷居を考えると、まだまだ一般的に広まるには時間がかかるとは思います。
この高さを体感せよ！
とりあえず下にスクロールして体感してください。
ブラジルの、南米最大のウォータースライダーがあるプール「Beach Park」のバナーではなく、オプトインメール。仕掛けたのはpmweb。
文字通り、14階の高さがあるというウォータースライダーのスピード感をスクロールによって見事に表現。その着想と表現に脱帽です。
MY DELICIOUS