オススメ機能
Twitter
お気に入り
記事履歴
ランキング
パッケージ
80 Days公式サイトへ
レビューを書く
海外での評価
58
Powered by metacritic
お気に入りタイトル/ワード

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

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

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

LINEで4Gamerアカウントを登録
[GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは
特集記事一覧
注目のレビュー
注目のムービー

メディアパートナー

印刷2018/03/24 19:15

ニュース

[GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 コンピューターのグラフィックス処理能力が高まるにつれて,ゲームもまたより高度なグラフィックスを扱うようになっていった。もちろん中には逆行するかのようにドット絵を駆使する作品も(とくにインディーズゲームにおいて)増えていったが,全体的な流れで言えばゲームがリッチ化していくのは必然的な流れであると言えるだろう。

 そしてこのリッチ化の流れにあって,ゲームの中で表示されるテキストもまた,「ただテキスト枠の中に表示されているだけ」では厳しくなってきている。読みやすく,理解しやすく,もちろんテキストの魅力も十分に伝わるような「テキストの表示方法」には,どのような工夫があり得るのだろうか?
 Game Developers Conference 2018の最終日,「DESIGNING TEXT UX FOR EFFORTLESS READING」と題された講演において,「80 Days」「Sorcery!」を作ったinkleで,テキストのUX(User eXperience)デザインを担当したJoseph Humfrey氏がその秘密を語った。

※ユーザーがサービスなどで得られる体験。テキストに関しては,読みやすさ,見やすさなど

inkleのJoseph Humfrey氏
画像集 No.001のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは
画像集 No.002のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは


「テキストが難なく読める」状態を作るために


 近年において,テキストを活用したゲームはむしろ増大傾向にある。この具体例としてHumfrey氏は「Device 6」(Simogo)や「Blackbar」(Neven Mrgan & James Moore),「The House Abandon」(No Code)に「Sunless Sea」(Failbetter)といった作品を挙げた。
 Humfrey氏が所属するinkleでも最新作「Heaven's Vault」でテキストを駆使しており,前述の通り「80 Days」や「Sorcery!」には大量のテキストが含まれている。

 そして氏は,なにもテキストがゲームの中心となっていなくても,「テキストが難なく読める」ことはゲームにとって重要だと指摘する。実際,我々は「Twitterを見ているときには大量の文字を読み,映画を見ているときは大量の字幕を読んでいるように,ゲームを遊んでいるときも大量の文字を読んでいる」のだ。
 従って,「テキストを読む体験」を向上させることは,ゲーム体験をも向上させることにつながるのである。

画像集 No.003のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは 画像集 No.004のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは
画像集 No.005のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは 画像集 No.006のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 とはいえ,どうしたら「テキストが難なく読める」状態を作れるのだろうか。
 Humfrey氏はその条件として,「テキストの内容が素晴らしいこと」と「テキストのUXが素晴らしいこと」を挙げた。逆に言えば,作家がどんなに素晴らしいテキストを仕上げてきたとしても,読みづらいデザインになってしまったら,体験そのものも駄目にしてしまいかねないということでもある。
 今回の講演では,Humfrey氏はこの「テキストのUX」を向上させるためのポイントを解説していった。それを順に見ていこう。

画像集 No.007のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは


「フォーカス」と「ペース」


 Humfrey氏は最初に,「テキストの良いUX」は「フォーカス」と「ペース」で作られると語る。その上で,まずは「フォーカス」から解説をし始めた。

画像集 No.008のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 ことゲームにおいては「テキストに集中(あるいは注目)してもらう」ためには,一定の努力が必要になる。これが小説であれば,読者は「文字を読む」ことを最優先にしてくれるが,ゲームにおいては「文字を読む」ことは最優先課題ではないことが多いのだ。
 しかもゲームの場合,読者の集中力をよそに持っていく要素に満ちあふれている。結果として,まさにいま読んでほしいセンテンスから,非常にたやすく読者のフォーカスは外れてしまう。

 この問題に対するHumfrey氏の最初の解答は,「テキストの量が少なければ少ないほど,難なく読める」である。圧倒的かつ残酷なまでの真実だ。実際,氏がこの講演で使っているスライドは,極端なくらいに文字の量が少ない。

画像集 No.009のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 とはいえ,すべてのテキストを短くしてしまうことが可能かと言えば,そこまで簡単な話でもない。それに,長いテキストだからこそ発揮できる情感というものもある。だからといって長いテキストをそのまま見せればどうなるかと言うと……

画像集 No.010のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 こうなる。

 ちなみにHumfrey氏は「僕はWitcherシリーズが大好きだし,このゲームをあげつらって否定したいわけではない」と念押しした。アイコンのデザインや色使いは文句のつけようもないし,さまざまなUIについても大変に高い水準にある,と。
 しかしながら,そのような「完璧に近い外部構造」を持っていてすらなお,写真のように「枠の中にテキストを並べる」だけでは,あまりよろしくない結果に終わってしまうというのである。

 では実際にどうしたら良いのだろう?

 Humfrey氏は自信満々に「僕ならまずこうします」と語って,新しいスライドを公開した。

 が,そこには何も表示されていなかった。

 機材トラブルを疑う聴衆(筆者含む)をよそに,Humfrey氏は悠然と語る――「まず,全部消してしまいましょう」。ええと,Humfreyさん,本当に「Witcher」シリーズが好きなんですかね……?

 それはさておき,氏は「テキストのUXがうまく行っていないときは,どこを修正すれば良くなるだろうと考えるよりも,まずは一度白紙に戻してしまったほうがいい」と語った。
 その上で,「自分ならばこうする」と示された表示形式が,以下の連続写真となる。

画像集 No.011のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは
画像集 No.012のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは
画像集 No.013のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 「いま読むべき文章」が白文字で表示され,「読み終えたであろう」というタイミングで灰色文字に変わる。そしてその頃には新しい「いま読むべき文章」が白文字で表示される。なるほど,読みやすい。
 言うまでもなく,このような表示方式は「ダイアログボックスにただ文字を流し込むよりも,ずっと手間がかかる」(Humfrey氏)。しかしその手間にふさわしいだけの効果を有しているというわけだ。

 ちなみに,このように「自動的にテキストが表示されていく」場合,これは最初に氏が指摘した「フォーカス」と「ペース」のうち,「ペース」のことも考えねばならない形式となる。加えて言えば,最適なペースで表示させるためには,ゲームの構造やテキスト(ないし物語)の内容も吟味しなくてはならない――が,これについては後に詳しく語られるので,「フォーカス」について,さらに先を見ていこう。


「フォント」と「レイアウト」


 「フォーカス」を考えるにあたってもう1つ重要になってくるのが,「フォント」と「レイアウト」である。

 このうち「フォント」はプレイヤーのフォーカスを高める効果を有するが,だからといって闇雲に目立つフォントを使えば良い,というわけではない。この具体例として,Humfrey氏は以下の文字列を見せた。

画像集 No.014のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 誰がどう読んでも「Hello World!」と書いてある。実に明白だ。一風変わったフォントも寄与して,ぱっと見た瞬間に「Hello World!」に視線が行く。
 けれど,だからとってこのフォントで何千単語と続く文章が表示されたら,その文章を読もうという気持ちになるだろうか? 普通は最初の数単語で読むのをやめてしまうだろう。

 この問題について,Humfrey氏は「リーダビリティ(内容の理解しやすさ)」と「レジビリティ(文字の読みやすさ)」に分けて考えるべきだと指摘する。
 例えば上の画面の「Hello World!」のフォントは,リーダビリティは低いが,レジビリティは高い。フォントとしては素晴らしいフォントなのだが,リーダビリティがより要求される状況には向かないのだ。

 この典型例が,次の写真である。

画像集 No.015のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 この「本」は,とても雰囲気のあるフォントを使っているし,また右ページに見える「G」の装飾文字も大変に緻密で良くできているとHumfrey氏は絶賛する。しかしながら,ではこの状態のテキストを何ページも読むかというと,それはまた別の問題だ。
 ではHumfrey氏なら,このテキストをどのように表示するのか? その例が,次の写真となる。

画像集 No.016のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 この写真の左側半分がHumfrey氏が作ったレイアウトで,右側半分が元のレイアウトだ。確かに,左側のほうがずっと「リーダビリティ」がある――つまり,内容が頭に入ってきやすい。

 左側に見えるレイアウトを作るにあたって,Humfrey氏が注意したのは以下のような点となる。

・フォントはなじみ深さを優先:この場合はCenturyを使用。普段からよく見るフォントを使うことによって,「目が慣れている」という利点を活かすことができる。つまり,読者はテキストによりフォーカスできる。

・行間を開ける:画面の中の文字を追う場合,一番の問題は「どこまで読んだっけ?」になることだ。このため,ある程度まで行間をしっかり取って,目が迷子にならないようにする。

・段落間に余計な空白を取る:これも上と同じで,「ここまで読んだ」を読者により明確に意識させる工夫となる。

・段落の最初の1行に自動でインデントを入れる:「段落」を感じさせる工夫。「80 Days」でも採用された方法だ。

・フォントのサイズ:ゲームのテキストは,どれもこれも,文字が小さすぎる傾向が強いとHumfrey氏は指摘する。もちろんこれにはプラットフォームに依存するところもある。高解像度のディスプレイを目の前に置いてプレイするPCゲームと,離れた場所に置いたテレビを眺めながらプレイするコンソールゲームと,手元にあるスマートフォンを見ているモバイルゲームでは,それぞれに「理想のフォントサイズ」は異なってくる。とはいえ,やはり一般的に言ってゲームテキストのフォントサイズは小さすぎる。

・1行あたりの単語数(日本語なら1行文字数):だいたい5単語〜15単語くらいが理想で,15単語はやや多い場合もある。16を越えると,文章を目で追っていられなくなる。以下にその具体例を示す。

なるほど,これは厳しい。なおHumfrey氏は「またWitcherを槍玉に挙げてほんと申しわけない」と語っていた。
画像集 No.017のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

・テキストを画面のどこに置くか考える:字幕だからといって,脊髄反射で画面の下のほうに置くと決め打ってはいないだろうか? テキストが読みやすい位置は,さまざまな要因によって変化し得る。

 これ以外にも,テキストの一部だけを明るく表示する(まさに下の写真がそれ)ことでフォーカスを作るという技術の有用さについても,改めてここで強調された。

フォントとレイアウトに関する5つの「おすすめ」
画像集 No.018のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは


「音楽にメロディがあるように,テキストにもメロディがある」


 さて,次は「ペース」である。

 Humfrey氏は「音楽にリズムやメロディがあるように,テキストにもそれらは存在する」と語る。テキストをいいペースで表示するとは,つまり,テキストが持つメロディをうまく奏でるということなのだ。
 その上で強く意識すべき点として,「ゲームやシーンの開始直後において,テキストのペースが正しいかどうかが最も問われる」と氏は語った。

 というのも,残念ながらテキストというのはどうしても退屈な側面があって,冒頭(=ゲームやシーンの開始直後)で「読み始めよう」と読者に思わせられるかどうかが勝負の鍵になるからである。氏はこのことを「紙の本が表紙を魅力的に飾るのと同じだ」と指摘する。

 さて,では理想的な「ペース」は,どうあるべきか。これについてHumfrey氏は「ペースはバランスの問題である」と断じる。表示速度があまりに遅ければ退屈させてしまうし,早すぎればそもそも読めない。
 その上で,氏は「短い文章はゆっくりと,長い文章は早く」表示するのが望ましいという。これだけ聞くと「マジで?」という気持ちになるが,「表示速度が遅すぎれば退屈させるし,早すぎれば読めない」という原則に立ち返れば,むしろ納得できるだろう。短い文章が瞬きする間に表示されて流れていっては読めないし,長い文章をゆっくり表示されると飽きてしまうというわけだ。

画像集 No.019のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 とはいえ,これはあくまで大原則でしかない。Humfrey氏は「最良のペースを作るのはとても難しい」と語る。そして「こればかりはテストとイテレーション(繰り返し)を重ねるしかない」とした。
 リアルタイムで文字が表示されていくというのは,つまるところアニメーションを作ることと同じで,キーフレームをめぐって細かな調整を繰り返していくしかないというわけである(ちなみに,この「適切なペースでの表示」は,文字のサイズよりもずっと,プラットフォームに依存する部分が大きいという)。

画像集 No.020のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 さて,「ペース」を考えるときに,もう1つ考えねばならないことがある。それは「長い目で見たときのペース」である。
 長いテキストを読んでもらおうと思うことは,読者が感じる退屈さと戦うということだ。「すごく面白い物語だけど,いったいいつまでテキストを読んでいれば次のシーンが始まるのだろう?」という疑問を抱かれてしまうと,いろいろと苦しいことになってしまう(スキップボタンにプレイヤーの手が伸びる頃合いだ)。

画像集 No.021のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 これについて,最も簡単な対策としては「読者に進捗感を与える」方法があるという。簡単に言ってしまえばスクロールバーやプログレスバー,n/mのような形でのページ数表示などだ。これらによって読者が「オッ,半分まで読んだんだな」と思ってくれれば,「いつゲームが始まるんだろう」感を大いに減らすことができる。
 しかしながら,これは諸刃の剣でもあるという。というのも,多くの読者は「半分まで読んだ」ことを確認した段階で,一気に集中力を失って読み飛ばし始めるからだ。

 なお,テキストのフォーカスを作る側でもさまざまな工夫を凝らし,読者に対して新鮮さを感じさせることができれば,「長い目で見たときのペース」にまつわる問題を解決する一助になる。もちろん,テキストとゲームを完全に分離するのではなく,テキストとゲームが結びつくようにして設計していくのも効果的だ。

画像集 No.022のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは


アニメーションを活用する


 「ペース」を考える上で,「アニメーション」は強い味方となる。もちろん「テンポよく文字を表示する」のもまた,アニメーション的な技術が必要になるが,もう一段階上のレイヤーでアニメーションを使うことで,いいペースを作っていけるとHumfrey氏は語る(もちろんそれによってテキストが読みにくくなったら本末転倒だが)。

 こればかりは実際に写真を見てもらうのが早いと思うので,講演で示された例を列挙しよう。

画像集 No.023のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは
「Sorcery!」から。画面下に選択肢が見える。これを選ぶと……
画像集 No.024のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは
画面の下から「新しい紙」がせり上がってきて,それまでのテキストと合体する。紙には継ぎ目があるので,「どこまで読んだか」は明確に見分けがつく

画像集 No.025のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは
「80 Days」から。同様に,画面下に選択肢が見える。これを選ぶと……
画像集 No.026のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは
選択肢が次の文章の冒頭になっており,文章の中にアニメーションによって「溶け込んでいく」

画像集 No.027のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは
「Heaven's Vault」から。もはやダイアログボックスは存在せず,吹き出しすらない。しかしこのレベルで文字表現を突き詰めていくと,今度はアニメーション制作と同じ課題に行き着く。つまり……
画像集 No.028のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは
あるシーンを「読み終える」のに27秒もかけていいのか,もっと短くしたほうがいいのか。これを調整するためには,画面内を人物がどう動くかといったところとの連携も必要になってくる。


むしろ日本のお家芸なのでは


 講演の最後にHumfrey氏は,「フォーカスとペースという点に注目して話をしたけれども,最も重要になるのはテストとイタレーションだ」と結論づけた。高度な表現を目指せば目指すほど,実際に作ってみて,それを改良し続けるしかない,というわけだ。

画像集 No.029のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

 テキストをどう表示するかという問題は,人類にとって非常に息の長い問題となっている。それこそ人類が「文字」を使い始めたその瞬間から続く,大いなる課題である。

 逆に言えば,このため「空間にどう文字を配置したらよいか」というノウハウには,大量の蓄積があるのだ。今回の講演にしても,とくに「レイアウトとフォント」のあたりであれば,例えば同人誌(とくに合同誌)のデザインをしているような人なら必ず直面してきた課題だと言えるし,従ってそれぞれに個人的な蓄積もあるだろう。もちろん,プロのデザイナー(タイプセッター)であれば何をか言わんや,である。

 またPCゲームに限っても,日本には大量の文字を読ませる「ノベルゲーム」の伝統がある。PCのノベルゲームを振り返ると非常に凝った演出がなされている作品に事欠かないし,モバイルゲームにも大量のシナリオが実装されるようになったことで「スクリプター」という仕事は改めて重要度を増してもいる。
 なので個人的には,日本の開発者にこそ,今回のような知見を世界に広げる起点となってほしい,という思いはある。とくに世界的に見てノベルゲームが再評価されつつある今こそ,おそらくはこのジャンルについて最も深い知見を持った日本から情報が発信されることで,ジャンル自体が次のステップに進むきっかけになる……かも,しれない。

 ちなみにinkleでは,「SLAYOUT」というUIレイアウトのアニメーションのフレームワークを公開している。興味のある人は参照してみてはいかがだろうか。

画像集 No.030のサムネイル画像 / [GDC 2018]「80 Days」のスクリプターが示す,「プレイヤーに読んでもらえるテキスト」を作る技術とは

「inkle」公式サイト

  • 関連タイトル:

    80 Days

  • この記事のURL:
4Gamer.net最新情報
プラットフォーム別新着記事
総合新着記事
企画記事
スペシャルコンテンツ
注目記事ランキング
集計:03月18日〜03月19日