株式会社ヘキサドライブ | HEXADRIVE

こんにちは。
先週末のテニスで全身筋肉痛になった、東京ATのとりっぴぃです。

さて今回は、『【終末放送】世界を救う枠（※略称：せかわく）』の
UIの画面比率対応をテーマに、開発の裏側をすこしお話ししたいと思います。
………………………………………………………………………………………………………………………………………………
■はじめに：Ficustone projectのUIとは
UIはゲームの遊びや操作と深く関わっている要素であり、全職種で密に相談しながら作成しています。
Ficustone projectのシリーズ作では下記の特徴があります。
・ぱっと見で分かり易くシンプルな操作だが、独自性の高いシステムを楽しめる
・RPGなので情報量は比較的多めだが、小さい画面に整理して収めるようにする

加えて「せかわく」は動画配信風のちょっと変わった表現や、機能要件のハードルも高く、
振り返ってみると、3部作の中で最もチャレンジが多かったのではないでしょうか。
開発中は、試行錯誤を繰り返し、バランスを整え、完成させることになります。
………………………………………………………………………………………………………………………………………………
■UIの機能的な要件
まず、前提としてUIは見た目のデザインだけではなく、機能性も考える必要があります。
今回は主に下記のミッションを提示されました。

・多言語対応
日本語以外にも、英語・中文になった時を想定し、スペースや文字の広がる方向や範囲を考え、
どの言語で表示されても、違和感や破綻が無いように設定すること。
⇒ゲーム内においてレイアウト全体に関わる重要なものですが、今回は割愛します。

・画面比率対応
下記の画面比率の最小～最大の範囲内で、正しい表示と動作ができるように対応すること。
今回は特に難易度が高く苦戦した、こちらに触れたいと思います。
【基準画面】16:9比率（iPhone6想定）
⇒最も一般的な比率。基本的にこちらで一番綺麗に見えるようにレイアウトをします。
【最小画面】4:3比率（iPad想定）
⇒最も横幅が狭い時の画面比率。こちらでもレイアウトが崩れないようにします。
【最大画面】19.5:9比率（iPhoneX想定）
⇒最も横幅が広い時の画面比率。こちらでもレイアウトが崩れないようにします。
※iPhoneⅩのみ、カメラの窪みやホームバーなどによる、特殊なタップ不可範囲あり
※上下左右にいわゆる「飾りの帯」を付けて空間の取り方を調整する対応は禁止

…具体例をご覧いただくと、明らかに画面比率が異なることがお分かりかと思います。
どのような端末でも快適に遊んでいただくため、可能な限り対応に努めました。
………………………………………………………………………………………………………………………………………………
■具体例：画面比率対応の考え方
では、試行錯誤の末、具体的にどのような対応をしたのか？
結果として、大きく「３つのパターン」を使い分けて画面を組む、という考えに至りました。
こちらの対応をするために、全体のUI方針として、
完全固定されたサイズのヘッダー・フッター等は存在せず、
「１つ１つのUIパーツを浮かせる」ようなイメージでサイズ可変できるデザインにしています。
（※あくまで「画面全体にUIを表示」「横長画面レイアウト」「多言語対応前提」という条件内です）

①「横幅を固定し、縦幅を端末比率に合わせて可変させる」パターン
比較的シンプルな考え方です。「タイトル」「クエスト選択」画面で対応しています。

UIパーツは、キャラの顔など重要な部分に文字などが被らないように配慮して、
左右上下中央どこ付けに配置するかを調整する必要があります。
画面全体に置くイラストは、4:3比率想定で、縦幅の画面比率が可変して狭まってもOKなように描きます。
画面比率が横に長くなればなるほど、イラストの表示範囲の縦幅が狭くなります。
▽Tips：タイトルイラストはUI用の「横長」の画像だけではなく、広報用に「正方形や縦長」の画像でも高頻度で使用します。そのためキャラ担当のATメンバーに縦横全比率で切り取っても対応できるよう作成していただきました。オススメです。

②「縦幅を固定し、横幅を端末比率に合わせて可変させる」パターン
比較的シンプルな考え方です。「タウン系」「クエストリザルト」画面で対応しています。

UIパーツは、施設やキャラの顔など重要な部分に文字などが被らないように配慮して、
左右上下中央どこ付けに配置するかを調整する必要があります。
画面全体に置くイラストは、縦幅固定で、横幅の画面比率が可変して広がってもOKなように描きます。
画面比率が横に長くなればなるほど、イラストの表示範囲の横幅が広くなります。

▽Tips：タウンは画面外は横にスクロール移動できるのですが、最小サイズの際に特に重要な施設は画面内に収まるようにデザインしています。

③「基準比率以上の縦幅・横幅になった時、空白の取り方を可変させる」 パターン
例外的でやや複雑な考え方です…ちょっと大変かもしれません。
ゲームの中で一番こだわる必要がある、「バトル」「イベント」画面のみで対応しています。
【16：9比率以上に縦幅が狭い時】上下の薄いグレーの空間が広がる
【16：9比率の時】この画面が一番綺麗に見えるよう、基準として設計
【16：9比率以上に横幅が広い時】「バトルエリア」と「コメントエリア」の間の空間が広がる
１つ１つの「UIパーツ」のサイズ自体はどの比率でも共通で、空白の取り方のみが変わります。
「UIパーツを浮かせる」デザインであるがゆえ、このような対応をすることができます。
▽Tips：バトルUIはかなり苦戦しました…UIを一度パーツごとに分けて、「福笑い」状態にしたものを机に並べ、チームで大会議をした末、この手法にたどり着きました…。………………………………………………………………………………………………………………………………………………
■オマケ：「画面比率対応をしない」という考え方もある
ゲームでは他にも「ダイアログ」という、ひと回り小さい画面もよく目にしますよね。
実はこちらは最小比率で収まる固定サイズで作成し、画面全体の中央で表示しています。

シリーズ作共通の思想として、ダイアログのサイズは必要最低限に絞っており、
せかわくでは２種類のみしか用意していません。（仕様書時点でこちらのサイズに収まるように設計されています。）
様々なサイズを作りすぎてしまうと、「ルールが煩雑でユーザー様の混乱を招く」ことや
「ミスが発生しやすい」⇒「制作コスト増加」など、デメリットも多いのです。
………………………………………………………………………………………………………………………………………………
■ポイント：ルールを設けた上でどう対応するかの精査が大切！
個人的な考えですが、UIにおいてはまず基準となるルールを構築することが大切です。
（画面比率対応に限らず全てにあてはまることです。）
そして、ゲームのコンセプトと照らし合わせながら、
そのルールの適用内にするか、特別な対応をするかを適宜判断をすることによって、
作業の優先度を正しく洗い出すことができ、スムーズな進行に導くことができると思います。
・優先度が高の画面は、特別な対応になっても力を入れてこだわる（例：バトル画面UI）
・優先度が低～中の画面は、基準内で収められるように努める（例：ダイアログ画面UI）
………………………………………………………………………………………………………………………………………………
■最後に
こちらが必ずしも正解というわけではなく、ゲームの数だけ最適な作り方やUIがあり、
私はそれが難しくも面白いところだと思います。
「こんなことを考えてゲームを作っているんだなあ」と片鱗だけでも
何かお伝えすることができていたら嬉しいです。
ひとりで考え込みすぎて迷走しそうな時は、周囲のメンバーに相談するのも吉ですよ！笑

また、より様々な角度からディープな内容が公開されている、
「Ficustone project　設定資料集+開発資料集２」も
絶賛、BOOTH様のサイトにて販売中です！どうぞ宜しくお願い致します！
「Ficustone」シリーズを遊んでいただけた方はもちろん、
ゲームの裏側に興味がある皆様へ。
楽しんでいただけて、参考になるかもしれない、そんな資料を目指して作成しています。

ファンの方だけではなく、学生や先生、同業種の方にもご好評いただいております。
ゲーム開発の裏側を知りたい！という方は、是非お手に取ってみてくださいませ。