presentation-design について
presentation-designは、PowerPoint、Keynote、Google Slides、reveal.jsなどで発表資料を作る人向けの計画・評価スキルです。聴衆の理解を軸に、内容構成、ビジュアル設計、認知負荷、アクセシビリティを扱います。
主な機能
- 01聴衆と要点の計画
- 02主張と根拠によるスライド構成
- 03視覚的な階層と一貫性
- 04認知負荷の管理
- 05プレゼンテーション評価チェックリスト
活用シーン
- 01聴衆のニーズに沿った発表の計画
- 02文字中心のスライドを視覚的な根拠に置き換え
- 03明瞭さとアクセシビリティの確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/presentation-designを入力して読み込まれたか確認します。
詳細
プレゼンテーションデザイン診断
目的
効果的に伝わるプレゼンテーションを設計・評価します。企画、ビジュアルデザイン、認知負荷の管理、評価のためのフレームワークを提供します。あらゆるプレゼンテーションツール（reveal.js、PowerPoint、Keynote、Google Slides）に適用できます。
基本原則
聴衆を中心にしたデザイン。 すべての判断は、発表者の都合ではなく、聴衆の理解に役立つものであるべきです。
クイックリファレンス：よくある問題
| 問題 | 症状 | 対処法 |
|---|---|---|
| 文字の壁 | スライドが段落で埋まっている | アサーション・エビデンス構成 |
| 箇条書きだらけ | ビジュアルではなくリストを使っている | 1つの概念＋視覚的な根拠 |
| あれもこれも詰め込む | すべてを盛り込んでいる | 必須コンテンツと追加可能なコンテンツを分ける |
| 見た目はよいが中身がない | 内容を伴わないデザイン | メッセージを最優先したデザイン |
| 認知的過負荷 | 1枚のスライドに詰め込みすぎている | 1枚につき重要な概念を1つ |
フェーズ1：聴衆とコンテンツの計画
重要な質問
- 具体的に誰が聴衆ですか？ どの程度の知識を持っていますか？
- 中心となるメッセージは何ですか？ 何を覚えてもらうべきですか？
- 裏付けとなるポイントは3～5つありますか？ それぞれがメッセージをどのように補強しますか？
- それぞれのポイントを裏付ける根拠は何ですか？ ビジュアル、データ、事例ですか？
- 聴衆にどのような行動を取ってほしいですか？ 行動喚起は何ですか？
- 時間の制約はありますか？ 必須の内容と任意の内容は何ですか？
実施項目
- 聴衆のペルソナを作成する
- 中心となるメッセージを1文で書く
- 裏付けとなるポイントを論理的な流れに沿って整理する
- それぞれのポイントの根拠を特定する
- 必須のコンテンツと追加可能なコンテンツを定義する
- プレゼンテーションの流れをスケッチする
フェーズ2：ビジュアル戦略
アサーション・エビデンス構成
箇条書きを次の内容に置き換えます：
- アサーション： 要点を明確に伝える、完結した文
- エビデンス： アサーションを裏付けるビジュアル
次のようにする代わりに：
Key findings:
• Data shows increase
• Users engaged more
• Revenue improved
次のようにします：
"User engagement increased 43% after redesign"
[Graph showing the increase]
ビジュアルの原則
- 限定したカラーパレット： 色は最大3～5色
- タイポグラフィの階層： 役割が明確なフォントを2～3種類
- 余白： コンテンツにゆとりを持たせる
- 一貫性： 同じレイアウト、同じスタイルで統一する
- 視覚的な進行状況： 聴衆が現在位置を把握できるようにする
フェーズ3：認知負荷の管理
1枚につき1つの概念
各スライドは、次の質問に答える必要があります。「このスライドから、聴衆に何を1つだけ持ち帰ってほしいか？」
段階的な情報開示
一度にすべてを見せるのではなく、情報を順番に提示します。
- 初期状態を示す
- 背景を説明しながら最初の要素を追加する
- 最初の要素を土台にして、2つ目の要素を追加する
話す内容と見せる内容
| スライドに表示する内容 | 口頭で説明する内容 |
|---|---|
| 要点となるアサーション | 詳細な説明 |
| 視覚的な根拠 | 背景と説明 |
| 重要なデータ | 解釈 |
| 次のステップ | 重要である理由 |
コード例（技術講演）
- 常にシンタックスハイライトを使う
- 重要な行を強調する
- 複雑な例は段階的に示す
- 可能であれば定型コードを省く
フェーズ4：構成パターン
水平と垂直（複数レベルのナビゲーション）
水平スライド： 主要なストーリーの流れ 垂直スライド： 補足の詳細（必要に応じて掘り下げる）
例：
- 水平：「顧客維持における3つの重要要素」
- 垂直（その下に配置）：各要素の詳細スライド
時間への柔軟な対応
コンテンツに次のようなラベルを付けます：
- 必須： どの長さの発表でも必ず取り上げる
- 標準： 通常の持ち時間で取り上げる
- 追加可能： 時間に余裕がある場合のみ取り上げる
評価フレームワーク
1. 聴衆を中心にしたデザイン（1～5で評価）
| 評価基準 | スコア | メモ |
|---|---|---|
| コンテンツが聴衆の知識レベルに合っている | ||
| 聴衆にとっての価値提案が明確である | ||
| 時間の制約に合わせて調整できる | ||
| ナビゲーション構成が理解を助ける |
注意すべき兆候：
- 聴衆より発表者を中心にしている
- 聴衆がすでに持っている知識を考慮していない
2. 視覚的な明瞭さ（1〜5で評価）
| 基準 | スコア | 備考 |
|---|---|---|
| 主張と根拠の構成が使われている | ||
| 視覚要素とテキストのバランスが取れている | ||
| 視覚的な階層が注意を誘導している | ||
| デザイン要素に一貫性がある | ||
| 余白が効果的に使われている |
注意すべき点：
- 箇条書きの多用
- テキスト量の多いスライド
- 雑然としたレイアウト
3. 認知負荷（1〜5で評価）
| 基準 | スコア | 備考 |
|---|---|---|
| 1枚のスライドにつき重要な概念が1つである | ||
| テキスト量が適切である | ||
| アニメーション／トランジションが適切に使われている | ||
| コードが適切にフォーマットされている（該当する場合） | ||
| 補足情報にアクセスしやすく、注意をそらさない |
注意すべき点：
- 1枚のスライドに複数の複雑な概念が含まれている
- 話の内容と競合する過剰なテキスト
- アニメーションの多用
4. アクセシビリティ（1〜5で評価）
| 基準 | スコア | 備考 |
|---|---|---|
| さまざまな画面サイズで使える | ||
| 十分な色のコントラストがある | ||
| 包摂的な画像と言葉遣いが使われている | ||
| フォントサイズが適切である |
注意すべき点：
- コントラストが不十分
- フォントが小さすぎる
- 包摂性に欠けるコンテンツ
実装チェックリスト
構成
- 最初の2分以内に主要メッセージが明確に伝わる
- 補足するポイントが論理的に整理されている
- 必須コンテンツと展開可能なコンテンツが区別されている
- ナビゲーションが理解を助ける
コンテンツ
- 主張と根拠の構成が使われている
- 視覚的な根拠が主張を裏付けている
- 1枚のスライドにつき概念が1つである
- コード例が適切にフォーマットされている
視覚要素
- カラーパレットに一貫性がある
- タイポグラフィに階層がある
- 十分な余白がある
- 要素が整列している
アクセシビリティ
- 色のコントラストを確認済み
- フォントサイズが適切である
- 重要な画像に代替テキストがある
改善の優先順位
評価後：
1. 重大な問題（すぐに修正）：
- 聴衆の理解を妨げる
- アクセシビリティ上の不備
- 主要メッセージが不明確
2. 重要な改善（次に対応）：
- 認知負荷の問題
- 視覚的な一貫性の問題
- 構成の改善
3. できれば行いたい改善：
- 高度なアニメーション
- カスタムスタイル
- 細部の仕上げ
アンチパターン
1. データの詰め込み
パターン： 解釈や階層化を行わず、すべてのスライドにデータ、グラフ、統計を詰め込む。 なぜうまくいかないのか： 聴衆は生のデータをリアルタイムで処理できません。解釈がなければ、学ぶ代わりに分析をすることになり、データの大半はすぐに忘れられます。 改善策： 1枚のスライドにつき洞察を1つに絞り、視覚的な根拠で裏付けます。結論を述べ、証拠を示しましょう。聴衆がデータを見る前に要点を理解できるようにします。
2. 台本の読み上げ
パターン： 話し手の台本全文を盛り込み、箇条書きが実質的に段落になっているスライド。 なぜうまくいかないのか： 聴衆は話し手が話すよりも速く読めます。先を読んでしまい、すでに読んだ内容を話し手が口にすると注意を失います。スライドはコミュニケーションの道具ではなく、テレプロンプターになってしまいます。 改善策： スライドには口頭で伝えられないことを示し、話し手は画面に示せないことを説明します。画面にはビジュアル、図、重要な主張を表示し、背景、解説、詳細は口頭で伝えます。
3. テンプレートの罠
パターン： デザインがメッセージにどう役立つかを考えず、汎用テンプレートにコンテンツを当てはめる。 なぜうまくいかないのか： デザインは見栄えを整えるだけでなく、理解を助けるものであるべきです。汎用テンプレートでは、ありきたりなコミュニケーションしか生まれません。万人向けのものは、誰にも十分には合いません。 改善策： デザインはメッセージに役立つものにします。「この聴衆がこのコンテンツを理解するには、どのような視覚的構成が役立つか」と考えましょう。テンプレートの選択肢ではなく、伝達のニーズから始めます。
4. アニメーションのサーカス
パターン： 画面のあちこちで切り替え、ビルド、エフェクトが使われ、テキストが飛び、画像が回転し、次々にフェードします。 なぜ失敗するのか： アニメーションは注意を引きます。あらゆるエフェクトが「これを見て」と訴えます。すべてが動くと、何も目立たなくなります。聴衆は圧倒されたり、感覚が麻痺したりします。 解決策： アニメーションは、段階的な開示（複雑な考えを段階を追って組み立てる）か、強調（要点を際立たせる）に限って使います。アニメーションは使わないことを基本とし、目的がある場合にのみ追加します。
5. 箇条書き病
パターン： どの内容にも箇条書きを使い、スライドが何枚も続きます。 なぜ失敗するのか： 箇条書きは文書向けであり、プレゼンテーション向けではありません。重要度の異なる考えを同じ重みで扱い、文字ばかりのスライドを生み、積極的に見るのではなく、受け身で読むよう促します。 解決策： 主張と根拠の構成を使います。箇条書きを、視覚的な根拠で裏付けた明確な主張に置き換えます。リストが必要なら、それを本当にスライドにする必要があるのか考えます。
統合
インバウンド（このスキルに取り込まれるもの）
| スキル | 提供内容 |
|---|---|
| speech-adaptation | ビジュアルと連携させるための、話す内容の構成 |
| story-sense | プレゼンテーションの流れを組み立てるための物語構成 |
| (content expertise) | 伝える内容に関する専門知識 |
アウトバウンド（このスキルが可能にするもの）
| スキル | 提供内容 |
|---|---|
| (implementation) | あらゆるプレゼンテーションツールに活用できるデザイン原則 |
| (delivery) | 効果的なスピーチを支えるよう設計されたスライド |
補完関係
| スキル | 関係 |
|---|---|
| speech-adaptation | Presentation-design はビジュアルを担当し、speech-adaptation は話す内容を担当します。連携できるよう、両者を一緒に設計します |
| voice-analysis | プレゼンターの声を理解すると、その人の自然な話し方に合ったスライドを設計できます |