この Flash がすごい 2007
独断と偏見で自分がすごいと思った Flash を紹介していくよ。
あなたの「すごい Flash 2007」を教えてほしい - てっく煮ブログ への参加作品。
ネタ Flash 篇
一番インパクト大きかったのは MIRROR MOUSE かな。Flash じゃないとできないものじゃないんだけど、発想で一本とられた作品。
説明すると面白くなくなるので省略する。まあ、見てくださいませ。ダブルクリックで視点切り替わる、という隠しコマンドがあるのも憎い。
もう1つ。足立ライト工業所 - MAKE ACTION ! という新卒向けリクルートサイト。
これもネタばらししない方が面白いから自重する。最後まで見てほしいな。
ActionScript っぽいところでいえば、Web カメラやマイクを使ったネタ Flash が多かった気がするけど、誰でも楽しめるわけじゃないから今回はパスした。
フルフラッシュ篇
新製品のキャンペーンサイトなどで多様されるのがフルフラッシュ。HTML は使わず、画面全体に Flash を貼り付けたものを指す。
フルフラッシュにありがちなのが、どこをクリックしていいか分からなかったり、待ち時間が長くてイライラしたりして嫌になるパターン。そんな中、株式会社ポリゴン・ピクチュアズは異彩を放っていた。
トップページを開くと3つ四角形が登場する。
四角の上にマウスを持っていくと、かわいく反応する。シンプルなデザインのために、ナビゲーションで場所で迷う余地はない。
四角をクリックすると、凝ったアニメーションとともに大胆にページ構成が変化する。
そこそこ長め(6~7秒)のアニメーションなんだけど、動きが激しいからついつい3種類全部見てしまった。フルフラッシュのページには1秒程度のちょっとしたアニメーションでもイライラさせられるものは多い。
両者の差がどこにあるかといえば、先が想像できるかどうかだと思う。「このあとどうなるんだろう」というワクワク感があれば、多少のアニメーションは気分よく見るもんだ。ただ、ワンパターンなアニメーションを何回も見せらると、嫌になってページを閉じることになる。
その点、このサイトは細かなところまで気を使ってくれている。長いアニメーションは最初の3箇所だけで、他の場所はかなり抑え目。例えば、ABOUT US の STUDIO にあるフォトギャラリーのアニメーショ名ンはどれもキビキビ動いてくれる。
フォトギャラリーは繰り返しの操作が多いわけで、目的の情報への到達速度が速くなるように工夫されているわけだ。短いアニメーションにもかかわらず、魅力的に見えるのはさすがプロといったところか。
見せるところは見せる、抑えるところは抑える。飽きさせないために考え抜かれた工夫が気持ちいい。
インタラクティブ篇
今年、思わず唸ったのが iKnow だ。英語学習 SNS という不思議なジャンルなのだけど、学習ツールの完成度が半端じゃない。
クイズゲームのようなシンプルな見た目が分かりやすい。「ゲームのUIはすごいよね」という話が ゲームの UI 研究 にあったが、まさにゲームを Web に持ってきたような作りになっている。下側に出ているメッセージでマニュアルは不要だし、ボタンの位置も固定、○×で成功体験も得られる。
操作も見たまま。マウスで操作できるのはもちろん、キーボード操作にも対応している。カーソルキーで選択して、Enter で選択、さらに Enter で次に進む…といった具合に、全ての入力をキーボードだけで完結できる。
タイピングしたときの効果も気持ちいい。
入力した箇所の下線が下に向かって跳ねる。シンプルなんだけど、「次も入力したい」という気持ちにさせてくれる。逆に、これ以外の場所ではアニメーションらしいアニメーションはほとんどない。特に、ユーザーの思考を止めるような待たせるエフェクトは一切使われていない。あたり前のことなんだけど、この大原則が徹底されているのがすばらしい。というか、されてないサイトが多すぎるだけなんだけど。
まだ体験していない人は、iKnow! のトップページ の学習アプリから試してみるとよいだろう。ちなみに、私のアカウントは こちら。
いずれにしても、この手の作り込みはゲームの世界では常識なのかもしれない。だけども、Web でそこまで徹底されると光り輝いて見える。それだけ今の Web は使いにくいということだ。その現状を思い知らなきゃいけない。キーボードとマウスはどちらも入力デバイスとしては中途半端で、それでもこの両方にどう向き合っていくかを考え続けていくべきなのだ。
技術篇
長くなってきたのであっさり目に。
技術的には ActionScript 的超絶技巧発表会 が印象的だった。中でも、munegon さんの BitmapData の話 が一番印象に残ってる。
他にも、要素技術でいえば、いろんなライブラリが登場した。Papervision3D(3Dライブラリ) とか popforge(音ライブラリ)とか Box2DFlashAS3(物理ライブラリ)とか。来年はこのあたりの素材をいかにうまく調理するか注目したい。
まとめ
2008年は RIA が盛んになってくるはずだ。JavaScript だけでなく、Flash(Flex) や Silverlight が本格的に利用され始めるだろう。ローカルアプリの世界でも、WinForms から WPF(XAML) へシフトしようとしている。そんな中、見た目が豪華になることの功罪をもう一度見つめなおしておきたい。
表現が自由になるに従って、分かりにくいもの、使いにくいものができあがるリスクが増える。作り手のエゴが突っ走って、アニメーションのたびに数秒待たされるようなものまで出てくる。もちろん、ガチっと決まったときの効果はすごいが、諸刃の剣といってもいいだろう。その結果、一部の使いやすいサイトと、多くの使えないサイトに分かれてしまうだろう。良くも悪くも、二極化が進んでいく。その中で生き残るためには、もう一度、すごい UI を振り返るのが重要だと考えて、このエントリを書いてみた。
ここに挙げた作品を改めて見てみると共通点が見えてくる。本文中にも書いたが、いずれもシンプルだ。リッチにするところはリッチにして、抑えるところは抑えている。全部リッチなのは見苦しいわけだ。それは人間でも同じ。全体がリッチより、出るところが出ていて、引っ込んでるところが引っ込んでるほうが魅力的だもんね。
ひどいオチとなってしまったので、お口直しにお薦めサイトでも。
- The FWA
- Flash 界では世界的に超有名なサイト。1日1個、お薦めサイトを紹介する。
- はてなブックマーク - syugのブックマーク
- 貴重な情報源。製作者別にタグが振ってあったりして、個人的にかなり重宝しているデーターベース。
- 気になるネタを気ままにブックマークしてますよ / flashsite
- 私のブックマークの flashsite タグ。気に入ったやつだけ追加してるので量は少なめ。
他にもいろいろ RSS リーダーに突っ込んでるけど、あまり思い出せない。