ユーザーのためじゃないUIデザイン

こんにちはuraconです。破局ダイスを作ったときに考えていたことnote第二弾を書きます（前回の記事はこちら）。

前回はゲーム作りの考え方や立ち回りについて書きました。今回からは実際にゲームの中身に触れながら、具体的にどういう意図があるのかを解説します。世界観やゲームのメカニクスなどいくつかトピックがあるのですが、まずはUIデザインについてです。

誰のためのデザイン？

ゲームに限らずエンドユーザーが使うソフトウェアでは、それを実際に使って操作する人のことを考えてデザインします。パッと見て意味が分かるか？　直感的な操作で意図した動作になるか？　などは議論が絶えない話題です。

ここで誤解を恐れずに言えば、破局ダイスのUIはユーザーのことを考えていません。正確には、実際にゲームを触って遊んでいるプレイヤのことを最優先にはしていません。

どういうことでしょうか？　これは、筆者が考えるユーザーの範囲に起因します。

①共有してる
ゲームをプレイし、さらにその様子を共有する人です。スクショを友達に見せたりプレイ動画をライブ配信したり、レビュー記事を公開されている方もここに分類されます。
②遊んでる
ゲームをプレイしている人です。①と違って特に共有などはせず、一人でじっくりゲームプレイを楽しみます。
③他人が遊んでるのを見てる
自分ではゲームをプレイしていないが、他の人がプレイしているのを見る人です。先の例で言うと、友達が撮ったスクショを見る人、好きなストリーマーの配信を見る人、レビュー記事を読む人です。
④遊んでない
ゲームを遊んでもないし、その情報に触れもしない人です。

この図の①②を合わせたグループ「さわってる人達」のことをユーザーと考えるのであれば、インタフェースは彼等のためにあるべきです。

しかし、共有・配信が一般的になった昨今、③までを含めたグループ「見てる人達」をユーザーと捉えるべきではないでしょうか。特に、人数が一番多い + 今後遊んでくれるかもしれない③の人達が一番重要だと考えています。これが、先に述べた「実際にゲームを触って遊んでいるプレイヤのことを最優先にしていない」の真意です。

配信のための柔軟なレイアウト

さてレイアウトの話ですが、破局ダイスはモバイルゲームにしては珍しい縦・横両対応です。

タブレットに対応していることは勿論、iPadの分割モードやiPhoneX等の角が丸い端末でも正しく振る舞います。一部Android端末で画面を分割するモードがあるんですが、恐らくレイアウトは崩れないと思います。

実装はかなり大変でした。破局ダイスはハードな画面要件が無い + ドット絵が中心ということもあって、可変長なレイアウトは作りやすいとは言え、固定画面に比べれば相当手間がかかっています。また、プレイヤにとってもそこまで重要ではないどころか「縦画面に固定してほしい」という要望まで寄せられる次第です。

ここまでやらない理由が揃ってる中でなぜ可変レイアウトに対応したかと言うと、先のグラフであった「③他人が遊んでるのを見てる」人達、特にゲーム実況の配信を見てる人達のためです。ゲームの実況配信で必要な要素は主に

1. ゲーム画面
2. 演者の表情やアバター
3. 視聴者のコメント

などがあります。配信ではなく実況動画の場合、さらに演者の台詞やテロップも必要かもしれません。

これらの要素を並べていくにあたって、どうしても「1.ゲーム画面」の制約を受けるのは明らかです。例えば横長のレイアウトで配信するとき、ゲーム画面が縦長だとどうしてもゲーム画面が小さくなってしまい、余計なスペースも生まれます。

（負けたらホラゲ実況！？『命』を懸けたBO3対決【青鬼オンライン】より）

こちらはゲーム部プロジェクトさんの動画です。2人分のアバターが大きく見えて嬉しいのですが、ゲーム画面が1/3ほどで、細かい字などがちょっと見辛いですね。

（[6/7]宇宙最恐攻略リレー！爆絶ナオヒ by F4【モンスト公式】より）

こちらはmixiさんのモンスト公式配信です。演者に加えて、コメントやバナーも含まれていますが、やはりゲーム画面は小さいですね。

もちろん、演者を大きく映すという意図がある場合はいいのですが、ゲーム画面の制約のせいでやむを得ずこのレイアウトになってしまうのは問題です。この問題を解決するため、破局ダイスは縦横どちらの画面でも遊べるようにしています。

また、ゲーム全体を通して画面下の左右にはほとんどコンテンツを配置していません。これも、配信時のレイアウトを考慮したもので、右下にアバター・左下にコメントという構図が多いという理由からです。

モバイル端末の大画面化が進む昨今、画面下の角は最も操作しやすい場所で、重要なボタン等を配置します。ですが、配信されたときにコメントやアバターでそれらが見えなくなってしまうのは良くないという意図で、角を空けています。

もちろん、縦画面固定でも良かったかと思います。世の中には縦画面のゲームを実況する動画は沢山あり、動画を撮る人達も縦画面をどういう動画にすべきか知見があると思います。

ですが、まだこのゲームを遊んでいない人達にとっては、自分の好きな演者が面白おかしく喋っていることがメインのコンテンツであり、ゲーム画面はそれを構成する要素の一つに過ぎません。 要素の一つに自由度があるに越したことはなく、なるべく制約を持たせてはならないと考えています。

マテリアル風デザイン

上記のような要件を実現する上でマテリアル風デザインを採用しました。マテリアルデザインはGoogleが提唱しているデザインガイドラインで、多様なデバイスで一貫した体験を作れるよう設計されています。

Material Design

ボタンやナビゲーションなどのUIコンポーネントが定義されているだけでなく、要素の大きさやマージン・パディングなどの値も具体的に決められていて便利です。

破局ダイスではマテリアルデザインを踏襲しつつも、ゲームの都合でガイドラインから逸脱させている箇所があるのでマテリアル”風”デザインを名乗っています。

例えばナビゲーションドロワーはアプリ内のシーンを切り替える、トップレベルのナビゲーションであるとされています。

Navigation drawers are recommended for:
・Apps with five or more top-level destinations
・Apps with two or more levels of navigation hierarchy
・Quick navigation between unrelated destinations

破局ダイスではナビゲーションドロワーにプレイヤのスペックを表示しています。これは、SNSアプリ等でドロワー上部にログイン中ユーザーの情報を載せていることを拡大解釈しています。

また、アプリバーにはゲームのハッシュタグ「#破局ダイス」が入っていますが、本来なら現在のシーン、例えば「酒場」「協会」といった情報が入るべきです。これは、ゲームの画面がスクショでシェアされたときや動画配信されたとき、文脈無く見た人にも何のゲームか伝えたいという意図があり、ゲーム名を表示しています。

======

破局ダイスのUIデザインについての話でした。

破局ダイスのUIデザインは、既にゲームを遊んでいる人達よりも今後ゲームを遊ぶかもしれない人達を優先している、という話でした。次回は企画やゲームメカニクスなどの話題を予定しています。

破局ダイス