RE:ception

今日お見せするのは「RE:ception」という架空のAI受付SaaSです。しかし注目していただきたいのはプロダクトそのものではなく、これらの成果物がどう作られたかです。企画書、スライド、30秒動画、デモUI——すべてが1つの仕様ファイル（spec.ts）から生成されています。

RE:ception
AI Reception Avatar SaaS
Enterprise Plan Proposal

全10スライド
Chat vs Tool Use vs Agent
Spec-Driven Development

KPI値がテロップに:
受付時間 30秒
満足度 95%

来訪者: 田中太郎
AI: いらっしゃいませ
→ FAQ応答 → 担当通知 → ログ

RE:ceptionは来訪者対応を自然言語AIアバターが担当するSaaSです。受付での名前確認、FAQ対応、担当者への取り次ぎ、対応ログの自動記録を一貫して行います。人的コストを60%削減しながら、来訪者満足度95%を実現する設計です。

AIには3つのレベルがあります。Chat（対話のみ）、Tool Use（ツールを1回呼べる）、Agent（ゴールに向かって自律的に計画→実行→検証を繰り返す）。Agentは強力ですが、曖昧な指示を与えると「曖昧さを増幅」します。間違った方向に全力疾走し、大量の成果物を間違ったまま作り続けるリスクがあります。

解決策はシンプルです。Agentに渡す前に「仕様書（Spec）」を書く。AISDDでは、まずSpec（要件定義）を人間が確認・承認し、それをAgentへの入力とします。Agentは承認されたSpecに基づいてのみ動作するため、曖昧さの増幅を防げます。Specを変更すれば、全成果物が追従する——これが今日お見せしている仕組みです。

export const spec = {
  project: {
    name: "RE:ception",
    tagline: "AI受付アバターSaaS",
  },
  kpi: {
    receptionTime: { value: 30, unit: "秒", label: "平均受付時間" },
    satisfactionRate: { value: 95, unit: "%", label: "来訪者満足度" },
    costReduction: { value: 60, unit: "%", label: "受付コスト削減" },
  },
  sections: [ /* 8セクション分のデータ */ ],
  challenges: [ /* 3段階チャレンジ */ ],
};

実際にspec.tsのKPI値を変更してみましょう。「平均受付時間: 30秒」を「15秒」に変えると、Webページの表示も、動画のテロップも、すべてが自動的に更新されます。これが「仕様変更が全成果物へ即反映される」体験です。

kpi: {
  receptionTime: {
    value: 30,  // ← 現在の値
    unit: "秒",
    label: "平均受付時間"
  },
}

kpi: {
  receptionTime: {
    value: 15,  // ← 変更！
    unit: "秒",
    label: "平均受付時間"
  },
}

Remotionはプログラマブルな動画生成フレームワークです。重要なのは「動画も作れる」ことではなく、「仕様変更が動画へ即反映される」ことです。KPIの数値を変えるとテロップが変わる。セクションを追加すると動画のシーンが増える。動画もコードで管理できるからこそ、Spec駆動が活きます。

import { spec } from "@aidd/shared";

// spec.tsのKPI値を動画テロップに表示
const kpis = Object.values(spec.kpi);

// ↓ アニメーション付きで数値をカウントアップ
{kpis.map((kpi) => (
  <div style={{ fontSize: 80, color: "white" }}>
    {kpi.value.toLocaleString()}
    <span>{kpi.unit}</span>
  </div>
  <div>{kpi.label}</div>
))}

最後に、RE:ceptionのデモUIを見てみましょう。来訪者が名前を入力すると、AIアバターがFAQに回答し、必要に応じて担当者を呼び出し、すべての対応がログに記録されます。これもspec.tsの情報を元に生成されたモックです。

今日から始められるステップを3つ用意しました。レベル0（3分）: spec.tsのKPI値を1つ変更してビルド。レベル1（10分）: 新しいセクションを追加。レベル2（30分）: Remotionで動画をレンダリング。さらに、社内で試せる題材を5つ提案します。