お気に入りタイトル/ワード

タイトル/ワード名(記事数)

最近記事を読んだタイトル/ワード

タイトル/ワード名(記事数)

LINEで4Gamerアカウントを登録
[GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針
特集記事一覧
注目のレビュー
注目のムービー

メディアパートナー

印刷2018/03/22 00:00

イベント

[GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針

 ゲーマー以外もコンピューターゲームをプレイする(プレイし続ける)ようになって,久しい。かつてそれらが「カジュアルゲーム」と呼ばれていた時代から,非ゲーマーに訴求するゲームを作るためには,ゲーマー向けのゲームを作るのとは異なるノウハウが必要になることが認識されていた。
 なかでもモバイル時代になって重要度を増したのが,「分かりやすいゲームを作る」ことだ。なにせゲームの数は凄まじい勢いで増えており,「パッと見て分かる」ゲームでないと,生き残るのはなかなか難しい。
 こうした事情もあってか,GDC 2018のIndie Games Summit枠で行われた講演「BUILDING GAMES THAT CAN BE UNDERSTOOD AT A GLANCE」(ひと目で理解できるゲームを作る)には,多数の聴衆が押しかけた。その講演の模様をお届けしよう。

Zach Gage氏
画像集 No.001のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針


Subway-Legibility(地下鉄での可読性)を目指して


 登壇したのはiPhoneの黎明期からゲームを作り続けてきたZach Gage氏だ。まずは実際に,氏がこれまで作ってきたゲームのスクリーンショットを見てみよう。

画像集 No.002のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針

 なるほど,分かりやすい。面白いことに,画面の一部だけしか見えていない作品であっても,なんとなく「このタイプのゲームではないかな」と予測がつく(つかないものもあるが)。
 Gage氏はこの「画面写真を見ただけで,どんなゲームか分かる」ことを,「Subway-Legibility」と呼んだ。つまり「地下鉄の中で隣の人が遊んでいるのがチラリと見えただけでも,面白そうだと思ってもらえる」ことを,氏はひとつのゴールとしたのである。
 またこのSubway-Legibilityを達成することで,具体的には以下の3つの効果が得られるという。

(1)ゲームの遊び方を伝えるのが簡単:端的に言えば,チュートリアルを作るコストが激減する。Gage氏はほぼ完全な個人制作を行っているため,このあたりのコストを下げられるのは大きいという。
(2)口コミで広がりやすい:家族や友人に勧める,あるいは家族や友達が遊んでいるのを見て「俺にも遊ばせて」が起こりやすい。
(3)マーケティングが容易:SNSからの流入を考えたとき,スクリーンショット1枚で「遊んでみたい」と思われるかどうかで大きな差が出る。

画像集 No.003のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針

 さて,こうして見ると,つまりは「印象的なスクリーンショットが生まれるようなゲームデザインをしなくてはならない」ということになるだろう。スクリーンショットではなく実際の画面を見る場合であっても,多くの場合は「チラ見」で面白そうかどうかが判断されてしまう以上,「一瞬の画面」がそのゲームの面白さを伝えなくてはマズいのだ。
 ちなみにこの「印象的なスクリーンショット(プレイ画面)」については,近年では「『Into the Breach』が天才的な仕上がり」であるとGage氏は絶賛している。


スリーワードでポスターを作るように


 では,どうすれば「印象的な画面」を作れるのか?
 Gage氏はその秘訣として「印象的な画面を作るのは,良いポスターを作るのと同じだ」と語り,そして良いポスターを作るメソッドとして「スリーワード」という技法を紹介した。

 良いポスターは,3つの言葉から成立しているとGage氏は指摘する。講演では,デヴィッド・ボウイのコンサートを告知するポスターを作ることを想定して話が勧められた。
 まず,最も大きく訴える言葉がある。今回であれば,間違いなくそれは「デヴィッド・ボウイ」である。
 続いて,「デヴィッド・ボウイ」に惹かれてポスターに対する注意力を高めた人とって最も重要な情報となる,会場の場所や開催時期を知らせる言葉が入る。
 最後に,会場の住所であったり,開場時間であったり,チケット代であったりという,細かい(しかし必要な人にとっては必要な)情報が小さく入る。

左から右へと,言葉が足されていく
画像集 No.004のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針

 これに基いて,「Into the Breach」のスクリーンショットを分析してみよう。

 まず,「最初の一文」。
 このスクリーンショットには,最も大きく訴える要素として,緑色の枠で強調されたイカしたロボットがいる。燃える街があり,凶悪な巨大昆虫っぽい敵がいる。ゲーム慣れした人であれば,この段階で「たぶんこれはスクエアマップを使ったターン制のストラテジーなのではないか」というところも踏めるだろう。

 続いて,「二番目の一文」。
 左上を見ればプレイヤーが扱うユニットは3体(多少の増減はあったとしても,その程度には少ない)であることが分かる。また「ターンエンド」という言葉から,間違いなくターン制のゲームなのだなということが分かる。

 最後に,「三番目の一文」。
 ゲームを実際に遊んでいる人にとってみると,ここで足されている小さな文字や数字には,重大な意味がある。またある程度までゲームを知っている人であれば,「END TURN」の横にある「UNDO MOVE」のボタンを見て,「良かった,移動のやり直しをさせてくれるUIなんだな」ということを理解できるだろう。

画像集 No.005のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針
画像集 No.006のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針 画像集 No.007のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針

 このように,ポスターにおける「スリーワード」は,ゲームを伝えるにあたっても有効に機能する。
 以下にその構造を整理しておこう。

最初の一文:見た人を引きつける言葉(ゲームにおいてはコアコンセプト)
二番目の一文:キーとなる詳細情報(直感的には掴めない大きなルール)
三番目の一文:詳細な情報(細かいルール)


アイコン地獄には気をつけろ


 一方で,ゲーム自体はとても素晴らしいのに,この「スリーワード」をうまくやれていないために,どうにもゴタついた画面になってしまっているゲームもあるという。
 その典型例として,Gage氏は「自分も大好きな,素晴らしいゲームなのだけど」と念押ししつつ,「Slay the Spire」を挙げた。

画像集 No.008のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針

 「Slay the Spire」は,「最初の一文」には大きな問題はない。何はともあれ,このゲームはカードゲームの要素があって,モンスターと戦うゲームなのだというのは,ひと目で判断できる。
 けれど「二番目の一文」に入ると,途端に大量のアイコンが並ぶ。この「アイコン化」というのは,言語依存度を下げるという面では効果的である反面,大量に並ぶと「初見ではまったく理解できない」という問題を発生させる。
 しかもキャラクターのHPは,キャラクターのHPバーに数値で示されている以外に,トップバーにも表示がある。親切といえば親切だが,「パッと見た」ときには明らかな情報過多であり,何も知らなければ「このゲームって管理すべきHPが2つある……?」といった気持ちになってしまう。
 そこにさらに「三番目の一文」でBuffなどのアイコン(またしてもアイコン!)が並ぶ。もはやお腹いっぱいを通り過ぎている。

画像集 No.009のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針

 この手のアイコン地獄+情報過多という問題は,想像する以上に良くない影響を与えるとGage氏は指摘する。なにしろ昨今,ゲームに対する最もコアなファンは,TwitchやYouTubeといった実況から流入してくることも珍しくない。
 ここにおいて,実況の画面を「チラ見」したとき,「なんだかよく分からないゲームだ」ということになってしまうと,それだけでゲームが広がる機会を損なうことになるというわけだ。


情報過多を避けるには


 さて,情報過多はマズいと言っても,ゲームによってはどうしたって情報過多になるということはあり得る。
 その典型例は,カードゲームだろう。それこそ「Hearthstone」に代表されるような作品は,プレイヤーが扱う情報も多ければ,カードごとに起こることも違っているし,プレイヤーが起こしたアクションによって変化することも無数にある。これを普通に画面に並べてしまえば,何をどうしたって情報過多な玄人専用ゲームになるか,あるいは必要な情報(あるいは注目すべき変化)がよく分からないクソゲー化することは避けられない。

 「Hearthstone」の場合,この問題をアニメーションを用いることで解決した。
 必要な情報ではあってもタイミングに応じて画面から消したり,「AとBの間でXということが起こっている」ならAとBを拡大表示しXというエフェクトを表示する(当然それらはすべてアニメーションで行われる)といった演出を使ったりすることで,「いま見てほしい最初の一文」を入れ替えているのである。

 ちなみにこれは何も,アニメーションというコストが高い手法でしか実装できないものではない。Gage氏が作ったゲームにおいては,「いま見てほしい最初の一文」を強調するにあたって,「色を変える」というシンプルな手法を使っている。

画像集 No.010のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針
画像集 No.011のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針

 もう1つ,情報過多を避ける方法としては,「4番目の一文」をトグルスイッチにしてしまうという手法があるという。
 例えばGage氏が作ったチェスのゲームにおいては,「メニュー画面に戻る」「一手戻す」「スコアを見る」といったアクションは,常時画面の中になくてはならないものではない。
 かといってこれらをアイコン化して画面内にそっと置いたとしても,チェスというゲームは大量の小さくて精密なアイコン(=コマ)を扱うゲームなので,どうしても画面が煩くなってしまう。
 そこでGage氏はこれら「メタな機能」は,トグルスイッチとして実装することにした。必要なときにだけプレイヤーが画面内に呼び出すようにすれば,初見での情報過多感は大きく減らせるというわけだ。

画像集 No.012のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針 画像集 No.013のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針


UI設計の,シンプルな方針として


 「簡単なゲーム」を作るということと,「分かりやすいゲーム」を作るということは,まるで異なる。Gage氏の講演は,まさにそのポイントを捉えていたと言えるだろう。どんなにゲームシステムがシンプルでも,それを分かりにくく実装してしまうことは可能なのだし,「Hearthstone」くらいに複雑なゲームでも,それを分かりやすく実装することは可能なのだ。
 一方で,小規模〜個人制作においては,最高のUI/UXをデザインしようとすると,どうしても人手が足りないということは起こりえる。ここにおいてGage氏が語った「良いポスターを作るようにして,画面を設計する」という方針は,まさに「分かりやすい」一手となり得るのではないだろうか。

画像集 No.014のサムネイル画像 / [GDC 2018]ひと目でゲームの面白さが分かる画面設計の秘訣は,ポスター制作にあり? 良い画面設計のための,シンプルな方針
  • この記事のURL:
4Gamer.net最新情報
プラットフォーム別新着記事
総合新着記事
企画記事
スペシャルコンテンツ
注目記事ランキング
集計:04月24日〜04月25日