Sofme AdventCalendar 2019 8日目となりました。今日から第2週ですね。

みなさんこんにちは。プログラム班2回生の鉄鉱石と申します。普段は副部長として部会で威張ったり、プログラム班長として部会で威張ったりしています。
僕は音楽ゲームが好きでよく遊んでいるのですが、自分でも音楽ゲームを作ってみたい！と思い、現在、Android音楽ゲーム『aspros.echo』の開発をしています。今回は、その開発中に感じたことを個人の見解で書いていこうと思います。
記事を書くのは初めてなので、お見苦しい点もあるかもしれませんが、ご了承いただければと思います。

情報量が多すぎた話

今年の春、僕はaspros.echoの選曲画面のレイアウトについて考えていました。

「音ゲーだから曲の情報は全部載せたいなあ……でもジャケットもすごくいいから大きく表示したい……あと譜面のレベルは絶対必要だしハイスコアもあると嬉しいなあ……あっ決定ボタンもいるじゃん」
などと考えながら選曲画面に載せたい情報やボタンを列挙した結果、以下の通りになりました。

曲名
作曲者名
ジャケット
イラストレーター名
BPM
各譜面のレベル
選択中の譜面の譜面製作者
選択中の譜面のハイスコアランキング
隣の曲を示すなにか(ジャケットなど？)
スピード調節
設定
決定ボタン

多い。
こんなに情報を詰め込むとどうなってしまうのでしょうか。試しに全部詰め込んでみたのが次のレイアウトです。

見づらい。
iPadなどの画面の広いタブレット、あるいはPCで遊ぶのならまだ問題なさそうですが、展示に用いるZenpad 3(8インチ)に表示するにはあまりにも詰まりすぎてます。

こうなるのを防ぐために、画面レイアウトを考える前に「どの情報を表示するか」を考えることにしました。

情報の取捨選択

まず、情報を優先度によってジャンル分けすることから始めました。
具体的には、

常に大きく表示しておく情報
- 全員に見てほしい
小さくてもいいが常に表示しておく情報
- ある程度の人に見てほしい
表示/非表示を選択できる情報
- 全員に必要ではないが、一部から強い需要がある
表示しなくてもいい情報
- 表示してもいいけど必要はない

の4種類に分けました。

分類した結果が以下の通りです。

常に大きく表示	常に表示	表示/非表示を選択可能	表示の必要なし
曲名、作曲者名、ジャケット、選択中の譜面レベル、決定ボタン	イラストレーター名、隣接する楽曲の情報(曲名、ジャケット、レベル)	ハイスコア、スピード調節、設定	譜面制作者

まあここは人によって違う分類をすると思うのですが、僕はこんな感じに分けました。
これを元にテキストなどの配置を決めた結果が次の画像です。

これでも情報量は多いのですが(曲リスト中の全譜面のレベル表記はいらないかな？とか)、とりあえず個人的にはそこそこ満足が行く形になりました。

ここまでのまとめ

情報量が多すぎると見づらい
情報を分類、取捨選択して重要度に合わせて表示をしよう
表示させたい画面の大きさや端末によっても情報量を考える必要がある

情報量の目安

さて、ここまでは「音ゲーの選曲画面」、すなわち「UI(ユーザーインターフェース)」の話でしたが、これは人に情報を伝える時全てに当てはまります。

例えば、「プレゼン資料に文字を詰め込んではいけない」と言われたことはありませんか？
これは「表示される情報が多いと、大事な情報が埋もれてしまい伝わらない」「遠くからプレゼン資料を見たときに文字が潰れて読めない」などの理由がありますが、つまるところ「情報量が多くなると見づらくなる」という理由にまとめることができます。

ここは個人的な考え方なのですが、見せるべき情報の量は、情報を見せる時間×情報を表示する媒体の広さを基準に考えるべきだと思っています。
情報を見せる時間というのは情報を理解させるためのタイムリミットに繋がり、表示する媒体の広さは違和感なく情報を表示できる上限値に直結します。
(ここでいう「広さ」は画面の絶対的な広さだけでなく、画面が視野に占める相対的な広さのことも含めます)

先ほど挙げたプレゼンの場合、1ページを見せる時間は15~30秒程度ですが、後方の席から画面を見た場合の広さはかなり狭くなるため、情報をあまり多く載せるべきではないことがわかりますね。