ゲームデザインから学ぶ UX

アイコンに関する怪物級のエッセイを少し楽しくするために、私たちはアイコンモンスターを撃つアーケードゲームを作りました。1 週間のハッカソンのつもりが、1 年に及ぶ驚くべき冒険になりました。ここでは、そのアーケードゲームを作るなかで UX デザイナーが学んだことを紹介します。

1 年ほど前、私たちには ユーザーインターフェースにおけるアイコンの使い方に関する記事 にぴったりの材料がありました。その記事のオチは Dieter Rams の言葉を借りたものでした。「アイコンは、できるだけ少なく、ただし少なすぎてはいけない。」そこで私たちは考えました。「デザイナーのアイコンを見抜く勘を鍛える、速くて、単純で、無料で、最高にクールなゲーム を作ろう」と。記事に仕込んだギミックです。人は記事からゲームを、ゲームから記事を見に来るだろう。これを私たちは「Yps アプローチ」と呼びました。¹

友人たちの多くは首をかしげました。「記事のためにゲームを書くの？ 逆じゃないの？」 それが長い……大博打だということはわかっていました。私たちは、早くできる、かっこいい、単純だ、そしてたくさん学べる、と思っていました。何がまずいっていうんだ？ まあ、「早く」は設計 6 か月、開発 6 か月に化けました。「単純」はロケット工学になりました。「蹴り上げられた」側は主に私たち自身でした。時間も神経もかなり使いました。ですが、本当に たくさん 学びました。

1. ストーリー

前提: 当初、魅力的なゲームの物語を作ることは二次的だと考えていました。多くのゲームは、ひどい会話、安っぽいユーモア、そして全体を貫くストーリーはあまりに苦痛で、完全に ~~省いても~~ 省くべきだと思えるほどです。

プリンセス（当時は Peach ではなく Princess Toadstool と呼ばれていた）は Bowser という名のトカゲにさらわれる……まあ、それで終わりです。配管工として、あなたは何度も何度も彼女を助けに行かなければならない。どうやら彼女は誘拐されるのが好きらしい（予防策はどこに？）。キノコ王国ほど奇妙な世界なら、もう少し説明があってもよさそうなのに、そんなものはない。典型的な「危機に陥った乙女」の物語であり、しかも怠慢そのものだ。ゲーム史上、いちばん弱い「ストーリー」だろう。あなたのプロットは別の城にあります。²

多くのゲームは一人称シューティングか、80 年代ゲームの焼き直しのどちらかだと考えていたので、ストーリーに時間を使う必要はないと思っていました。成功したゲームを真似て、見た目をかっこよくし、偽物の擬似ストーリーは全部飛ばせばいい。なんと間違っていたことか。

現実: 最初は、見た目を少しよくした Space Invaders を作っていただけでした。³ スタート画面はシンプルで、「Play」と「Hi-Score」だけでした。ところが、どういうわけか イントロが必要だ とすぐに感じるようになったのです。でも、どんなイントロにするのか？ 最初は iA ロゴを追加しました。ズームイン／ズームアウトし、フェードさせ、いつもの手をいくつか試しました。それでも十分ではありませんでした。「言葉とアイコンの戦い」、後になって「論理と感情の戦い」と言い換えたアイデアが生まれると、イントロは形を取り始めました。8 ビットの iA ロゴが、小さな人（i）と船（A）に変身する。人が飛び上がって船に乗り込み、船は画面の外へ飛び去る。これで舞台が整いました。ここにそのアニメーションの半分ほどがあります。

この小さな仮のストーリーができて、開発 3 か月目に面白いことが起こりました。ゲームが生き始めたのです。物語を語るための正しい言葉を探しているのではなく、正しい ドラマ を探しているのだと気づいたときに初めて、ゲームが本物のように感じられるようになりました。私たちは Intro、Start Screen、各 Stage の Screen、そして End を含むストーリーボードに取り組みました。これらを合わせ、微調整し、また合わせ直す作業で、私たちはすっかり参りました。

学び: 没入は重要です。プレイヤーが自分のキャラクターに完全に自分を重ねるには、場面と幕が必要で、魅力的な視覚的ストーリーを語らなければなりません。Curtain、Beginning、Middle、End、Applause という古典的な劇の関係は、Intro、Start Screen、Level Screens、Game Over に置き換えられます。各パーツを全体ときれいに合わせるには、かなりの忍耐と微調整が必要です。言葉は従来の情報アーキテクチャほど重要ではないかもしれませんが、それで楽になるわけではありません。

2. 論理と感情

前提: 私たちは、既知のゲームアイデアを使い、色鮮やかで見栄えのいいグラフィック、クールな音、派手な爆発を加えれば、ゲームはほとんど勝手にできると思っていました。ゲームはより分析的ではないのだから、そんなに難しくないだろう、と。しかも私たちは全員ゲーマーなので、何が大事か知っている、と。今振り返ると、なんと愚かに聞こえることでしょう。そして、なんと聞き覚えがあることでしょう。自分たちの職業について、人からそんなふうに言われるのをどれだけ聞くでしょうか。使い方を知っていることと、作り方を知っていることは同じではありません。とはいえ、「観客にとって、舞台で起きていることがすべてだ。」⁴ というのは事実です。ほかのあらゆるデザインと同じく、私たちはすぐに「ゲームデザインとは抽象化のプロセスだ」⁵ と学びました。そこには、ビジョン、強いコンセプト、方法、そしてたくさんの忍耐が必要です。そして経験です。始めたとき、私たちには経験がありませんでした。

「表象された『世界』がインタラクティブであるとき、前衛演劇のような作品であれ仮想オフィスであれ、人々が宇宙の端を見つける方法、つまり可能性の限界を発見することは、デザインにおける中心的な問題である。」⁶

現実: プロジェクトの最初の 95% のあいだ、ゲームは思い描いていたような感触になりませんでした。見た目を変え、色を増やし、クールな音を加えても、期待した効果はありませんでした。ゲームには、私たちが慣れていた以上に細部への注意が必要だとわかったのです（しかも私たちはかなり細かいほうです！）。感覚レイヤー⁷ を少し変えるたびに、構造も調整しなければなりませんでした。驚いたことに、Web やアプリ開発で慣れていたような、形と内容、HTML と CSS、フロントエンドとバックエンドの明確な分離は、そこにはありませんでした。

学び: Web やアプリのプロジェクトでは、構造を整えることにいちばん時間を使います。ワイヤーフレームが少しずつ形になるにつれて、視覚デザインはゆっくり収まるべきところに収まっていきます。最終的には、見た目のスタイルはほとんど必然に見えます。やっているうちに学ぶなかで、私たちは経験不足のせいで、形と内容を切り分けて構造を見極めることができないのだと気づき始めました。デザインすればするほど、以前は形しか見えなかったところに構造が見えるようになります。スタート画面をきちんと動かすだけでも、100 回以上のプレイ可能なベータ反復が必要でした。同時に、ゲーム作りは、あらゆるデザインの感覚レイヤーがどれほど厚く、重要かを私たちに気づかせました。UX デザイナーは、ときどきそれを忘れがちです。

3. ユーザー体験

前提: 始める前は、ゲームの UX を作るのは簡単だと思っていました。ゲーム開発の古典的な使いやすさは、一般にひどいものだと思っていたからです。どのゲームもメニューの論理が違います。設定は過剰に設計された混乱で、たいていの場合、そこにある設定は完全に余計です（デフォルトでいいじゃないか）。ゲームを始めるまでに必要なスプラッシュ画面やクリックの数は、Web デザインなら完全に致命的です（そんなことをするのは素人だけ）。そして最悪なのは、あの「遊び方」イントロです（私たちの世界ではタブーです）。それなら、ニュースサイト、オンラインショップ、銀行ソフト、テキストエディタ、インターネットセキュリティ UI を長年作ってきた私たちなら、Space Invaders ベースの単純なゲームのまわりに、素晴らしいユーザー体験を作るのはどれほど難しいのでしょう？

現実: ゲームの素晴らしいユーザー体験を作るうえで本当に難しいのは、メニューや設定まわりの流れを整えることではありません。いちばん大きな難題は、ゲームプレイそのものです。ゲームプレイは即時で、途切れず続かなければなりません。スプラッシュ画面は、没入感と緊張感を作るうえで重要です。私たちは、小さな船をさまざまなビューポートで操縦し、撃てるようにする方法を何週間もかけて考えました。最終的には、親指を HUD に置き、そこから親指を引き戻すことで移動する仕組みにしました。

学び: ゲームは受動的ではありません。私たちはそれを完全に見落としていました。ゲームは、私たちの注意を完全に引きつけ、すっかり没入させるように設計されなければなりません。ゲームは前のめりで遊ぶものです。ウェブサイトは、もっと楽な身体姿勢で使えるべきです。そしてゲームプレイは、夢中になる程度には難しく、でも簡単すぎてはいけません。そのちょうどよいバランスを見つけるのは錬金術のようなものです。その難しさと完全な没入を実現することに、私たちは最大級の敬意を抱くようになりました。

4. 違い

ほぼ 20 年ウェブサイトを設計してきた私たちは、ここまで大きく違うとは思っていませんでした。実際、直面した課題の多くは見覚えのあるものでした。衝撃的だったのは、ゲームの使いやすさは他のデジタル製品とは驚くほど感情的に違う、ということでした。良いアーケードゲームは、高い張り詰めを持つドラマであり、詩のように密度が高いのです。

ゲームをデザインすることは、多くの点でウェブやアプリをデザインすることに似ています。主要な UX スキルはすべて必要です。ですが違いもあります。ゲームにおけるユーザー体験デザインは、はるかに強烈な挑戦です。途切れない没入、完全なリアルタイム制御、キャラクターとの同一化が求められるからです。

ストーリーは主に言語的・知的な課題ではなく、神経を使うコミカルなドラマです。皮肉なことに、それは自分が誰なのかを忘れさせてくれます。必要なのは、純粋なドラマです。でも Hamlet ではなく Super Mario です。おわかりのとおり、私たちはまだそれを完全には理解していないので、うまく説明する方法もわかっていません。全体のドラマの弧は、ゲームプレイの信頼性にとって中心的です。ゲームプレイとドラマを正しく作ることに比べたら、新しいゲームフォントを作るのはお茶の子さいさいでした。

Intro、Start Screen、Level Screens、Game Over、Final Screen は互いにうまく連携しなければなりません。よくできたアーケードゲームは、幕が上がり、始まり、中盤、終わり、そして拍手で終わる劇のように進みます。物語の各部分を、何度も遊びたくなるほど美しく噛み合わせること。これこそゲームデザイン特有の芸術です。ゲームデザイナーの目標は、私たちが遊びながらヒーローに自分を重ねることです。それは Web やアプリデザインよりもドラマに近いのに、まったく別物でもあります。ゲームにおける論理と感情の関係は非常に複雑で、従来の Web やアプリのプロジェクトよりもはるかに密接に絡み合っているように見えます。魅了されます。似ているけれど違うのです。私たちのような退屈な UX デザイナーでも、そこから学べることは山ほどあります。

結論

私たちの計画は、記事を宣伝するためのギミックを作ることでした。「記事のギミックとして、ちょっとした単純なゲームを作ればいい」という考えは、初心者の夢でした。実際には大仕事で、私たちを限界まで追い込みました。最初の数週間で、ゲームデザインには、ほかのどんなデザインでもそうですが、安い近道や裏技はないと気づきました。正しくやるか、やらないかです。

ダウンロード数は 1 日 1000 本から始まり、いまでは 1 日 6000 本以上に増えています。「On Icons」は、「Web Design is 95% Typography」以来、もっとも成功した投稿のひとつであり、App Store 内から iA Writer への相互販売もかなりあります。なので、すでに私たちは満足しています。この短いレポートで省いたことはたくさんあります。エンド画面の探索、スタート画面の変遷に伴うベニー・ヒル風の行ったり来たり、作ったすべてのゲームフォント、テストの苦労、たくさんの新しいピクセル哲学、そして異なるデバイスサイズ向けに 1 つの操作を作る技術的な難しさなどです。ほかの面についてもっと聞きたければ教えてください。

もちろん、ゲームから削らざるをえなかったかっこいいデザイン案も山ほどあります。たとえばこんな邪悪な Game Over アプローチです。

いまでは、ハードコアもソフトコアも含めた多くのゲーマーが Iconic を本当に気に入ってくれており、Game Center のトップチャートが毎日どう変わるかを見るのが楽しみで仕方ありません。1 日 6000 ダウンロードがどれくらい続くのかはわかりません。フィードバックは真っ二つで、冷え切っているか、燃え上がっているか、好きか嫌いかです。まあ、アーケードゲームですから。まだ完全には終わっていません。ソフトウェアなので、永遠に終わらないのです。⁸

ゲームをデザインすることは、それ自体が中毒性のある営みです。いちばん価値ある収穫は、私たちの日々の仕事に対する見方が変わったことです。もしこの短いまとめが、従来の UX デザイナーとしてあなたの興味を引いたなら、ぜひゲームデザインに挑戦してみることを強く勧めます。私たちにとっては、日々の仕事のための基礎研究になりました。つまり、極限状態のユーザー体験デザインです。ゲームデザインは、より分析的な Web デザイナーにとってすばらしい訓練場です。なぜなら、デザインプロセスの最初には大きすぎて、最後には小さすぎることが多い製品の感情レイヤーを、認識し、理解し、形にする方法を学べるからです。

この話にはまだまだ語ることがありますが、ここまで来たら ゲームを試してみてください。無料です。