はじめに
前回の第4話では、Human-in-the-loopを実装した話を書いた。一行の指示でAIの会社全体が動き方を変える、VCSのコアとなる機能だ。
今回は、画面（UI）を作った話だ。
順序としては少し変わっている。コードより先に、画面を作った。
なぜコードより先に画面か
エンジンは動いていた。
CFOが報告し、CTOが進捗を伝え、CMOがマーケを語り、CEOが判断する。全部GASのログとして流れていた。
でも、ログは読みにくい。
そして何より、「これが何のツールか」を自分でも説明しにくかった。
コードを見せても伝わらない。ログを見せても伝わらない。画面があれば、一目で伝わる。
だからワイヤーフレームから始めた。
3画面のワイヤーフレーム
HTMLで3つの画面を作った。
1. ダッシュボード
会社の現状を一目で把握する画面。
- KPIカード4枚（売上・エージェント数・タスク完了率・コスト）
- エージェントのスコア一覧
- アクティビティフィード（最近の意思決定・イベント）
- 財務推移グラフ
2. エージェント設定画面
各エージェントの設定を変更する画面。
- 左側にエージェント一覧（スコア・ステータス付き）
- 右側に選択したエージェントの詳細設定
詳細設定には以下が含まれる。
- 基本設定（名前・役職・システムプロンプト）
- パーソナリティ設定（リスク許容度・意思決定速度などのスライダー）
- スキル・権限（戦略立案・予算承認・採用決定などのトグル）
3. シミュレーション実行画面
実際にシミュレーションが動く画面。
上部にサイクル進捗バーと操作ボタン。中央にエージェントのターン（完了・処理中・待機）。右側にリアルタイムログ。
そして一番下に、Human-in-the-loopの介入ボックス。
「これ、ゲームじゃないか」という気づき
シミュレーション実行画面を作っていた時、ふと気づいた。
CEOが「Claude APIが応答を生成中…」とアニメーションしている。エージェントのターンが順番に進んでいく。イベントが発生する。スコアが動く。
これ、ゲームだ。
ビジネスツールとして設計していたはずが、画面にしてみたら完全にゲームの画面になっていた。
会社経営シミュレーションゲームとして見ると、全ての要素が揃っている。
- サイクルごとに状況が変わってドラマが生まれる
- エージェントのスコアが上下する
- ランダムイベントが発生する
- 人間が介入して結果を変えられる
これは意図していなかった気づきだった。でも、VCSには最初からゲームとしての顔があったのかもしれない。
ダークテーマとライトテーマの使い分け
最初はダークテーマで作った。黒背景に緑のアクセント。ハッカーっぽい雰囲気。
でも考えてみると、スタートアップ創業者が使うビジネスツールとして見ると、暗すぎる。
そこで方針を決めた。
ダークテーマ → ゲーム版 ライトテーマ → ビジネスツール版
ライトテーマは青から緑へのソフトグラデーション。Stripe・Linear・Notionに近い、プロフェッショナルで爽やかな印象にした。
ヒーローバナーでその週のサマリーを一言で表示。KPIカードにホバーエフェクト。エージェントのスコアバーがカラフルに並ぶ。
同じエンジン、2つの顔。
VCSのビジネスモデルとして、これは面白い方向性だと思っている。
次回予告
第6話では、AIがAIを採点した話を書く。
採点専用のエージェントを追加したら、CFOに「キーマン離脱リスクへの言及が報告に皆無で危機感不足」と厳しいコメントが出た。
AIが、AIを批評する。その瞬間の話だ。
→ note版（ショート）はこちら
→ 前回【第4話】：一行の指示で、会社が変わった
→ 次回【第6話】：AIがAIを採点した日
Virtual Company Studio 開発日誌 #5
2026年2月
#VCS #AI #UI設計 #ゲーム #スタートアップ #開発日誌