Tags

閉じる

Category

閉じる

Search

Search

閉じる

UIはつくらない。ワクワクするストーリーをつくる。（UXのためのUI：ゲーム編）

戻る

とりあえずかっこよさげな見出しを考えたところで８割方燃え尽きました。
デザイナーの きのです。
 

今回は【UX Tokyo Advent Calendar 2014】 の8日目としてお送りします。

 
 
現在、僕はゲームのUI制作の現場で働いています。*0
半年ほど前からUXの勉強を始めたので、まだUXそのものに取り組んだ経験は少ないひよっこ*1です。

既に同じような初心者側からの記事があがっていますので、今回はユーザー体験そのものではなく、それに向けてUIデザイナーとしてどう取り組んだかという話をします。

用語について不慣れなところがあるので、「ああ、あれはきっとあのことだな」みたいな所が散見されると思いますが暖かい目*2でみてくださいませ。

わかりやすいより、ワクワク

今まではわかりやすいが正義！だったのですが、
それだとにっちもさっちもいかなくなってきました。
なぜなら、わかりやすいはゲームに取っての最終ゴール（価値）ではなかったからです。

当たり前なんですけど、ゲームではワクワクすること・面白いこと・感動すること等が価値になってきます。
コンテンツや仕組みでそれらを実現できた時代もありましたが、それは今は昔。*3

UIを含めた構成要素全体でそこを目指すのが今の流れです。

 

そうなると、制作初期で確認すべきことはわかりやすいことよりもワクワクできることが大事になってきます。
わかりやすくすることはUIデザイナーの仕事ではありますが、その前にチームの仕事としてワクワクするためのストーリーをつくります。
別にこれはUIデザイナーだけができる仕事ではないので、どんな職能の人がやってもいいものなんですけど

誰かが必ずやらないといけません。

 

この目指すべきユーザー体験を一つのストーリーにまとめるというのは、ストーリーボードみたいな手法がいいんでしょうか。
僕は簡単なサイトマップにコメントを書いていっています。
 

ワクワクするラフをつくる手順

ラフをつくること自体は以前からやっていましたが、ポイントが変わりました。
今の流れはこんな感じです。
 
  1. ディレクターから企画とその狙い・訴求ポイントなどをもらう
  2. どこが楽しいのか自分で咀嚼する。自分以外のユーザー層からも考える。
  3. どう伝えればユーザーが楽しんでくれるかストーリーを考える
  4. それを画面構成として手書きラフにする
  5. ラフをディレクターやプロデューサーにチェックしてもらい、修正
  6. Photoshopでの制作を始める。あとはそれなりに
今は(2)どこでユーザーをワクワクさせるか、それをまずテキストで書き出して、
(3)それらをビジュアルでどう表現するか考えるところから始めます。
ストーリーの時点から絵で考えます。
僕は絵が下手なので、絵で伝えきれなさそうなときは「嬉しい顔」とか絵の横に書き添えます。
 
肝は(3)ですね。それが無いと、UIとユーザー体験を繋ぐ橋が無くなりコントロールができなくなります。*4
 
その時にはなるべくUIという意識をせずに、ゲーム内の世界の設定として考えていきます。
ただのボーダーではなくこれは棚板とか、これは背景画像ではなく部室だとか。*5
(4)最後にそれらをユーザーが迷わないように組み立ててラフをつくります。
 
ここまできちんとやったラフをみんなに見てもらうと、建設的な意見をもらえます。
これは○○にいる設定の方が面白いのではないかとか、このキャラのセリフはこうするのがいいとか、はたまた仕様を見直すべきかみたいな話になることまであります。
これって一回つくった後のテスト時の会話みたいですよね。
きちんとラフがつくれた時は簡単なシミュレーションがチームでできました。
 
 

ワクワクするには感情に訴えかけよう

 
そもそもワクワクさせるにはどうすればと考えて、
なんかしらの感情を動かすことが必要だなと今は思っています。
だいたいのゲームは繰り返し遊ぶことが前提になっているので、もう一度遊んでもらうためにどうユーザーに感じてもらうか、そのために何をいつ伝えるかを考えます。
 
今までは感情をコントロールすることなんて考えもしませんでしたが、
よくできてるゲームはそこをやっています。
そしてその特定の感情の連続が一つの体験となってユーザーに残っていくのです。
 
全体としてはこんな流れでしょうか。

体験＞それを構成する感情のストーリー＞それぞれの感情を想起させる構成要素

この流れで開発にみんなが臨めば、開発初期段階の手書きのワイヤーでも良し悪しの話がしやすいのではないでしょうか。
流れは下流にいけば行くほど個々人の違いが出てくるものなので、
これを逆にやった場合はチームが目指すべきものが崩壊していきます。
 
僕がストーリーを考える時はこんなことを気にしています。

声に出して誰かに話す（つもりで）

絵に描くと散漫になることも、声に出すと時間軸に乗るので言いたいことが自ずとはっきりしてきます。
本当に声には出さなくても、頭の中にユーザーを置いてその人につくっているゲームをアピールすると想定したら、どんな風にしゃべればいいでしょうか。
 

メンバーがちょっとでも笑うようなストーリーやラフを作る

やりすぎると怒られますが、突き抜けたものを戻すのは割と簡単なので、
まずは気心のしれたチームメンバーぐらい楽しませられるラフを作れるように心がけています。
（もちろんメンバーを笑わせるためだけのものを入れるのは無しで）
笑わせるかわりに驚かせるのもアリです
でもそれらは絵の作り込みじゃなくて設定でやることをお忘れなく。
 
 

デザイナーがUIをつくる前に

最後にタイトルに繋げますが、
デザイナーがUIをつくる前にきちんとここまでの流れが踏まえられているか振り返った方がいいでしょう。
それは紙でもアプリでもウェブでもなんでもいいのですが、
少なくともストーリーレベルまではチームの合意を得られるようにすべきです。

結局ストーリーがないとUIがろくに作れないってことがわかったし、なによりゲームが面白くなる保証がない。
僕の今までの手戻りの時間に比べればストーリー作る時間の方がはるかに短かったです。
なので、UIを作るよりストーリーを作ることを優先しようという話でした。*6

僕もがんばります。*7
 
 

おまけ：わくわくできる小ネタ

こういうのをラフの時点から入れると楽しい画面ができるよという小ネタをいくつか。
ゲームニクス*8から引用したものや、先輩から教えてもらったものなど。

  • 画面の上では常に何かを動かしておく
  • 「はい・いいえ」などのコマンドめいたボタンのテキストをやめ、その場面に合わせたものにする
  • UIパーツや機能をその世界観の中にある何かに例える
  • ユーザーをほめる時は大げさに
  • 今の画面は世界の中のどこにいるかユーザーに知らせる
  • メッセージはなるべく相手の顔を出す
  • 四角より丸。均等より不均等
 
 

あまり意味の無い補足

*0
ぼくらの甲子園！ポケットというゲームを開発初期から現在の運用まで手がけています。
開発秘話・苦労話はまた別記事で。
 
*1
ぴよぴよ。
うちの会社では最近UI部なるものが発足したり、ゲームニクス理論を打ち立てたサイトウ先生に顧問になってもらったり。
近しい分野での活動が盛んです。
それらとは関係なく僕は１人でUXの勉強をしたり社内勉強会を開いて布教したりしています。
 

*2
または生暖かい目を。
ちなみにこのブログのH1はでかくて読みづらいのでH2から使うことがしばしばあります。
IA的にめちゃくちゃですみません。

 

*3
僕も含めブラウザゲームしか経験してないUIデザイナーは今（たぶん）苦労しています。
表示する機器の制約が大きく、ゲームシステムもヒットした某かの流用となると必然的にUIに求められることは少なかった環境では、多少のわかりやすさと、バナーやヘッダーなどパーツとしてのグラフィックへ力をかけることぐらいしかできませんでした。
その段階ではここで話すストーリーの力などは身に付くはずもなく、チームにそれをやる人が不在の場合、デザイナーができてないという話になりますが、しかし辛い。

と言っていますが、それは携帯電話ゲームの話であり、それまでの家庭用・携帯ゲーム機などがだいぶ昔に通り過ぎた場所であります。なのでデザイナーが今学ぶべきはAppstoreのランキングに並ぶライバルではなく任天堂だと思ったり。

 

*4
以前は(1)からダイレクトに(4)をつくっていたり、
場合によってはいきなり(6)からなんてこともありました。
その結果としては、わかりやすい（＝読める）けどなんか楽しくない・思っていたのと違うという画面になり、やり直すことが多くチームに苦労をかけました。
その場合はみんなの頭の中にあるモデルがバラバラのまま話をするわけで、まぁいい意見もあれば見当違いの意見もあると。。

 

*5
無念。落とし穴に落ちる。あなたはスタートに戻る

 

*6
もちろんチームにストーリーをつくる人が他にいれば、UIにフルコミットします。
個人的にはストーリーをつくる仕事もやれた方が結果的にUIの自由度もあがるのでUIデザイナーは進んでやった方がよいと思っています。

 

*7
今回の記事はデザインのラフをテーマにしたものだったので、あまり表に出せるものがなく寂しくなってしまいました。
LTや勉強会みたいなその場限りのスライドでなら見せられるものもありますので、
もしよければいつでもお声がけください。

また、こんなことしている僕におすすめのアプローチや書籍などの情報がありましたら、
ツイッターでもはてぶコメントでもなんでも構いませんのでご紹介いただけると助かります。

 

*8
サイトウ先生のゲームニクス理論についてはとりあえずこちらを見るとよいです。