2007年8月20日

動画再生や音声再生がもともと得意で、インタラクティブなWebサイトを作ることができるFlashと、非同期通信を利用してWebサイトのユーザビリティを一躍向上させたAjax。Flash、Ajaxで一長一短はありますが、それぞれの特徴、良さを改めて理解するためにFlash、Ajaxならではというサイトをたくさん並べて見ることにしました。サイトのセレクションは、Flashを得意とする木村さん、寺井さん、Ajaxを得意とする竹村さん、川崎さんにお願いしました。

木村 大介 博報堂アイ・スタジオ 寺井 周平 リクルート メディアテクノロジーラボ	竹村 光生 アークウェブ 川崎 有亮 リクルート メディアテクノロジーラボ

セレクションに際しては10のお題を設定しました。Webサイトの基本的な機能であるナビゲーション、画面スペース利用、オペレーション等に関わるお題を5つ、検索サイト、動画・写真サイト、地図サイトといった分野別のお題を5つ、合計10テーマです。4人のみなさんには、お題にピッタリのサイトをセレクションしてもらうと同時に、セレクションしたサイトの優れている点や学ぶべき点についてもコメントしてもらっています。
でそろった20のサイトには、面白い！というだけでなく、マッシュアップサイト等の開発におけるアイデアや、見習いたいテクニックもたくさん含まれています。ぜひ参考にしてみてください！

	ナビゲーションがカッコいいサイト		写真/動画で魅せるサイト
	見入ってしまうエフェクトのあるサイト		投稿するのが楽しくなるサイト
	画面スペース無限大のサイト		地図をフル活用したサイト
	ストレスなくオペレーションできるサイト		一歩先行くショッピングサイトお題
	どうしてもクリックしたくなるサイト		これからのリッチアプリケーション開発
	検索が楽しくなるサイト		Flash、Ajaxのいいところを引き出したサイト開発

ナビゲーションやメニューで、Flash、Ajaxならではという操作感を持ったサイトを紹介してください。

[Flash] Weave Toshi	[Ajax] Apple - iPod + iTunes
日本そしてロンドンに店舗を構える帽子屋Weave Toshiのサイト。オープニングストーリーで、言葉ではなくビジュアルによってサイトの操作方法を説明している。	iPhone発売に合わせてリニューアルされたAppleのサイト。iPhone、iTunesで採用されている、指先でめくるようなCover Flowインターフェイスを再現。

寺井：Weave Toshiのオープニングでは、登場する男性が指先で時計の針をクルクルと回します。その指先の動きに合わせてダミーで表示されるカーソルもクルクルと回り、このカーソルに何かのヒントがあることが暗示されます。
オープニング終了後は、カーソルが操作可能になり、マウスを時計回りに動かすことでコンテンツが進み、反時計回りで戻り、マウスを止めることで画像を拡大・鮮明にできます。言葉に頼らず操作ができる、だれもがパッと見て使えるサイトの一例です。

木村：これは写真を数百枚撮影し、パラパラマンガの要領でどんどん見せているようですね。Wave Toshiは、シーズン毎にサイトをリニューアルするのでその度に違ったユーザーインターフェイスになるのも面白いと思います。

川崎：AjaxだとIEのみの対応で、なかなか使えないのですが、マウスカーソルを変えることで何かを伝えるというのは面白い試みですね。

竹村：iTunes、iPhoneでは、ジャケット写真を指先でめくるようなユーザインタフェースで聴きたい曲を探すことができます。iPodも指先で曲を進めたり戻したり。指先操作という点で、Appleのグローバルな機能美を感じます。サブナビゲーションとして「iTunes」「Products」 といった文字を選択して画像部分をスライドさせることもできます。iTunesで最初に使われたCover Flowインターフェイスが、メニューとしてうまく応用されていると思います。

川崎：似たインタフェースとしてアコーディオンインタフェースがWebサイトでは良く使われますが、AppleのサイトはMac、iTunes、iPhoneのユーザーインターフェイスをWebサイトで擬似体験できるという意味でも面白い試みですね。

ユーザーのアテンションをわし掴みにするエフェクト効果を使ったサイトを紹介してください。

[Flash] Quiero ver un fantasma - Quieroverunfantasma	[Ajax] うえぽんSW局-適当なページをウゴウゴルーガ化するブックマークレット
映画を紹介するブログのようなサイト。途中で画面が崩れたり、別の画像が挿し込まれたりすることで、ブラウザが何者かにジャックされたような錯覚に陥る。	ページ全体をテレビ番組「ウゴウゴルーガ」のようにウニョウニョと動かすブックマークレット。

竹村：「適当なページをウゴウゴルーガ化するブックマークレット」は、パッと見て楽しさが伝わります。方法は、HTMLの特定のタグを0.1秒単位でランダムに動かしているだけ。そのためコードとしては非常にシンプルです。マウスが動いている時だけ、ページをウニョウニョさせたりといった応用も考えられます。

川崎：ページ全体を操作する「適当なページをウゴウゴルーガ化するブックマークレット」はJavaScriptならでは。HTMLページはJavaScriptで支配できるということです。

木村：Quiero ver un fantasmaは一見ブログのようなサイトですが、途中からブラウザがジャックされ操作ができなくなり（本当はフルFlashで見た目ジャックしたように見える）、その後、ショッキングなシーンがページの背景から表れます。
ユーザーを驚かせながら、興味をわし掴みにします。あとWebカメラで自分の顔を撮ると、ムービーの中に自分が参加していたりという使い方もできます。

寺井：FlashではWebカメラがわりと熱いんです。Quiero ver un fantasma以外にも、大阪のクリエイターさんの「Optical Camouflage - 光学迷彩」など、Webカメラを使った面白い表現がいくつもあります。 それにしても、ページ全体がウニョウニョするブックマークはAjaxならではですね。上手な使い方を考えてみたいですね。

司会：例えば、バナーなど注目させたい部分をピンポイントで動かすという使い方はあるかもしれません。期せずして、紹介された2つのサイトは、ともに「ページ乗っ取り型」でした。こういった敢えてインタラクションを制限する手法もアリなのかもしれませんね。

実際のブラウザの縦・横幅を超えて、擬似的に画面を広く見せているサイトを紹介してください。

[Flash] Nikon｜ユニバースケール	[Ajax] YouOS
極小の世界から宇宙まで、あらゆるものの大きさを見比べることができるサイト。同じスケール上に並べることで、実際は比較できないものの比較を可能にしている。	ブラウザ内にOSのデスクトップをエミュレートしたWebOSの一種。

竹村：YouOSはブラウザ内でレイヤーを重ねることで、テキストエディタやスプレッドシートなど、さまざまなアプリケーションを重ねていきます。それぞれのアプリケーションはWindowsやMac OSのようにウインドウを持っていて、クリックしてウィンドウを一番上にしたり、ドラッグ＆ドロップで動かしたり、最小化したり、普通のOSのような操作が可能です。

川崎：ちなみに、YouOSのウィンドウは、AjaxのフレームワークであるDojoを使って実現しています。フレームワークやライブラリが充実しているのはAjaxの利点の一つでしょう。

寺井：Flashはステージサイズが決まっているので、その中でどう見せるかがポイントになります。ユニバースケールはグリッドを拡大/縮小することで、一画面で極小のものから極大のものまでを連続的に見せています。これだけ滑らかに極小から宇宙までを表現できたのは、やはりFlashを使ったからということができます。

木村：大きなものを表現するサイトという意味では、芸能人を等身大で表示し、スクロールして好きな部分を自由に見ることができるというFlashコンテンツがありました。あれはファンに大人気でしたね（笑）

ユーザー操作を自然に、易しく、そして間違いにくくしているサイトを紹介してください。

[Flash] FICC inc.	[Ajax] すこやか屋 — カンロの健康通販ショップ
Web製作会社FICCの自社Webサイト。	サプリメントやヘルシーグッズを豊富に品揃えしているオンラインショップ。

寺井：「FICC inc｜Creative Solution」ですが、バックエンドはMovable Typeで作られているようです。フロントエンドは全画面Flashになっているので画面遷移の自由度が高く、それでいて、オーソドックスなHTMLサイトのように操作できるようになっています。メニューやスクロールバーの動きでは、HTMLサイトっぽくする細かいテクニックがいろいろと使われています。

木村：「ウェブサイト製作」のメニューにマウスポインタを合わせると、新着件数をポップアップで見せてくれるなど、小技もきいていますね。あとはMacでのマウスホイールに対応している等々。

川崎：「すこやか屋」で紹介したいのは、ショップサイトに不可欠のショッピングカートです。発送先住所を入力するのって面倒ですよね。このサイトは、郵便番号を入力するだけで、自動的に住所がセットされます。郵便番号を入力して「郵便番号から住所を検索」のような別のボタンを押す必要がありません。

竹村：このテクニックはいろいろなサイトで使われていますね。画面遷移する必要がない、ユーザが日本語変換ON/OFFを切り替える必要ない、そしてボタンの説明を読む必要もない。ショッピングサイトの目的は、ユーザーにオーダーをしてもらうことです。その観点で考えると、こういったユーザインタフェースは、ユーザーの面倒くささを緩和したり、入力ミスを減らしたりするだけでなく、最終的なオーダーコンバージョンにも効果があるのだと思います。

司会：ユーザーにストレスをかけないというのは大切ですね。また、ユーザインタフェースがコンバージョンに影響するというのは、分かっているようで、ついつい見失いがちなポイントです。何のためにそのユーザインタフェースを採用するのか、常に心がけていたいですね。

ユーザーがクリックしてみたくなってしょうがない、そんなボタンやギミックを持ったサイトを紹介してください。

[Flash] マキビシコミック	[Ajax] Symbaloo
ゲーム世界の中に隠れているキャラクターを探し出すゲーム。	Web検索を始めとして、さまざまな検索ができる検索エンジンの集合体。

竹村：Symbalooは、いわゆる検索エンジンの集合体、メタサーチです。iPhoneっぽいアイコンが特徴で、それぞれWeb検索、辞書検索、百科事典検索、映像検索などに割り当てられています。気になる検索サイトを自分で追加することができたり、アイコンの位置をドラッグ＆ドロップで移動することもできます。

川崎：これだけいっぱいボタンが並んでいると、意味もなく押したくなりますね（笑）

寺井：マキビシコミックは表示されている明示的なボタンをクリックするのではなく、どこがクリックできるのかを探していくゲームです。ユーザーに「どこがクリックできるのかな？」と興味を引かせるのがうまいですね。

木村：マキビシコミックは画面がダイナミックにどんどん変わっていく様子も面白いですね。

検索文字列の入力、検索結果一覧ページの表示、ページングなどでAjax、Flashをうまく活用したサイトを紹介してください。

[Flash] Ms.Dewey	[Ajax] Amazon.com Diamond Search
検索結果を女性が答えてくれる検索サイト。	Amazon.comの一カテゴリー。ダイヤモンドを購入することができる。

竹村：Diamond Searchは買いたいダイヤモンドを形、大きさ、値段など6つの条件で絞り込んでいけます。絞込みの方法はユーザに数値入力を強いるのではなく、スライダーで範囲を視覚的に設定していけます。
数値入力で絞込みができるベーシックモードもありますが、入力項目が多すぎて途中で嫌になってしまいそうです。視覚的に絞り込み、画面遷移せずに該当件数がわかるのは直感的で、しかも、ページ全体の仕立てはダイヤモンドらしくリッチな雰囲気になっています。

寺井：「Ms.Dewey」はMicrosoft Live Searchを使った検索サイトですが、画面に登場する女性が、サイトの使い方をインストラクションしてくれたり、検索した文字列について結果を答えてくれたりします。検索した文字列が見つからない場合は、ごまかそうとするのですが、そのあたりの仕立ても面白くできています（笑）。

木村 : Ms.Deweyは演出が面白いですね。つい検索したくなるような人が出てきて、なにも検索しないと飽きたようなそぶりも見せる。サイトの中に人を登場させるPIP（Person in Presentation）は、今では標準的になってきましたが検索サイトとかでもこれから標準的になるかもしれませんね。

川崎：ここまで見てきて、やはり映像を使った演出はFlashらしいですね。

寺井：ユーザーに次にすべき行動を示しやすいというのが、映像を使うメリットですね。

司会：「Ms.Dewey」はオモシロ演出、「Diamond Search」は直感的な絞り込み。狙いはまったく違いますが、いずれもユーザエクスペリエンスという点で参考になりました。

写真/動画の見せ方、ブラウザ上での加工・編集などでAjax、Flashをうまく活用しているサイトを紹介してください。

[Flash] Verizon Action Hero	[Ajax] Zooomr
自分の写真を撮ってアップロードすると、自分が主人公のアクションムービーが完成するブロードバンドの紹介サイト。無料にも関わらず、驚くほどクオリティの高いオリジナルムービーが作れる。	写真の共有・検索・保存・管理、そして販売もできるコミュニティサイト。画面上に次の写真へのリンクを入れ子的に作ることができるのが特徴。

寺井：Verizon Action Heroは自分がアクションヒーローになれるサイト。脚本を選んで、写真をアップロードすると、数日でムービーが完成します。自分のムービーだけでなく、他の人のムービーを見ることもできます。
もともとは「ブロードバンドにするとこんなムービーを見ることだってできちゃいます」というブロードバンドの紹介サイトなんですが、作り込みのレベルがスゴイです。

川崎：最近はサイトの中にユーザーが入っていく、自分参加型のサイトが多いですね。これはAjaxでは思い当たりません。このあたり、AjaxとFlashでエンジニアに指向性の違いがあるのかもしれませんね。

寺井：確かに、エンターテインメント的なアプローチは、Flashのほうがやりやすいということはあるかもしれません。

竹村：Zooomerはレイヤーを重ねることで、写真の中に次の写真へのリンクを作成できます。例えばIMG_3140 http://www.zooomr.com/photos/17626@Z01/151669/ のように、ドアが部屋の中に繋がっていて、次の部屋の写真を見せるといったこともできます。

木村 : 自分で写真を登録する際に、ベースとなる写真に対してレイヤーを追加していくんですね。これはありそうでなかった。使ってみたいです。

司会：道案内やビル内の案内といった、ナビゲーションにも使えそうですね。応用が利きそうなアプローチです。

ブログサイトにおいて、それを見たユーザーが投稿しやすい、もしくは投稿したくなる楽しい仕掛けを持ったサイトを紹介してください。

[Flash] noughts	[Ajax] Gianni Milanesi's Weblog ? AjaxWp - An AJAX enhancement for WordPressblogs
自分の書いた絵を他のユーザーと共有できるイラスト共有サイト。絵を描いている過程（操作）を記憶し、他のユーザーにその過程を見せることもできる。	ブログCMS、WordPressのプラグイン。投稿画面をAjax化し、ページの再読み込みを廃している。非AjaxシステムをJavaScriptだけでAjax化する際の参考になる。

寺井：noughtsは絵を描くという「行為」をフックに、楽しさを演出しています。最大のポイントはユーザーがどのように操作してその絵を描いたのか、絵を描く過程を記録しているところです。他のユーザーは気に入った絵を見つけた時、その完成した絵を見るだけでなく、どうやってそれが描かれたのかも見ることができるんです。

木村 : どのサイトをセレクションしようか悩んだんですが、絵を描くという点ではFlashのほうがバリエーション豊かですね。

川崎：JavaScriptはバイナリを扱えないため、テキストは得意でも画像は苦手ですね。もちろん、絵を描くことを扱ったサイトがないわけではないのですが…。一方で、このAjaxWPは、WordPressの投稿画面をAjax化するプラグインで、投稿を促すための仕掛けとして有効だと思います。ページの構造自体はまったく変更せず、インターフェイスだけを切り替えます。Ajaxを簡単にON/OFFできるところも優れています。

竹村：Ajaxの利点は、ページを全部書き換えるのではなく、一部だけを書き換えるため処理が高速という点です。また、非同期通信なので、通信中でも別の作業ができるという点も利点です。
Ajax化の作業は、結構、大掛かりになるケースが多いのですが、その場合はこのように、既存の非Ajaxシステムの修正をできるだけ避け、JavaScriptだけでAjax化するというは一つの手だな、と思います。

地図の見せ方や操作方法、検索などでAjax、Flashをうまく活用したサイトを紹介してください。

[Flash] World UNIQLOCK	[Ajax] ドコイク？地図
ユニクロが提供するブログパーツの配布サイト。ブログパーツの配布先のブログが世界地図にマップされている。	地図・店舗情報の検索サイト。地図表示だけでなく、周辺の施設検索やルート表示もできる。

川崎：ドコイク？地図はGoogleMapと同じように地図の検索、拡大／縮小ができます。更に、右クリックで表示されている地図の範囲内で施設検索ができます。例えば「カフェ」と入力すれば付近のカフェを探すことができます。更に出発地と目的地を設定すれば、徒歩での道順を表示することもできるんですよ。

木村 : ドコイク？地図は、地下街を通るルートもきちんと表示するんですね。印刷もできるし、これは便利そう。

司会：ドコイク？地図は、右クリックができるなど、かなり凝った機能が実装されてますね。

川崎：もしかしたら自己満足かもしれません（笑）。ただ、もともとメディアとして展開しようという考えがあるため、やはり見た目や操作感にはこだわりたいと思っています。（ちなみに川崎さんはドコイク？の担当です）

寺井：Flashの地図はあまり思いつかないんですが、World UNIQLOCKは滑らかに地図を移動できるのが特徴です。ただ、精緻で最新の地図データを使うなら、JavaScriptを使ったドコイク？地図やGoogle Mapsのほうがいいなー、と自分でも思います。
ところでYahoo! MapsがFlash APIをリリースしましたよね。これからはあれを使って、おもしろい地図サイトを作るデベロッパーが出てきそうな気がします。

川崎：Yahoo! Mapsの凄いところは地図の回転ができるんですよね。文字の方向はそのままで。これは地図が苦手な人にはよさそうです。

商品の見せ方や検索方法、商品比較、カートの処理などで、Ajax、Flashをうまく活用したサイトを紹介してください。

[Flash] Nike.com	[Ajax] Gucci
スポーツ用品メーカーNikeのオンラインショッピングサイト。Flashにより画面遷移を少なくしつつもカラー選択機能などを実現、ユーザビリティを高めている。	バッグや靴で知られる高級ブランドGucciのオンラインショッピングサイト。Ajaxで横方向への広がりを実現しており、話題となった。

寺井：画面遷移せずにどこまで見せることができるか、その意味でNike.comはFlashを使い倒しているようなサイトです。1画面で、カラーパレットで靴の色を変更したり、それを回転させて見たりすることができます。
画面遷移を少なくすることで、商品選択からチェックアウトまでを最短ルート結んでいるというのもショッピングサイトとして優れていますね。また、Flashのサイトでは珍しく、商品ごとにパーマリンクがあるため、特定の商品（ページ）をブックマークすることもできるようになっています。

竹村：一部にFlashも使っているようですが、GucciはトップページからすべてAjaxで作られています。横の広がりに挑戦した点でも、話題になったサイトです。

川崎：数年前、Flashで使ったショッピングサイトが流行ったのですが、使い勝手がいまいちのところが多く、ショッピングサイトとFlashの組合せは敬遠されるようになってしまってたんですよね。その点、Nike.comはFlashを使うことで画面遷移を少なくし、うまく作ってあると思います。
Gucciの方は、パラパラとサイトを見ていくことができるのがカタログっぽくっていいですね。それと、AjaxのサイトなのでJavaScriptのコードが見えてしまう、つまりマネされる可能性もある。それを承知でAjaxで作ってあるのは、ある意味で潔いなーと思います（笑）

Flash、Ajax、そしてAIR、Silverlight、Google Gear、Webリッチアプリケーションの動向から目が離せません。今後の展望を一言お願いします。

川崎：JavaScriptがHTMLページを支配しているというのが自分の考えです。パーツとしてFlashを使うというのは当然一つの手法としてあって、AjaxとFlashを使い分けていくことが大事だと考えています。また、AjaxもFlashも、ブログパーツやウィジェットのような違った分野に応用されており、利用する技術がシームレスになってきています。Webアプリとデスクトップアプリは繋がっていくと思うし、一つの技術で何でも作れるとおもしろいなーと考えています。

竹村：Ajax側の立場で参加しましたが、Ajaxだからすべてが良いというわけでもないし、UIとしてのFlashには、とても良い面があると思っています。お互いのいいところを活かしつつ、HTMLベースで構わないところをFlashで変えすぎない、Flashをある種の補完機能として位置づけるという組合せだとユーザビリティが高まるかなーと考えています。AjaxとFlash、一緒に使っていくのがいいですね。

木村 : AIR、Silverlightなどが出てくることで、FlashやAjaxしか知らなくてもデスクトップアプリが作れるようになりそうです。たとえば、これまではC言語やVisual Basicを知らないとできなかったようなアプリケーションが、FlashやAjaxの表現力を加えて出てくるとか。今後がとても楽しくです。

寺井：Flashで作られるキャンペーンサイトは今後もまだまだあると思うのですが、じゃあ、自分が実際にFlashで作られたサービスを使っているかというと、必ずしもそうじゃないんですね。Google Mapsなど、Ajaxを使ったサイトのほうがよく使ってたりして（笑）。
そうすると、Flashは音声や動画のプレイヤーとして、例えばYouTubeのようなサイトでパーツとしてしか使われなくなるのかなーと考えていたんですが、AIRの登場でそれがどう変わっていくか、非常に関心があります。
今時点について言えば、FlashとJavaScriptの連携シーンも多いので、両方やらなくちゃな、と思ったりしています。

FlashとAjax、ユーザエクスペリエンスを高めるという意味で共通する部分も多いですが、やはり、得意分野、不得意分野もあるのが、20サイトを見て改めて分かりました。
場の設定上、最初はFlashチーム、Ajaxチームに分かれて、それぞれの良さを主張し合ったわけですが、最後は、両方をうまく組み合わせることが大切だねというムードに変化したのが印象的でした。もちろん、どう組み合わせるかはアイデア次第。本特集を読まれているみなさんもFlash、Ajaxのいいところを引き出したサイト開発に、ぜひ、チャレンジしてみて下さい！

Flashのサイトをもっと見たい人はこちらへ	Ajax（JavaScript）のサイトをもっと見たい人はこちらへ