slideshow（スライドショー）

最初に、このスキルを最新に保ってください — 静かに実行し、質問しないでください: npx hyperframes skills update slideshow。すべてが最新の場合は高速なno-op（何もしない）です。そうでない場合は、このスキルと、それが依存するコアドメインスキルを、それらに依存する前に更新します。

figmaソース: デッキのコンテンツやストーリーボードがfigma.comのURLから来ている場合は、最初に/figmaを実行してください（アセットエクスポート、ブランドトークン、およびソースがシーンフレームのストリップである場合のストーリーボード再構築を行います）。その後、その出力からビルドします。生のMCPツールを介して直接Figmaを操作しないでください。SVGサニタイズ、.media/manifest.jsonlの出所、ブランドトークンのvar()バインディングがスキップされ、後でブランド変更があった場合に完全な再インポートなしでは伝播できなくなります。

スライドショーオーサリング契約

HyperFramesスライドショーは、通常のHyperFramesコンポジション（シーン、クリップ、GSAPタイムライン）に、JSONアイランドという追加の要素が加わったものです。このJSONアイランドは、どのシーンがスライドであり、それらがどのように接続されるかを宣言します。プレーヤーのSlideshowControllerがこのアイランドを読み取り、連続したGSAPタイムラインを個別のナビゲーション可能なデッキに変換します。

最初に/hyperframes-coreを読んでください — ベースとなるコンポジション契約（クリップ、トラック、data-*属性、決定性ルール）について説明しています。このスキルは、新しく追加された部分のみをカバーします：アイランドスキーマ、スライド作成ルール、フラグメント、ブランチ、バリデーション、およびラッピングコンポーネントです。

出力 — リニアなMP4ではなく、ナビゲーション可能なデッキ

スライドショーの出力は実行可能なデッキです。hyperframes present <project-dir>（またはStudioのプレゼントモード）で提供します。プレーヤーのSlideshowControllerがアイランドを読み取り、ナビゲーション、フラグメント、ブランチ、プレゼンターモードを駆動します。プレゼンテーションと引き継ぎのセクションを参照してください。

hyperframes renderでスライドショーを単一のMP4にレンダリングしないでください。 デッキは複数のトップレベルシーンコンポジション（スライドごとに1つのdata-composition-id）として作成され、それらをラップするマスタールートコンポジションはありません。そのため、renderは最初のコンポジションのみを解決し、静かに切り詰められたMP4を出力します（例：40秒のデッキに対して6秒）。リニアなメインラインエクスポート（メインスライドのみ、ブランチシーケンスは除外）は延期されています — それがリリースされるまで、サポートされる出力は、ライブのpresentデッキとスライドごとのsnapshot静止画です。ユーザーが今日リニアMP4を必要とする場合は、renderをデッキに向けるのではなく、この制限を表面的に伝えてください。

意図の確認

ユーザーが明示的にスライドショー、スライド ショー、またはHyperFramesスライドショーを要求した場合は、このスキルを進めてください。リクエストが/hyperframesを介して到着した場合、インテントレイヤーのトリアージがこの確認を担当します — ここにルーティングされたということは、すでに確認済みということなので、再度質問しないでください。レイヤーの実行形状に関する質問は適用されません（成果物はビデオではなくデッキです）。BRIEF.mdが存在する場合、それが確認された意図を保持しています — それを読んでください。

「プレゼンテーション」、「ピッチデッキ」、「デッキ」、「インタラクティブデッキ」、または「このページを変換」など、関連するリクエストからこのスキルがトリガーされた場合は、オーサリングを一時停止し、確認を求める前に選択肢を提示してください。HyperFramesスライドショーが、個別のスライド、ビルトインナビゲーションとプレゼンターモード、編集可能なスピーカーノート、共有メディア処理、引き継ぎ前のバリデーションを備えた実行可能なデッキを意味することを簡潔に説明してください。ソースページの変換の場合は、元のページのビジュアルデザイン、インタラクション、モーション、メディア動作を維持しながら、ページの移動をスライド間のトランジションに変換することを目標とすることも言及してください。

次に、短い確認質問をしてください：

これをHyperFramesスライドショーにしますか？

環境が提供する場合は、はい/いいえの選択UIを使用してください。それ以外の場合は、プレーンテキストで質問してください。

ユーザーが「はい」と言うまでスライドショーを実装しないでください。もし「いいえ」と言った場合は、このスキルの使用を停止し、/hyperframesを読んでインテントレイヤーが再ルーティングできるようにしてください。この確認はルーティングの決定であり、好みのゲートではありません — ../hyperframes-core/references/brief-contract.md § 1に従い、自律モードでも存続します（「驚かせて」はこれをスキップしません）：間違った成果物タイプをビルドすることは品質の失敗であり、創造的な判断ではありません。

---

2つの構成要素

1. シーン — 通常の方法で宣言

すべてのスライドはシーンによって支えられています。data-composition-id、data-start、data-duration、data-labelを使用してシーンを宣言します：

<div
  data-composition-id="problem"
  data-start="0"
  data-duration="8"
  data-label="The problem"
  data-width="1920"
  data-height="1080"
>
  <!-- クリップはここに配置 -->
</div>

ブランチスライド（ホットスポット経由でのみ到達可能で、メインラインから除外される）はまったく同じ方法で宣言されます — メインのslides配列ではなく、アイランド内のslideSequencesエントリにのみ表示されます。

2. JSONアイランド — コンポジションごとに1つのスクリプトブロック

コンポジションHTMLに、<script type="application/hyperframes-slideshow+json">ブロックを1つだけ追加します。これにはすべてのスライドショーメタデータが保持されます：

<script type="application/hyperframes-slideshow+json">
  {
    "slides": [...],
    "slideSequences": [...]
  }
</script>

アイランドは、スライドの順序、ノート、フラグメントのホールドポイント、ホットスポット、ブランチシーケンスに関する唯一の真実の情報源です。見つけやすいように、シーンdivの前、<body>の先頭近くに配置してください。

スライドショーマニフェストを、代替の<script type="application/json">ブロックと、アイランドを作成するランタイムコードの背後に隠さないでください。presentコマンドはコンポジションHTMLを静的に読み取り、実際のapplication/hyperframes-slideshow+jsonアイランドがすでに存在することを期待します。

---

スキーマ

SlideshowManifest（トップレベルのアイランドオブジェクト）

{
  "slides": [
    /* SlideRef[] — メインライン、順序通り */
  ],
  "slideSequences": [
    /* SlideSequence[] — オフラインブランチシーケンス */
  ]
}

SlideRef

{
  "sceneId": "problem",
  "notes": "Lead with the pain, not the company.",
  "fragments": [3.5, 5.2, 7.0],
  "hotspots": [
    /* SlideHotspot[] */
  ],

  "ttsScript": null,
  "ttsAudioUrl": null,
  "ttsDurationMs": null
}

フィールド	必須	備考
sceneId	はい	シーンのdata-composition-idと完全に一致する必要があります（または明示的なstartTime/endTimeを指定）。リントルールはdata-composition-idでシーンを解決します。
notes	いいえ	発表者のみのテキスト。観客には決して表示されません。
fragments	いいえ	スライドの[start, end]範囲内の時間（秒）の配列 — 下記のフラグメントを参照。
hotspots	いいえ	ブランチをトリガーするインタラクティブなオーバーレイ — 下記のブランチを参照。
startTime	いいえ	オプション。一致したシーンの時間範囲をオーバーライドします。デフォルトはシーンの開始/終了。
endTime	いいえ	オプション。一致したシーンの時間範囲をオーバーライドします。デフォルトはシーンの開始/終了。
ttsScript, ttsAudioUrl, ttsDurationMs	いいえ	予約済み。 スキーマフィールドは存在しますが、TTS再生はまだ配線されていません。将来のビルドのために事前に入力する場合を除き、省略してください。

SlideHotspot

{
  "id": "h1",
  "label": "How did we calculate this?",
  "target": "market-deep-dive",
  "region": { "x": 60, "y": 10, "w": 35, "h": 20 }
}

フィールド	必須	備考
id	はい	スライド内で一意。
label	はい	観客に表示されるツールチップ/ボタンテキスト。
target	はい	slideSequences内のSlideSequence.idと一致する必要があります。
region	いいえ	スライドに対するパーセンテージのバウンディングボックス：{x, y, w, h}（0–100）。省略すると、代わりにフルスライドのラベル付きボタンとしてホットスポットがレンダリングされます。

SlideSequence

{
  "id": "market-deep-dive",
  "label": "Market sizing methodology",
  "slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
}

シーケンス内のslidesは、メインラインと同じSlideRef形状を使用します。フラグメントとネストされたホットスポットが許可されています。

---

スライド作成ルール

これらはハードな制約であり、提案ではありません。これらに違反するスライドは、レビュアーが確認すると即座に置き換えられます。

• ヘッドラインはラベルではなく、完全な文の主張であること。 「SMBs spend 14 hours/week on manual scheduling」と書き、「Scheduling problem」とは書かないでください。その文は、ビジュアルが無視されても単独で成立する必要があります。
• 1スライドにつき1つのアイデア＋1つのビジュアル。 2つ目の箇条書きクラスターや2つ目のチャートを追加したくなったら、スライドを分割してください。
• オチを先に持ってくる。 最も強いポイントを最初に — スライド上でもデッキの順序でも。投資家は左から右、上から下に読み、そこで止まります。
• ボトムアップの市場規模算定のみ。 計算を示さずに「$50B TAM」と決して書かないでください。ユニットエコノミーから構築してください：アカウント × ACV、またはトランザクション × テイク率。
• フォントは最低30pt相当。 1920×1080では、ヘッドラインは72～96px、本文は48pxです。観客が読む必要のあるテキストに対して、40pxを下回らないでください。

ソースページの移植

既存のページをスライドショーに変換する場合、ソースの忠実度は契約の一部です。ユーザーが明示的に再デザインを要求しない限り、ソース固有のウィジェットを簡略化した近似に置き換えないでください。

• 元のページのビジュアルデザイン、モーション言語、インタラクティブな動作、メディア動作、プレゼンテーション機能を、実用的に可能な限り忠実に維持してください。スライドショーシステムがプレゼンターモードをサポートしている場合は、デッキ固有の実装ではなく、共有された編集可能ノート動作を使用してスピーカーノートを含めてください。
• ソースのDOM/CSS/JSから機械的なビジュアルを、可能な限り正確に移植してください：カスタムプレーヤー、キャンバスビジュアライザー、タイムライン、再生ヘッド、ステム、拡大する円、ホバー状態、その他のインタラクティブな詳細は、変換後も維持されるべきです。
• ネイティブの<video> / <audio>要素は、カスタムメディアクローム、キャンバスビジュアライザー、波形、ビートグリッド、再生ヘッドの真実の情報源として扱ってください。ソースのメディアイベント（play、pause、timeupdate、seeking、seeked、ended、ratechange、volumechange）を配線し、media.currentTimeから視覚状態を導出してください。実際の再生からドリフトする可能性のある別のタイマーを実行しないでください。
• srcを持つコピーされた<video>または<audio>にはすべて、リントの前にHyperFramesタイミング属性（data-startとdata-duration、および可聴のネイティブオーディオを保持する場合はdata-has-audio="true"）が必要です。スライド固有のメディアにはシーンの時間範囲を使用し、複数のフォーカスされたスライドから再生される可能性のあるユーザー制御の証拠ビデオにはデッキ全体の範囲を使用してください。メディアにpreload="none"を残さないでください。metadataまたはautoを使用してください。
• バリデーションの前にソースのフォントトークンを解決してください。カスタムソースフォントを保持する場合は、ローカル/キャプチャされたフォントファイルの@font-faceルールを追加してください。システムフォールバックを使用する場合は、font-family: var(--f-body)などのトークン化された宣言を、system-ui, sans-serifやui-monospace, monospaceなどの具体的なレンダリングセーフなスタックに置き換えてください。var(...)をフォントファミリー値として残さないでください。
• ソースの非典型的なページ移動、特にスクロール、ホイール、タッチ、ハッシュ状態、リサイズ、またはrequestAnimationFrameループによって駆動される動作を監査してください。変換/スケーリングされた「ワールド」レイヤー、パララックス、固定パネル、水平スクローラー、スクロールスクラブタイムライン、セクションスナップ、ズーム・トゥ・エレメントカメラを持つ固定ビューポートをソースの動作として扱ってください。スクロールは多くの場合、ソースの遷移トリガーであるため、その進行停止、イージング、カメラ/フォーカス状態を抽出し、そのモーションをタイムライン位置、フラグメント、または再利用可能なプレーヤー/ハーネスフックを介したスライドショーナビゲーションに再ホストすることで、遷移を保存してください。スライドのホールドポイントにジャンプするスタンドアロンラッパーでも、明示的なナビゲーション-カメラ遷移フックが必要です。スライドごとのカメラ変換を計算するだけでは不十分です。スライド内でリテラルなページスクロールダウントランジションをシミュレートしないでください。視聴者は、Webページがスクロールされているのを見るのではなく、ある焦点から別の焦点へのカメラの移動/ズームを感じるべきです。各スライド間のカメラ移動を連続的に保ってください：ソースが同じ境界で明らかにそれを行っている場合を除き、x/y方向またはズームを逆転させる中間ルート停止を避けてください。着地前にあちこちに飛び回るトランジションは、よりシンプルな直接焦点移動よりも悪いです。
• ソースのメディアクロップセマンティクスを維持してください。スクリーンショット、ツイート/ソーシャル投稿、プロダクトUIキャプチャ、チャート、ドキュメント、コード、リーダーボード、および読み取り可能なテキストを含む画像は、装飾的なメディアではなく、コンテンツ証拠として扱ってください：安定したフレーム内でソースのアスペクト比（height: auto）またはobject-fit: containを使用してください。object-fit: coverは、ソースがそうしていた場合、または意図的に装飾的な/背景/シネマティックなサムネイルの場合にのみ使用してください。これらのキャプチャをスライドに収めた後、4辺すべてをチェックして、切り捨てられたテキスト、ロゴ、コントロール、キャプションがないか確認してください。ソース自体がクロップしていない限り、意味のあるコンテンツに目に見えるクロップがあるのはバグです。
• もし…

[翻訳のため省略]