ggg に行きまくって気づいたメモ

  • 2008-08-20 (水) 13:26
  • diary

ggg が職場から徒歩5分の距離なので、「見て感動する」→「記憶を頼りに家で真似てみる」→「また行って自分のと比べてみる」→「なんで気持ちいいのか考える」を繰り返すという、なかなか刺激的な生活を満喫しています。

FFFFound の地図写真(GoogleMaps)のやつ

ちょうど自分も地図写真(UMap)をいじってたので、今回の展示で一番興味深く見てました。リクルートが扱う情報には地図と連動させると有用な商材が多いので、「ユーザを惹きこむ地図の見せ方」として参考になることが多かったです。以下気付いたりやったりしたこと:

  1. でかい上空写真ってそれだけでカッコイイな。
  2. しかも静止写真じゃなく、ちょっとでも動いているとさらにカッコイイな。
  3. UMap で同じようなのを作ってみる。uMap.panByXY(new Point(1, -5)); みたいにすれば地図をピクセル単位で動かせるんです。
  4. あまりに真似っ子だったので、時計と絡ませ(それもどうかと思うがw)、秒針に合わせて地図がトゥイーンでギュンって毎秒移動するようにしてみる。
  5. なんか写真として楽しめなくなる。やっぱ地図移動はじわじわスクロール移動の方がいいみたい。
  6. 移動量が大きいとタイルのロードが間に合わない。スクロール量は少なめに。初期表示分はさらにロード時間を確保しておく必要あり。→一定秒数マスク用矩形をオーバーレイして隠しておく。なるほど ggg のも黒バックで情報表示してる時間があったな。たぶんあれは裏で地図ロードしてるんだろうな。
  7. 作ってたサンプルを見てくれたiandeth の石橋さんが VirtualEarth の BirdsEyeView が面白いよと教えてくれて、見てみたら写真の質もとても良かったので、そいつを Flash 上で表示させてみようとする。
  8. UMap じゃ BirdsEyeView は表示できないっぽい。ネットを探すと「Lost In ActionScript」の人が BirdsEyeView 等のタイリングライブラリを公開してくれてる。
  9. いろいろいじくり、ローカルで動作確認できたが、FTP すると地図が表示されない。いじりすぎておかしくなったのかと思い、ダウンロードしたオリジナル swf をそのままアップするも、BirdsEyeView のサンプルだけがもとから動かない。たぶん Sandbox エラーだろうけど、どう対処すればいいのか分からんのでとりあえず頓挫。
  10. 地図写真の見せ方とは別に、音と絡ませる結構いいアイデア思いつく。これで差異化できるかも。
  11. もう一回 ggg 見に行く。ベジェ曲線で各国(gggのはテキスト→国だけど)を結ぶ表現カッコイイ。
  12. 表示場所はプリセットで決め打ちしているっぽい。白テキストが上手く見えるように場所を選んでいるかも。人力でポイントをガーっと入力しておくっていう「生身の人間の手作業の跡」っていうのはユーザ側から見ても素敵に感じるんじゃないかなと最近思ってる。
  13. フォントはたぶん Helvetica。自分のも文字をピンクにしてしまいそうでヤバい。→水色にした。地図右下、左下ともに白地でGoogleロゴが小さく入ってた。
  14. 上から下にラインがビーってなる写真と黒マスク板とグラフィックのトランジションのやり方が上手い。

作ってるものに関してはまだまだパクリの域を出ていないので公開はやめときますー。

ggg の展示作品のほうはデバイスが絡んでるから東京にしかないのかな?逆に大阪にしかない作品とかもあるんやろか?

MoMaのやつ

線の動き気持ち良過ぎる。大画面で見るとラインが途中でウニョウニョくね曲がってるのがよく分かるのでさらに驚きました。二次三次ベジェ(ベジェハンドラが始点終点の両方から出てる線という認識でOK?参考)かと思ってたけど、ラインがだんだん透けていってるってことは細かく lineTo してるんかも。どういう軌跡計算してるんだろか、スゲー。

展示の見せ方として、超縦長コンテンツが一番下まで行ったらどうなるか待ってたら、最下端でそのまま折り返した。なるほどそういう見せ方かー。

AmazType

4枚のパネルで四文字熟語構成・表示のタイミングが素敵。展示専用にこういう見せ方をしてくれるおもてなしっぷりが素敵ですねぇ。でもこれ会場の秒音と何か連動してるんだろか?B1の展示の興味深いところは「数多く展示されてる時計表現の中で、どんくらい小さい動き・時計らしさを抑えた表現でも時計に見えるか?時計として気持ちよく感じれるか?」の境界線を探せることだと思う。画面が大きく切り替わるタイミングが作品ごとに、秒単位・何十秒単位・分単位といろいろあり、展示としてどれくらいのペースで画面変化すると見入るか?みたいなことは、ユーザがリアルに「立つ」、バーチャルに「サイトアクセスする」時の注意払い度合いというものを考えさせてくれる。

佐藤かしわのやつ

よく見りゃ小さい矩形が秒針に合わせてアルファで明滅してる。
グリッドで見せるためにクレジットの行数を制限して、切れた部分は Read More させる見せ方は参考に覚えておこう。

地下のWebカムのやつ

いつ顔キャプチャされるかヒヤヒヤなのでもう近づけないw

サッカーのやつ

つくづく、あのリアルタイムトラッキングっぽいことって Flash でできるのか!!と驚く。

地下のプロフェッショナル仕事の流儀の文字のやつ

面白そうなのでやってみたい。アプローチは違うけど、にとよんさんの PotrAs 触らせてもらおう。前は超絶すぎそうで触ってなかったから。。

粘土の時計のやつ

インスパイア元っぽいジョン前田さんのグラフィックは僕も本で見たことがあるのだけど、あれは動くのかな?この粘土のはyugopさんらしい動きがついてて、これまた心地よい。分裂してエリア広がる時に画面がバウンス(まぁ自作なのでしょうね)して広がるとかすごいディテールだなぁ。
分裂する時と、新規に小玉が登場する時がある。ややもすると最終の4×4のグリッド内で展開していくように思ってたけど、そうではなくて超ランダムにグリッドの制約なく粘土が広がっていくようなコードになってる。(言い表しにくいけど)

白バックで跳ねるやつ

スロー撮影して地面に跳ね返った時に時計がでるということだけは分かったのだけど、何か裏テーマがあるんでしょうかね。たぶん展示作品の中では「観客を待たせる」ほうの作品なので、パッと見せて驚かさないとユーザに次に行かれてしまう Web とは違う文脈で見るのかな?分んなかったけど。

まだまだ行く予定、追記予定。

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.trick7.com/blog/2008/08/20-132620.php/trackback
Listed below are links to weblogs that reference
ggg に行きまくって気づいたメモ from trick7
AS3習得本
AS3の全容を学習できる本。この中でどれか1冊自分に合ったものを。
Adobe Flash CS4 詳細!ActionScript3.0入門ノート ActionScript3.0 プロフェッショナルガイド 初めてのActionScript 3.0 Flashユーザーのためのステップアップガイド 詳説 ActionScript 3.0 Actionscript 3.0 Cookbook
AS3発展本
ASでアニメーションさせる面白さを知るための本。
Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編] ActionScript 3.0 アニメーション AdvancED ActionScript 3.0 Animation (Advanced)
AS2
"Flash"ではなく"ActionScript2.0"学習のための良著。他にもいろいろ読んだけど、この4冊を読んだ後、自分が成長できた感じがしました。
FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付] Essential Actionscript 2.0 Flash 8 Essentials Foundation Actionscript Animation: Making Things Move (Foundation)

あわせて読みたいブログパーツ

相互リンク

hi-posiさん
携帯Flashといえばhi-posiの岡田昇三さん。FlashLiteの有益な記事もたくさん書かれていていつもお世話になってます。ついにご挨拶させていただきました。面白すぎる人でしたw。

Return to page top