mcpField
P
presentation-creator

presentation-creator

github.com/mblodeドキュメント169893 回インストール2 日前に更新
リポジトリ

presentation-creator について

presentation-creatorは、ストーリー、スライド内容、ビジュアルシステムを組み立てるプレゼンテーション作成スキルです。ストーリー設計から品質確認まで扱い、Marp、Slidev、reveal.js形式やNext.jsのデッキアプリを出力しますが、PPTXファイル自体は作成しません。

主な機能

  1. 01ストーリーの軸とスライド順の設計
  2. 02スライド文案と発表者ノートの作成
  3. 03色、書体、レイアウトの設計
  4. 04Marp、Slidev、reveal.js文書の出力
  5. 05Next.jsデッキアプリの構築
  6. 06レンダリング後のレイアウトとコントラスト確認

活用シーン

  1. 01ライブ講演向けのストーリー性あるデッキ作成
  2. 02非同期で読まれる投資家向け資料の作成
  3. 03スライド内容をWebデッキアプリとして出力
  4. 04スライドの密度や視覚的な問題の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mblode/agent-skills --skill presentation-creator

インストール後、Claude Code で/presentation-creatorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

evals/
evals.json
references/
outline-structure.md
output-formats.md
pitch-decks.md
speaker-notes.md
story-structure.md
visual-design.md
web-deck.md
writing-slides.md

詳細

プレゼンテーション作成

大胆でミニマルなスライドデッキを、その根底にあるストーリーとともに作成します。ストーリーの軸から最終確認まで対応します。

  • 対象: ストーリーの軸、スライド構成、スライドの文章、ビジュアルシステム、発表者ノート、投資家向けピッチデッキ、ウェブアプリとして構築するデッキまで、デッキ作成を最初から最後まで支援します。出力形式は Marp markdown(デフォルト)、Slidev または reveal.js markdown、Next.js デッキアプリから選べます。
  • 対象外: .pptx/.potx ファイルそのものの作成や編集(利用可能なプレゼンテーション/PPTX スキルまたはツールに、このスキルで作成した完成済みのアウトライン、文章、ノートを渡します)、スライド内のグラフ(インストールされている場合は外部の dataviz を使用)、長文の文章、マーケティングコピー、スライド外の口頭発表用台本(ghostwriter)、プロダクト UI(ui-design)。

ワークフロー

このチェックリストを進めてください。

Presentation progress:
- [ ] Step 1: Gather context (audience, setting, venue, three messages, output format)
- [ ] Step 2: Write the story spine and the ending (references/story-structure.md)
- [ ] Step 3: Outline the slide sequence (references/outline-structure.md)
- [ ] Step 4: Write slide copy (references/writing-slides.md; pitch decks: references/pitch-decks.md instead)
- [ ] Step 5: Design colour, type, and layout (references/visual-design.md)
- [ ] Step 6: Write speaker notes (references/speaker-notes.md); skip for a deck sent without a presenter
- [ ] Step 7: Emit the deck in the chosen format (references/output-formats.md or references/web-deck.md)
- [ ] Step 8: QA pass, output the slide-by-slide review table
ステップ 1:背景情報を集める

ブリーフに記載されていない内容だけを質問し、以下を確認してください。

  • 対象者: 社内向け(共通認識があるため、率直に伝える)か、社外向け(信頼性を築き、用語を定義する)か。
  • 設定: ライブ発表、録画/非同期、または投資家に送付し、発表者なしで読まれるピッチデッキか。
  • 会場: 暗い部屋や大ホールではダークシステムを、明るい会議室や日中、または配布資料を兼ねるデッキでは明るい配色を使います。不明な場合は質問してください。ステップ 5 の内容が決まるためです。
  • 3 つのメッセージ: デッキを見た後、対象者に覚えていてほしいこと。
  • 出力形式: 特別な理由がなければ Marp markdown を使います。ライブデモを実行するデッキ、または URL で公開するデッキにはウェブアプリを使います。ユーザーがファイル名または社内テンプレートを指定した場合は .pptx とし、このスキルで作成したアウトライン、文章、ノートを外部の pptx スキルに渡して作成します。ステップ 7 ではなく、この時点で決定してください。形式によって、ステップ 5 と 6 の種類やノートの扱い方が決まります。

設定に応じて分岐します。

  • ライブ発表、社内向け、または録画デッキ → ステップ 2~8 を順番に進めます。
  • 読まれることを前提に送付する投資家向けピッチデッキ → まず references/pitch-decks.md を参照します。ここにある 10 枚構成のフレームワークがステップ 3 のアウトラインに代わり、非同期向けの文章ルールがステップ 4 の writing-slides.md に代わります(両方は読み込まないでください。情報量のルールが矛盾します)。ステップ 2 は簡略化して適用します。ストーリーの軸が、ピッチを機能一覧のように見せないための要となります。ステップ 6 は省略します。同じ会社がデモデイのステージでライブ発表する場合は、発表用デッキとして扱い、標準の手順を使い、ピッチフレームワークをアウトラインとして利用します。
ステップ 2~7:デッキを作成する

各ステップに進んだら、そのステップのリファレンスを読みます。

ステップリファレンス内容
2. ストーリーreferences/story-structure.mdストーリーの軸のテンプレート、結末から書き始める方法、立場を明確にする方法、利害、行き詰まりを打開する方法
3. アウトラインreferences/outline-structure.mdナラティブの流れ、12 種類のスライド、セクションの色、アウトラインの出力形式
4. 文章作成references/writing-slides.md、ピッチの場合は references/pitch-decks.md に置き換え見出しのパターン、本文のルール、スライドの種類ごとの文章、変更前/変更後の例
5. デザインreferences/visual-design.md2 種類の配色システム、コントラストのしきい値、可変と固定の文字サイズ設定、レイアウトパターン、スライドの種類とレイアウトの対応
6. ノートreferences/speaker-notes.md各スライドのノート構成、発表時の合図、スライドの種類ごとのノート
7. 出力references/output-formats.mdMarp の構文とエクスポート、Slidev と reveal.js の同等機能、pptx への引き渡し、各形式でのノートの保存場所
7. 出力(ウェブ)references/web-deck.mdスライドごとのルート構成、ナビゲーション、レイアウトの基本要素、モーション、ライブデモ
このスキルの変更evals/evals.jsonアサーション付きの動作シナリオ、ならびに起動すべきケースと類似ケースを区別するためのルーティングプロンプト。ユーザーのタスク中に読み込まれることはありません

文章ができてから web-deck.md を読みます。アウトラインより先に基本要素を設計すると、スライド 3 に合わせた形になり、それ以降のすべてのスライドと衝突します。

ステップ 8:QA パス(証拠を作成)

納品形式でレンダリングし、すべてのスライドを確認します。レイアウトの欠陥と測定したコントラストを記録します。自己評価の一瞥スコアは編集上の判断です。詳細な表は必要に応じて成果物に添え、重要な結果をチャットで要約します:

| # | Slide | 3-sec test | One message | Spine beat | Layout | Colour | Contrast |
|---|-------|-----------|-------------|------------|--------|--------|----------|
| 1 | Title | pass | pass | once upon a time | full statement | teal | 12.6:1 |
  • 3秒テスト: 腕の長さほど離れていても3秒で読み取れること(Duarteの一瞥テスト)。不合格なら、合格するまで文章を削ります。ピッチデッキは一瞥するものではなく、読まれるものです。「文脈なしで転送されても意味が通じるか」に置き換えます。
  • メッセージは1つ: 1枚のスライドにつきアイデアは厳密に1つです。2つのアイデアを含むスライドは分割します。
  • ストーリーの要点: このスライドがステップ2のストーリーのどの要点を担うかを示します。どの要点も担わないスライドは、単に興味深い事実です。削除します。
  • レイアウト: スライドの役割が変われば、レイアウトも変える必要があります。同じレイアウトが3枚以上続く場合は指摘し、そのセクションが意図的なリストである場合に限り、そのままにします。
  • 色: セクションのアクセントカラー、または全面塗りのパレットが、ステップ5で指定したものと一致していること。
  • コントラスト: スライド上で最も小さい文字と背景とのコントラストを確認します。本文とキャプションは4.5:1、3:1が許容されるのは24px(18pt)以上の文字だけです。「問題なし」ではなく比率を記録します。

表の下に、デッキ全体のチェック項目を記載します:

  • すべてのストーリーの要点に少なくとも1枚のスライドがあり、最後のスライドが最初に書いた結末と一致している
  • 一般の人が異論を唱えられる立場をデッキが示している
  • 全体を通して色のシステムが1つであること:セクションごとのアクセントカラー、または全面塗りのパレットのどちらか一方のみを使い、両方は使わない
  • まとめのスライドに、主要セクションごとにちょうど1行がある
  • スピーカーノートが出力形式で読み取られる場所にあること(MarpとSlidev:スライドの末尾にHTMLコメント、reveal.js:Note: 行、.pptx:ノートペイン)
  • ピッチデッキのみ:スライドは最大10枚と付録、明示的な依頼スライド(金額と資金の使途を記載)、見出しが転送可能性のテストに合格している

確認された欠陥を修正し、影響を受けたスライドを再確認します。レンダリングできない場合は、視覚的な確認が未実施であることを明記します。

注意点

  • 明るい部屋で暗いスライドを使う場合: デフォルトのダークシステムは部屋の明るさに左右されます。日光が差し込む環境や性能の低いプロジェクターでは、黒い背景がグレーになり、白い本文テキストが見えにくくなります。ステップ 1 で会場について確認し、明るいという回答なら、明るい「paper」パレットか白い背景を選び、ノートパソコンではなくプロジェクターでテストしてください。
  • 見出しサイズだけでコントラストを確認する場合: 彩度の高い全面塗りの配色は、100px では読めても、20px のキャプションサイズでは読めないことがあります。実際の hex 値を使って、スライド上で最も小さいテキストをステップ 8 の基準に照らして測定してください。
  • Marp または Slidev から「PPTX」形式でエクスポートして完了とする場合: どちらも .pptx 内で各スライドを画像にラスタライズします。テキストは選択も編集もできないため、クライアントが編集を希望したデッキが画像の集まりになってしまいます。編集可能な PowerPoint が納品物の場合は、pptx スキルを使ってください。
  • Marp ではノートとディレクティブの両方が HTML コメント内に記述されます: はディレクティブ、 は発表者ノートです。key: value の行から始まるノートは、気付かないうちにディレクティブになります。
  • ウェブデッキでピクセル単位の固定サイズを使う場合: 発表者のノートパソコン向けにサイズを決めたデッキは、プロジェクターでは別のデッキになり、転送先のスマートフォンでは読めなくなります。サイズには clamp() を使ってください。Marp と .pptx のデッキは固定キャンバスなので、代わりに pt サイズを使用します。
  • メールで送るピッチデッキに、発表用スライドの情報密度を使う場合: 発表者なしで転送される 1 スライド 3 語のデッキは読めません。デッキを作り終えてからではなく、ステップ 1 で pitch-decks.md に切り替えてください。逆の場合もうまくいきません。デモデーのステージで 60 語のスライドを使うケースです。
  • ストーリーの軸を省く場合: いきなりスライドを作ると、流れのない事実の羅列になり、物語の筋が抜けていることに気付いて書き直すことになります。最初にストーリーの軸と締めくくりを決めてください。
  • 発表者ノートを台本にする場合: 一語一句書いた台本は読み上げることになり、平板に聞こえます。ノートは要点、話す内容の箇条書き、つなぎの一文などのプロンプトにしてください。
  • セクションシステムの範囲外でアクセントカラーを使う場合: セクションカラーは道案内です。セクションの途中で無作為にアクセントカラーを使うと、実際には起きていない話題の切り替わりに見えます。全面塗りのデッキでは、スライド自体がアクセントです。色はスライド内ではなく、スライドの境目で切り替えてください。
  • スライドに段落を載せる場合: 聴衆は話を聞かずに読むようになり、発表者は不要になります。3 秒テストに通るまで削ってください。

関連スキル

  • インストール済みの場合は、外部の pptx スキル(anthropics/skills)を使って .pptx ファイルを作成、編集、QA します。このスキルはストーリー、アウトライン、コピー、ノートを担当します。.pptx 内でビジュアルに関する競合が発生した場合は、このスキルのカラーシステムと文字の階層を優先し、フォント、余白、ノートの仕組みについては pptx スキルの指示を優先します。
  • インストール済みの場合は、スライド上のグラフや指標タイルに外部の dataviz スキルを使います。
  • ghostwriter:デッキ以外のマーケティングコピー、および出力がスライドではなく文章の場合に、blog プロファイルから長文の文章を作成します。
  • ui-design:プロダクト UI とランディングページのビジュアルシステムに使います。プレゼンテーションのビジュアルルールは、代わりに references/visual-design.md を参照してください。

コメント