街作り系ゲームに学ぶ理想のダッシュボードUIの作り方

右寺 隆信 @migi

合同会社 MIGI
データアナリスト / フロントエンドエンジニア

サービスの数値改善の相談を受けたり
フロントエンドの開発をやってたりします

https://migi.tech

最近はとあるゲーム会社（というより総合エンタメ企業）で
フリーランスのデータサイエンティストを取りまとめてPMをやりつつ
データ分析やダッシュボードの開発をおこなっています。

さて、いきなりですが

過去の「ゲームから学ぶUX」ではこれまでFPSやRPGをネタに
いろいろ話してきましたが、実はゲームのジャンルで一番好きなのは
シミュレーションゲーム（特に街作り系ゲーム）だったりします

今回はそんな街づくりゲームのUIで
最近ハッとさせられることがあったので紹介させてください

街作り系ゲームは基本的にどれもシミュレーションゲームです。

これは個人の考えですがシミュレーションゲームの本質は次の2点です。

1. 様々なパラメータとしてモデル化された世界を描く

2. ユーザはそのパラメータを把握してアクションを選択する必要がある

1. 様々なパラメータとしてモデル化された世界を描く

2. ユーザはそのパラメータを把握してアクションを選択する必要がある

これが重要なため、
それぞれの街づくり系ゲームではそれを容易にするために
UIに様々な工夫が凝らされています。

Cities Skylines II

下部に人口と予算を示すUI。
シムシティから受け継がれた、住宅・商業・工業の需要バーが印象的。

Frostpunk

上部にリソースを示すUI。
下部にその他パラメータとアクションボタンとを配置。

Fabledom

こちらも同じく上部にリソースを示すUIと
下部にアクションボタン。

IXION

こちらも同じくような配置だが
細かい情報が多く注意が散漫に。

Stranded: Alien Dawn

こちらも同じくようなUI。
リソースはサマられていてマウスオーバーで詳細表示。

どれもパッと見でそのゲームに必要なパラメータが
わかりやすくまとめられていてとてもUIだと思います。

実はここからが本日の本題となりますが、
最近プレイした『Manor Loads（マナー・ロード）』では
ここまで見たものと少しだけ違う、
しかしハッとするUIアイディアがありました。

Manor Lords

こんな感じでほぼ何もない状態から始まり

村人たちのめちゃくちゃリアルな生活シーンを眺めながら
村を大きくしていきます。

まだまだアーリーアクセスが始まったばかりで、
ゲームとしては足りない部分は多いですが
個人的には今時点でも充分に楽しめるうえ、
今後の発展が期待できるゲームです。

さて、細かいですが注目してほしいのはここです。

最初にこれを見たときには意味がわかりませんでしたが
マウスオーバーすることでその意味がすぐにわかりました。

これは
現状の食料・薪で住人たちがあと何ヶ月生活できるか
という数値を表しています

ここで一瞬だけ、先ほど話した
シミュレーションゲームの本質に戻ります。

1. 様々なパラメータとしてモデル化された世界を描く

2. ユーザはそのパラメータを把握してアクションを選択する必要がある

1. 様々なパラメータとしてモデル化された世界を描く

2. ユーザはそのパラメータを把握してアクションを選択する必要がある

そもそも論として、ユーザは何のために
パラメータを把握する必要があるのでしょうか？

とても当たり前の話ですが、それは
アクションを選択するための根拠とするためです。

従来の街づくり系ゲームの食料の個数のみを表示するUIだと
下記のような思考を経ることになります。

食料が残り100個だ
↓
なんか少なさそうだ
↓
食料を量産しよう

一方、このManor LordsのUIだと思考の流れはシンプルです。

食料が残り2ヶ月分しかない
↓
食料を量産しよう

このUIはこのように、考えるステップを踏まずに
すぐにアクションに移すことができる
画期的なアイディアだと思います。

急に思われるかもしれませんが、
ダッシュボードのUIを考えるときにも
これは非常に重要です。

ダッシュボードは、現実のサービスの様々なパラメータを
わかりやすく表現したものという考え方ができます。

またなぜそれを作るのかというと、
先ほどのシミュレーションゲームの本質と同じく
ユーザはそのパラメータを把握してアクションを選択する必要がある
ためです

ダッシュボードに表示する内容は
すべからくアクションに繋がるものである

ということが理想だと考えています。

先ほどの『Manor Lords』の例のママに
会社の資金が残り何ヶ月でショートするかの
ダッシュボードを作れと言っているわけではないですが。

実際に作っても良いですが。
作ってもそれはそれでアクションにつなげにくい気もしますが。

例えば、DAUを表示するUIがあったとして、
その目的は普段のDAUと比較して異常に高い(or低い)場合に
すぐ手を打つためにあると考えられます。

その場合、前日のDAUが過去一ヶ月の平均と比較してどのくらい
差があるかをわかりやすく表示するのは有効的です。

また、DAUの目標値が必達目標として存在した場合、
その目標との差を表示するのも有効的です。

これは端的な例ですが、このように

なぜそのパラメータを表示する必要があるのか？
そのパラメータの値によってどのようなアクションをさせたいのか？

を考えることでより良いダッシュボードが実現できます。

ダッシュボードのUIを作る際には

その要素はどういうアクションに
繋げるために表示するのか

を常に考えるようにしておきましょう。

逆にいうと、アクションに繋げられない数値は
表示する意味はないとまで言えます。