co-deck: AIプレゼンテーションの実践

co-deckは、AIエージェントチームがプレゼンテーション（講義資料、発表スライド）を制作するシステムです。この章ではco-deckの11段階パイプラインを理解し、実際にミニプレゼンテーションを作ってみます。

co-deckとは

定義

co-deckはAIエージェントチームがプレゼンテーションを制作するシステムです。第5章で見たai-workspace-standardsのバリアントの一つとして、複数のAIエージェントが協力して、講義資料、会議発表、講演スライドなどの高品質なプレゼンテーションを自動生成します。

場所: ai-workspace-standards内のtemplates/co-deck/ — bun scripts/new-project.ts "<name>" --variant co-deckで自分専用のコピーをスキャフォールドできます。

どんな成果物を作るのか？

co-deckは2種類の成果物を生成します。

• 単一ファイルHTMLスライドデッキ — すべてのスライド・画像・スタイルが1つのHTMLファイルに収まった自己完結型のウェブプレゼンテーションです。ブラウザで直接開いて発表でき、レスポンシブ対応とインタラクティブ機能を備えています。
• PDF — 印刷用・配布用のPDFファイルです。レイアウト、フォント、色が保持されるため、共有と保管に適しています。

co-consultとの違い

第6章で学んだco-consultが戦略分析とレポート作成に特化しているのに対し、co-deckはプレゼンテーションスライドの制作に特化しています。どちらのシステムもai-workspace-standardsをベースにしていますが、目的もエージェント構成も異なります。

システムアーキテクチャ

エージェント構成

co-deckはPMエージェント1体と10体の専門エージェントで構成されます。PMが中心になってプロジェクト全体を調整し、専門エージェントがそれぞれの領域の作業を行います。

専門エージェントの役割

各専門エージェントの役割をまとめると次のとおりです。

11段階パイプライン

co-deckは11個のStageからなるパイプラインに沿ってプレゼンテーションを制作します。各Stageには担当エージェントが決まっており、定められた成果物を出力します。Stageの間にはGateという承認地点があり、ユーザーは途中で内容をレビューして方向修正できます。

Stageごとの核心成果物

テーマ（Theme）とスタイル（Style）

co-deckはThemeとStyleという2つの概念でプレゼンテーションの外観を制御します。この2つは独立して選べますが、互換性のある組み合わせが決まっています。

Theme — HTMLレンダリング構造

ThemeはスライドのHTMLレンダリング構造を決定します。レイアウト方式、ナビゲーション構造、スライド切り替え効果、TOC（目次）の表示方法などがThemeによって異なります。

利用可能なThemeは次のとおりです。

Style — CSS変数セット

StyleはスライドのCSS変数セットを決定します。カラーパレット、フォント、余白、背景色などの視覚スタイルがStyleによって異なります。

利用可能なStyleは次のとおりです。

Theme × Styleの互換性

すべてのThemeとStyleが互換するわけではありません。THEMES.mdに定義された互換性マトリクスに従う必要があります。PMはStage 0で互換性を自動確認します。

ゲート（Gate）承認

co-deckのパイプラインにはGateという承認地点があります。Gateは、ユーザーが途中で成果物をレビューして方向を修正できる「チェックポイント」です。すべてのGateを通過しなければ次のStageへ進めません。

必須Gate

次の2つのGateは必須であり、ユーザーの明示的な承認が必要です。

任意Gate

次のGateは任意であり、PMが自動的に進めるかレビュー後に進めます。

Gate通過条件

• Gate 2: ユーザーがスライド内容（構造、各スライドの文章、画像/ダイアグラム計画）を確認し、明示的に「承認」します。修正依頼があれば該当部分を修正したうえで再度承認を受けます。
• Gate 5: ユーザーがサンプルPDFのレイアウト（フォント、余白、色、配置）を確認し、明示的に「承認」します。レイアウト問題があれば修正後に再度承認を受けます。
• Gate 1.5: 信頼スコアが70%以上なら自動通過。70%未満ならプロジェクトが中断され、PMがユーザーに知らせます。

PMへの話しかけ方

co-deckを使うには、Claude Desktop Appでco-deckプロジェクトを開き、PMエージェントに要望を送ります。効果的な要望はプレゼンテーションの品質を大きく引き上げます。

要望の5つのコア要素

良い要望には次の5つの要素が含まれます。

要望の例

良い要望 vs 今ひとつの要望

演習: ミニプレゼンテーションを作る

この演習ではco-deckを使って5枚のミニプレゼンテーションを作ります。テーマは「機械学習の5つのコア概念」で、初心者を対象にした簡単な発表資料です。

演習の目標

• ワークスペースのリポジトリをクローンしてプロジェクトを設定する
• Claude Desktop AppからPMエージェントに要望を送る
• 11段階パイプラインの進行を観察する
• Gate 2とGate 5の承認を経験する
• 最終成果物（HTMLとPDF）を確認する

事前準備

第3章でインストールしたツールが正常に動くか確認してください。

演習の手順

成果物の確認

co-deckプロジェクトが完了すると、いくつもの成果物が生成されています。このセクションでは各成果物の場所と確認方法を説明します。

成果物の場所

すべての成果物はpresentations/<project>/ディレクトリに保存されます。プロジェクトルートからは次の経路でアクセスできます。

主要な成果物

HTMLスライドデッキの特徴

lecture_v1.htmlはco-deckの中核成果物です。次のような特徴があります。

• 単一ファイル: すべてのスライド、画像（エンコード済み）、CSS、JavaScriptが1つのHTMLファイルに含まれています。ファイル1つを送ればどこでも開けます。
• インタラクティブ: スライド切り替え、キーボードナビゲーション、TOC（目次）ドロワー、発表者モード、TTS（テキスト読み上げ）などの機能を備えています。
• レスポンシブ: 画面サイズに応じてレイアウトが自動調整されます。デスクトップでもモバイルでも使えます。
• オフライン利用: ウェブ接続なしでもブラウザで直接開いて発表できます。

PDFの特徴

<project>.pdfは印刷向けの成果物です。

• 印刷用: レイアウト、フォント、色が保持され、A4またはLetter用紙への印刷に適しています。
• 配布用: メールや文書共有プラットフォームを通じて手軽に共有できます。
• 保管用: 長期保管にはPDF形式が最も安定しています。

成果物を開く方法

ファイル構造まとめ

co-deck/
├── agents/                        # エージェント定義ファイル
│   ├── pm.md
│   ├── research.md
│   ├── storyline.md
│   ├── design.md
│   ├── html-build.md
│   ├── pdf-export.md
│   └── ...
├── docs/html-themes/               # ThemeとStyleのレジストリ
│   ├── THEMES.md
│   ├── themes/                    # pitch、pitch-enhanced、outline、vertical、zen、...
│   └── styles/                    # classic、minimal、premium-dark、academic、...
├── presentations/
│   └── <project-name>/
│       ├── lecture-profile.md     # Stage 0: プロジェクト設定
│       ├── project_state.json     # プロジェクト進行状態
│       ├── research_notes.md      # Stage 1: リサーチ結果
│       ├── storyline.md           # Stage 2-3: スライド構造
│       ├── slide_deck.md          # Stage 2-3: スライドごとの内容
│       ├── design_spec.md         # Stage 4: デザインスペック
│       ├── assets/
│       │   ├── images/            # Stage 3.5: ダウンロードした画像
│       │   └── diagrams/          # Stage 3.5: 生成したSVGダイアグラム
│       ├── lecture_v1.html        # Stage 5-8: HTMLスライドデッキ
│       └── <project>.pdf       # Stage 11: 最終PDF
├── scripts/co-deck/               # 自動化スクリプト
└── memory/                        # セッション記録