revealjs-presenter について
revealjs-presenter は、アウトラインや文書を RevealJS のプレゼンテーションに変換する執筆スキルです。テーマ選択、スライド構成、内容のリズムを導き、単体で使える HTML ファイルを作成します。
主な機能
- 01アウトラインからスライドへの変換
- 02テーマに沿った内容とスタイル設計
- 03スライド形式とコンポーネントの再利用
- 04インライン図表の作成
- 05プレゼンテーションの構成調整
活用シーン
- 01アウトラインからピッチデッキを作成
- 02文書を技術講演に再構成
- 03選択したテーマで教材スライドを作成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ jwynia/ agent-skills --skill revealjs-presenterインストール後、Claude Code で/revealjs-presenterを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
themes/bold.mdcorporate.mddelft.md詳細
RevealJS プレゼンタースキル
このスキルを使用するタイミング
以下の場合にこのスキルを使用します:
- コンテンツやアウトラインから RevealJS プレゼンテーションを作成する
- ドキュメントの内容をスライド形式に変換する
- ピッチデッキ、技術講演、教育用プレゼンテーションを作成する
- ユーザーが「スライド」「プレゼンテーション」「デッキ」と依頼する、または RevealJS に言及する
このスキルでは、CSS を埋め込み、CDN を参照する、自己完結型の単一 HTML ファイルを作成します。
Part 1: RevealJS の基礎
1.1 必須の設定
RevealJS は常に次の設定で初期化します:
Reveal.initialize({
hash: true,
center: true,
transition: 'fade',
transitionSpeed: 'fast',
backgroundTransition: 'fade',
width: 1920,
height: 1080,
margin: 0.08,
minScale: 0.2,
maxScale: 2.0
});
これらの値を使用する理由:
center: true— RevealJS に垂直方向の中央揃えを任せます。セクションに flexbox を適用して調整しようとしないでください。width: 1920, height: 1080— 標準的な HD 比率です。コンテンツは自動的に拡大縮小されます。margin: 0.08— ビューポートの端に余白を確保します。transition: 'fade'— プロフェッショナルで、気が散りません。'zoom'、'convex' などは避けてください。
1.2 基本の HTML 構造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[PRESENTATION TITLE]</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/theme/white.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* Theme variables and styles go here */
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.js"></script>
<script>
Reveal.initialize({
hash: true,
center: true,
transition: 'fade',
transitionSpeed: 'fast',
backgroundTransition: 'fade',
width: 1920,
height: 1080,
margin: 0.08,
minScale: 0.2,
maxScale: 2.0
});
</script>
</body>
</html>
1.3 基本の CSS リセット
RevealJS の動作を標準化するため、次のスタイルを適用します:
/* === RESET & NORMALIZATION === */
.reveal {
font-family: var(--font-body);
font-weight: 400;
color: var(--text-primary);
}
.reveal .slides section {
text-align: left;
padding: 60px;
box-sizing: border-box;
}
.reveal .slides section.centered {
text-align: center;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
font-family: var(--font-display);
font-weight: 700;
color: var(--text-primary);
text-transform: none;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 0.5em 0;
}
.reveal p {
margin: 0 0 1em 0;
line-height: 1.5;
}
.reveal ul, .reveal ol {
margin: 0;
padding: 0;
list-style-position: outside;
margin-left: 1.5em;
}
.reveal li {
margin-bottom: 0.5em;
line-height: 1.4;
}
Part 2: テーマの選択
テーマは完全な仕様です。 スライドを生成する前に、themes/ ディレクトリから適切なテーマファイルを読み込んでください。テーマは視覚的なスタイルとコンテンツ戦略の両方を制御します。
2.1 テーマが制御する内容
各テーマファイルでは、次の項目を指定します:
- CSS 変数 — 色、タイポグラフィのサイズ、間隔、フォント
- タイポグラフィの適用方法 — CSS 変数を各要素に適用する方法
- 単語数の上限 — スライドの種類ごとの最大単語数
- スライドの種類に関する優先度 — 優先する種類、控えめに使用する種類、避ける種類
- コンテンツのリズム — インパクト重視のスライドと情報重視のスライドの比率
- 構成ルール — 箇条書きの最大数、カード数、分割の指針
2.2 デフォルトのテーマ
ユーザーが別のテーマを指定しない限り、themes/bold.md を使用します。
2.3 テーマの適用方法
- スライドを生成する前に、テーマファイル全体を読み込みます
- 単語数の上限とスライドの種類の選択については、テーマのコンテンツ戦略セクションに従います
- テーマの変数とタイポグラフィの各セクションにある CSS をすべて含めます
- Part 1.3 の基本 CSS リセットと組み合わせます
2.4 利用可能なテーマ
| テーマ | ファイル | コンテンツのアプローチ |
|---|---|---|
| Bold | themes/bold.md | 単語数を抑え、印象的な効果を重視し、シンプルな構成にして、インパクト重視のスライドを 40% 以上にする |
| Corporate | themes/corporate.md | 情報量を多くし、詳細な内容を盛り込み、複雑な構成も許容する |
今後、minimal.md(すっきりとした控えめなデザイン)などのテーマが追加される可能性があります。
Part 3: コアコンポーネント
3.1 バー(アクセント要素)
視覚的な基準点およびセクション表示として使用する水平バーです。
.bar {
width: var(--bar-width);
height: var(--bar-height);
background: var(--accent-1);
margin-bottom: var(--space-md);
}
.bar-accent-2 { background: var(--accent-2); }
.bar-accent-3 { background: var(--accent-3); }
.bar-accent-4 { background: var(--accent-4); }
.centered .bar {
margin-left: auto;
margin-right: auto;
}
使用方法:
<div class="bar"></div>
<h2>Section Title</h2>
3.2 コンテンツコンテナー
幅を制限する必要があるスライドに使用します:
.content-wrap {
max-width: var(--content-max-width);
width: 100%;
}
.centered .content-wrap {
margin: 0 auto;
}
3.3 カードコンポーネント
.card {
background: var(--bg-secondary);
border-radius: var(--card-radius);
padding: var(--card-padding);
border-left: 4px solid var(--accent-1);
}
.card-accent-2 { border-left-color: var(--accent-2); }
.card-accent-3 { border-left-color: var(--accent-3); }
.card-accent-4 { border-left-color: var(--accent-4); }
.card h3 {
font-size: var(--size-h4);
margin-bottom: var(--space-xs);
}
.card p {
font-size: var(--size-body);
color: var(--text-secondary);
margin: 0;
}
3.4 グリッドレイアウト
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
}
/* For uneven splits */
.grid-2-1 {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-lg);
}
.grid-1-2 {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-lg);
}
3.5 スライドフッター
ブランディングやコンテキストを示す、常時表示されるフッター要素です。スライドコンテナーの外側に配置します。
.slide-footer {
position: fixed;
bottom: 30px;
left: var(--slide-padding);
font-size: var(--size-label);
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
z-index: 1000;
}
/* Adapt for dark backgrounds */
section[data-background-color] .slide-footer,
.dark-slide .slide-footer {
color: rgba(255, 255, 255, 0.4);
}
HTML での配置(reveal div の前):
<body>
<div class="slide-footer">Company Name | Presentation Title</div>
<div class="reveal">
...
</div>
</body>
使用する場面: 企業プレゼンテーション、カンファレンストーク、ブランディングを常時表示すると効果的なあらゆる場面。 よくある間違い: 情報を詰め込みすぎる、フォントサイズを大きくしすぎる、コンテンツの邪魔になる。
Part 4: スライドの種類
各スライドの種類には、HTML の構造、使用する場面、よくある間違いが含まれます。
4.1 タイトルスライド
最初に表示するスライドです。全体の雰囲気とコンテキストを設定します。
<section class="centered">
<p class="label">Category or Context</p>
<h1>Presentation Title</h1>
<div class="bar"></div>
<p class="lead">Subtitle or tagline goes here</p>
</section>
使用する場面: 最初のスライドのみ。
よくある間違い: テキストを詰め込みすぎる、アジェンダを含める、ロゴやフッターで雑然とさせる。
4.2 セクション区切り
主要なセクション間の移行に使います。視覚的な間を作り、色によってセクションの個性を確立します。
<section class="centered" data-background-color="var(--bg-dark)">
<h1 class="text-on-dark">Section Title</h1>
<div class="bar bar-accent-2"></div>
<p class="lead text-on-dark">Optional brief context</p>
</section>
視覚的なリズムを生み出す色のローテーション: セクション区切りの背景を変えて、主要なトピックごとに異なる視覚的な個性を作りましょう。おすすめのローテーション:
| セクション | 背景 | バーのアクセント |
|---|---|---|
| 1(課題/背景) | var(--bg-dark) | bar-accent-3 |
| 2(ソリューション) | var(--accent-1) | bar-accent-2 |
| 3(詳細) | var(--accent-2) | デフォルト |
| 4(今後/CTA) | var(--bg-dark) | bar-accent-2 |
アクセントカラーの背景を使った例:
<section class="centered" data-background-color="#D45D00">
<h1 class="text-on-dark">The Problem</h1>
<p class="text-on-dark" style="opacity: 0.8;">Why the current paradigm is broken.</p>
</section>
使用する場面: 主要なセクション間(通常、プレゼンテーションあたり3〜5か所)。 避けるべきこと: トピックが変わるたびに使うこと、セクション名以外の内容を追加すること、すべてのセクション区切りで同じ色を使うこと。
4.3 単語/フレーズひとつ
最大限のインパクトを与えます。アイデアひとつを大きな文字で示します。
<section class="centered">
<h1 style="font-size: var(--size-stat-hero);">Simplify.</h1>
</section>
使用する場面: 重要な概念を強調するとき、印象的な場面を作るとき、切り替えの間を設けるとき。
避けるべきこと: 多用すること(プレゼンテーションあたり2〜3回を超える)、説明が必要な概念に使うこと。
4.4 ヒーロー統計
ドラマチックなデータを見せる場面です。数字ひとつを主役にします。
<section class="centered">
<p class="label">Context Label</p>
<p class="stat-hero text-accent-1">87%</p>
<p class="stat-label">of users completed onboarding</p>
</section>
使用する場面: 最も重要なデータポイントに使います。通常、プレゼンテーションあたり1〜2回だけ使用します。
避けるべきこと: すべての統計にヒーロー形式を使うこと、ほかのコンテンツに埋もれさせること。
4.5 標準統計
目立たせるデータですが、主役となる場面ではありません。
<section class="centered">
<p class="label">Expected Outcome</p>
<div class="bar"></div>
<p class="stat text-accent-2">50%</p>
<p class="stat-label">reduction in development time</p>
</section>
使用する場面: 補足データや二次的な指標に使います。
避けるべきこと: すべての統計を同じサイズにすること、文脈を示すラベルを付けないこと。
4.6 統計のクラスター
比較のために、関連する統計を2〜3個まとめて表示します。
<section>
<h2>Key Metrics</h2>
<div class="bar"></div>
<div class="grid-3" style="margin-top: var(--space-lg);">
<div class="centered">
<p class="stat text-accent-1">50%</p>
<p class="stat-label">faster development</p>
</div>
<div class="centered">
<p class="stat text-accent-2">75%</p>
<p class="stat-label">prototype success</p>
</div>
<div class="centered">
<p class="stat text-accent-3">30%</p>
<p class="stat-label">reduced overhead</p>
</div>
</div>
</section>
使用する場面: 関連する指標の比較、導入前後の表示、ダッシュボード形式の要約に使います。
避けるべきこと: 統計を4個以上含めること、関連のないデータを混在させること。
4.7 引用
引用者を明記し、視覚的に強調します。
<section class="centered">
<blockquote style="font-size: var(--size-h2); font-style: italic; max-width: 900px; margin: 0 auto;">
"The best interface is no interface."
</blockquote>
<p class="text-muted" style="margin-top: var(--space-md);">— Golden Krishna</p>
</section>
使用する場面: 専門家の権威を示すとき、記憶に残るフレーズを紹介するとき、ユーザーの推薦コメントを載せるとき。 避けるべきこと: 長い引用(20語未満を目安にします)、引用者を明記しないこと。
4.8 単一の主張(インパクトステートメント)
独立したスライドに値する、印象的な主張です。インパクトを重視したタイポグラフィを使い、必要に応じて文中をハイライトします。
<section class="centered">
<p class="impact">AI agents are the <span class="highlight-2">primary developers</span>.</p>
</section>
ヒーロー形式の場合:
<section class="centered">
<p class="impact-hero">Languages built for <span class="highlight-3">humans</span>
create failure modes for <span class="highlight-1">AI</span>.</p>
</section>
文脈ラベルを付ける場合:
<section class="centered">
<p class="label">The Inversion</p>
<div class="bar"></div>
<p class="impact">Human interaction becomes the <span class="highlight-2">refinement layer</span>.</p>
</section>
使用する場面: 論旨の提示、パラダイムシフト、議論の軸となる重要な主張に使います。聴衆に一つのアイデアをじっくり受け止めてもらう場面に適しています。 避けるべきこと: 多用すること(プレゼンテーションあたり最大2〜4回)、補足テキストを追加すること、重要度の低いポイントに使うこと、強調のためのハイライトを忘れること。
4.9 主張+根拠
基本となるスライドです。明確な主張を視覚的な証拠で裏付けます。
<section>
<h2>User engagement increased 43% after redesign</h2>
<div class="bar"></div>
<div class="grid-1-2">
<div>
<p class="lead">Key insight or context that supports the assertion goes here. Keep it brief.</p>
</div>
<div>
<img src="chart.svg" alt="Engagement chart showing increase">
</div>
</div>
</section>
使用する場面: ほとんどのコンテンツスライドに使います。情報を提示するときの基本の形式です。
避けるべきこと: 主張を本文に埋もれさせること、視覚的な根拠を示さないこと、ビジュアルの代わりに箇条書きを使うこと。
4.10 カードグリッド(2〜4項目)
視覚的な重みが等しい複数の項目を並べます。
<section>
<h2>Platform Capabilities</h2>
<div class="bar"></div>
<div class="grid-2" style="margin-top: var(--space-lg);">
<div class="card">
<h3>Intelligent Agents</h3>
<p>AI-powered assistants that reason across organizational knowledge</p>
</div>
<div class="card card-accent-2">
<h3>Context Networks</h3>
<p>Unified access to information across all systems</p>
</div>
<div class="card card-accent-3">
<h3>Custom Applications</h3>
<p>Accelerated development with built-in AI</p>
</div>
<div class="card card-accent-4">
<h3>Automated Workflows</h3>
<p>Event-driven processes without manual triggers</p>
</div>
</div>
</section>
使用する場面: 重要度が等しい項目である機能、メリット、選択肢、カテゴリに使います。
避けるべきこと: 5項目以上を含めること(複数のスライドに分けます)、カードに大量のテキストを詰め込むこと。
4.11 タイムライン/フェーズ
時間の経過に沿った段階的な進行を示します。
<section>
<h2>Implementation Roadmap</h2>
<div class="bar"></div>
<div class="grid-4" style="margin-top: var(--space-lg);">
<div>
<p class="stat text-accent-1" style="font-size: var(--size-h2);">01</p>
<h4>Foundation</h4>
<p class="text-muted">Months 1–3</p>
<p class="text-secondary">Core infrastructure and tooling</p>
</div>
<div>
<p class="stat text-accent-2" style="font-size: var(--size-h2);">02</p>
<h4>Integration</h4>
<p class="text-muted">Months 4–6</p>
<p class="text-secondary">Platform connections</p>
</div>
<div>
<p class="stat text-accent-3" style="font-size: var(--size-h2);">03</p>
<h4>Intelligence</h4>
<p class="text-muted">Months 7–9</p>
<p class="text-secondary">Advanced capabilities</p>
</div>
<div>
<p class="stat text-accent-4" style="font-size: var(--size-h2);">04</p>
<h4>Maturity</h4>
<p class="text-muted">Months 10–12</p>
<p class="text-secondary">Optimization</p>
</div>
</div>
</section>
使用する場面: プロジェクトのフェーズ、歴史的な変遷、段階的なプロセスに使います。
避けるべきこと: フェーズを6つ以上設けること(簡略化するか、分割します)、各フェーズに詳細を詰め込みすぎること。
4.12 比較(A 対 B)
2つの選択肢や状態を直接対比します。
<section>
<h2>Before & After</h2>
<div class="bar"></div>
<div class="grid-2" style="margin-top: var(--space-lg);">
<div class="card" style="border-left-color: var(--text-muted);">
<p class="label text-muted">Before</p>
<h3>Manual Process</h3>
<p>Hours of repetitive work, prone to errors, inconsistent results</p>
</div>
<div class="card">
<p class="label">After</p>
<h3>Automated Workflow</h3>
<p>Minutes to complete, accurate, consistent every time</p>
</div>
</div>
</section>
使用する場面: 課題とソリューション、旧と新、自社と他社の比較に使います。
避けるべきこと: 公平でない比較、テキストの詰め込み、3項目以上の比較。
4.13 アイコングリッド
視覚的な目印を添えた概念のクラスターです。アイコンによって、ひと目で認識しやすい目印を作ります。
<section>
<h2>Core Principles</h2>
<div class="bar"></div>
<div class="grid-3" style="margin-top: var(--space-lg);">
<div class="centered">
<div class="icon-wrap">
<svg width="64" height="64" viewBox="0 0 24 24" fill="var(--accent-1)">
<path d="..."/>
</svg>
</div>
<h4>Security</h4>
<p class="text-secondary">Enterprise-grade protection</p>
</div>
<div class="centered">
<div class="icon-wrap">
<svg width="64" height="64" viewBox="0 0 24 24" fill="var(--accent-2)">
<path d="..."/>
</svg>
</div>
<h4>Scalability</h4>
<p class="text-secondary">Grows with your needs</p>
</div>
<div class="centered">
<div class="icon-wrap">
<svg width="64" height="64" viewBox="0 0 24 24" fill="var(--accent-3)">
<path d="..."/>
</svg>
</div>
<h4>Simplicity</h4>
<p class="text-secondary">Easy to use and maintain</p>
</div>
</div>
</section>
使用する場面: 視覚的な目印があると理解しやすい、原則、価値観、機能カテゴリなどの抽象的な概念に使います。
避けるべきこと: 理解の助けにならない汎用的なアイコンを使うこと、項目を増やしすぎること。
4.14 コードブロック
技術的なプレゼンテーション向けです。構文ハイライトが必要です。
<section>
<h2>API Integration</h2>
<div class="bar"></div>
<pre><code class="language-javascript">// Initialize the client
const client = new MagicConstructor({
apiKey: process.env.SECRET_KEY,
workspace: 'production'
});
// Query with context
const result = await client.query({
prompt: "Summarize Q3 sales",
context: ['sales-data', 'quarterly-reports']
});</code></pre>
<p class="text-muted" style="margin-top: var(--space-sm);">Full documentation at docs.coolproject.io</p>
</section>
コードブロックの CSS:
.reveal pre {
font-family: var(--font-mono);
font-size: var(--size-small);
background: var(--bg-dark);
color: var(--text-on-dark);
padding: var(--space-md);
border-radius: var(--card-radius);
text-align: left;
width: 100%;
box-sizing: border-box;
}
.reveal pre code {
font-family: inherit;
line-height: 1.6;
}
使用する場面: 技術的な講演、API のデモ、実装例。
避けること: コードが多すぎる(最大で約 15 行)、構文ハイライトがない、定型コードを表示する。
4.15 キャプション付き画像
テキストを最小限に抑えた、全面または大きな画像です。
<section class="centered">
<img src="product-screenshot.png" alt="Product interface"
style="max-height: 70vh; border-radius: var(--card-radius); box-shadow: 0 20px 60px rgba(0,0,0,0.15);">
<p class="text-muted" style="margin-top: var(--space-md);">New dashboard interface</p>
</section>
使用する場面: 主役となる必要がある製品のスクリーンショット、写真、図。
避けること: 周囲に大量のテキストがある小さな画像、画質の低い画像。
4.16 ブレススライド
コンテンツを最小限にします。間を作り、聴衆が内容を理解する時間を与えます。
<section class="centered" data-background-color="var(--bg-secondary)">
<p class="label">Key Takeaway</p>
<div class="bar"></div>
<h2>Complexity is the enemy of execution.</h2>
</section>
使用する場面: 情報量の多いセクションの後、大きな転換の前、重要なメッセージの強調。
避けること: コンテンツを追加する、頻繁に使いすぎる。
4.17 クロージング/CTA
最後のスライドです。次に取るべき行動を明確にします。
<section class="centered" data-background-color="var(--bg-dark)">
<h1 class="text-on-dark">Ready to Begin?</h1>
<div class="bar bar-accent-2"></div>
<p class="lead text-on-dark">Contact us at [email protected]</p>
<p class="text-muted" style="margin-top: var(--space-xl);">example.com/demo</p>
</section>
使用する場面: 最後のスライド。
避けること: CTA が明確でない、連絡先情報が多すぎる、「質問はありますか?」だけを載せる。
パート 5:インラインのビジュアライゼーション
外部ツールを必要としない、プレゼンテーション用の図です。
5.1 プロセスフロー(横型)
<div class="process-flow">
<div class="process-step">
<div class="process-node" style="background: var(--accent-1);"></div>
<p class="process-label">Input</p>
</div>
<div class="process-arrow">→</div>
<div class="process-step">
<div class="process-node" style="background: var(--accent-2);"></div>
<p class="process-label">Process</p>
</div>
<div class="process-arrow">→</div>
<div class="process-step">
<div class="process-node" style="background: var(--accent-3);"></div>
<p class="process-label">Output</p>
</div>
</div>
.process-flow {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
}
.process-step {
text-align: center;
}
.process-node {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto var(--space-xs);
}
.process-arrow {
font-size: 2rem;
color: var(--text-muted);
}
.process-label {
font-size: var(--size-body);
font-weight: 500;
}
5.2 シンプルな棒グラフ(SVG)
<svg viewBox="0 0 400 200" style="max-width: 600px;">
<rect x="50" y="120" width="60" height="60" fill="var(--accent-1)"/>
<rect x="130" y="80" width="60" height="100" fill="var(--accent-2)"/>
<rect x="210" y="40" width="60" height="140" fill="var(--accent-3)"/>
<rect x="290" y="20" width="60" height="160" fill="var(--accent-4)"/>
<text x="80" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q1</text>
<text x="160" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q2</text>
<text x="240" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q3</text>
<text x="320" y="195" text-anchor="middle" font-size="14" fill="var(--text-secondary)">Q4</text>
</svg>
5.3 概念の関係性(ハブアンドスポーク)
<svg viewBox="0 0 400 300" style="max-width: 500px;">
<line x1="200" y1="150" x2="100" y2="60" stroke="var(--text-muted)" stroke-width="2"/>
<line x1="200" y1="150" x2="300" y2="60" stroke="var(--text-muted)" stroke-width="2"/>
<line x1="200" y1="150" x2="100" y2="240" stroke="var(--text-muted)" stroke-width="2"/>
<line x1="200" y1="150" x2="300" y2="240" stroke="var(--text-muted)" stroke-width="2"/>
<circle cx="200" cy="150" r="50" fill="var(--accent-1)"/>
<text x="200" y="155" text-anchor="middle" fill="white" font-weight="600">Core</text>
<circle cx="100" cy="60" r="35" fill="var(--accent-2)"/>
<text x="100" y="65" text-anchor="middle" fill="white" font-size="12">Feature A</text>
<circle cx="300" cy="60" r="35" fill="var(--accent-3)"/>
<text x="300" y="65" text-anchor="middle" fill="white" font-size="12">Feature B</text>
<circle cx="100" cy="240" r="35" fill="var(--accent-4)"/>
<text x="100" y="245" text-anchor="middle" fill="white" font-size="12">Feature C</text>
<circle cx="300" cy="240" r="35" fill="var(--accent-1)"/>
<text x="300" y="245" text-anchor="middle" fill="white" font-size="12">Feature D</text>
</svg>
5.4 外部ツールを使用する場面
次の用途には、インライン SVG/HTML を使用します:
- シンプルなプロセスフロー(3~5 ステップ)
- 基本的な棒グラフ/折れ線グラフによる比較
- 概念図(ハブアンドスポーク、ベン図に似た図)
- アイコンを使ったイラスト
次の用途には、外部ツール(Chart.js、D3、Mermaid)を使用します:
- データポイントが 5~7 個を超えるデータ
- インタラクティブなビジュアライゼーション
- 複雑な関係性
- 正確なデータ表現
パート 6:すべてのテーマに適用されるコンテンツの原則
これらの原則は、テーマに関係なく適用されます。具体的な文字数制限、スライドの種類の優先度、リズムのルールについては、テーマファイル(パート 2)を参照してください。
6.1 1 スライドにつき 1 つの概念
各スライドは、次の問いに答える必要があります:「聴衆に持ち帰ってほしいことは、たった 1 つだけ挙げると何ですか?」
1 文で答えられない場合は、スライドを分けてください。
6.2 主張と根拠の構成
箇条書きの代わりに、次の要素を使います:
- 主張: 要点を述べる完全な文(見出しとして)
- 根拠: 主張を裏付けるビジュアル
次の代わりに:
Benefits:
• Faster development
• Better quality
• Lower costs
3 枚のスライドに分けて使用します:
- 「自動化ツールにより開発時間が 50%短縮」+グラフ
- 「導入後、欠陥率が低下」+データ
- 「総所有コストが年間 200 万ドル削減」+比較
6.3 スライド枚数の目安
- 発表時間 1 分につき 1 枚が、おおよその上限です
- 20 分の講演では、通常 15~25 枚です
- 情報量の多いスライドを少数使うより、各スライドのコンテンツを減らして枚数を増やすほうが効果的です
- セクションの区切りやブレススライドも総数に含めます
6.4 プログレッシブディスクロージャー
複雑な情報は、RevealJS のフラグメントを使って順番に表示します:
<section>
<h2>Three Key Factors</h2>
<div class="bar"></div>
<div class="grid-3">
<div class="fragment">
<h4>Factor One</h4>
<p>Explanation here</p>
</div>
<div class="fragment">
<h4>Factor Two</h4>
<p>Explanation here</p>
</div>
<div class="fragment">
<h4>Factor Three</h4>
<p>Explanation here</p>
</div>
</div>
</section>
6.5 文字数制限とリズム
スライドの種類ごとの具体的な文字数制限や、コンテンツのリズムに関するルールは、テーマファイルを参照してください。テーマによって大きく異なります:
- Bold テーマ: 厳格な制限(主張は約 12 語)、インパクト重視のスライドが 40%以上
- Corporate テーマ: ゆとりのある制限(主張と根拠を合わせて約 50 語)、情報量の多い構成
パート 7:アンチパターン
7.1 プレゼンテーションのアンチパターン
データの詰め込み
解釈のないデータが、すべてのスライドを埋め尽くしています。
改善策: 1 枚につき 1 つの洞察に絞ります。まず結論を述べます。
台本の読み上げ
スライドに、話し手の台本全体が箇条書きで記載されています。
改善策: スライドには話せないことを見せ、話すときには見せられないことを伝えます。
テンプレートの罠
デザインがメッセージにどう役立つかを考えずに、一般的なテンプレートを適用しています。
改善策: テンプレートの選択肢ではなく、伝達のニーズから始めます。
アニメーションの乱用
あらゆる要素にトランジションや効果を使っています。
改善策: アニメーションは、プログレッシブディスクロージャーまたは強調にのみ使います。基本的には使いません。
箇条書き症候群
すべてのスライドが箇条書きです。
改善策: 主張と根拠の構成を使います。リストが必要なら、それをスライドにする必要があるか考えます。
7.2 RevealJS 固有のアンチパターン
フレームワークとの競合
center: true が設定されているのにフレックスボックスによる中央揃えを追加する、またはその逆を行うことです。
修正方法: どちらか一方を選びます。このスキルでは、セクション単位のテキスト配置と center: true を使用します。
ビューポート単位のエスカレーション
フォントサイズに上限を設けずに vw 単位を使用すると、テキストが異常に大きくなることがあります。
修正方法: 常に、rem ベースの最大値を指定した clamp() を使用します:clamp(4rem, 10vw, 8rem)。
固定ピクセル寸法
拡大縮小されないフォントや余白の値を、ピクセル単位でハードコードすることです。
修正方法: レスポンシブなサイズ指定には、clamp() を指定した CSS 変数を使用します。
スライドの寸法を無視する
RevealJS が、設定された寸法に収まるようにコンテンツを拡大縮小することを忘れることです。
修正方法: 1920×1080 を前提にデザインします。複数のウィンドウサイズでテストします。
背景色のインラインスタイル
data-background-color の代わりに、セクションで style="background: color" を使用することです。
修正方法: RevealJS が適切に処理できるよう、data-background-color="var(--bg-dark)" を使用します。
タイポグラフィユーティリティの詳細度
詳細度が不十分なまま、.stat、.label、.lead などのユーティリティクラスを作成することです。
問題: .reveal p の詳細度(クラス+要素)は、.stat 単独(クラスのみ)より高いため、<p> 要素のタイポグラフィユーティリティが上書きされます。
修正方法: タイポグラフィユーティリティには、必ず .reveal を先頭に付けます。.reveal .stat、.reveal .label、.reveal .leadなどを使用してください。これにより、基本の.reveal p` スタイルよりも優先されます。
色ユーティリティの詳細度
詳細度が不十分なまま、.text-on-dark などの色ユーティリティを作成することです。
問題: .reveal .lead(クラス2つ)の詳細度は、.text-on-dark(クラス1つ)より高いため、class="lead text-on-dark" では白ではなく、リード文の色が表示されます。
修正方法: 色ユーティリティには、必ず .reveal を先頭に付けます。.reveal .text-on-dark、.reveal .text-muted、.reveal .highlight-1` などを使用してください。
統計要素のマージンリセット漏れ
統計要素と stat-hero 要素は .reveal p から margin-bottom を継承するため、意図しない隙間が生じます。
修正方法: .reveal .stat と .reveal .stat-hero のルールに margin-bottom: 0 を追加します。
セクション背景の上書き
.reveal .slides section に background を指定すると、data-background-color が表示されなくなります。
問題: RevealJS は、セクション要素の背後に data-background-color を適用します。セクションに不透明な背景があると、その色は白または別の色のボックスの背後に隠れてしまいます。
修正方法: .reveal .slides section に background を設定しないでください。ページ全体の背景は .reveal にのみ設定します。色付きの背景を個々のセクションに設定するには、data-background-color を使用します。
パート 8:スピーカーノート
8.1 RevealJS のノート構文
スピーカーノートは、クラス notes を持つ <aside> 要素内に追加します:
<section>
<h2>Slide Headline</h2>
<div class="bar"></div>
<p class="lead">Visible content here</p>
<aside class="notes">
Speaker notes go here. These are visible in speaker view (press 'S')
but not shown to the audience.
Multiple paragraphs work fine.
</aside>
</section>
プレゼンテーション中に S を押すと、スピーカービューにアクセスできます。現在のスライド、次のスライド、ノート、タイマーが表示された新しいウィンドウが開きます。
8.2 TTS/動画録画向けのノート
ノートが TTS で読み上げられる場合や、ナレーションとして録音される場合は、話し言葉として自然に聞こえるように構成します:
ペース指定マーカー:
<aside class="notes">
This is the opening statement. [PAUSE]
Now we transition to the key insight. [PAUSE]
The data speaks for itself—forty-three percent improvement.
</aside>
発音のヒント(TTS や、なじみのない用語向け):
<aside class="notes">
The API uses OAuth (OH-auth) for authentication.
Results show a 50% improvement in MTTR (mean time to recovery,
or "em-tee-tee-arr" if using the acronym).
</aside>
強調マーカー(録音用。TTS では削除):
<aside class="notes">
This is [EMPHASIS: critical] to understand before we proceed.
We saw not ten, not twenty, but [EMPHASIS: fifty] percent gains.
</aside>
8.3 所要時間と語数
話す速度の目安:
- ゆっくり/慎重に:1 分あたり約 120 語
- 会話調:1 分あたり約 150 語
- エネルギッシュ:1 分あたり約 170 語
スライドごとの所要時間の目標:
| スライドの種類 | 目標時間 | 語数(1 分あたり 150 語) |
|---|---|---|
| タイトル | 15-30 秒 | 40-75 語 |
| セクションの区切り | 10-20 秒 | 25-50 語 |
| 単語/フレーズのみ | 10-15 秒 | 25-40 語 |
| ヒーロー統計 | 20-40 秒 | 50-100 語 |
| 標準的な統計 | 15-30 秒 | 40-75 語 |
| 主張+根拠 | 45-90 秒 | 110-225 語 |
| カードグリッド | 60-120 秒 | 150-300 語 |
| タイムライン | 60-90 秒 | 150-225 語 |
| クロージング | 30-60 秒 | 75-150 語 |
プレゼンテーション全体の所要時間は、各スライドの所要時間の合計に、切り替え用の余裕として約 10% を加えます。
8.4 スピーチからスライドへのワークフロー
原稿のあるスピーチから始めて、スライドに分解する場合:
ステップ 1:主張の境界を特定する
スピーチで明確な主張をしている箇所や、話題が変わる箇所すべてに印を付けます。それぞれがスライドの候補になります。
[SLIDE] Our platform reduces development time significantly.
We measured teams before and after adoption. [SLIDE] The data
showed a 50% reduction in time-to-deployment. [SLIDE] But
speed isn't the only benefit...
ステップ 2:各セグメントを分類する
印を付けたセグメントごとに、スライドの種類を特定します。
- 単一の重要な数値ですか?→ 統計スライド
- 主張と、それを裏付ける詳細情報ですか?→ 主張+証拠
- 話題間の移行ですか?→ セクション区切りまたはブレススライド
- 複数の項目を列挙していますか?→ カードグリッド(2~4 項目の場合)、またはさらに分割
ステップ 3:視覚的なコンテンツを抽出する
各セグメントから、以下を取り出します。
- 見出し:核となる主張(最大 1 文)
- ビジュアルのニーズ:それを裏付ける画像/チャート/図は何か
- ノート:残りの話す内容
ステップ 4:ビジュアルと話す内容のバランスを取る
スライドには、言葉で伝えにくいことを示します。ノートには、視覚的に示しにくいことを記します。
| スライド上 | ノート内 |
|---|---|
| 「開発時間が 50%短縮」 | 「6 か月にわたり 12 チームを測定し、プラットフォーム導入前後のベロシティを比較したところ、結果は一貫していました……」 |
| [短縮を示す棒グラフ] | 「改善がすぐに、最初のスプリント以内に現れ、その後も全期間を通じて持続した点に注目してください。」 |
| 主要なデータポイント | 背景、留意事項、方法論 |
| 結論 | 推論の過程 |
8.5 スライドからスピーチへのワークフロー
既存のスライド用にスピーカーノートを作成する場合:
各スライドについて、以下に答えます。
- 画面に表示されていない情報のうち、聴衆が知っておくべき背景は何ですか?
- 前のスライドからどのようにつなげますか?
- ビジュアルにどのような解釈や洞察を添えますか?
- 次のスライドへどのようにつなげますか?
各ノートの構成:
<aside class="notes">
[TRANSITION: How this connects to previous slide]
[MAIN CONTENT: The spoken explanation, context, story]
[BRIDGE: Setup for what comes next]
</aside>
例:
<section class="centered">
<p class="label">Key Metric</p>
<p class="stat text-accent-1">50%</p>
<p class="stat-label">reduction in development time</p>
<aside class="notes">
So what did we actually measure? [PAUSE]
We tracked twelve teams over six months—half using the platform,
half using their existing workflows. Same project types, same
skill levels.
The platform teams shipped in half the time. Not by cutting
corners—their defect rates actually improved. They shipped
faster AND better.
But speed is just one dimension. Let's look at what happened
to those prototypes that used to die in pilot purgatory...
</aside>
</section>
8.6 出力形式に応じたノートの書式設定
ライブプレゼンテーション(発表者ビュー)向け:
- 完全な文章で、自然な段落にします
- リマインダー用の合図:「[CHECK TIME]」、「[DEMO HERE]」、「[ASK AUDIENCE]」
- 緊張すると忘れそうな重要な統計値/名前
TTS 処理向け:
- ペース配分のマーカー [PAUSE] を除き、角括弧は使いません
- 正しく発音されるように、数字は単語で表記します:「50%」ではなく「fifty percent」
- 頭字語は初出時に展開するか、発音のガイドを付けます
- 文を短くします(TTS の読み上げに適しています)
動画収録用の台本向け:
- 話す内容をすべて逐語的に含めます
- 強調箇所とペース配分を記します
- どこを見るか(カメラ、画面)を記します
- スライドごとの目標時間を含めます
8.7 スピーカーノートプラグインを有効にする
スピーカーノートはデフォルトで動作しますが、別ウィンドウで発表者ビューを表示するには:
Reveal.initialize({
// ... other config
// Optional: configure notes behavior
showNotes: false, // Don't show notes in main view (default)
// For speaker view keyboard shortcut
keyboard: {
83: function() { Reveal.toggleOverview(); } // 'S' key
}
});
タイマーとプレビューを備えた別のスピーカーノートウィンドウを有効にするには、プレゼンテーション中に S を押します。ほとんどのブラウザーでポップアップウィンドウを動作させるには、プレゼンテーションをローカルファイルとして開くのではなく、HTTP 経由で配信する必要があります。
8.8 ノートのアンチパターン
台本の丸写し
逐語的に読み上げることを意図した段落全体を貼り付け、ノートに依存する状態を作ることです。
対処法: 明示的に TTS 用とする場合を除き、ノートはプロンプター用の台本ではなく、話すための手がかりや背景情報にします。
最低限のノート
「50%の短縮について話す」のように、スライドの内容を繰り返すだけのノートです。
対処法: ノートにはスライドにない情報、つまり背景、つなぎ、解釈を加えます。
忘れっぽい人
覚えていられると思い込み、ノートをまったく用意しないことです。
対処法: 最低限、スライド間のつなぎ方と、記憶違いをしそうな統計値を記録します。
小説家
30 秒しか表示しないスライドに、500 語のノートを用意することです。
対処法: ノートの長さをスライドの表示時間に合わせます。上記のタイミング表を参照してください。
パート 9:事前チェックリスト
プレゼンテーションを提出する前に:
構成
- 最初の 2 枚以内にメインメッセージが明確になっている
- 全体を通じて、各スライドのコンセプトが 1 つになっている
- 大きな話題の間にセクション区切りがある
- 締めくくりに明確な行動喚起がある
内容
- 文字数制限を超えるスライドがない
- 箇条書きではなく、主張と証拠の構成を使っている
- 統計値に背景情報(ラベル、比較対象)がある
- 孤立したスライド(1 枚だけのセクション)がない
視覚
- アクセントカラーを一貫して使用している
- タイポグラフィの階層が明確である
-
--size-smallより小さいテキストがない - 画像の解像度が十分に高い
スピーカーノート
- すべてのスライドにノートがある(簡潔な内容でも可)
- スライド間の切り替えについて記載されている
- 主要な統計情報や名前が記憶の手がかりとして含まれている
- 総単語数が目標時間に合っている
- TTS を使用する場合:数字は単語で表記し、頭字語も適切に処理している
- 動画の場合:スライドごとの時間目標が記載されている
技術面
- すべてのフォントが読み込まれる(Google Fonts のリンクが正しい)
- RevealJS がエラーなく初期化される
- 複数のビューポートサイズで動作する
- フラグメントアニメーションが想定どおりに動作する
- スピーカービューが正しく開く('S' を押す)
アクセシビリティ
- 色のコントラストが WCAG AA を満たしている(テキストは 4.5:1)
- 意味のある画像に代替テキストがある
- 画像にテキストが埋め込まれていない
- アニメーションなしでも読みやすい
完全な例:最小限のプレゼンテーション
この例では、最小限のプレゼンテーション構造を示します。完全なプレゼンテーションを作成する場合は、themes/bold.md の CSS 全体を使用してください。簡潔にするため、この例では一部のみを使用しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Update</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/theme/white.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--bg-dark: #1a1a2e;
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--text-muted: #7a7a7a;
--text-on-dark: #ffffff;
--accent-1: #0066cc;
--accent-2: #00a86b;
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--size-stat: clamp(4rem, 10vw, 8rem);
--size-h1: clamp(6rem, 8vw, 9rem);
--size-h2: clamp(4rem, 12vw, 7rem);
--size-body: clamp(1.25rem, 2vw, 2rem);
--size-body-lg: clamp(1.5rem, 2.5vw, 2.25rem);
--size-label: clamp(1.5rem, 2.5vw, 2.25rem);
--space-sm: 1rem;
--space-md: 2rem;
--bar-width: 120px;
--bar-height: 8px;
}
.reveal { font-family: var(--font-body); color: var(--text-primary); }
.reveal h1, .reveal h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 0.5em 0; }
.reveal h1 { font-size: var(--size-h1); }
.reveal h2 { font-size: var(--size-h2); }
.reveal p { font-size: var(--size-body); line-height: 1.5; margin: 0 0 1em 0; }
.reveal .slides section { text-align: left; padding: 60px; }
.reveal .slides section.centered { text-align: center; }
.reveal .label { font-family: var(--font-mono); font-size: var(--size-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-1); }
.reveal .lead { font-size: var(--size-body-lg); color: var(--text-secondary); }
.bar { width: var(--bar-width); height: var(--bar-height); background: var(--accent-1); margin-bottom: var(--space-md); }
.centered .bar { margin-left: auto; margin-right: auto; }
.reveal .stat { font-family: var(--font-mono); font-size: var(--size-stat); font-weight: 700; line-height: 1; color: var(--accent-1); margin-bottom: 0; }
.reveal .stat-label { font-size: var(--size-body-lg); color: var(--text-secondary); margin-top: var(--space-sm); }
.text-on-dark { color: var(--text-on-dark); }
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="centered">
<p class="label">Q3 Update</p>
<h1>Project Alpha</h1>
<div class="bar"></div>
<p class="lead">Engineering Progress Report</p>
<aside class="notes">
Good morning everyone. Today I'll walk you through where we stand
on Project Alpha as we close out Q3.
We've got good news to share, and a clear path to our October
target. Let's start with the results.
</aside>
</section>
<section class="centered" data-background-color="#1a1a2e">
<h1 class="text-on-dark">Results</h1>
<aside class="notes">
[PAUSE for transition]
So—where do we actually stand?
</aside>
</section>
<section class="centered">
<p class="label">Key Metric</p>
<p class="stat">73%</p>
<p class="stat-label">milestone completion rate</p>
<aside class="notes">
Seventy-three percent of our planned milestones are complete.
That's ahead of where we projected in the Q2 review.
More importantly, the remaining twenty-seven percent are all
in active development—no blockers, no unknowns.
</aside>
</section>
<section>
<h2>On track for October launch</h2>
<div class="bar"></div>
<p class="lead">Core features complete. Final testing phase begins next week.</p>
<aside class="notes">
What does this mean for the timeline? We're green for October.
Core features locked last Friday. The team is now focused
entirely on hardening—edge cases, performance tuning, and
the integration test suite.
Testing phase kicks off Monday. We'll have preliminary
results by end of next week.
</aside>
</section>
<section class="centered" data-background-color="#1a1a2e">
<h1 class="text-on-dark">Questions?</h1>
<div class="bar" style="background: var(--accent-2);"></div>
<p class="text-on-dark">[email protected]</p>
<aside class="notes">
That's the summary. Happy to dig into any area—timeline,
technical details, resource allocation.
What questions do you have?
[WAIT FOR QUESTIONS]
If anything comes up later, reach out to the team alias.
</aside>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.js"></script>
<script>
Reveal.initialize({
hash: true,
center: true,
transition: 'fade',
transitionSpeed: 'fast',
width: 1920,
height: 1080,
margin: 0.08
});
</script>
</body>
</html>
付録:カスタムテーマの作成
カスタムテーマを作成するには:
themes/bold.mdを新しいファイル(例:themes/corporate.md)にコピーします- CSS 変数をブランドに合わせて変更します:
:root {
/* Corporate theme example */
--bg-primary: #ffffff;
--bg-dark: #003B5C;
--accent-1: #00A3E0;
--accent-2: #78BE20;
--accent-3: #D45D00;
--font-display: 'Libre Franklin', sans-serif;
}
- パート 2.3 の「利用可能なテーマ」テーブルにテーマを追加します
- プレゼンテーションの生成時にテーマを指定します
テーマファイルには、完全なプレゼンテーションに必要なすべての CSS 変数とタイポグラフィのルールを含めてください。