revealjs

Reveal.js プレゼンテーション

reveal.js を使用して HTML プレゼンテーションを作成します。ビルド手順は不要です。HTML をブラウザーで開くだけです。

作成するもの

reveal.js プレゼンテーションは、次のもので構成されます。

1. HTML ファイル - スライドを含み、CDN から reveal.js を読み込みます
2. CSS ファイル - レイアウト、色、タイポグラフィ、コンポーネントのカスタムスタイルを定義します

デザイン原則

重要：プレゼンテーションを作成する前に、内容を分析し、適切なデザイン要素を選んでください。

1. テーマを考慮する：このプレゼンテーションのテーマは何ですか？ どのようなトーン、業界、雰囲気が適切ですか？
2. ブランドを確認する：ユーザーが会社や組織に言及している場合は、そのブランドカラーやアイデンティティを考慮してください
3. 内容に合った配色を選ぶ：テーマを反映した色を選択してください
4. デザイン方針を説明する：コードを書く前に、デザインの選択理由を説明してください

要件：

• ✅ コードを書く前に、内容を踏まえたデザイン方針を説明する
• ✅ Web セーフフォント（Arial、Helvetica、Georgia、Verdana など）または CSS の @import を介した Google Fonts を使用する
• ✅ サイズ、太さ、色で明確な視覚的階層を作る
• ✅ 読みやすさを確保する：十分なコントラスト、適切な文字サイズ、整った配置にする
• ✅ 一貫性を保つ：スライド全体でパターン、間隔、視覚表現を統一する
• ✅ フォントサイズには必ず pt（ポイント）を使用する - スライドは固定サイズなので、pt は予測しやすく、PowerPoint／Keynote のようになじみのある単位です。フォントサイズに em、rem、px は使用しないでください。

カラーパレットの選択

創造的に色を選ぶ：

• 既定の選択肢にとらわれない：このテーマに本当に合う色は何かを考えてください。考えずに選ぶのは避けてください。
• 複数の観点から検討する：テーマ、業界、雰囲気、活気、対象者、ブランドアイデンティティ（言及されている場合）
• 大胆に試す：意外な組み合わせも試してください。医療のプレゼンテーションに必ずしも緑を使う必要はなく、金融に必ずしもネイビーを使う必要もありません
• パレットを組み立てる：相性のよい色を3～5色選びます（基調色＋補助色＋アクセントカラー）
• コントラストを確保する：背景に対してテキストがはっきりと読めるようにしてください

カラーパレットの例（創造性を広げるために活用してください。いずれかを選ぶ、アレンジする、または独自に作成できます）。

1. クラシックブルー：ディープネイビー (#1C2833)、スレートグレー (#2E4053)、シルバー (#AAB7B8)、オフホワイト (#F4F6F6)
2. ティール＆コーラル：ティール (#5EA8A7)、ディープティール (#277884)、コーラル (#FE4447)、ホワイト (#FFFFFF)
3. 大胆なレッド：レッド (#C0392B)、ブライトレッド (#E74C3C)、オレンジ (#F39C12)、イエロー (#F1C40F)、グリーン (#2ECC71)
4. 温かみのあるブラッシュ：モーブ (#A49393)、ブラッシュ (#EED6D3)、ローズ (#E8B4B8)、クリーム (#FAF7F2)
5. バーガンディのラグジュアリー：バーガンディ (#5D1D2E)、クリムゾン (#951233)、ラスティック (#C15937)、ゴールド (#997929)
6. ディープパープル＆エメラルド：パープル (#B165FB)、ダークブルー (#181B24)、エメラルド (#40695B)、ホワイト (#FFFFFF)
7. クリーム＆フォレストグリーン：クリーム (#FFE1C7)、フォレストグリーン (#40695B)、ホワイト (#FCFCFC)
8. ピンク＆パープル：ピンク (#F8275B)、コーラル (#FF574A)、ローズ (#FF737D)、パープル (#3D2F68)
9. ライム＆プラム：ライム (#C5DE82)、プラム (#7C3A5F)、コーラル (#FD8C6E)、ブルーグレー (#98ACB5)
10. ブラック＆ゴールド：ゴールド (#BF9A4A)、ブラック (#000000)、クリーム (#F4F6F6)
11. セージ＆テラコッタ：セージ (#87A96B)、テラコッタ (#E07A5F)、クリーム (#F4F1DE)、チャコール (#2C2C2C)
12. チャコール＆レッド：チャコール (#292929)、レッド (#E33737)、ライトグレー (#CCCBCB)
13. 鮮やかなオレンジ：オレンジ (#F96D00)、ライトグレー (#F2F2F2)、チャコール (#222831)
14. フォレストグリーン：ブラック (#191A19)、グリーン (#4E9F3D)、ダークグリーン (#1E5128)、ホワイト (#FFFFFF)
15. レトロレインボー：パープル (#722880)、ピンク (#D72D51)、オレンジ (#EB5C18)、アンバー (#F08800)、ゴールド (#DEB600)
16. ヴィンテージアースカラー：マスタード (#E3B448)、セージ (#CBD18F)、フォレストグリーン (#3A6B35)、クリーム (#F4F1DE)
17. コースタルローズ：オールドローズ (#AD7670)、ビーバー (#B49886)、エッグシェル (#F3ECDC)、アッシュグレー (#BFD5BE)
18. オレンジ＆ターコイズ：ライトオレンジ (#FC993E)、グレイッシュターコイズ (#667C6F)、ホワイト (#FCFCFC)

スライドの内容に関する原則

多様な見せ方が重要です。 スライドの内容が似ている場合でも、視覚的な見せ方に変化をつけましょう。

• スライドごとに異なるレイアウトを使います。あるスライドではカラム、別のスライドでは縦に並べたコンテナ、さらに別のスライドではスタイル付きカードを使います
• コンテナのスタイルを組み合わせます。プレーンテキスト、カスタムスタイルのコンテナ、引用ブロックなどを使います
• 視覚的な階層を取り入れます。重要な用語には<strong>を使い、カテゴリの区別には異なる色を使います
• 引用、スタイル付きコンテナ、カラムなどの要素を使って、リストに変化をつけます
• 連続するスライドで同じレイアウトパターンを繰り返さないようにします

ひと目で把握できるようにします。

• 段落ではなく、短い箇条書きを使います
• 可能な限り、1 枚のスライドにつき 1 つの主要なアイデアを扱います
• アイコン（Font Awesome）を使って、見た目に変化を加えます

スライドの内容が少ない場合は、文字を大きくします。 小さな文字のまま空白を残さないようにしましょう。

ワークフロー

ステップ 1：構成を計画する

ユーザーのコンテンツに基づいて、次の点を決めます。

• 必要なスライドの枚数
• セクション区切りスライド（中央揃え、大きな文字）にするスライド
• 詳細を段階的に説明するために、縦方向のスライドスタックを使う場所

ステップ 2：ひな形を生成する

create-presentation.jsスクリプト（このSKILL.mdファイルと同じ場所にある scripts/ディレクトリ内）を使って、HTMLのひな形を生成します。

node <path-to-skill>/scripts/create-presentation.js --structure 1,1,d,3,1,d,1 --title "My Presentation" --output presentation.html

スクリプトのパスを確認する方法： スクリプトは、このSKILL.mdファイルの場所を基準として scripts/create-presentation.jsにあります。一般的な場所は次のとおりです。

• プロジェクトスキル：.claude/skills/revealjs/scripts/create-presentation.js
• ユーザースキル：~/.claude/skills/revealjs/scripts/create-presentation.js

オプション：

• --slides N - 水平方向のスライドをN枚作成します（シンプルモード）
• --structure <list> - カンマ区切りの値でレイアウトを混在させます。
  • 1 = 水平方向のスライドを1枚
  • N（N > 1の場合）= N枚のスライドからなる縦方向のスタック
  • d = セクション区切りスライド（中央揃え、コンテンツのラッパーなし）
• --output <file> - 出力ファイル名（デフォルト：presentation.html）
• --title <text> - プレゼンテーションのタイトル
• --styles <file> - カスタムCSSファイル名（デフォルト：styles.css）

例：

# 10 horizontal slides
node <path-to-skill>/scripts/create-presentation.js --slides 10 --output presentation.html

# Mixed structure: intro, 2 content slides, divider, 3-slide vertical stack, divider, closing
node <path-to-skill>/scripts/create-presentation.js --structure 1,1,1,d,3,d,1 --title "Q4 Review" --output presentation.html

ステップ 3：CSSをカスタマイズする

ひな形生成スクリプトは、base-styles.cssをプレゼンテーションのディレクトリにstyles.cssとして自動的にコピーします。次に、CSS変数（特に色）をカスタマイズして、プレゼンテーションのテーマを設定します。

Google Fontsを使う場合： CSSファイルの先頭に@importを追加します。

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lato:wght@300;400;600&display=swap');

:root {
  --heading-font: "Playfair Display", Georgia, serif;
  --body-font: "Lato", Helvetica, sans-serif;
  /* ... */
}

ベースファイルには、次のものが含まれています。

1. カスタマイズしやすいCSS変数：

:root {
  /* ===========================================
     BACKGROUND COLOR - Set this first!
     =========================================== */
  --background-color: #ffffff;  /* Change for dark themes (e.g., #1a1a2e) */

  /* Typography - ALWAYS use pt for font sizes */
  --heading-font: "Source Sans Pro", Helvetica, sans-serif;
  --body-font: "Source Sans Pro", Helvetica, sans-serif;
  --base-font-size: 32px;  /* Only px value - sets reveal.js base */
  --text-size: 16pt;       /* Base body text - intentionally small */
  --h1-size: 48pt;
  --h2-size: 36pt;
  --h3-size: 24pt;

  /* Colors - customize these for each presentation */
  --primary-color: #2196F3;
  --secondary-color: #ff9800;
  --text-color: #222;       /* Use light color (e.g., #FAF7F2) for dark backgrounds */
  --muted-color: #666;      /* Adjust for dark backgrounds too */
}

2. .revealプレフィックスを使ったreveal.jsのスタイルのオーバーライド：

.reveal {
  font-family: var(--body-font);
}

.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--heading-font);
  text-transform: none;
  color: var(--text-color);
}

.reveal p, .reveal li {
  font-size: var(--text-size);
  color: var(--text-color);
}

3. スライドレイアウトのスタイル - パディングと配置を調整します。

.reveal .slides section {
  padding: 40px 60px;
  text-align: left;
}

4. テキストサイズのユーティリティ（スライドの内容が少ない場合に文字を大きくするために使います）：

/* Base text is 16pt - use these classes to increase size when needed */
.text-lg { font-size: 18pt; }    /* Slightly larger */
.text-xl { font-size: 20pt; }    /* Medium emphasis */
.text-2xl { font-size: 24pt; }   /* Strong emphasis */
.text-3xl { font-size: 28pt; }   /* Very large */
.text-4xl { font-size: 32pt; }   /* Maximum body text */
.text-muted { color: var(--muted-color); }
.text-center { text-align: center; }

タイポグラフィに関するガイダンス：

• 基本のテキストサイズ（--text-size: 16pt）は、より多くの内容を収められるよう、意図的に小さく設定されています
• スライドの内容が少ない場合は、.text-lg、.text-xlなどを使って、余白を適切に埋めます
• この方法により、内容が多いスライドのはみ出しを防ぎつつ、内容が少ないスライドにも柔軟に対応できます

繰り返し使うパターンのためのカスタムCSSクラス：

レイアウト（グリッドやフレックスコンテナなど）はスライドごとに異なるため、インラインスタイルを使います。一方、複数のスライドで視覚的なパターンを使う場合は、インラインスタイルを繰り返すのではなく、styles.cssに専用のCSSクラスを作成します。こうすることで、HTMLをすっきり保ち、一貫性を確保できます。よくある例として、数値とラベルを組み合わせた統計ボックス、アイコン・タイトル・説明を組み合わせた機能カード、タイムラインやプロセスのステップ、プロフィールカードなどがあります。要素が3回以上繰り返される場合は、クラスにする必要があります。

ステップ 4：HTML コンテンツを入力する

重要：スライドには少しずつ、1 枚または数枚ずつ Edit ツールを使って入力してください。 Write ツールで HTML ファイル全体を書き直さないでください。ひな形では、スライドごとに異なるプレースホルダーテキスト（例：Slide 2 Title Here）が生成されるため、各セクションを個別に編集できます。一度にファイル全体を生成するよりも、トークン効率がよく、エラーも起きにくくなります。

次のパターンに従ってください。

標準的なスライド構成：

<section id="unique-slide-id">
  <h2>Slide Title</h2>
  <div class="content">
    
  </div>
</section>

複数列のレイアウト — 必ずインライン CSS グリッドを使用してください（.grid-2 のようなユーティリティクラスは作成しないでください）。

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;">
  <div>Column 1</div>
  <div>Column 2</div>
</div>


<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px;">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>


<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 30px;">
  <div>Narrow sidebar</div>
  <div>Wide main content</div>
</div>

グリッドにインラインスタイルを使う理由：各スライドのレイアウトには、列の比率や間隔など、それぞれ異なる要件があります。インラインスタイルを使えば、ユーティリティクラスを大量に作成せずに、スライドごとに自由に調整できます。

重要な HTML パターン：

• すべての <section> に、一意で安定した識別に使える id 属性を設定してください。
• セクションタイトルを中央に配置するスライドには、class="section-divider" を使用してください。
• 一貫した余白を確保するため、主要コンテンツは <div class="content"> で囲んでください。これは、タイトルの下に残る垂直スペースを埋め、コンテンツが適切に配置されるようにするフレックスボックスコンテナーです。
• 帰属情報や出典のテキストを下部に配置するには、<div class="footnote"> を使用してください。
• 表示されるテキストはすべてテキスト要素（<p>、<li>、<h1>～<h6>）の中に入れてください。 これらの要素は、CSS で設定された基本のフォントサイズ、色、行の高さを継承します。テキストを <span> や <div> の中に直接入れないでください。基本スタイルが適用されず、文字サイズが正しく表示されません。<div> はグリッドやフレックスボックスなどのレイアウト用コンテナーとしてのみ使用し、その中に実際のテキストを入れる <p> 要素を配置してください。

ステップ 5：コンテンツのはみ出しを確認する

はみ出しチェックツールを実行し、スライドの境界を超えるコンテンツがないことを確認してください。

node scripts/check-overflow.js presentation.html

このスクリプトは各スライドについて、次の項目を確認します。

• 垂直方向のはみ出し：コンテンツがスライドの高さを超えていないか
• 水平方向のはみ出し：コンテンツがスライドの幅を超えていないか

はみ出しが検出された場合は、該当するスライドのコンテンツを減らすか、フォントサイズを調整してください。

ステップ 6：スクリーンショットで目視確認する

非常に重要：必ずすべてのスライドのスクリーンショットを確認してください。 スライドを飛ばしたり、一部だけ確認したりしないでください。表示上の問題はよく発生し、スライドを 1 枚ずつ確認しなければ見つけられません。

すべてのスライドのスクリーンショットを撮影します。

cd <presentation-directory>
npx decktape reveal "presentation.html?export" output.pdf \
  --screenshots \
  --screenshots-directory "screenshots/$(date +%Y%m%d_%H%M%S)"

注： ?export クエリパラメーターを指定すると、チャートのアニメーションが無効になり、PDF 出力がよりきれいになります。HTML をブラウザーで直接表示する場合、チャートは引き続きアニメーションします。

タイムスタンプ付きのフォルダー（例：screenshots/20241210_143052/）が作成されるため、バージョンを記録し、修正前後を比較できます。

次に、Read ツールを使って各スクリーンショットの画像ファイルを確認します。

確認する項目

はみ出しチェック用スクリプトでほとんどのレイアウトの問題を検出できますが、次の問題は目視で確認する必要があります。

1. コンテナー内の色の継承：スタイルを設定したコンテナー内のテキストが、親要素から誤った色を継承することがあります。ページの背景が暗く、テキストが明るい色の場合、明るい色のコンテナー内のテキストには、コンテナーに暗い色を明示的に設定しないと、文字が読めなくなります。

2. カスタムの箇条書き・リストのスタイル：デフォルトのリストスタイルを上書きすると、コンテナーの背景色によっては箇条書きのコントラストが十分でない場合があります。

3. アイコンが表示されない：Font Awesome の読み込みに失敗すると、アイコンが表示される場所に四角形や何も表示されない状態になります。

4. 想定外のはみ出し：スクリプトでほとんどのはみ出しを検出できますが、複雑な入れ子のレイアウトでは見逃すことがあります。

5. 予期しないテキストの折り返し：1 行に収まると思っていたテキストが、実際には 2 行に折り返されることがあります。これは列レイアウトで特によく起こり、ある列の見出しだけが折り返され、他の列は折り返されないため、レイアウトが不揃いになる場合があります。

修正後、特定のスライドのスクリーンショットを撮り直します。

npx decktape reveal "presentation.html?export" output.pdf \
  --screenshots \
  --screenshots-directory "screenshots/$(date +%Y%m%d_%H%M%S)" \
  --slides 2,5,7-9

その後、更新されたスクリーンショットを再度確認し、問題が修正されたことを確かめてください。新しいタイムスタンプ付きフォルダーを使うと、前のバージョンと簡単に比較できます。

ステップ 7：ブラウザーでの編集を提案する

プレゼンテーションを完成させたら、付属のエディタースクリプトを使って、ブラウザー上でテキストを直接編集できることをユーザーに伝えます。

node <path-to-skill>/scripts/edit-html.js <presentation-directory>/presentation.html

このスクリプトを実行すると、ローカルサーバーでプレゼンテーションが開きます。テキストをクリックしてインライン編集し、変更をファイルに保存できます。文章の推敲、誤字の修正、コピーの調整など、HTML を直接編集せずに作業したい場合に便利です。

プレゼンテーションの最後に、必ずこれを提案として記載してください。例：

表現を微調整するには、ブラウザー上でテキストを直接編集できます。

node <resolved-path>/scripts/edit-html.js <presentation-directory>/presentation.html

テキストをクリックして編集し、Escape キーを押して選択を解除してから、「Save」をクリックします。終了したら Ctrl+C を押してサーバーを停止します。

CSS コンポーネントのリファレンス

引用

.reveal blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  background: none;
  box-shadow: none;
  width: 100%;
}

.reveal blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: var(--muted-color);
}

アイコン（Font Awesome）

Font Awesome はスキャフォールドに含まれています。使用方法：

<i class="fa-solid fa-lightbulb"></i>
<i class="fa-solid fa-check"></i>
<i class="fa-solid fa-gears"></i>

高度な機能

フラグメント（段階的な表示）、発表者ノート、カスタム背景、自動アニメーション、トランジションについては、references/advanced-features.md を参照してください。

Reveal.js の設定

Reveal.initialize({
  controls: true,          // Show navigation arrows
  progress: true,          // Show progress bar
  slideNumber: true,       // Show slide numbers
  hash: true,              // Update URL hash for each slide
  transition: 'slide',     // none/fade/slide/convex/concave/zoom
  center: false,           // Vertical centering of slide content
  autoSlide: 0,            // Auto-advance (ms), 0 to disable
  loop: false,             // Loop presentation
});

center に関する注記： デフォルトは false（コンテンツは上揃え）で、コンテンツの多いスライドに最適です。コンテンツを垂直方向の中央に配置したい、シンプルまたはクリエイティブなプレゼンテーションでは true に設定します。

Reveal.js の組み込みクラス

カスタム CSS を使わずに、以下をそのまま使用できます。

• r-fit-text - スライドに収まるようにテキストのサイズを自動調整します
• r-stretch - 残りの垂直スペースを埋めるように要素を引き伸ばします
• r-stack - 要素を重ねて配置します

<h1 class="r-fit-text">BIG TEXT</h1>
<img class="r-stretch" src="image.jpg">

グラフの追加

重要：グラフを追加する前に、必ず references/charts.md を読んでください。 グラフのサイズを適切に調整し、はみ出しを防ぐには、特定の Flexbox／グリッドパターンが必要です。ドキュメント全体を先に読まずに、グラフを追加しようとしないでください。

スキャフォールドには、スライドに棒グラフ、折れ線グラフ、円グラフ、ドーナツグラフ、散布図を追加するための Chart.js プラグインが含まれています。

必須パターン - グラフには Flexbox コンテナーと maintainAspectRatio: false が必要です。

<section style="display: flex; flex-direction: column; height: 100%;">
  <h2>Chart Title</h2>
  <div style="flex: 1; position: relative; min-height: 0;">
    <canvas data-chart="bar">
    
    </canvas>
  </div>
</section>

references/charts.md では、以下を扱っています（必読）：

• レイアウトパターン：スライド全体、半分（横／縦）、4 分の 1、比率の異なる分割（1fr 2fr、1fr 3fr）
• Flexbox パターンが必要な理由（Chart.js のアスペクト比の動作）
• すべてのグラフの種類（棒グラフ、折れ線グラフ、円グラフ、ドーナツグラフ、散布図など）
• スタイルと色のオプション
• CSV データ形式（JSON より簡単な代替手段）

依存関係

スクリプトの実行に必要です。すでにインストールされているはずです。

• Node.js（スクリプトの実行用）
• Puppeteer（はみ出しのチェック用）：npm install puppeteer
• Decktape（スクリーンショット用）：npx decktape（そのまま実行できます）