deck-creator

Deck Creator

一貫したビジュアルスタイル、印象に残るコピー、AI 生成のスライド画像、さらに任意で動画背景を使ったインタラクティブな HTML プレゼンターを備えた、プロフェッショナルなプレゼンテーションデッキを作成します。

使用する場面

• プレゼンテーションやスライドデッキを作成する
• ピッチデッキ、提案書、営業用プレゼンテーションを作成する
• 製品ローンチ、会社紹介、パートナーシップ向けのスライドをデザインする
• ドキュメント、要件、または概要資料からデッキ全体を生成する
• 既存のデッキを別のアートスタイルに変更する
• ライブプレゼンテーション用のインタラクティブな HTML プレゼンターを作成する
• デッキにアンビエント動画の背景を追加する
• 「deck playground」、「visual deck editor」、または「deck builder UI」を使用する

インタラクティブなプレイグラウンド

デッキをインタラクティブにデザイン、生成できるビジュアル UI を使用するには：

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/deck-creator/scripts/playground_server.ts --dir <deck-dir>

プレイグラウンドでは、スタイルの閲覧、スライドごとの編集、ライブプレビュー、ワンクリック生成ができます。Gemini PNG モードとテキストレイヤー付き HTML モードの両方に対応しています。

重要： Skill ツール（Skill("deck-creator")）を使って、このスキルを呼び出してください。このスキルを読み込む前に、各フェーズを手動で実行しないでください。ワークフローを順番に進め、フェーズを省略しないでください。

ファストパスのデフォルト（手間を最小限に）

網羅的な質問よりもスピードを優先します。必要なことだけを尋ね、残りは推測して、すぐに UI を使える状態にします。

まず、簡潔な質問をまとめて一度に尋ねます。

1. デッキの目的／トピック
2. 対象者
3. おおよそのスライド枚数
4. 出力モード（pdf、html+pdf、または web/publish）

情報が不足している場合は、次のデフォルトを推測して設定します。

• スライド枚数：10
• モード：ライブ／ウェブ用途の場合は html+pdf、それ以外は pdf
• テーマ：モダンでコントラストの高いビジネススタイル
• 動画背景：none
• アートスタイル：指定がない限り、なし

THEME.md と DECK-PLAN.md を作成したら、対象デッキのディレクトリを読み込んだ状態ですぐにプレイグラウンドを起動します。

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/deck-creator/scripts/playground_server.ts --dir <deck-dir>

その後、次のどちらか一方を選ぶ質問を、必ず1つだけします。

• オプション A（推奨）：「Deck Creator を見ながら、今すぐスライドを並行生成しますか？」
• オプション B：「まず Deck Creator を開き、生成は待ちますか？」

ユーザーの明示的な確認なしにスライドを自動生成しないでください（費用が発生するためです）。ただし、まずスライド1だけを生成するワンクリックのクイックスタートを提案してください。

プロセスの概要

次の6つのフェーズを順番に実行します。

1. 情報収集 - コンテキスト、サンプル、参考資料を集めます
2. 起動 - ファイルを準備し、デッキを読み込んだ状態で Deck Creator の UI を開きます
3. テーマ - ビジュアルスタイル、カラーパレット、任意のアートスタイルを決めます
4. コピー - マーケティングの原則に基づいて、スライドの内容を計画、執筆します
5. 生成 - 一貫したスタイルですべてのスライドを並行生成し、PDF を結合します
6. プレゼン／公開 - インタラクティブな HTML プレゼンターを作成し、公開／共有リンクを用意します（任意）

フェーズ1：情報収集

UI を開く前に必要な最小限の情報だけを集めます。

段階ごとに尋ねます。

ティア1（必須）： 対象者、目的、コンテンツのソース／資料、スライド枚数（10～16枚を推奨）

ティア2（コンテキスト）： プレゼンテーションの場面、ブランドガイドライン、スタイルの参考資料、既存のアセット

ティア3（ライブ／カンファレンス／ウェビナーの場合）： PDF のみか、HTML プレゼンターも必要か。動画背景は必要か。スタイルを視覚的に閲覧するか、自動提案を使うか。

デッキのサンプルや参考資料が提供された場合は、ビジュアルスタイル、レイアウトのパターン、タイポグラフィ、メッセージのパターンを分析します。

フェーズ2：起動（通常は早い段階で実行）

1. <deck-dir> を作成するか、既存のものを確認します
2. 推測した最適なデフォルトを使って THEME.md と DECK-PLAN.md を準備します
3. --dir <deck-dir> を指定して Deck Creator を起動し、すぐにデッキを表示します
4. オプション A／オプション B の生成に関する質問をします

これが通常の流れです。すべての詳細が確定するまで UI の起動を遅らせないでください。

フェーズ 3：テーマの選定

スライドを生成する前に、一貫性のあるビジュアルシステムを確立します。

オプション A：Theme Factory（推奨）— theme-factory スキルをインストールして呼び出し、統一感のあるカラーパレットを作成します。

オプション B：手動 — ブランドガイドラインに基づいて、Background、Primary、Secondary、Text、Accent の色を定義します。

テーマ変数を記述する際は、プレーンな CSS 値が推奨されます。16 進数カラーには、- background: #0a0f1a (deep navy-charcoal) のように、人が読めるラベルを末尾に付けることもできます。Deck Creator は、CSS 値として使用する前にそのラベルを削除します。

スタイルパラメーター

Aspect Ratio: 16:9 (--size 2K produces 1376x768)
Art Style: (optional) Any style ID from browsing-styles skill (e.g., pixl, cybr, deco)
Typography: Headlines Bold 48-64px, Body 18-24px, Stats Extra Bold 72-96px
Layout: Card-based with generous whitespace

--style <id> を使用して、すべてのスライドに一貫したアートスタイルを適用します。browsing-styles スキルで 169 種類のスタイルを確認できます。スタイルを指定した場合は、すべての生成コマンドに --style <id> を追加します。

ユーザーが HTML プレゼンターを希望する場合は、THEME.md に Presenter Settings ブロックを追加します。

## Presenter Settings
Format: html+pdf
Video Background: none | url(<url>) | veo-global | veo-per-slide
Transition: 500ms
Auto-Advance: false

THEME.md にテーマ全体を記載します。

フェーズ 4：コピーとコンテンツの計画

コピーライティングの原則を適用します。スライドごとにメッセージは 1 つにし、見出しでストーリーを伝え、説明よりも実例を示し、問題・解決策・証拠の構成にし、抽象的な内容より具体的な内容を優先し、行動を促して締めくくります。

デッキの概要とスライドごとの計画（見出し、コンテンツの要点、ビジュアルのコンセプト、重要なメッセージ）をまとめた DECK-PLAN.md を作成します。10～16 枚のスライドをすべて計画できるまで、コンテンツの収集を続けます。コンテンツ計画が完成するまでは、生成に進まないでください。

見出しの公式、説得のパターン、対象者に合わせた構成については、references/copywriting.md を参照してください。スライドの種類ごとの詳細なテンプレートについては、references/slide-types.md を参照してください。

フェーズ 5：スライドの生成

生成前チェックリスト

• テーマを定義済み（色、タイポグラフィ、スタイル）
• すべてのスライドを計画済み（10～16 枚）
• 各スライドに見出し、コンテンツ、ビジュアルのコンセプトがある
• 出力ディレクトリを作成済み

スライドを生成する

すべてのスライド生成エージェントを同時に起動します。Task ツールを使用して、スライドごとに gemskills:content-specialist エージェントを 1 つ起動します。テーマの仕様、スライドのプロンプト、出力先、画像生成コマンドを含めます。

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-image/scripts/generate.ts "prompt" --aspect 16:9 --size 2K [--style <id>] --output <path>

並列生成は 12 件までに制限します。スライドが 14 枚以上ある場合は、2 回に分けて生成します。

生成後

すべてのスライドが存在することを確認し、PDF にまとめ、PDF を検証して、DECK-INDEX.md を作成し、概要を提供します。詳細なプロンプトテンプレート、PDF の結合方法、生成後の手順については、references/generation.md を参照してください。

生成されたスライド画像をコンテキストに読み込まないでください。ユーザーに目視で確認してもらいます。

フェーズ 6：プレゼンテーション／公開（任意）

ユーザーが HTML プレゼンターを希望した場合（または THEME.md に Format: html+pdf と指定されている場合）：

bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/deck-creator/scripts/build_presenter.ts --dir <deck-dir> [--open]

動画の背景には、ユーザーから提供された URL を --video <url> で指定するか、先に Veo 3.1 でアンビエントループを生成します。CLI の全オプション、動画モード、キーボードショートカット、確認チェックリストについては、references/presenter.md を参照してください。

ユーザーがウェブ公開、共有、公開を希望した場合は、プレイグラウンドで Deck > Publish & Share... に進むよう案内し、公開方法（Vercel、Zip、Cloudflare Tunnel）のいずれかを完了します。ウェブモードでは、「公開リンクの提供」を完了条件とします。

出力構成

project/deck/
├── THEME.md              # Visual style definition
├── DECK-PLAN.md          # Content planning document
├── DECK-INDEX.md         # Final deck inventory
├── deck.pdf              # Stitched presentation PDF
├── presenter.html        # Interactive HTML presenter (optional)
├── ambient.mp4           # AI-generated video background (optional)
├── PRESENTER-CONFIG.json # Per-slide video config (optional)
└── slides/
    ├── 01-title.png
    └── ...

ベストプラクティス

1. スタイルの統一 — すべてのスライドで同じテーマパラメーターを使用します
2. 用語の統一 — 概念ごとに同じ言葉を一貫して使用します
3. 視覚的階層 — 見出しを最も大きくし、補足テキストを小さくします
4. 十分な余白 — スライドに要素を詰め込みすぎないようにします
5. 重要な要素は中央寄せ — トリミングを考慮します
6. 高いコントラスト — プロジェクターでも読みやすいことを確認します
7. 孤立したスライドを作らない — すべてのスライドをストーリーにつなげます

参照ファイル

• references/slide-types.md — スライドの種類ごとの詳細なテンプレート
• references/copywriting.md — マーケティングコピーの原則と見出しの公式
• references/generation.md — プロンプトテンプレート、並列生成、PDF の結合
• references/presenter.md — HTML プレゼンターの構築、動画モード、キーボードショートカット
• assets/videos/ — 同梱のアンビエント動画背景（初回使用時に ~/.gemskills にシードされます）