AI が下書き、人が承認 — HITL デモをブラウザだけで作る

士業向けの届出業務デモをつくるとき、いちばん伝えたかったのは「全部自動化しない」という設計判断でした。

線を引く場所

書類の下書きは AI がやる。でも提出の判断は必ず人が握る。この線引きを、説明ではなく体験として渡したい。そこで、バックエンドなしのブラウザ内デモとして実装しました。

状態機械はこれだけ

対象者ごとに 4 つの状態を持たせます。差し戻しは idle に戻すだけです。

type Phase = "idle" | "drafting" | "review" | "done";

const approve = () => {
  setPhase(sel, "done");
  pushLog("人が承認 → 届出済");
};

const reject = () => {
  setPhase(sel, "idle"); // 修正指示を添えて再生成へ
};

「AI 下書き中」の演出は、フィールドを 240ms 間隔で順に埋めていくだけ。それでも見ている側には「機械が書いている」感覚が十分伝わります。

学び

• デモの説得力は機能の多さではなく、判断の設計が見えるかで決まる
• 架空データでも、様式の構造が本物なら現場の人には刺さる
• ブラウザ内完結にすると、公開のハードルが劇的に下がる