コンセプトとゲームUIに着手【CFW P2P心理戦ゲーム開発記】 #14

前回(第13回)では、『Logic High and Low』のルールをv1として策定し、セットマッチ制やアイテムドラフト制の導入を行いました。

今回は実装を少し離れ、ゲーム全体の世界観やUIデザインについて考えていきます。

ゲームとして遊びやすいことはもちろんですが、単なるハイアンドローではなく、本作ならではの独自性を持たせるためにコンセプトアートと画面デザインの検討を進めました。

自作ゲーム Logic high and lowのUIの構築。デザイン案の作成。コンセプトアート

デザインコンセプト

今回のテーマは、

「50年後のアノテーション作業を行うエージェント」

です。

近年のAI開発では、モデルそのものの設計以上に、学習用データセットの作成やラベル付け作業が重要な工程となっています。

実際に開発を行っていると、

  • データの分類
  • タグ付け
  • 境界指定
  • 判定結果の確認

といった作業に多くの時間が費やされます。

そこで、

「50年後、人間が担当する仕事は何だろうか?」

という発想から、

AIが大部分を処理し、人間は最終的な判断やモデルのキャリブレーションを行うエージェントになっている

という世界観を考えました。

本作のプレイヤーは、そんな未来世界でシステムに接続されたエージェントという設定です。

デザイン時のコンセプト画像メモ集

背景アイデア、ただのグリッド

0.原案は、〇番出口みたいなシンプルなタイルみたいな背景案がありました。

作成したゲームUIの途中経過

3.開発中の画面。カードポッドなどはない。背景のフレームもシンプル

UI配置デザインラフ

1.フレーム配置のラフ、一点透視でのフレーム配置と背景はシンプルという対比を作りたかった。

作成したゲームUIの途中経過,背景を少しリッチにした

4.アイテム欄などを微調整した(←今ここ)

現在のUI

現在のUIは、上側に双方のスコアや獲得セット数、中央左に操作ログ(双方)、中央中心にカードなどのアニメーションとフロップ、右側は暫定的にゲームルールとちょっとしたフレーバーテキスト枠。手元は操作画面で、ここでhigh and lowやアイテムの操作を行う。

今後の課題

現在はデッキを仮表示している段階であり、

  • デッキ消費演出
  • ポット蓄積演出
  • カード移動アニメーション
  • Bust発生時の演出

などはまだ実装できていません。

そのため、前回行ったフロントエンドのモジュール化を活用しながら、アニメーション処理を専用ファイルへ分離し、保守しやすい形で実装を進めていく予定です。

まとめ

「50年後のアノテーション作業を行うエージェント」という世界観を軸に、

  • 背景演出
  • UIレイアウト
  • 情報配置
  • 操作画面

の方向性を固めることができました。

現在は、デッキ(1~10までのカードを1束とし、基本3束で1セットカウントになる)を仮表示している状況なので、その辺と、ポット(現在たまっているカードの山)などのアニメーションを実装できていないので、jsをアニメーション用として分離して管理しやすくしたままま実装していきたいと思います。

関連記事
【第9回】ゲームデザインとアイテム実装
ゲームルールを考える:ハイアンドローモックアップ【CFW P2P心理戦ゲーム開発記】 #9
【第13回】ゲームルールの策定v1
Logic High and Low v1ルール策定とゲーム本体実装【CFW P2P心理戦ゲーム開発記】 #13

次回予告

次回以降は、今回設計したUIをベースにカード演出やポットアニメーションを実装し、よりゲームらしい体験へ仕上げていきます。

次回:ゲームUIのアニメーション作成その1
関連記事は、2026年6月25日に公開予定 (あと1時間)

ここまで読んでいただきありがとうございます。 では次の記事で。