presentation-structure

プレゼンテーション構成スキル

presentation/index.html のプレゼンテーションがどのように構成されているかについての知識です。

ファイルの場所

presentation/index.html — CSS と JS をインラインで含む単一ファイルの HTML プレゼンテーションです。

スライド形式

各スライドは、data-slide（連番）と、任意の data-level（切り替わりポイントのジャーニーレベル）を持つ div です。

<div class="slide" data-slide="12">
    <h1>Slide Title</h1>
    
</div>


<div class="slide section-slide" data-slide="10" data-level="low">
    <h1>Section Name</h1>
    <p class="section-desc">Level: Low — description of this section</p>
</div>


<div class="slide title-slide" data-slide="1">
    <h1>Presentation Title</h1>
    <p class="subtitle">Subtitle text</p>
</div>

ジャーニーバーのレベルシステム

プレゼンテーションでは、累積パーセンテージの代わりに4段階のシステムを使用します。

• レベルは、主要な切り替わりスライド（セクション区切り）の data-level 属性で設定します
• data-level を持つスライド以降は、次の切り替わりまで同じレベルを継承します
• ジャーニーバーは、Low／Medium／High／Pro に応じて 25%／50%／75%／100% まで塗りつぶされます
• スライド1（タイトルスライド）ではバーは非表示です。スライド2以降では表示されます
• 最初の data-level より前のスライド（スライド2～9）では、バーは空の状態です（レベルはまだ設定されていません）
• .level-badge は、data-level を持つスライドの <h1> に JS で挿入されます。HTML に直接記述しないでください

セクションごとのレベル切り替え

セクション	スライド範囲	data-level	バーの高さ
Part 0: はじめに	スライド1-4	（なし）	非表示／空
Part 1: 前提条件	スライド5-9	（なし）	空
Part 2: より良いプロンプト	スライド10-17	low	25%
Part 3: プロジェクトメモリー	スライド18-24	medium	50%
Part 4: 構造化ワークフロー	スライド25-28	（medium を継承）	50%
Part 5: ドメイン知識	スライド29-33	high	75%
Part 6: エージェント型エンジニアリング	スライド34-46	high	75%
付録	スライド47以降	（high を継承）	75%

ナビゲーションシステム

• goToSlide(n) — 目次リンクで使用します。実際の data-slide 番号と一致させてください
• totalSlides は DOM から自動計算されます（document.querySelectorAll('[data-slide]').length）
• 矢印キー、Space、タッチスワイプで移動できます
• スライドカウンターは左下に current / total の形式で表示されます

番号の振り直しルール

スライドの追加、削除、並べ替えを行った後は、次の手順に従ってください。

1. すべての data-slide 属性を 1 から始まる連番に振り直します
2. 目次／ジャーニーマップのスライドにあるすべての goToSlide() 呼び出しを更新します
3. JS の totalSlides は自動計算されるため、手動で更新する必要はありません
4. 番号の欠落や重複がないことを確認します

セクション区切りの形式

セクション区切りには section-slide クラスを使用します。レベルが切り替わるセクション区切りには data-level を付け、説明にレベル名を表示します。

<div class="slide section-slide" data-slide="10" data-level="low">
    <p class="section-number">Part 2</p>
    <h1>Better Prompting</h1>
    <p class="section-desc">Level: Low — effective prompting for real results.</p>
</div>

レベルが切り替わると、JS が実行時に .level-badge（例：「→ Low」）を <h1> に挿入します。HTML に手動で追加しないでください。