第5回：UIを整理し、どこを見ればいいか決めた日

公開日：2026年05月03日

画面を作ろう

放課後トーク版が動くようになった後、次に問題になったのは画面の見づらさだった。最初のUIは情報を全部出そうとしていたため、キャラ説明、好感度、ログ、議題、カード、操作ボタンが混在していた。ゲームとしては、プレイヤーが次に何をすればいいかが一瞬でわからない。

そこで、カードゲームや麻雀のように、重要な情報の置き場所を決めることにした。中央に現在の議題、左側にみゆとあかり、右側にりんとプレイヤー、上側または中央に会話、下側に手札。この視線の流れを作ることが、この日のテーマだった。

AIには、「ゲームの画面レイアウトがごちゃごちゃしすぎ。重複情報が多い。中央に現在の議題、左にみゆとあかり、右にりんとプレイヤー、上側が会話、下側が手札。キャラ説明はポップアップにして」と具体的に指示した。

この指示はかなり効いた。AIは、常時表示する情報と、クリックした時だけ出す情報を分けた。キャラ説明はポップアップに移し、ゲーム中はキャラ画像、名前、話題ストック、レシート所持だけを見せる方向になった。

整理後のUIは、かなりゲームらしくなった。プレイヤーの視線は、トレンド、会話ログ、手札へ流れる。キャラ絵は左右に置かれ、誰がターン中かもわかるようになった。ログにはキャラアイコンではなく、その発言時の議題アイコンを表示するようにしたため、話題の流れも追いやすくなった。

ただし、作ってみると別の細かい問題が出た。セリフウインドウがログでどんどん下に伸び、レイアウトが崩れる不具合があった。これはかなり基本的なバグだが、ゲーム画面では致命的だった。高さ固定と内部スクロールで対応し、ログは自然に下へ追加される形式にした。

UIでこだわったのは、操作の気持ちよさよりも、迷わないことだった。カードゲームでは、プレイヤーが毎ターン画面中を探し回るとテンポが落ちる。トレンドを見て、出せるカードを見て、クリックする。この流れを邪魔しないように、説明文を極力減らした。

一方で、情報を削りすぎると、初見には何が起きているかわからない。そこで、ナビウインドウに現在の状況をテキストで表示するようにした。ドロー2連続中、誰の番、出せるカードがあるかなど、細かい状態を短い文章で補った。

AIが作るUIは、最初はどうしても"全部入り"になりがちだった。説明をたくさん出すと親切に見えるが、実際にはゲーム画面を圧迫する。今回の学びは、常時見せる情報は少なく、必要な情報はポップアップやログで見せることだった。

また、レイアウト修正は一度で終わらなかった。会話ウインドウと議題の位置を入れ替えたり、手札カードのアイコン位置を変えたり、スマホ縦画面用に3列4行へ組み直したり、細かい調整が続いた。ここは作者のこだわりが強く出ている部分だと思う。

次は、見た目の主役になるキャラクター画像を整えることに進んだ。UIが整うほど、仮の絵では物足りなくなる。キャラの性格、表情、勝敗のリアクションを画像で伝える段階に入った。