診断コンテンツが楽しい「東京リアルレポート!」

2009-08-05 (水) 9:47
website

katamariさんが制作された「東京リアルレポート!｜トーキョー☆ブックマーク」のサイトが素敵です。見所がいっぱい。

診断コンテンツ

画面右上の「おススメコース診断」、「お」はひらがなで書くもんなんだというプチ発見はさておき、こういう診断系コンテンツっていいですよね。世の中のレコメンドエンジン的なものの精度も高まってきてはいるけれども、こうやって能動的に選んでいくとやっぱりその先への興味度が上がっていきます。僕最近、こういう診断系の質問をあれこれ考える機会があって、これが難しいけど楽しいんです。PCのファンがブオンブオン回転するような頑張った表現よりも、ユーザーが気軽に楽しんでやってくれそうですしね。

ここで使われているUIが、さすがFlashの得意なkatamariさんらしい気持ちのいい操作性になっています。広大なステージ上を縦横無尽に、曲線に沿って慣性つきつつ動いていける見せ方ってスゴクいいですよね。
Adobe MAXで城戸さんが発表されてた「カメラの概念の導入」の発表を聞いて実際に作ってみた人も多いのではないでしょうか？自分（ユーザー）が苦労しなくてもステージが勝手に動いてくれる「もてなし感」が気持ちいいのでしょうかね？これにさらに奥行きの概念も入って来た時の気持ちよさは土屋さんがよく言及されているのですけど、土屋さんの言葉をお借りすれば、「スケール感（あるいは距離感）の喪失」、そこまで深く考えない人にとっても「勝手にいい按配で動いてくれてラク」感みたいなもんは、とっても Web らしい表現ですね。

話を戻して、それをどういうコンテンツに使うと有効かと考えた時に、今回のような相性診断に使うのって素敵ですよね。サイトの題材が旅ということもあり、移動してる感も表現できるし、なんだかんだで女の子ユーザーが一番やってくれそうだし。

どういう理屈で動いてるか気になる

診断結果のコースボタンの部分、

tokyobookmark2

マウスオーバーで正しい角度に回転する仕掛けなんですけど、再度マウスをロールアウトした時の戻り方がランダム（のように見えてきっと何かロジックがある）なんですよね。これが意識のどっかに引っかかる感じしませんでしょうか？昔ユニクロの海外サイトでthaさんがされてた「マウスオーバーした場所に応じてフリップする角度が変わるボタン」の時もそうだったのですが、Flash やってる人に多いのかもしれないけれど、こういうちょっとどういう理屈で動いているのか気になる表現を盛り込むと、ついつい理屈を探ってみたくなるし、単純にいうとそのランダム性になんか画一化されてない温かさを感じたり、いやそれは考えすぎか。

地図

tokyobookmark3

Flash × GoogleMaps で範囲限定したカスタムマップ使ったりできるんですね。気になる人は規約ページ探ろう。

他にもいろいろ

あとは、意外にGoボタンが小さくて、そのせいもあってプランページにジャンプする率が高そうになってることとか、前キャンペーンから引き続き手書きメモでリアル女の子らしさを表現してるとことかそのスクロールのさせ方とか、拍手の音と丸いアイコンはすっかりkatamariさん表現になって他の人が使いにくくなった気がする感とか、いろいろ気付かせていただくことが多いサイトなのですけど、やっぱりデザイン・コンテンツ・音などトータルで女性向けサイトがバッチリ作れるっていうのがスゴイです。いいなぁ。