MeisyoNX作るよーということで、進めてまいりましょう。
前回 | 次回
コンセプトとキャラクターをある程度作ったので、画面イメージを作っていこうと思います。
中身を作り込む前に、おおよその画面(雰囲気)を作ってみて、企画がイケてるかイケてないか確認します。
何をするの？
画面を作るといっても、何をするんだっけ…という方が多いかと思います。
作業ステップとしては以下の通り。
作る画面を決める
↓
トンマナ(色設定)を作成
↓
モック画面を手で描いてみる
↓
モック画面を作ってみる
↓
作ったモックを元にアイデアを出す
↓
よさそうなアイデアからモックを作り直す
↓
そのモックを元に画面イメージを作る
参考：実践ゲームUIデザイン コンセプト策定から実装のコツまで
ここで重要なことは、コンセプトを守ることと、一番よく使う画面から先に作るということですね。
わかりやすいよう、ここで要素関係図の登場！
これを見ると、このゲームは練習(育成)と試合(実戦)が中心ですね！
コンセプトやテーマで画面に関係がありそうな要素としては、、
・高校野球(青春)
野球で色と言ったらグラウンド（茶）、芝生（緑）、スコアボード（濃い緑）、ユニフォーム（白・黒）が想起される。
現実に存在する「青春」感を出すなら・・・やはり背景は白、文字は黒で彩度低めにして、現実のような雰囲気を出す必要があるでしょう。
・近未来的な世界観・自動的に進む（放置）
近未来で自動化が進んだ世界なので、レトロではなく近未来的なUI・文字フォントを使う。
・おじさんたち(ユーザー)が、監督として指示を出して、細く長く遊ぶことがゲームプレイの前提
練習や試合での指示はシステムっぽい見た目から出す。
試合はYahoo スポーツナビのような雰囲気。
おじさんの目に優しくしないとプレイを続けるのが厳しい・・・億劫になる（実体験）ので、読みやすい白背景・黒文字にする。
要件を整理したので、作業を開始しましょう。
まずは、画面の雰囲気を大きく左右する色の設定、いわゆるトーン＆マナー（トンマナ）を作ります。
彩度は抑えめに、現実感のある色で。目に優しく。眼鏡を外していても問題なく触れるように。
続いて、練習画面を作っていきましょう。
まずは手書きでいくつか案を書いて・書き直してみます。
ここで実際の画面で作ると、ビルド＆スクラップに手間がかかるので手書きにします。
ここでは、他のゲームも参考にしたほうが良いと思います！
参考1：Game UI Database
参考2：ゲームUIブログ
ある程度案が固まってきたら、モック画面を作って・・・
※うーん、このイモっぽさ・・・。前作のMeisyo＋と変わらない。
この画面を元に生成AIでいくつも案を出してもらいましょう。
適当に作ってみて良い案のパターンを盗み、次の案に生かしていきます。
※私はClaude Codeでモック画面とコンセプトを読み込ませて、案出ししてくれと指示しています。
ここで注意したいことは、（自分はプロではないので）一人で考えていても案は限られてくることを念頭に、自分の案を捨てる気を持つということですね。
誰かに案を出してもらうことで、「これはダメ、これは良い」とどんどん自分の考えが明確になっていきます。
それらの画面の要素から、良いと思うものを整理して、本番（バージョン1）の画面イメージを作っていきましょう。
どんなのできた？
色々作ってみたので、ゲームのプレイサイクルと合わせて見ていってみましょう！
練習方針を設定して（基本おすすめ設定でOK）、
放置時間を使って練習して、
試合する！
ホントはこの後に、試合結果詳細(1球速報的なもの)や成績分析(誰に強くて誰に弱いか)を見て、良い選手を見極めていくサイクルになるのですが・・・
とりあえず前の更新から2週間経ちそうなのでここまでで出します！
さいごに
結構時間がかかりましたが、落ち着いた配色かつちょっとスタイリッシュ感があるものにできた…かな？
この手の野球ゲームを良くプレイされている方には、「どんなのできた？」の画面を見たら「どこか見たことあるな・・・」感があるかと思います。
やっぱりいい画面って使い心地良いんですよね。
MVP（最低限のプロダクト）に必要な画面がもう少しあるので、作っていきたいと思います！