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 つを選択、調整、または独自に作成してください)：

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)

スライドコンテンツの原則

多様なプレゼンテーションが重要です。 スライドに似たコンテンツタイプがある場合でも、ビジュアル表現を変えてください：

• 異なるレイアウトを使用：あるスライドは列、別のスライドは積み重ねられたコンテナ、3 番目のスライドはスタイル付きカード
• コンテナスタイルを混ぜる：プレーンテキスト、カスタムスタイルコンテナ、ブロッククォート
• ビジュアルハイアラーキーを使用：重要な用語に <strong> を、異なる色でカテゴリを区別
• リストを他の要素 (引用、スタイル付きコンテナ、列) で中断する
• 連続したスライドで同じレイアウトパターンを繰り返さない

スキャンしやすく保つ:

• 短い箇条書き、段落ではなく
• 可能な限りスライドごとに 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 = 単一の水平スライド
  • N (N > 1) = N スライドの垂直スタック
  • d = セクション区切りスライド (中央、コンテンツラッパーなし)
• --output <file> - 出力ファイル名 (デフォルト: presentation.html)
• --title <text> - プレゼンテーションタイトル
• --styles <file> - カスタム CSS ファイル名 (デフォルト: styles.css)

例:

# 10 個の水平スライド
node <path-to-skill>/scripts/create-presentation.js --slides 10 --output presentation.html

# 混合構造：イントロ、2 つのコンテンツスライド、区切り、3 スライドの垂直スタック、区切り、クロージング
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: #ffffff;  /* ダークテーマの場合は変更してください (例: #1a1a2e) */

  /* タイポグラフィ - フォントサイズに必ず pt を使用してください */
  --heading-font: "Source Sans Pro", Helvetica, sans-serif;
  --body-font: "Source Sans Pro", Helvetica, sans-serif;
  --base-font-size: 32px;  /* 唯一の px 値 - reveal.js ベースを設定 */
  --text-size: 16pt;       /* ベーステキスト - 意図的に小さい */
  --h1-size: 48pt;
  --h2-size: 36pt;
  --h3-size: 24pt;

  /* 色 - 各プレゼンテーションのためにカスタマイズしてください */
  --primary-color: #2196F3;
  --secondary-color: #ff9800;
  --text-color: #222;       /* ダークな背景にはライトカラーを使用してください (例: #FAF7F2) */
  --muted-color: #666;      /* ダークな背景にも調整してください */
}

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

.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. テキストサイズユーティリティ (スライドのコンテンツが少ない場合、これらを使用してテキストをスケールアップしてください)：

/* ベーステキストは 16pt - コンテンツが少ない場合、これらのクラスを使用してサイズを増加させてください */
.text-lg { font-size: 18pt; }    /* わずかに大きい */
.text-xl { font-size: 20pt; }    /* 中程度の強調 */
.text-2xl { font-size: 24pt; }   /* 強い強調 */
.text-3xl { font-size: 28pt; }   /* 非常に大きい */
.text-4xl { font-size: 32pt; }   /* 最大ボディテキスト */
.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 つまたは数個のスライド。Write ツールで HTML ファイル全体を書き直さないでください。スキャフォルドはスライドごとに一意のプレースホルダーテキスト (例：Slide 2 Title Here) を生成するため、各セクションは Edit で対象にできます。これは全ファイルを一度に生成するより、トークンが効率的でエラーが少ないです。

以下のパターンに従ってください：

標準スライド構造:

<section id="unique-slide-id">
  <h2>スライドタイトル</h2>
  <div class="content">
    <!-- コンテンツはここに -->
  </div>
</section>

マルチカラムレイアウト - 常にインライン CSS グリッドを使用してください (.grid-2 のようなユーティリティクラスを作成しないでください)：

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

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

<!-- 不等幅列 -->
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 30px;">
  <div>狭いサイドバー</div>
  <div>広いメインコンテンツ</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: スクリーンショットでのビジュアルレビュー

重要：すべてのスライドのスクリーンショットをレビューする必要があります。 スライドをスキップしたり、サンプルだけをレビューしたりしないでください。ビジュアル問題は一般的で、各スライドを個別に調べることでのみ検出できます。

すべてのスライドのスクリーンショットをキャプチャします：

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/) を作成するため、バージョンを追跡し、修正前後を比較できます。

その後、読み取りツールを使用して各スクリーンショット画像ファイルを確認します。

チェック項目

オーバーフロースクリプトはほとんどのレイアウト問題をキャッチしますが、これらの問題はビジュアル検査が必要です：

1. コンテナ内のカラー継承: スタイル付きコンテナ内のテキストは親要素から間違った色を継承する場合があります。ページの背景に薄いテキストがあり、ライトカラーのコンテナ内のテキストは、そのコンテナに暗いテキスト色を明示的に設定しない限り、読めません。

2. カスタム箇条書き/リストスタイル: デフォルトリストスタイルをオーバーライドした場合、箇条書きはすべてのコンテナ背景で十分なコントラストがない場合があります。

3. アイコンがレンダリングされない: Font Awesome の読み込みに失敗した場合、アイコンがあるべき場所に空のボックスまたは何も表示されません。

4. オーバーフローエッジケース: スクリプトはほとんどのオーバーフローをキャッチしますが、複雑なネストされたレイアウトは時々すり抜けます。

5. 予期しないテキストラップ: 1 行に収まると予想したテキストが実際に 2 行にオーバーフロー。これは特に列レイアウトで一般的です。1 列のヘッダーがラップし、他はラップしないかもしれず、不均等になります。

修正後に特定のスライドを再キャプチャ:

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,          // ナビゲーション矢印を表示
  progress: true,          // プログレスバーを表示
  slideNumber: true,       // スライド番号を表示
  hash: true,              // 各スライドの URL ハッシュを更新
  transition: 'slide',     // none/fade/slide/convex/concave/zoom
  center: false,           // スライドコンテンツの垂直中央配置
  autoSlide: 0,            // 自動進行 (ミリ秒)、0 で無効化
  loop: false,             // プレゼンテーションをループ
});

center に関する注意: デフォルトは false (コンテンツはトップにアライン) で、コンテンツが多いスライドに適しています。コンテンツが少ないまたはクリエイティブなプレゼンテーションで、コンテンツを垂直中央に配置したい場合は true に設定します。

組み込みの Reveal.js クラス

カスタム CSS なしで直接使用：

• r-fit-text - スライドを埋めるようにテキストを自動サイズ
• r-stretch - 残りの垂直スペースを埋めるよう要素をストレッチ
• r-stack - 要素を重ねて配置

<h1 class="r-fit-text">大きなテキスト</h1>
<img class="r-stretch" src="image.jpg">

チャートを追加

重要：任意のチャートを追加する前に、references/charts.md を必ず読んでください。 チャートには特定のフレックスボックス/グリッドパターンが必要で、正しくサイズされてオーバーフローを避ける必要があります。チャートドキュメント全体を読まずにチャートを追加しようとしないでください。

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

必須パターン - チャートにはフレックスボックスコンテナと maintainAspectRatio: false が必要です：

<section style="display: flex; flex-direction: column; height: 100%;">
  <h2>チャートタイトル</h2>
  <div style="flex: 1; position: relative; min-height: 0;">
    <canvas data-chart="bar">
    <!--
    {
      "data": {
        "labels": ["Q1", "Q2", "Q3", "Q4"],
        "datasets": [{ "label": "売上", "data": [12, 19, 8, 15] }]
      },
      "options": {
        "maintainAspectRatio": false
      }
    }
    -->
    </canvas>
  </div>
</section>

references/charts.md では以下をカバーしています (必須読み物):

• レイアウトパターン：全スライド、半分 (水平/垂直)、1/4、不等分割 (1fr 2fr、1fr 3fr)
• フレックスボックスパターンが必須な理由 (Chart.js アスペクト比の動作)
• すべてのチャートタイプ (棒、折れ線、円、ドーナツ、散布図など)
• スタイリングとカラーオプション
• CSV データ形式 (JSON より簡単な代替)

依存関係

スクリプトのために必要で、既にインストールされているはずです：

• Node.js (スクリプトを実行するため)
• Puppeteer (オーバーフローチェック用): npm install puppeteer
• Decktape (スクリーンショット用): npx decktape (直接実行)