content-presentation

コンテンツプレゼンテーションスキル

目的

複数のフレームワークを使って、ブランドに沿った完全なプレゼンテーションデッキを生成します。このスキルでは、ストーリー構成からスピーカーノート付きのスライドごとのコード出力まで、すべてに対応します。

---

フレームワーク選択ガイド

ユースケースに基づいてフレームワークを選択してください。ユーザーに希望がない場合は、状況に応じて選択します。

フレームワーク	最適な用途	デフォルトで選択する状況
Slidev	開発者向けの講演、Markdown を中心としたワークフロー、Vue を使うチーム、コードを多く含むコンテンツ	対象者が技術者である場合、コンテンツにコードが含まれる場合、または希望が示されていない場合
Reveal.js	従来型のプレゼンテーション、幅広いブラウザー互換性、HTML/CSS/JS による制御	幅広い互換性が必要な場合、または HTML ネイティブな作成方法を好む場合
Spectacle	React を使うチーム、カスタムのインタラクティブコンポーネント、豊富なアニメーション	チームが React を使用している場合、またはインタラクティブなスライドコンポーネントが必要な場合
Raw HTML	単一のポータブルファイル、ビルド手順不要、メールへの埋め込み、オフラインでの配布	送信または任意の場所で開ける単一ファイルが必要な場合

各フレームワークの詳しいガイドは frameworks/ を参照してください。

• frameworks/slidev.md -- Markdown 構文、レイアウト、コンポーネント、テーマ設定
• frameworks/reveal-js.md -- セットアップ、トランジション、フラグメント、スピーカーノート、PDF エクスポート
• frameworks/spectacle.md -- React コンポーネント、デッキ構成、テーマ、アニメーション
• frameworks/raw-html.md -- 単一ファイルの構成、インライン CSS、フォントの埋め込み、レスポンシブスライド

---

生成の流れ

次の順序に厳密に従ってください。手順を省略しないでください。

Step 1: ブランドのコンテキストを確認する

次のファイルがあれば読み込んでください。

• brand/BRAND.md -- アイデンティティ、対象者、差別化要因
• brand/VISUAL.md -- 色、フォント、ロゴのルール
• brand/VOICE.md -- トーン、語彙、避けるべきパターン

brand/ がない場合は、作業を進める前に基本的な色、フォント、トーンの希望をユーザーに尋ねてください。青と白を基調としたデフォルトのスタイルでデッキを生成しないでください。

Step 2: 確認の質問

目的に沿った質問を3～5個してください。すでに把握している情報に応じて調整します。

1. 長さ：スライドは何枚ですか？（種類に応じた目安を提示します。ピッチデッキは10～15枚、カンファレンス講演は30～40枚、営業用デッキは12～18枚です。）
2. 対象者：その場にいるのは誰ですか？技術的な知識の深さ、役職、トピックへの理解度を確認します。
3. 目的：最後のスライドを見た後、対象者にどのような行動をしてほしいですか？（購入、承認、学習、共有、採用。）
4. 利用可能なデータ：含める具体的な統計、事例、スクリーンショット、コードはありますか？
5. 提示の状況：ライブ講演、非同期での閲覧、録画動画、印刷配布資料のどれですか？

以前のやり取りですでに答えが分かっている質問は、すべて尋ねる必要はありません。

Step 3: フレームワークを提案する

回答に基づいて、理由を一文で添えてフレームワークを提案してください。ユーザーが変更できるようにします。

Step 4: ストーリー構成を生成する

スライドコードを書く前に、ストーリーの概要を出力してください。

Slide 1: [Title] -- Hook that establishes stakes
Slide 2: [The Problem] -- What the audience feels today
Slide 3: [Why It Matters] -- Cost of inaction
...
Slide N: [Close] -- Single clear CTA

各項目には、スライド番号、仮タイトル、目的を一文で記載します。ストーリー展開が変化する箇所（緊張感、解放、転換）には、スピーカーノートのヒントも含めてください。

Step 5: 構成の承認を得る

明示的な承認または修正依頼を待ってください。ユーザーが構成に問題ないと伝えるまで、コード作成に進まないでください。

Step 6: スライドごとのコンテンツを生成する

各スライドについて、次を出力してください。

• スライドのコンテンツ（タイトル、本文、ビジュアル、コードブロック）
• スピーカーノート（話す内容、時間の目安、トランジションのフレーズ）
• 必要に応じたデザインメモ（ここにグラフを使う、このリストをアニメーション表示する）

全体を通じて、VISUAL.md のブランド CSS カスタムプロパティを適用してください。マッピングのルールについては brand-integration.md を参照してください。

Step 7: 出力を納品する

出力内容はフレームワークによって異なります。

• Slidev：セットアップ手順を含む slides.md + style.css + package.json
• Reveal.js：index.html + css/theme.css または単一の HTML ファイル
• Spectacle：コンポーネント構成を含む React プロジェクトファイル
• Raw HTML：すべてをインライン化した単一の .html ファイル

ナラティブの流れ

すべてのプレゼンテーションには、この基本構成があります。詳しいガイダンスについては、presentation-narrative.md を参照してください。

フック -- 緊張感を生む断言、質問、または統計で始めます。「こんにちは、私は……です」で始めてはいけません。

課題 -- 聴衆がすでに感じている痛みを明確にします。具体的に、相手の言葉を使います。

解決策 -- 自分の答えを提示します。説明するより、実際に見せましょう。デモは説明に勝ります。

根拠 -- データ、事例、推薦の声、ライブでの実証で裏付けます。

CTA -- 行動はひとつだけ明確に示します。3つではなく、ひとつです。

この流れは固定ではありません。カンファレンスの講演では、課題・解決策・根拠を何度も繰り返すことがあります。営業資料では、予告としてCTAを前半に配置します。ワークショップ資料では、講義と演習を交互に挟みます。形式に合わせて流れを調整してください。

---

1スライドにつき1つのアイデア

これは絶対に譲れません。スライドにアイデアが2つある場合は、2枚に分けてください。スライドは惜しむものではありません。聴衆を混乱させるコストは高くつきます。

確認方法：そのスライドの目的を、「そして」を使わずに1文で説明できますか？できなければ、分割してください。

---

第一級のコンテンツとしての発表者ノート

発表者ノートは後回しにするものではありません。スライドごとに、以下を含むノートを書いてください。

• 話す内容（台本ではなく、重要な論点）
• 時間配分の指針（「ここに60秒かける」「ここが開始から10分の地点」など）
• 次のスライドへの移行フレーズ
• 聴衆とのやり取りのきっかけ（「質問を受けるために少し間を置く」「挙手を求める」など）

---

スライドの質を損なうパターンを避けるルール

以下のパターンは禁止です。自分がこれらを作りそうになったら、手を止めて設計し直してください。

禁止パターン	理由	代わりに使うもの
タイトルに「さあ、始めましょう！」を使う	中身のない言葉です。何も伝えません。	統計、質問、大胆な主張など、具体的なフックを使います。
「アジェンダ」スライド	聴衆はあなたの構成に関心がありません。	フックから始めます。どうしても全体像を示す必要があるなら、シンプルなビジュアルのタイムラインを使います。
箇条書きだらけ（5項目以上）	スライドは文書ではありません。箇条書きを読むだけでは、関心が薄れます。	複数のスライドに分ける、ビジュアルを使う、比較形式に再構成するなどの方法を使います。
ストックフォトの安易な使用	ありきたりな握手の写真は、信頼性を損ないます。	図、データ、スクリーンショットを使うか、画像を使わないようにします。
最後のスライドを「ご質問はありますか？」にする	弱い締めくくりです。最後に示すべきなのはCTAです。	CTAで締めくくります。「質疑応答」はスライドではなく、口頭での移行として伝えます。
「ありがとうございました」スライド	最後の印象を無駄にします。	CTAをもう一度示すか、締めくくりの中に連絡先を組み込みます。
文字の壁	読みたい人は、文書を読むでしょう。	要点のフレーズに絞り、詳細は発表者ノートで補います。
孤立したスライド	前後のスライドとのつながりが明確でないスライドです。	発表者ノートに移行表現を加え、ナラティブを再構成します。

---

デザイン原則

• タイポグラフィの階層：タイトル（大きく太字）、サブタイトル（中サイズ、標準の太さ）、本文（読みやすいサイズ）にします。1枚のスライドで使うフォントサイズは2種類までにします。
• ダークとライト：資料全体でどちらか一方を選びます。混在させないでください。指定がある場合は、ブランドの VISUAL.md の推奨に従います。
• 一貫したリズム：似た種類のスライドには、似たレイアウトを使います。「統計カード」のスライドは、登場するたびに同じ見た目にします。
• スクリーンショットよりグラフ：Excel のグラフをスクリーンショットにしてはいけません。SVG でグラフを生成するか、フレームワークのグラフ作成ツールを使います。
• 余白もデザイン要素：空白は視線を誘導します。すべてのピクセルを埋めたくなる気持ちを抑えましょう。
• 目的のある配色：アクセントカラーは装飾ではなく、強調に使います。1枚のスライドで使うアクセントカラーは最大1色にします。

---

スライドのパターン

再利用できるパターンについては、slide-patterns.md を参照してください。

• タイトルスライド
• セクション区切り
• 統計カード
• 比較（2列）
• コードの解説
• 画像＋キャプション
• 引用
• グラフ／データ
• チーム一覧
• タイムライン
• CTA／締めくくり

各パターンには、レイアウトのガイダンス、含めるべきコンテンツ、含めるべきでないコンテンツが記載されています。

---

ブランド統合

brand/VISUAL.md からプレゼンテーション用 CSS への完全な対応表は、brand-integration.md を参照してください。

概要：

• ブランドのプライマリカラーを --slide-accent に割り当てます
• ブランドのフォントを --slide-heading-font と --slide-body-font に割り当てます
• ロゴはタイトルスライド（中央または左上）と、それ以降のすべてのスライドのフッター（小さく右下）に配置します
• ブランドのセカンダリカラーは、グラフの配色とセクションの区切りに使用します

---

テンプレート

一般的なデッキの種類に対応した、事前に作成されたストーリー構成です。templates/ を参照してください。

テンプレート	フレームワーク	スライド数	用途
pitch-deck.slidev.template	Slidev	10-15	投資家向けピッチ
conference-talk.reveal.template	Reveal.js	30-40	技術カンファレンスでの講演
client-proposal.html.template	Raw HTML	15-25	コンサルティング提案
sales-deck.slidev.template	Slidev	12-18	B2B 営業
workshop.spectacle.template	Spectacle	変動	参加型ワークショップ

テンプレートは出発点であり、制約ではありません。具体的なニーズに合わせて、スライド数、順序、内容を調整してください。

---

エラー処理

• ユーザーがコンテンツを何も提示しない場合（「デッキを作って」とだけ依頼する場合）は、そのまま進めず、デッキのテーマ、対象者、達成したいことを確認してください。
• brand/ ディレクトリがない場合は、ユーザー指定の色やフォントを使って進めるか、最初に content-setup を実行するかを提案してください。
• フレームワークがサポートしていない形式をユーザーが求めた場合（例：Slidev から PDF を作成する場合）は、エクスポート方法を説明し、手順を提示してください。