「スゴイ地図」
フル Flash のユニークな地図サイト
今月号の記事
株式会社リクルートが 2006年9月にオープンした、Flash をフル活用して構築された地図情報サイト「スゴイ地図」。「Ajax による実装」 がブームともいえるオンライン地図サービスにおいて、フル Flash で制作したのには、どんな狙いが込められているのか。株式会社リクルートと、制作を担当した ネットイヤーグループ株式会社と株式会社コスモ・インタラクティブ に伺いました。
スゴイ地図 http://sugoi.doko.jp/
リクルートの持つさまざまな情報と地図を組み合わせた新しい Web サイト
株式会社リクルート 事業開発室の橋場一郎氏（右）と「スゴイ地図」運営メンバー
ネットイヤーグループ株式会社の西川 忍氏（右）と中西淳雄氏（左）
株式会社コスモ・インタラクティブの「スゴイ地図」制作チーム。右から阿部淳也氏、吉森大介氏、 原 冬樹氏、岩崎 亮氏
サイト遷移やインタフェイスの動きをチーム内で共有するにあたって作られた、紙によるサイトのモックアップ。これによって意思統一がかなりスムーズに行われたという。
インタラクティブな面白さを目指して
「スゴイ地図」は、リクルートの持つさまざまな情報と電話帳データ、地図を組み合わせた新しい Web サイトです。リクルートがすでにサービスを提供していたローカルサーチ「ドコイク?」の情報をベースとしており、店舗などのスポット情報の検索結果がインタラクティブに地図上で確認できます。また、単に地図と検索機能を提供するだけではなく、季節や場所などに関係した特集コンテンツなども用意された「雑誌的なサイト」になっていて、「検索キーワードがないと探すことができない」検索サイトとは一線を画するものとなっています。
スゴイ地図の企画立案はリクルートが行い、ネットイヤーグループが設計を担当し、コスモ・インタラクティブとともに開発しました。リクルート事業開発室の橋場一郎氏は、次のように話します。
「検索サイトはとても便利ですが『検索キーワードが想起できないと使うことができない』という欠点も持っていました。『スゴイ地図』は、もっと検索を気軽に楽しんでもらいたいという意図から“パラパラと雑誌をめくる感覚で検索できること”を大事にしました。同時に、裏コンセプトは“なんかスゴイ！”と思ってもらえること。これらの思いを持って、機能や概要を設計していきました。ネットイヤーグループさんと一緒に想定されるユースケースを洗い出し、そこから必要な機能、画面の配置やフローを考えました。実際にデザインをしたり、インタラクションやビジュアルを考える際は、コスモ・インタラクティブさんにも入っていただき進めていきました。」
独自の世界感を生み出すために Flash を採用
リクルートの橋場氏とネットイヤーグループの中西淳雄氏によれば、開発のかなり早い段階で「スゴイ地図は Flash を使おう」という方針があったと言います。「Flash を使うことで雑誌をめくるような世界感を実現し、検索キーワードや目的がなくても検索できる世界感を楽しんでもらいたいという考えがありました」と話します。また、コスモ・ インタラクティブで開発のリーダーを務めた阿部淳也氏も「Flash を使うことによって付加価値を与えることができます。単なる地図サイトではなく動きなどで感情的な要素を加え、ユーザの体験を強く打ち出すことができると考えました」と振り返ります。
実際にスゴイ地図でエリアの情報を検索してみると、その画面遷移やインタラクションの動きには独特のリズムがあるほか、アイコンやボタンなどのデザインにもどこか優しさや楽しさを感じさせます。それらが、スゴイ地図の世界感を構築しているのです。
コスモ・インタラクティブの原 冬樹氏は、「Web 標準の考え方が一般化されてきた一方で、サイトの使い勝手に上限が生じてしまっているのでは、と考えます。今はアナログ的で感覚的な、リッチな Web 体験が求められている時代です。人に寄ったサービスを前提にしたいというリクルートさんの思いを生かしました」と話します。さらに同社の吉森大介氏が「スゴイ地図というものに愛着をもらいたい。あまりにツールっぽくなってしまうと冷たい印象を受けるので、それは避けました」 と話します。
このように、スゴイ地図では「世界感」と「ユーザ体験」が大きなポイントとなっています。それを実現するために、他の地図サービスのような Ajax ではなく、Flash を多用するという手段をとったのです。
とはいえ、ただ Flash を使えば世界感が生まれるわけでも、リッチなユーザ体験が実現されるわけでもありません。実質 3ヶ月という短い開発期間の中で確実にゴールへ持ち込むために、徹底したディスカッショが行なわれました。Illustrator で画面や各パーツのラフを作り、それを紙に出力して、工作するようにそれらを重ねたり、ページをめくったり、そして各パーツを手で動かしたりしながら、デザインやインタラクションのイメージを共有しながら設計・開発を進めました。
例えばスゴイ地図のトップページにはキャラクターがいて、季節に合わせたアニメーション（ 秋なら「サンマを焼いている」など） が動いているのですが、これも親しみをもってもらうための手段として、設計の中にしっかりと盛り込まれていたのです。
短い開発期間を乗り越えるための工夫
コスモ・インタラクティブでは、Flash による開発を行う際に、グ ラフィック面での「デザイン」と、スクリプト作成などの「インタ ラクション」は担当が分けられていますが、その境界は「あえて曖昧になっている」（阿部氏） と言います。実際には、デザイナーもスクリプトを書くことが多いのです。阿部氏は「（スクリプトについては） ワークフローや各人の理解度にも寄りますが、まずはみんなが知るべき。共通の認識を持ち、自分が何をやったらいいのかをメンバーで共有できればいいと思います。そのためにも“知る” ことは絶対条件です」と話します。
インタラクションを取りまとめたコスモ・インタラクティブの岩崎 亮氏も、「デザイナーとスクリプターの境目を曖昧にしておくことで、かえって歩み寄れるのです」と話します。そして、デザイナーもスクリプトを書けることによって、開発期間の短縮を実現しているのです。例えばコスモ・インタラクティブの吉森氏は、もともとはデザ イナー。「最初はスクリプトが書けなかったのですが、ボタンを作ったりすることから少しずつ覚えてきました」と言います。こうやって、デザイナーとスクリプターの敷居をあえて曖昧なままにしたのです。
阿部氏は「インタラクションやアニメーションも、基本的にスクリプトで実現しています」と話します。吉森氏もパーツごとに設計された上での Class 書き（スクリプトを書く事）でなければ、実現できない部分も多々あったと思いますと語ってくれた。クラス化でスクリプティングする理由を、岩崎氏は「MVC モデルに準じた、オブジェクト指向設計の上でのクラス化を行わない限り、大規模な開発はできません。この基本の設計があるからこそ、パーツごとの開発が可能となり、基本的に同じ機能を持つ部分は使い回しが可能となります」と話します。「例えばティッカーなどは複数の場所で使い回せますし、地図を表示する際の動きも同様です。そうすることで、開発のスピードは 1/3 になっていると思います」と岩崎氏。しかもメリットは開発スピードだけではありません。「一見するとスゴイ地図の Flash はとても重たいように見えますが、実は 300KB あまり。これはタイムラインアニメーションではなく、大半をスクリプトによって実装を行なったからこその恩恵です」とも語ってくれました。
実際の店舗の位置情報やその他さまざまな情報は、元々SOAP（Simple ObjectAccessProtocol）の API として提供されていました。中西氏は「開発期間短縮のためスゴイ地図用に多少変更を加えて、そのまま Flash からも直接 SOAP API を利用することに決定しました。これはチャレンジングなことかもしれません」と話します。
Flash コンテンツを省サイズ化しつつ、表現力とパフォーマンスを向上できたのは、Flash Professional 8 の先端機能によるところが大きく、「フィルタ・ブレンド機能の強化によって、かなりの表現力を向上することができました。また、それとあわせてほとんどのアニメーションをトゥイーンクラスでスクリプトによって実現することで、ファイル容量のスリム化に貢献しています。また、ビットマップキャッシュによるパフォーマンスの向上にはかなりの恩恵を受けていると考えます」と阿部氏は語っています。さらに、Flex についても次のようにコメントされています。「今後、業務系の開発に踏み込むために Flex の使い手を育てていく予定です。また、CMS 系や EC 系の管理画面での利用や、商品管理の部分に表組みなどを入れ込んでいけたら、使いやすいインタフェイスになるのではないかと考えています。いずれにしてもビジネスにもユーザにとってもメリットのある UI を構築していくための心強いツールが登場したということは間違いないと思います」（阿部氏）
短い開発期間で独自の世界感を実現させた、スゴイ地図。今後は「マイマップ」機能やユーザからの投稿などといったサービスを実現させていきたいということです。
