ノベルゲームのUIデザインについてあれこれ~メッセージ画面編

ノベルゲームのユーザインタフェースデザイン

どーも、有給という名の作業時間(リーサルウェポン)が喉から手が出るほど欲しいつなくっくです。

今日から2012年12月のKawazAdventCalendar開始ですね!
土壇場にもかかわらず参加表明してくれた皆様、そして主催の@giginet、ありがとう! そしてありがとう!

さて、KawazAdventCalendarの初っぱななので何を書こうかなあと考えていたのですが、思いつきませんでしたorz

なので、KawazAdventCalendarとは別に考えていて書きためていたネタなのですが、「ノベルゲーUI作成時のtipsや意識すると良さげなところ」を書きたいと思います。

ノベルゲー企画者がメンバーにUIデザインのイメージを言う時、そして自分でデザインする時にどのようなものがいいのか指定する側はある程度UIデザインについて把握してないと困るなあと感じています。
知らなければどうしてもアバウトな指示になりがちですし、リテイクを出すにしても「なぜそこでリテイクを出すのか」を説明できないとうんざりさせてしまうだけですし。

そこで市販のADVのメッセージウィンドウとそのデザインについてちょっと考えてみました。

UIなので既製品・市販のゲーム画面を見ればばっちりお手本が載っているのですが、デザインをするときにどのようなところを作れば良いのか、改めて自分で整理してみたかったのです。

死ぬほど細かい話ですが、UIデザインをする際の何らかの参考になればオレが泣いて喜びます。

そもそもメッセージウィンドウについておさらい

テキスト主体のノベルゲーム・アドベンチャーゲームにおいて、一番多く処理するのがシナリオのテキストです。
そのテキストを表示するための画面が、「メッセージウィンドウ」。

syarin - コピー.jpg

一番多く見られる箇所を表示するところですから、自ずとここのデザインを眺めている時間が長いです。

全体に文章を表示する形式と、画面の下に文章を表示する形式の大きく分けて二つ。

全体に文章を表示する「全画面表示」形式

「Fate/stay night」や「Fate/hollow ataraxia」
fh.jpg

「ひぐらしのなく頃に」
higurashi.jpg

画面の下に文章を表示する「三行下部表示」形式

「Ever17」
8tnu01000000t6xu.jpg

8tnu01000000t6xu - コピー.jpg

「車輪の国、向日葵の少女」
syarin.jpg

syarin_1.jpg

どちらを選択するべきか、ゲームを企画する上で悩みどころかもしれませんね。
今回のエントリでは二つの選び方については話が逸れるので触れませんが、地の文を示しやすい、ビジュアルを見せやすいなどそれぞれ一長一短です。

同人ゲームの「DEAD END JUNCTION」のように吹き出しをつけたり、ナルキッソスなど当てはまらない形式もありますが、同人・商業問わず世に出ているノベルゲームの多くは主にこの二つで、すでに一般的と思われていると言っても過言ではないと思います。

同人ゲーム「DEAD END JUNCTION」
SS01.jpg

「ナルキッソス」
naru.jpg

この記事ではこうした「メッセージウィンドウ」をデザインする上で、着目すべきところについていろいろ見ていきます。

メッセージウィンドウのパーツ

ケースバイケースですが、メッセージウィンドウは主にこのようなパーツで構成されています。

  • 背景色、もしくは画像
  • 本文

まあ、基本的にはこれだけですw

しかしノベルゲーのゲーム画面をいろいろ見てみると、地味に違いが見えてきます。
「アマガミ」の画面のように背景を半透明にし角丸のみをつけるようなシンプルなものから、「車輪の国、向日葵の少女」のようにウィンドウの周りに装飾をつけるもの、「428」「街」のように背景をつけないものなど様々です。

「アマガミ」
20090412221253.jpg

背景をつけない「428」などでは、本文テキストを袋文字にして、テキストが背景と同化しすぎないようにしているのがわかります。

「428~封鎖された渋谷で~」
2.jpg

「魔法使いの夜」では袋文字に加え、境界を曖昧にした背景色を敷いています。バトルシーンなどで明るい背景を多用するためでしょうか。画面の左右に境界線がグラデーションになっていますね。

「魔法使いの夜」
mahoyo.png

mahoyo2.jpg

mahoyo3.jpg

もちろんゲームにより、背景と本文だけで構成される場合ばかりではありません。

例えばキャラクターが喋っている場面では、発言者名やセリフ内容に合わせた表情が表示されるケースもあります。
(物量がものすごいエロゲー等によく見られるようです)

無題3_2.png

発言者については、シナリオに直接組み込まれる場合もあるようです。
(「アマガミ」などがそうなのですが、このゲームのUIはちょっと質素すぎるかも?)

また、ゲームにも寄りますが、メッセージウィンドウからセーブやロード、文章スキップ等ゲーム搭載機能を呼び出すためのアイコンも配置されています。
無題3_3.png

ちょっと本文の位置が邪魔されるので要工夫ではありますが、長時間テキストを読むノベルゲームでは有効な手かもしれません。
企画者やプログラマ、もしくはスクリプターとよく相談しながらデザインしましょう。

メッセージウィンドウをデザインする上で考慮すべきところ

さて、いざこのメッセージウィンドウをデザインする上で悩みどころだと思われるのが、

  1. ゲーム全体の雰囲気
  2. 文章の読みやすさ
  3. 絵を潰さないこと

ではないでしょうか。

1はケースバイケースとしか言いようがないとは思いますが、2や3はある程度普遍化することができるかもしれません。

上記3項目、とくに2と3をクリアするために着目すべき(だと勝手に思っている)なのは以下。

  • 背景色
  • 文字色と背景色のバランス
  • フォント
  • キャラクター名表示・ウィンドウ装飾
  • メッセージウィンドウ自体のサイズ・装飾
  • ウィンドウの上下左右のパディング
  • 文字サイズ
  • 文字間

……まあ、全部と言えば全部なのですがw
それぞれの項目について注意点なんかを見ていきます。

背景色・文字色と背景色のバランス・フォント

当然のことながらノベルゲームはテキストを読むゲームなので、テキストが読みづらいようなデザインではお話になりません。

基本的には黒や紺色などの濃い背景色+白文字で、ビジュアルを損なわないために背景を半透明にしているケースが多いです。

もちろん作品の雰囲気や全体のトーンによってアレンジしていきましょう。そこもデザイナーさんの腕の見せ所です。

091127_layton_image01.jpg

「レイトン教授」の柔らかい雰囲気は個人的に好き。

キャラクター名表示・ウィンドウ装飾

キャラクター名表示のデザインではちょっとだけ注意する必要があります。

セリフで発言者名を表示するパターンの場合、地の文など発言者がいなかったり一人称だったりするばあいは、キャラクター名を表示しません。
010.PNG

039.PNG

キャラクター名を表示するパターンとしないパターンの2通りを作っておきましょう。
表示するかしないかの違いではありますが、両方に気を配っておくと後々手戻りや修正が少なくてすみます。というか気が楽w

表示する領域を最初から作っておき、一つのデザインで両方に対応できるようにする(文字を入れるだけ)というのも手かもしれません。

imgd70397fbzik1zj.jpeg

syarin - コピー_1.jpg

メッセージウィンドウ自体のサイズ・装飾

メッセージウィンドウ自体のサイズというのはそれすなわち「三行下部表示」「全画面表示」の違いになるのですが、それはまあ置いといて。

もっと細かい話です。

「三行下部表示」の場合は、だいたい画面縦幅に対して3:1から3.5:1になっていることが多いような気がします。

装飾のない場合は3:1。「車輪の国、向日葵の少女」のようにメッセージウィンドウに装飾がある場合は、(装飾も含め)3.5:1であるような気がします。

まあ数値というよりは、立ち絵を表示した際いかに邪魔をしないかのバランスが重要です。

全画面表示の場合、背景もしくは本文文章にマージンをどれほど取るかどうかでゲームにより違いがあります。

ウィンドウの上下左右のパディング・文字サイズ・文字間

この3項目は結構セットで意識することが多いかなあ。

「パディング」というのは、「内側の余白」のことです。 CSSの知識がある人は、なじみ深いかもしれませんね。

「シュタインズゲート(iOS版)」
名称未設定-1.jpg

メッセージウィンドウの境界線から本文の文字までの余白を「パディング」と呼びます。
逆に外側の余白は「マージン」です。

DTPやWebのデザイナーには釈迦に説法かもしれませんが、レイアウトデザインはパディングやマージンの力がかなり強いんじゃないかなあと思う今日この頃です。「ミニマルデザイン」などはその好例で、レイアウトデザインでごまかしのきかない勝負をしているジャンルです。簡単そうに見えて、かなり奥深いです。

それはオブジェクトの並び順やそれぞれの大きさと間隔のバランスなど。非常に細かいところですが、ここがきちんと詰められていないと「なんか収まりが悪い」「見た目綺麗なんだけど、落ち着いて見られない。『それっぽく』は見れるけど『それ』ではない」なんて印象になりがち。

ノベルゲーのUIに関してもそれは例外でなく、むしろ文章を読むためにじっと見つめるところだからこそ、細かいところで違和感があるとそれはゲーム全体の印象となっていきます。

シュタゲの画面で、これらを見ていきましょう。
名称未設定-1_03.jpg

パディングと文字間隔がそろっているように見えますね。

このようにそろっていたり、もしくはそれぞれのサイズや間隔が文字1文字分や半分ずつなど規則性に気をつけるだけで、全体的な見栄えは驚くほど違ってきます。

Webデザインもそうですが文字周りに関しては、このようにマージンやパディングのサイズ、文字サイズ、文字の間隔などに注意してみるといいかもしれません。

おわりに

ライターのくせに本文執筆サボってなに書いてるんだって思った方。

大正解!orz

……まあ、上記のゲーム画面をデザインしたデザイナーがどの程度考えて、どのようにデザインしているのかはわかりません。もっと緻密な理論と考えを持っているかもしれませんし、感覚かもしれません。(商業なんだから前者だとは思いますが……)

システムやUIは、何度も文中で書いているように「ゲームによる」部分なので、こうした「お約束」部分を踏まえつつ、自分たちのゲームで最適な方法をチョイス、もしくは新しく作り出していくのが吉です。

こんな風に、不定期でノベルゲーのUIについての話を連載したいなあとか妄想しています。
今回はメッセージウィンドウの話だったから、セーブロードやもっと全体的なことなんかも。

1 ぎぎねっと (@giginet)

一日目から良記事おつかれさまです!

ノベルゲー、いろいろやったけどこういう細かい部分のデザインってなかなか観察しないので良いまとめでした。

『DEAD END JUNCTION』クォリティ高くて凄いなぁ。 ノベルゲーじゃないけど『GRAVITY DAZE』のイベント部分を思い出しました。

ノベルゲーの開発は一度もしたことがないので、そのうちやってみたいですなー。 tohhyくんエンジンに期待せざるを得ない。

2 ポヨン岡田 (@POYONNN)

記事作成お疲れ様です。 僕はノベルゲーは割高感があってあまりプレイしないのですが、この記事を見ると様々な工夫がなされていますね。 最近nexus7買ったのですが、スマホとの性能差が有り過ぎて見える世界が違います。 ノベルゲーはマルチプラットフォームが多いから、環境に合わせたチューニングも大変だろうなと思いました。

3 べる (@bell)

おつかれさま!( ・ω・)ノ

ちょうど秋ゲーでノベルゲーム班のUI担当だから、めったら参考になったよ!

考察でも感じたけど、最近は「発言者」表示や個性的なUIデザインが増えてきて、ノベルゲー業界は日々進歩しているのう・・と感じた今日この頃。

2Dが3Dかのごとくぬるぬるっと動く技術とかあるしなー。吃驚!

4 つなくっく (@tunacook)

1
乙!
まあ、なかなか見ないところかもしれないw
tohhyさんエンジンはKAGが使えるとのことで超絶期待

2
タブレットはかなりノベルゲー向きの端末ですよねー。
PCと違って寝っ転がりながらとか移動中にサクッとできるので。

3
役に立てれば嬉しいよ!
内容もUIも日々進化しているし、工夫の凝らされたものも多いよなあ。
制作リソースやらなんやらと相談しないとねw

5 Yudaidhun (@Yudaidhun)

>ウィンドウの上下左右のパディング・文字サイズ・文字間 画像付きでわかりやすく、凄く参考になりました。 ありがとうございます!

6 AttaQ (@AttaQ)

第一回記事お疲れ様です。 こういう点を気にしながらデザインしているのですねー、シュタゲのUIとか気にしてませんでしたが今見返すと凄くスタイリッシュで美しい。 個人的には背景と文字背景の調和がとれていると好きですね、とあるゲームで文字背景が主張しすぎて更に設定で薄さも変えられないので困ったものがあったり。なるべく右クリックで文字ウィンドウ消しとかしたくないんです・・・ そういや縦書きなんてものもあったなとふと。

8 つなくっく (@tunacook)

5 そうした、「見えないところのバランス」ってレイアウトデザインする上でかなり重要なことだよなあと最近仕事しながら感じています。 細かいところに気をつけるだけで、印象が見違えるほど違ってきて、全体が引き締まって見えますから。 お役に立てれば幸いです~

6 あー、変更できないというのは確かにアレですねw 今回の話ではデフォルトのデザインでどこをどの程度意識するのかといったことを書きましたが、「どこをどのぐらい任意で変更できるようにするか」の幅を題材にエントリを書いても面白そうですね。 ノベルゲーで縦書きだと、iPhone向けのものに多く見られるような気がします。特にADVではなく、キネティックノベルなんかに。「Planetarian ~ちいさなほしのゆめ」とか「森川空のルール」とか。

9 negiyan (@negiyan)

ウオオ 吹き出しのUI可愛い! やっぱり、どんなにクオリティの高い立ち絵やイベントCGでも UIがお粗末だったら安っぽくなってしまうものね。 個人で制作しているとどうしても後回しになりがちな部分だけど、 とことんこだわり持ってつくると楽しいかも?! という気持ちになる良記事でした!

10 ちゃぼ (@nmb)

一日目お疲れ様です! 今回は秋ゲーと仕事をイイワケに、参加表明すらできなくてごめんね!!

僕も今回の秋ゲーは、べる先輩と一緒でノベル班なのですけれど、メンバーのみんなの想像力が豊かで、作ってて本当に楽しいです。この発想や想像するというのは、どのゲームを作ってても当然必要となってくる部分ですが、ノベルゲーでは特にデザインやシナリオ担当の方のそういったチカラがより重要になってくるなぁと感じています。受け手に何かを感じさせたいのなら、作り手はより感じてなければならないというコトを誰かが言っていましたが、そうなるとkawazの皆さんは敏感なんですかね…?w

つなくっく先生とも今度ぜひ一緒に作りたいですなぁ!

11 SHiNKA (@shinka_cb)

KACトップバッターおつかれさまです!

なかなか,こういうユーザーインターフェイス部分は奥が深いですよね.マージンや行間隔の微調整の仕方で読みやすさがかなり変わってきますからね.あまりノベルゲームはやらないのですが,興味深く拝読させてもらいました.

12 テツオ (@Tetchan70s)

一番手にして深い話が!お疲れ様です。

こういうところに向けられた努力が快適なプレイに結びつくんですね。いや、快適以上のことかも。僕がこれまでここにあまり注意を払わなかったのは、それだけしっかり作られたものだったからこそ何だなぁと実感します。

13 つなくっく (@tunacook)

9
もちろん一番重要なのはゲーム内容だけど、だからこそUIもリソースの許す限り考えてみたいなあと妄想する今日この頃。。

10
ミーティングで、自分の考えてもみなかったアイディアがどんどん出てくるところを経験してしまうとなかなかやめられないよなあと思う今日この頃。
Summer of Santa、期待してます! 次回のAdventCalendarには参加お待ちしてますね。
  しばらくは動けそうにないですが、来年初夏あたりプロジェクトでちゃぼさんとご一緒できたらなあ。

11
軽視されがちなところではありますが、個人的にゲーム内容の次にこだわりたいなあと思っているところでもありますねえ。

12
「いかに意識させない(気にさせない)か」「何の不都合も感じさせないか」というところなので、気にされないうちは成功しているのかも?
言葉にはしないけど変な印象(脳内補正されることが多いけど)を持たれたり、「使いづらいなあ」と思われたら黄信号な分野ですからねえ。
まあ、優先度はゲーム内容が一番なのでなかなか気にされないところではありますけどねー

Only registered users are allowed to comment on the entry. Please log in to comment.