ゲームに学ぶUXデザイン　「楽しさ」を生み出す技術と工夫

ゲームに学ぶUXデザイン

森山明宏氏：みなさま、はじめまして。ご紹介にあずかりましたユーリカ株式会社の森山と申します。今日は1時間程度、お付き合いをよろしくお願いいたします。

（会場拍手）

今日はテクロス様に機会をいただいて、「ゲームに学ぶUXデザイン―こんなに違うWebとゲームのUI／UXデザイン―」というテーマでお話をさせていただきます。

最初に念のため言っておくと、実は私自身はゲームをデザインしたことはありません。ゲームに学ぶ、という本日のタイトルのとおり、ゲームのデザインで行われているよいノウハウを見つけて、ゲーム以外の分野に応用しよう、ということで、私はいろいろ自分なりに勉強をしています。ある程度成果がたまってきましたので、その一端をお話ししようというのが今日の内容になっております。よろしくお願いします。

本日の内容なのですが、まず「そもそもUI／UXって何？」というところからお話しします。すでに知っている人がいたらごめんなさい。

まず「そもそもUI／UXって何？」という話をしたあとで、ゲームのUI／UXがほかのUI／UXデザイン……とくにWebデザインと違う、その特異性についてお話をさせていただきます。

あらためまして自己紹介です。

ユーリカ株式会社の森山と申します。ユーリカ株式会社とは別に、横浜で「UX Yokohama」というIT勉強会サークルを主催しており、そのIT勉強会のテーマとしてゲームを取り上げています。「ゲームUI／UX勉強会」という名前で月に1回程度やっています。今日お話しする内容も、基本的にはここで勉強した内容ということになります。

そもそもUI／UXって何？

ではまず、「そもそもUI／UXって何？」というお話からさせていただきます。

まず、UXデザインのUX、ユーザーエクスペリエンスは国際規格「ISO 9241:210-2010」で定義されています。この定義によればUXとは「製品・システム・またはサービスを利用した際、および／またはその利用を予想した際に生じる、人々の知覚と反応」となっています。えーと、いかにも英語の直訳のような、意味のわからない文章ですが、UXとは知覚と反応のことなんだそうですよ。

でも、意味がわからないですよね。もうちょっとわかりやすくくだいて説明します。UX、ユーザーエクスペリエンスは「利用者の体験」であって、「利用中の」体験ではありません。もっと広い概念であるということで、先ほどのわかりづらい定義につながっています。

まず、「使用前」です。テレビの宣伝や雑誌の広告を見て「これ、なんかおもしろそう。買ってみようか。ダウンロードしてみようか」と思うじゃないですか。この段階からUXは始まっています。製品やサービスの使用によって得られる価値を予想する。ここからもうUXが始まっているという定義になっています。

それから「使用中」、小難しい話になりますが、人間は、作業の1手順ごとに、さっき出てきた知覚と反応のサイクルを無意識に繰り返すとされています。認知心理学的にそうだと言われています。反応とは感情の変化、思考の変化、行動の変化のことです。無意識にですが、これを繰り返しているらしいですよ。

さらに、一通り使い終わったあとの「使用後」のUXですが、これは体験の全体を内省し、よい経験、あるいは悪い経験として記憶に残すことに相当します。まぁ、残りますよね。

典型的なのが、「いいね！」です。「いいね！」という気持ちは、ある一定期間、短くても長くてもいいんですけど、使ってみたあとの全体の内省として、「いいね！」あるいは「ダメだね」という印象になるんですね。使用後にいったん心の中で内省、総括してから記憶に残すと。それもUXに含めますよ、というのがさっきの定義なんです。

もっと言うと、「いいね！」と思ったら、人間は「いいね！」ボタンをクリックしますよね。人間は使用後に内省して、記憶に残すんですけど、内省は次の行動にもつながっているんですこの誘発された次の行動もUXだということになります。けっこう大きい話ですよね。

さらに、4つ目に「繰り返し使用後」。たいていの製品は、1回使って終わりではなくて、2〜3回と使うはずですよね。そうすると、この経験や記憶がどんどん蓄積していきます。ということは、繰り返し使用して、経験の蓄積によって完成された強い印象や感情もUXだということです。これも大きい話ですよね。

なので、UX、ユーザーエクスペリエンスとは、使用中の体験だけではなく、「使用前」から「繰り返し使用後」まで含めたより広い概念であり、さらには、印象・感情・行動、内省した後の次の行動までもUXの定義の中に含まれるということになります。

UXデザインとはなにか

さて、「使用前」「使用中」「使用後」「繰り返し使用後」が全部UXだというお話をしましたが、、ここからは「じゃあUXデザインって何するの？」という話に移ります。

まず、使用前もUXに含まれるのですから、UXデザインの仕事として、適切な期待を提供することが必要ですよね。期待外れという言葉もあるように、大きすぎる期待はやはりダメです。あくまでも適切な期待を与えて、期待どおり、あるいは期待をよい方向に裏切る経験を提供しなければいけません。「適切な期待を提供するためのデザイン」はUXデザインに含まれます。

使用中は、普通に使いやすさの提供・心地よさの提供が必要です。これはみなさんもご存じのとおり、UXデザインに含まれています。

使用後については、さっき言いましたとおり「いいね！」という気持ちが「いいね！」ボタンをクリックさせる、つまり気持ちが次の行動を誘発します。ということは、、デザインで人の気持ちをコントロールできればデザインで人の行動もコントロールできるということです。

ですので「課金をしてもらうためのデザイン」も、実はUXデザインに含まれます。課金という次の行動を誘発するためのデザインということで、実はUXデザインなんです。

さらに繰り返し使用後、繰り返し使用すると経験が積み重なって印象やイメージがどんどん心の中に定着していきますよね。これは要するにブランドのことなんですよ。つまり、「ブランド価値を高めるための活動」はUXデザインなんです。

UXは定義が非常に広いだけでなく、「何のためにUXデザインやるの？」というUXデザインの目的も非常に幅広いです。これが「UXって何？　よくわからん」と言われる原因になっています。

UXデザインと開発工程との関係についてもう少し詳しく説明します。製品やサービスの開発では、企画があって、設計があって、流通があって、その他、サポートだったり宣伝広告があったりしますよね。

これをユーザーの認識する順番で並び替えると、「宣伝を見て、お店で買って、使用する」の順番になります。製品全体のイメージはかなり企画に左右されます。画面1枚1枚や、レバー、ボタンといった個々の部分の印象は、設計に左右されます。それから、使い方がわからなかったらサポートに頼ったりしますが、ユーザーはここからもなんらかの印象を感じ取ります。

製品やサービスの開発工程とUXデザイン

というわけで、（スライドを指して）こういう順番でユーザーと接していくんですけど、この流れとUXデザインがどういう関係になっているかについてです。まず、みなさんは「ペルソナ」「シナリオ」「カスタマージャーニーマップ」という言葉をご存じでしょうか？　これはUXデザインで非常に有名な手法です。

ペルソナ、シナリオ、カスタマージャーニーマップは、3つとも要求定義・要件定義のための手法だと言われているんですけど、実際にはこの使用前から繰り返し使用後にわたるすべてについて、要求定義・要件定義をするためのものです。本当は、個々の製品の要求定義・要件定義をするものではないんですよ。ペルソナ、シナリオ、カスタマージャーニーは、本当はそういうものです。

「お金と時間がないから、製品の使用中のところだけしかやらないよ」という話もあります。しかし、本当のペルソナ、シナリオ、カスタマージャーニーというのは、使用前〜繰り返し使用後にわたる長いタイムスパン全体に対して要求定義・要件定義をするものです。

それから「ユーザー工学」という言葉があります。ユーザー工学は、UXを品質管理するための学問なんですけど、これも同様に、使用前から繰り返し使用後にわたる長期のタイムスパンのすべてにわたって、UXの品質を管理するためのものになります。

今日のテーマはUI／UXですが、UI／UXと言われているものは、だいたいこのあたり……具体的な設計のところです。まずここ（スライドを指して）要するに全体方針ですよね。それから具体的な設計がここ（スライドを指して）で発生して、これがUIデザインパターンやマイクロインタラクション、モーションデザインなど、いろんな細かい手法がたくさんあるんですけど、そういったUXデザインの手法を活用して設計を行う工程になります。

さきほど「UXデザインで、人間の行動をコントロールできる。ユーザーに課金させることができる」と言いましたよね。そういう人間の行動をコントロールする知識の体系のことを、行動経済学、あるいは「ナッジ」といいます。

行動経済学やナッジは、完全に使いやすさや気持ちよさとは別の話で、「お金を使わせたい」という話ですから、この2つとはまた独立した3つ目の要素として、ここ（スライドを指して）に存在しています。

UIデザイナーの方は、この全体方針に従いつつ、営業方針に従いつつ、具体的なUIデザインを描いていくことになります。

UXデザインはこれだけではありません。4つ目が、CXデザインと呼ばれているものです。さっき言ったとおり、経験の積み重ねがブランドのイメージになります。ブランドイメージの形成に特化したUXデザインのことを、CXデザインといいます。これはもう、製品の話ではないんです。企業のイメージをどうやって上げていこうかという話なわけです。

このCXデザインと、普通の宣伝広告を配布する流れとの関係性は（スライドを指して）こういうかたちになっています。UXデザインとはけっこう広い話ですよね。UXデザイン全体におけるUI／UXデザインはこのへんということになります。

ペルソナを描いて顧客理解を深める

では次に「UXデザイナーと言われている人は、ふだん何してるんですか？」という話です。今日、会場に来ている方で「自分は実はUXデザイナーだ」という方はいますか？

実際には、会社によってUXのどこに重点を置いているのかが違うので、同じUXデザイナーの肩書きであってもやっている仕事の内容が違うこともあります。ただ、一般的にはUXデザイナーはこのような仕事をしています。

まず1つ目が、ペルソナを描いて顧客理解を深めるということです。「お客さんって、どういう人なんですか？」というのを、わかりやすく表現するために、ペルソナを書くんですよ。

今、「ペルソナを書く」と気軽に言いましたが、実際には、まずはターゲットとなるユーザー、顧客を決めて、インタビューをして観察して、特徴分析……今日は説明できないんですけど、そういったことをして、さらに特徴分析のデータをアンケートで検証します。ここでユーザーの典型的な特徴をアンケートで定量的に検証した結果、メジャーな特徴をペルソナとして表現するという流れになります。けっこう面倒なんです。

ペルソナを作ると同時に、カスタマージャーニーマップと呼ばれるものも作ります。ペルソナは「典型的な人物像」、カスタマージャーニーマップは「ユーザーの典型的な行動」を表現したものになります。

カスタマージャーニーマップで全体を俯瞰する

カスタマージャーニーマップは、（スライドを指して）こういうふうに1日の行動、あるいは1週間の行動を見ますが、場合によっては「製品を手に取ってから、はなすまで」のように、すごく短い場合もあります。これはものによって違うとしか言えません。この1日なら1日の行動を、まず「状況」「行動」「心理」に分解して、時系列で表現します。

1日の行動を「状況」「行動」「心理」に分けて表現したら、さらにそこに、「タッチポイント」……つまりメインとなる製品やサービス、その他の製品やサービス、宣伝や広告、公式Twitter、雑誌の広告記事といったものを全部含めてタッチポイントとして書き込みます。

ユーザーはどういう人なのか。そして、そのユーザーに対して、私たち企業はどういう活動をしているのかを一覧表で表します。これがカスタマージャーニーマップというものです。

でも、これで終わりではないんです。ここまでは、ユーザーはどういう人なのか、どういう行動をしているのか、そのユーザーに対して今、私たち企業は何をしているのかという現状を把握しただけです。ここで終わっちゃダメなんですよ。

このあとは、理想シナリオから要求・要件を定義するという一番重要な仕事が待っています。便宜上「理想シナリオ」と呼んでいますけど、実際には、シナリオ、つまり短編小説風の文章ではなく、カスタマージャーニーマップの書式で理想シナリオを書くこともあります。

何をするかというと、まず提供したい理想の体験、つまり理想の状況・理想の行動・理想の心理を書くんです。そこから「提供したい体験、理想の状況・理想の行動・理想の心理を提供するためには、どういうタッチポイントになればいいですか？　どういう性能を持っていればいいですか？　どういう機能があればいいですか？」と考えを深めて、要求・要件を定義します。ここまでの作業を「理想シナリオを書く」といいます。

要求・要件が定義できたら、このあとの試作の工程に移ります。試作と評価は基本的に1セットです。試作をするときも闇雲に作るのはよくありません。

ユーザーの協力を得て良否を評価する

UXデザイナーの仕事と言いますか、プロのUIデザイナーであればUXに優れた定番のUIデザインに詳しいというのもプロの要件として挙げられます。一応、定番のデザインがあるんですよ。それを知っておけば、評価のときに手戻りが少なくなります。

ただ、定番のデザインに詳しくても、定番を過信してははダメです。最後に、ユーザーの協力を得て良否を評価するという、一番やっかいな仕事が待っています。

なぜ、ユーザーの協力を得て良否を評価するのか。UXというのは、「いいね！」という言葉が典型なんですけど、UXの良否は完全にユーザーの主観なんですよ。だから、ユーザーの協力を得る以外に良否を評価する方法がないんです。

定番のデザインに詳しい人がデザインしているんだけど、そこに甘んじるのではなく、ちゃんとユーザーに協力を得てUX評価をして、よいものをつくる。これがUXデザインということになります。

（スライドを指して）UI／UXは、この前半半分あたりですよね。こっちはUIは関係ないですからね。ここからやっとUIデザインが出てきて、ちゃんと評価してくださいねという流れになって、おおむねこのあたりがUI／UXということになります。

ちなみに、ああすみません、今日はゲームの話ですが私自身はゲームデザイナーではありませんのでWebで説明させてください。ちなみに、一般的なWebの製作工程というものがあって、コミュニケーション、企画、プランニング、サイト設計、サイト構築、品質評価といった流れですが、UI／UXのデザインの工程を重ね合わせると、こんな感じになります。

前半でユーザー調査をして、その結果をもとにペルソナ／シナリオ法での要求分析をします。後半で、定番のUIデザインに従いながらもUX評価を行って、本当にこれでいいのかを検証しながらものづくりをしていく。これが、一般的なUXデザインの流れです。

ここまでは、一般論としてのUXデザインの話です。ここからがやっと、ゲームの話に移って、ゲームのUXデザインの特異性ということでお話をしていきます。

ゲームのUXデザインの特異性

「ゲームのUI／UXデザインの特異性って何？」という話ですが、細かいことを言い出すとキリがないので、この4つにまとめました。

まず1つ目が「楽しさをデザインする」。2つ目は「苦痛をデザインする」。3つ目は「状況としてのゲームのルールをデザインする」。4つ目が「状況としてのキャラクターをデザインする」。これらは、Webデザインなどの他のジャンルではありえない内容です。「状況としてのルール」「状況としてのキャラクター」などはわかりづらいですね。あとでまた説明します。

まず、楽しさをデザインするという話です。要するに、ゲーム以外のシステムは、基本的に楽しさをデザインしていないんですよ。

例えば、ニコニコやYouTubeといった動画アプリがありますよね。YouTubeアプリもニコニコのアプリも、あれは動画が楽しいんですよ。動画アプリが楽しいわけではない。ほとんどの製品やサービスがそうですが、基本的にアプリというのは手段なんです。

でも、ゲームだけは違うんです。ゲームは、いわゆる楽しさのコア、コンテンツとシステムが完全に一体化してるんです。「ゲームアプリはゲームが楽しい。まさに、ゲームそのものが目的だ」という点、ここが他との大きな違いになります。

ほとんどの製品やサービスがなんらかの目的を達成する手段にすぎません。しかし、ゲームだけは、ゲームそのものが目的で、かつコンテンツとサービスが一体化しています。

「楽しさ」とは何か？

ここで、非常に残念なお知らせがあります。（スライドには）「ゲームの楽しさをデザインする」とありますが、実際のところ、楽しさを「デザイン」することは本質的にはできません。これはもう「アート」の領域なんです。なので「こうすれば楽しくなるよ」とは言えないんですよ。

でも、一応楽しさを理屈で説明しようと努力した人が過去に何人かいます。

例えば、ロジェ・カイヨワという社会学者の方は遊びを4分類しました。「競争」「偶然」「模倣」「目眩」と、おおむねこの4つに分けられるだろうということです。

それから、元Electronic Artsのロビン・ハニッケさんたちが昔「MDA理論」というものを提唱しました。「ゲームの楽しさは8つあるんだよ」という内容ですが、その8つの要素とは「新規性」「非日常性」「物語性」「挑戦」「仲間意識」「探検」「芸術的表現」「ひまつぶし」であるという理論です。

また、グリー株式会社さんが「UI Discussion」という社内勉強会をやっているという話を以前にCEDECというカンファレンスで発表していました。そこで紹介されていたのが、ゲームの楽しさには7つの要素があるというものです。それはなにかというと、「見やすさ」「わかりやすさ」「使いやすさ」「演出・音・アニメ」「アート・世界観」「統一性」「仕様」ということでした。

「楽しさ」に影響するもの

これはあくまでも、そういう理論があるよという話で、私個人は、ゲームの楽しさは基本的にアートの領域であって、理屈にできないと思っています。

まず、最初のロジェ・カイヨワさんの4分類からすると、実際には「ゲームではないけど、楽しい娯楽」というのはあるわけですよ。

例えば偶然……宝くじやガチャですけど、あれは厳密にはゲームではありません。本当に運任せのものですね。それから模倣は、コスプレとかですよね。また、小説を読んで小説の主人公に感情移入するのも模倣になります。そして、目眩は、ジェットコースターみたいなものですよね。ゲームも、派手な音楽、爆発音、派手な光はこれに含まれます。

それらは、冷静に考えるとゲームの本質ではないんだけど、実際のところ楽しいわけです。なので、ゲームを作るときには、厳密にはゲームじゃないんだけど、こういう楽しさを入れていかないといけない、ということになります。

グリーさんは、実際に自分のところでゲームを作っているわけですから鋭い指摘をしていますけど、7つの要素の最初に「見やすさ」「わかりやすさ」「使いやすさ」を書いている。これは、楽しさじゃないんですよ。要するに、使いやすさ、ユーザビリティですよね。

でも、使いやすさは楽しさに影響するんですよ。使いづらいというのは要するに不愉快ということですから、ゲームの楽しさをどんどん削っちゃうわけです。使いやすさは冷静に考えるとゲームとは直接関係ないんですけど、ゲームの邪魔をしないためには、使いやすさもよくならなければいけないと言っているわけです。

またグリーさんは、「演出・音・アニメ」「アート・世界観」も7つの要素のうちに入れている。これも冷静に考えると、ゲームとは直接関係ないんですよ。ここで言っている「演出・音・アニメ」「アート・世界観」は、模倣や目眩に分類されるもので、あくまでも雰囲気なわけですね。

たとえば将棋というゲームは、将棋のルール、それから将棋のルールによって発生するゲームの展開がおもしろいのであって、別に将棋の演出や音やアニメ、アートや世界観は関係ないですからね。

本当はゲームとはそういうものなんですけど、グリーさんはソーシャルゲームをいくつも作った経験として、「現代のゲームは、ここがよくないとダメなんだ」という結論に達したわけですよね。ここをがんばらなければならないということです。

具体例で学ぶUXデザイン

さて、具体的な例をいくつか紹介していきたいと思います。

まず楽しさをデザインするということで、こういった平凡なユーザーインターフェース……タイトルがあって、メニューがあって、普通にボタンがあるんですけど、普通のアプリはわかりやすさ優先のシンプルなユーザーインターフェースが好まれます。

でも、ゲームの場合は違いがあるんですね。『シノアリス』のゲームのサポートボタンは顔のアイコンになっています。

なんでこんなデザインのアイコンなのか？　これはあくまでも雰囲気作りのためにやっているわけです。『シノアリス』のUIデザインは、ヨコオタロウさんの、あのなんともいえない不気味な世界観を表現するためにやっているもので、これはわざとそうしているわけです。あくまで雰囲気演出のためにデザインされたUIということになります。普通、ゲーム以外の製品やサービスでこういうデザインはやらないですよね。

それから、モーションの話です。みなさんは、Twitterをやっていますか？　スマホのTwitterで、この「新しいツイートを表示」というボタンは上から降ってきますよね。ご存じですか？　このボタンは上から降ってくるんですけど、なんで上から降ってくるのかというと、「Twitterにおいては最新のコンテンツは一番上にあるよ」ということを表現するためです。つまり、これは実用上の意味があるモーションなんです。

一方、『シノアリス』です。背景の歯車は回転するんですが、回ることになにか意味があるのかというと、実用上の意味はないわけです。でも、これも雰囲気の演出のためのモーションとして、この歯車が回るということになります。こういうデザインは、普通の製品やサービスではなかなかないですよね。

それから、ゲームデザインで特異というか、Webデザインではほとんど「サボられている」活動なんですが、ゲーム業界は、ゲームの外でゲームの雰囲気を演出します。ゲーム業界は熱心ですね。

例えば、『艦これ』の公式のTwitteです。必ず「マルキューサンマル。提督の皆さん、おはようございます！」と、いつも海軍式の挨拶から始まるんですよ。これも雰囲気作りのためにやっているわけです。

だって、Twitterで企業が公式情報を流すときに、いちいち海軍式の挨拶をする必要はないじゃないですか。実用上の意味はない。これはあくまで、雰囲気作りのためにやっているということになります。

また、スマホのゲームは、たまにプッシュ通知でメッセージを送ってきますよね。これは『どうぶつの森 ポケットキャンプ』の通知で、「みなさ〜ん！　プレゼントが届いていますよ〜！」という、しずえさんの口調によるプッシュ通知です。これも、なぜしずえさんの口調を真似たメッセージが届くのかというと、これも雰囲気作りなわけです。

ゲームの外でも雰囲気作りを行うのは、世間一般では「ブランドアイデンティティの確立」といいます。艦これのTwitterもポケ森のプッシュ通知も、ブランドアイデンティティの確立のための活動なんですよね。大企業が企業イメージを上げるための活動とやっていることはまったく同じなんです。

残念ながら、普通のWebデザインでここまでがんばることは滅多にないんですけど、ゲーム業界はがんばっている。常々、すばらしいなと思います。