Sep. 27, 2013

制作者インタビュー「Chrome World Wide Maze」

スマートフォンをコントローラに?PCと同期?なぜ、どんなWebサイトでも迷路ゲームにできたのか。

「World Wide Maze(以下WWM)」は、Googleのブラウザ/Chromeの機能を活用したプロジェクトをリリースするChrome Experimentsのコンテンツとして誕生した。スマートフォンとPCを同期させて、任意のWebサイトを迷路ゲームの舞台に変えることのできた開発力、そして求められた総合力について、制作陣に話を聞いた。

http://chrome.com/maze/

取材・文:遠藤義浩

「HTML5 Rocks」にて、SaqooshaがWorld Wide Mazeの技術面に関する寄稿をしています。

http://www.html5rocks.com/ja/tutorials/casestudies/world_wide_maze/

Part1 : スマートフォンをコントローラにして切り拓いた新世界

Part2 : 「神」の視点で、WWMの世界を創造する

Part1 : スマートフォンをコントローラにして切り拓いた新世界

“スマートフォンをコントローラにできる”という手応え

WWMのPV。2013年3月24日にChrome Experimentsとして公開された

― 御社がWWMに関わる経緯からお話を伺います。最初にGoogle JapanからPARTYに依頼があり、その後PARTYの川村真司さん経由で声がかかった、ということですね。
富永勇亮(以下 勇亮):この案件はChrome Experimentsとして、Chromeブラウザで最新技術を駆使した施策を生み出すことが求められていました。さらにモバイル版Google Chromeという位置づけで、モバイルでChromeのダウンロードを訴求する狙いもあって、モバイルを通じてChromeのよさが伝わるプロジェクトに仕上げてほしいという要望でした。

ただ、単にモバイルデバイスだけで完結する施策展開ではやれることの幅が狭くなります。そこで、モバイルにPCをコネクトしたダブルスクリーン施策にすれば、よりChromeの機能を活かしたリッチな体験を提供できますし、実現できることの幅が広がることから具体的な企画が練られ出しました。その最適な案の一つとして、僕たちのもとに話がきた時点で、任意のWebサイトを迷路(Maze)化するという案が用意されていました。
今回の制作に関わったメンバーたち。上段の写真左からSaqoosha(テクニカルディレクター)、大橋將史(BGM、SE)、上條圭太郎(アシスタントプロデューサー)、富永勇亮(プロデューサー)、米良雄介(インフォメーションアーキテクト)、快速東京(PV用の音楽)前列中央から一ノ瀬雄太(ギター)、藤原一真(ベース)、柳田将司(ドラム)、後列・福田哲丸(ボーカル)。 下段の写真左からイズカワタカノブ(サーバーサイドエンジニア)、森研治(プログラマー)、高谷優偉(メインデザイナー)、Rahmat Hidayat(プログラマー)、北井貴之(3D、映像編集)

今回の制作に関わったメンバーたち。上段の写真左からSaqoosha(テクニカルディレクター)、大橋將史(BGM、SE)、上條圭太郎(アシスタントプロデューサー)、富永勇亮(プロデューサー)、米良雄介(インフォメーションアーキテクト)、快速東京(PV用の音楽)前列中央から一ノ瀬雄太(ギター)、藤原一真(ベース)、柳田将司(ドラム)、後列・福田哲丸(ボーカル)。
下段の写真左からイズカワタカノブ(サーバーサイドエンジニア)、森研治(プログラマー)、高谷優偉(メインデザイナー)、Rahmat Hidayat(プログラマー)、北井貴之(3D、映像編集)

左:「World Wide Maze」は、カンヌライオンズ 国際クリエイティビティ・フェスティバル2013のMobile Lionsでゴールドを受賞しました。その授賞式後の一枚(上段左から、清水幹太(PARTY)、川村真司(PARTY)、下段左から富永勇亮、Saqoosha) 右:カンヌライオンズ60周年記念Tシャツを着る高谷優偉(Webデザイン)と北井貴之(3D、映像編集)

「World Wide Maze」は、カンヌライオンズ 国際クリエイティビティ・フェスティバル2013のMobile Lionsでゴールドを受賞しました。その授賞式後の一枚(上段左から、清水幹太(PARTY)、川村真司(PARTY)、下段左から富永勇亮、Saqoosha)

カンヌライオンズ60周年記念Tシャツを着る高谷優偉と北井貴之

― 御社は迷路化案を具体化していく段階から、本格的に携わり出したわけですね。
勇亮:迷路化案の肝の一つが、スマートフォンをコントローラ代わりにしてPCと同期する点です。PARTYとは過去に何度も仕事をご一緒しているので、僕たちの開発力があれば実現できるのでは? ということで、声をかけてもらったわけです。早速僕たちは、フィージビリティ(実現性、検証性)の確認をはじめて、プロジェクトの見通しを立てはじめました。
Saqoosha:WebSocketを用いてモバイル(スマートフォン)とPCをつなげて、実際にゲームができるかどうかなどの実現可能性を検証していきました。話をいただいた時点で、できそうだという想定があったので、加速度センサーやいくつかのAPIを組み合わせながら、スマートフォンとPCがきちんと同期してゲームができるのかという検証と、Webサイトの立体的な迷路化に関する検証を進め出したんです。
― WWMの源流となる迷路化案で進めた最大の決め手は何だったのでしょうか。
勇亮:より多くのユーザーが参加できる「やりやすさ」です。誰もが迷わずにゲームをできることはとても重要で、外せない要因です。その前提を踏まえたうえで意識したのが、いかにGoogleらしいと感じられる斬新さを提供できるかどうか、です。

じつはPARTY川村さんからの要望があって、僕たちが本格的にプロジェクトに参加すると同時に、僕たちからも迷路化案のほかに複数の別案を用意して、最適な案について話し合いを重ねていきました。例えばスマートフォンを楽器に見立てて演奏するという案など、迷路化案と拮抗する企画もありましたが、より世界観の独自性を追求できる案としてMAZEがもっとも面白くできると判断し、Saqooshaが用意したプロトタイプをクライアントに提出しました。
スマートフォンの傾きを取得して、PC画面の中のオブジェクトが回転するデモ。

スマートフォンの傾きを取得して、PC画面の中のオブジェクトが回転するデモ。デモ用サイトはこちら。 http://saqoo.sh:13000/

ユーザーがモバイルとPCを同期してくれるための対策

― 技術検証については、「モバイルとPCとの同期」に加えて、「Webサイトの迷路化の実現」という大きな課題もあります。
勇亮:全体の世界観を作り込んでいくためにも、どのようにしてWebサイトが迷路になるのかを確定しないといけません。WebサイトのHTMLは、画像、色、テキスト、ほかにもFlash要素、プルダウンなどさまざまな種類の要素で構成されています。その中から何をユニークなデータとして取得すれば、迷路化へと応用できるか考えました。そこで当初は、HTML内の画像要素(imgタグ)を取得して、画像要素がせり上がるようにして、その間をボールが転がることを考えてみました。

初期はサイト内の要素がせりあがり、その隙間をボールが転がる想定で作られていた

勇亮:アイデア段階ではいい感触はあったものの、この仕様で迷路化してデモンストレーションをしてみると、ただ隙間にボールが転がるだけでゲームとしての面白みがまったくなく(苦笑)、至急別の対応を模索することとなりました。
Saqoosha:迷路生成ルールについては、最後の公開までどうすべきか悩むところでした。最終的には背景が抜け落ちて、ユニークな要素が島状になる仕様を採用します。技術検証については、先に触れたモバイルとPCとを同期させるWebSocket接続や迷路生成のアルゴリズムのほか、転がるボールの摩擦係数、浮遊する島の高低差、迷路内に作られるエレベーターやガードレールの設置など、作り込みのための数多くの検証が求められることになります。同時にほどよい難易度に設定されているといったゲームバランスにも熟慮を重ねて、ようやく完成となります(技術検証やゲームバランスに関する詳細はPart2を参照)。
― 技術検証のほかに、御社はどういったことを進めていったのでしょうか。
勇亮:迷路化案が確定した2012年10月時点で、私たちは主に三方向の業務を連関させながら進めることになりました。三方向とは、「技術の検証」のほかに「導線経路の確立」と「世界観の構築」です。「導線経路の確立」は、ユーザーがMAZEゲームに参加するに至るフローを検証していく作業になります。これらの輪郭ができてくることで、「世界観の構築」にも着手できます。そのほか、ボールを転がしていく迷路ゲームという設定のもと、ゲームをクリアする条件やポイント制、ライフ数などのルールの設定を決めていく作業も含まれます。フローやルールが決まらないと、デザインするものも決まらないので、並行して進めていました。
― 「導線経路の確立」についてのネックは、ユーザーがモバイルとPCを同期してくれるかという点だと思います。ユーザーにとって画期的だと感じてもらえやすい点である一方で、参加するには手間のかかる行為です。
米良雄介(以下 米良):ですので、さまざまな条件、分岐する可能性を探り出すことが不可欠でした。例えば、PC側でChromeを利用しているユーザーと別のブラウザを利用しているユーザーとで、参加に至るフロー(導線経路)は異なります。当然、WWMに初めて来訪したユーザーと二回目以降のユーザーとでも違うでしょう。ほかにも、どういうケースだとユーザーはチュートリアル画面に遷移するか、PCでなくモバイルでWWMにたどりついた場合にどうPCにもつないでもらえるかなど、あらゆる経路とその際の対策についてあたっていました。

モバイルとPCを同期させるにあたって、考えられるあらゆるユーザー経路の可能性を洗い出して、公開に備えた

モバイルとPCを同期する画面。PC側では、ユーザーに同期用の6桁の数字が付与される

モバイルとPCを同期する画面。PC側では、ユーザーに同期用の6桁の数字が付与される

勇亮:特にフロー検証の初期段階では、ゲームの世界観はほとんどできていません。技術検証と並行してフローをきちんと作り上げることで、プロジェクト全体の拠り所をはっきりとできる狙いもありました。フローが見えてくれば、より具体的なユーザーの行動が見えてきますし、想定される具体的な行動例について「実現できること」と「できないこと」を整理しながら、分岐していく選択肢として残すか消すかの作業がしやすくなります。
米良:初めてサイトに訪れるユーザーは「ゲームをしよう」というモチベーションでWWMに訪問しません。その状態からモバイルとPCを同期させるに至るフローについて、約2カ月かけて検討しました。フロー設計を始めた当時は、モバイルとPCと同期させる施策の前例が他になかったので、同期するまでのステップ数をどれほどにおさえることが最適かを見定めるのにじっくりと時間をかけました。
勇亮:WWMでは、同期のために6桁の数字が付与されるように設定しました。これも「6桁でおさまるなら、何とかユーザーは同期に付き合ってくれる」という仮説と検証のもとで、最終決定に至ったわけです。6桁にすることで「できないこと」が出てくるのか。6桁入力とそれに伴う犠牲になることを天秤にかけて、どちらがよりよいかを検証します。

WWMの本質を探求し、デザイン化へ

― 技術とフローの検証をしながら行った、「世界観の構築」についてはいかがですか。
高谷優偉(以下 高谷):プロジェクトの方向性がかたまり出したことで、デザインすべき要素が見えてきました。例えば、任意のWebサイトを迷路化すると、迷路化された要素(島)が浮遊するステージの外側はどうするべきか、です。スタッフ間でも議論を重ねながら、世界全体が「インターネットそのもの」という結論を導き出しました。

どのように「インターネットそのもの」を表現するか。そこで僕はChromeというブラウザに入っていくというイメージをもとに、「攻殻機動隊」や「マトリックス」などの世界観をまずは参考にしてみました。ただ、すでに作り込まれたテイストを参考にしすぎると真似にしかなりませんので、うまくインスピレーションをつかみながら、もっとシンプルな表現へと洗練させていく方向へと舵を切りました。
初期には数々のイメージをラフに起こしながら、求める表現を探していった

初期には数々のイメージをラフに起こしながら、求める表現を探していった

高谷:例えば、ソーシャルグラフというつながりを想起するイメージ、宇宙空間や仮想空間風の発想も一理あるなかで、さらに行き着いたキーワードが「アブストラクト(抽象性)」。このアブストラクトをポリゴンによって表現していくことになったのです。そこから、インターネット内の広大な世界を表現するために、どういう要素をどのように配置するか。それらをいろいろと試していきました。

プロジェクトを象徴するロゴデザインの試行錯誤

勇亮:さらに並行して、このプロジェクトのロゴをどうするかという問題がありました。ゲーム全体を捉える象徴としてロゴの存在は必須でしたが、世界観やルール、導線設計にも関わるので、すぐに着手できない領域でもあったのです。
高谷:当初は2Dでさまざまな「WWM」のロゴパターンを作りましたが、それらをゲームの世界に置くと、どうもしっくりきませんでした。そこで世界が3Dであることにあわせて、ロゴも3D化して、浮遊しても違和感がない状態にしました。Chromeで使われているキーカラー(赤、黄、緑)を採用するなど、テイストももっとサイトの世界観に寄せて作ると、全体のトーンになじむことがわかってきました。
高谷が用意したロゴデザインの試案の数々

高谷が用意したロゴデザインの試案の数々

高谷:2Dのときと同様に3DロゴをPhotoshopで作っていると、なかなか自分の思い通りの角度や変形ができづらくなってきました。そこで、3Dモデリング担当として社内の北井に協力を仰ぎつつ、役割分担しながらデザイン調整することにしました。例えば、3Dロゴを構成する三角形の大きさや、文字を表現する角度の具合など、僕のイメージを北井に伝えて、イメージどおりにモデリングしてもらいました。
北井貴之(以下 北井):高谷から「その角度で」と言われた状態を捉えてモデリングしたものをワイヤーフレーム化します。それを高谷に戻し、高谷がさらにブラッシュアップするという流れになります。高谷とのラインは、ゲーム世界の他のオブジェクトを作り込む際も同じです。
高谷:また、浮遊感が出るようにロゴは微妙に動くようにしています。この微妙な動きについては、森研治(以下 森)に入ってもらってやり取りを重ねてプログラム調整しました。静体だとしっくりとしていたのに、やや動きが加わったり、ロゴに着彩したことで違和感が出てきたりします。ロゴを少しでも変更したい場合、モデリングをすべてやり直すことになりますが、実際に配置しないと気づかないことがあり、何度も北井や森との間を往復しながら調整を進めていました。
決定寸前までいったロゴのラフ案。ここから向きを調整して、公開用のロゴに至る

決定寸前までいったロゴのラフ案。ここから向きを調整して、公開用のロゴに至る

勇亮:じつはロゴについては公開の約1週間前に、「もっと向きを立てたほうがいい」という意見が出て、やり直したという経緯も潜んでいます(笑)。変える以上、バナーからスマートフォン用など使われているすべてで変えなければなりません。
Saqoosha:でも、指摘を受けてロゴを少し立てた最終状態のほうが、それまでよりも確かによくなったんですよね。変えてよかった(笑)。
勇亮:さすが川村さん(笑)!
高谷:ロゴが決まることでゲーム世界のオブジェクト(島、橋、エレベーター、ガードレールなど)の色やエフェクトも決まっていきましたし、自分の中で表現の質感が見えてきました。このプロジェクトは機能とデザインが表裏一体となっているので、あとはゲームプレイをしながら、どのデザインが最適であるかを何度も試しながら詰めていくようにしました。
― ありがとうございます。では、技術検証の詳細やゲームバランス、音楽、プロモーションムービー、プロジェクト全体の総括については、Part2で展開します。

Part2 : 「神」の視点で、WWMの世界を創造する

遠藤義浩

編集者。月刊誌『Web Designing』(マイナビ)など、主にWeb関連をテーマに扱う媒体で編集を務める。

SHARE