FlashからHTML5へ! マイクロソフト、FF XIII-2サイト開発裏話を紹介

日本マイクロソフトは12月20日、スクウェア・エニックスと共同で展開しているFINAL FANTASY XIII - 2(以下、FFXIII-2)とInternet Explorer 9(以下、IE9)のキャンペーンサイト「モーグリのツイートキャッチ」を紹介する説明会を開催。キャンペーンサイトの概要や、開発裏話が披露された。

モーグリのツイートキャッチは、FFXIII-2の中で登場する「モーグリ投げ」を模したキャンペーンサイト。Twitter上で投稿されたFFXIII-2に関するつぶやきを収集し、それらを位置情報と関連付けながらランダムに表示する機能を搭載している。現在地から方角を決めてモーグリを投げる(ドラッグする)と、その方角でつぶやかれた投稿をモーグリが収集してくる。ゲームと同じ演出が使われており、同様の世界観を味わうことができる。

収集したツイートは、Collection Boxにてまとめて閲覧できる。また、ツイートの収集に出かけたモーグリがFINAL FANTASYに登場するキャラクターのTwitterアイコンを拾ってくることもあり、これを一定数集めると、FFXIII-2の特典スクリーンが入手できる。

そのほか、FFXIII-2のストーリー紹介や予告編動画、キャラクター紹介ページなども用意されている。キャラクター紹介ページでは、キャラクターのイラストを劣化させることなく拡大/縮小することもできる。いずれのページにもIE9で対応したHTML5/CSS3機能を取り込んでおり、マイクロソフトでは、IE8からIE9へのバージョンアップを促す目的で広く告知している。

モーグリのツイートキャッチを企画したスクウェア・エニックス 宣伝部 シニア宣伝プロデューサーの大藤昭夫氏は、サイト公開の目的としてコミュニティの活性化を挙げる。FF XIII-2では、「JUDGE 13」と題し、13人の公式テストプレイヤーが事前にゲームをプレイし、そのレポートを公開するキャンペーンを展開していたが、「ユーザーの草根の意見を表に出し、コミュニティを活性化したい」(大藤氏)との想いから、今回のキャンペーンサイト構築に至ったという。

また、開発を担当したクレアテックの十倉哲氏は、UIをHTML5/CSS3で、サーバ側をPHPとWindows Azure Platformで開発したことを紹介。スクウェア・エニックスのWebサイトを多数手がけてきた同社だが、「これまでのUI開発はFlashばかりで、HTML5/CSS3は未経験だった」(十倉氏)と明かしたうえで、「Flashで作るのと同じクオリティ、同じ機能をHTML5/CSS3で実現するのが目標だった。日本マイクロソフトの支援もあり、目標どおりのWebサイトを構築することができた」(十倉氏)と振り返った。

なお、今回使用した主なHTML5/CSS3技術としては、Canvas、Geolocation、SVG(Scalable Vector Graphics)が挙げられている。モーグリを投げる画面では、Canvasで暗く色づけした"パックマン"状(円の一部が扇形に欠けたかたち)のスクリーンを回転させることで扇状のスコープを表示しているほか、Geolocationを使ってユーザーの現在地を取得し、Bing Mapsと連携させてその地点の地図を表示している。また、「SVGを使ってモーグリを描画しており、ユーザーがモーグリを掴む際、周辺の余白を含むことなく、キャラクターだけを持ち上げられるようになっている」(クレアテック 阿蘇健一氏)という。

モーグリのツイートキャッチは現在、1日3万件のツイートを収集している。収集方法は、スクウェア・エニックスとクレアテックで設定した、200個弱のFFXIII-2関連のキーワードを検出するかたち。収集したツイートから、ボットや不適切なものを排除してユーザーに表示されている。

すでにサイト公開から2週間が経過しているが、「ポジティブな意見が多く、NGワードの設定がそれほど必要ない状況になっている」(大藤氏)という。また、「モーグリが収集してきたツイートに返信し、それがきっかけでコミュニケーションが生まれているケースもあり、実験的な意味合いが強かったが、想定以上の効果が表れている」(大藤氏)としたうえで、今後のさらなる活性化に期待を寄せた。