春までRoblox（UI/UX）

ここは数学OSの「学習の舞台装置」そのものなので、
事件ゲームプロトコル × 一行一図 × 説得者モジュール × 学習者プロファイル
をすべて統合した StepRunner の UI/UX を、OSレベルで完全に設計します。

以下は Roblox Studio でそのまま実装できる構造であり、
同時にあなたの思想（制度の外部化・状態の可視化・対話的理解）を体現するデザインです。

🎛 数学OS：StepRunner の UI/UX 設計（完全版）

StepRunner は、
「1行の説明 → 図の提案 → 理解判定 → 説得者 → 次のステップ」
という事件ゲームプロトコルを実行する“舞台監督”です。

UI/UX は以下の 5 つのレイヤーで構成されます。

🧱 1. メインレイアウト（Main Layout）

画面は常に 3分割 で構成される：

┌──────────────────────────────┐
│ ① Explanation Area（先生の1行） │
├──────────────────────────────┤
│ ② Diagram Suggestion Area（図の提案） │
├──────────────────────────────┤
│ ③ Interaction Area（理解できた/できない） │
└──────────────────────────────┘

この3分割は、あなたの「一行一図」思想をそのままUIに落としたもの。

🧩 2. Explanation Area（先生の1行）

役割

  • Step の line を表示
  • 文字数は短く、1行に収める
  • 「制度の操作」を宣言する場所

UI仕様

  • 大きめのフォント
  • 左寄せ
  • 行頭にステップ番号（Step 3 など）
  • 背景は淡い色（理解の負荷を下げる）

例

Step 3：直線 Pₙ の彩色数は 4×3ⁿ⁻¹ である。

🎨 3. Diagram Suggestion Area（図の提案）

役割

  • Step の diagram.description を表示
  • 実際の図は生成しない
  • 学習者が頭の中でイメージできるようにする

UI仕様

  • 図の説明文を中央に配置
  • 文章は短く、箇条書きも可
  • 図のイメージを補助するアイコン（抽象的なもの）

例

図のイメージ：

  • 頂点が一直線に並んでいる
  • 最初の頂点に4色の候補が並んでいる

🎮 4. Interaction Area（理解判定 UI）

役割

  • 学習者が「理解できた / 理解できない」を選ぶ
  • 事件ゲームのトリガー

UI仕様

  • ボタンは2つだけ
    • 理解できた（緑）
    • 理解できない（赤）
  • ボタンは大きく、押しやすく
  • 押した瞬間に StepRunner が状態遷移を実行

🏚 5. 立て籠もりモード（Barricade Mode）

学習者が「理解できない」を押すと、
画面が 事件モード に切り替わる。

┌──────────────────────────────┐
│ 🚨 立て籠もり発生！ │
│ 「この説明では理解できません」 │
├──────────────────────────────┤
│ 説得者の別視点の説明（Negotiator） │
│ 図の別案（diagram.description） │
├──────────────────────────────┤
│ 🔄 理解できた（緑） │
│ ❌ まだ理解できない（赤） │
└──────────────────────────────┘

特徴

  • 背景が少し暗くなる（事件感）
  • 説得者の説明は 別の色 で表示
  • 「外から声をかける」感を演出

🧠 6. 説得者モード（Negotiator Mode）

NegotiatorSelector が選んだ説得者の情報を表示。

UI仕様

  • 説得者のタイプを小さく表示（例：Concrete）
  • 説得者のメッセージを中央に大きく表示
  • 図の提案も表示
  • 「理解できた / まだ理解できない」ボタンを再度表示

例

別視点の説明（Concrete）：
n=5 の場合だけを実際に数えてみよう。

🔁 7. 理解回復 → 次のステップへ

学習者が「理解できた」を押すと：

  1. ProfileManager.updatePreference(negotiatorType)
  2. ProfileManager.recordHistory
  3. StepRunner が次の Step を読み込む
  4. UI が通常モードに戻る

🧭 8. StepRunner の内部フロー（UI/UX 連携版）

StepRunner.runStep(step):

  UI.showExplanation(step.line)
  UI.showDiagram(step.diagram.description)
  UI.showButtons()

  response = UI.waitForUser()

  if response == "understood":
      ProfileManager.recordHistory(...)
      StepRunner.nextStep()

  else:
      Negotiator = NegotiatorSelector.select(...)
      UI.enterBarricadeMode(Negotiator)
      StepRunner.runNegotiator(Negotiator)

🌱 9. あなたの思想との一致

この UI/UX は、あなたの思想を完全に体現している：

  • 一行一図 → Explanation + Diagram
  • 理解の停滞を制度化 → Barricade Mode
  • 別視点の導入 → Negotiator Mode
  • 学習者の成長を追跡 → ProfileManager
  • 制度の外部化 → StepRunner がすべてを外に出す

数学OSの「学習の舞台」がここで完成する。

次に進むなら…

  1. Barricade Mode の演出（アニメーション・色）を設計する
  2. Negotiator Mode の UI をさらに細かくデザインする
  3. StepRunner のコード構造（ModuleScript）を設計する
  4. 彩色数問題をこの UI/UX で実際に流すデモを設計する

どれに進みますか。