splatstudio-landing-deck
姉妹スキル splatstudio-landing の兄弟版です。同じ
Atelier Zero ビジュアルシステム（暖かい紙色、Inter Tight + Playfair Display、
イタリック・セリフの強調、コーラルドット）を使用していますが、長いスクロールページではなく、水平のマガジンスタイルスワイプデッキとしてページネーションされています。
ナビゲーションモデルは、guizang-ppt スキルから意図的に借用しています。
←/→ 矢印キー、ホイール/スワイプ、ESCキーで概要グリッドを表示 — ウェブのスライドデッキをスクロールするのではなく、雑誌を1ページずつめくるような感覚です。
inputs.json + ../splatstudio-landing/styles.css
│
└──────────► scripts/compose.ts
│
▼
<out>/index.html
（1ビューポート＝1スライド、水平スワイプ）
できること
- N個のビューポートサイズのスライドを水平に1つのフレックストラックにレイアウトした、単一の自己完結型HTMLファイル。
- キーボードナビゲーション:
←/→·↑/↓· PageUp/PageDown · Space · Home/End。 - ホイール + タッチスワイプ（慣性ガード付きなので、トラックパッドを1回フリックしても行き過ぎません）。
- 各スライドのクロームストリップ: ブランドマーク、デッキタイトル、ロケーション、ローマ数字の年、ライブスライドカウンター（
01 / 11）。 - コーラル進行状況バー: 下部にあり、進むにつれて塗りつぶされます。
- ドットインジケーター: 下部近くにあり、任意のドットをクリックしてジャンプできます。
- ESC概要グリッド: 全スライドの縮小サムネイルを表示、クリックしてジャンプ。
guizang-pptの概要UXをミラーリングしています。 - 姉妹スキルと同じ16スロットの画像ライブラリを再利用 — アセットの重複はありません。
スライドタイプ
| 種類 | 使用目的 |
|---|---|
cover | 最初のタイトルプレート。2カラムのコピー + コラージュアート。 |
section | チャプター間のローマ数字区切り。中央揃え、フルブリード。 |
content | アイブロー + タイトル + 本文 + 箇条書き + オプションのコラージュアート。 |
stats | 最大4つの大きな統計セル（値 · ラベル · サブラベル）。 |
quote | プルクォート + 著者。右側にオプションのポートレートコラージュ。 |
cta | クロージングピッチ + 1〜2個のボタン。 |
end | 特大イタリック・セリフのキッカーワード + シグネチャーフッター。 |
典型的な11スライドのピッチ：
1. cover — タイトルプレート、ヒーローコラージュ
2. section — "I. 問題"
3. content — 概要 / マニフェスト、箇条書き
4. content — 能力、箇条書き
5. stats — 4つの数字
6. section — "II. その感触"
7. content — 方法、箇条書き
8. content — 厳選作品
9. quote — 顧客の声
10. cta — プライマリ + セカンダリアクション
11. end — 特大キッカー + シグネチャー
ワークフロー
1. inputs.json を作成する
inputs.example.json（オープンデザインピッチデッキ）から始めてください。ブランドブロック、画像戦略、アセットパスは姉妹スキルをミラーリングしています。すでに splatstudio-landing のブリーフを作成済みであれば、brand と imagery をそのままコピーしてください。
各スライドについて、kind を選択し、schema.ts の型付きフィールドを入力します。MixedText（サンセリフベースライン + イタリック・セリフ強調スパン + コーラルの終止ドット）は姉妹スキルと同じエンコーディングです。詳しくは姉妹スキルの inputs.example.json を参照してください。
2. （オプション）画像を生成またはスタブする
このスキルは、独自の画像生成機能やプレースホルダースクリプトを同梱していません。splatstudio-landing の16スロットライブラリを共有します。再生成またはスタブするには：
# gpt-image-2（fal.ai）を使って生成
FAL_KEY=... npx tsx ../splatstudio-landing/scripts/imagegen.ts ../splatstudio-landing/inputs.example.json --out=../splatstudio-landing/assets/
# または紙質テクスチャのSVGプレースホルダー
npx tsx ../splatstudio-landing/scripts/placeholder.ts ../splatstudio-landing/assets/
デッキの inputs.imagery.assets_path を、それらのPNGが配置されている場所に設定してください（例ではデフォルト: ../splatstudio-landing/assets/）。
3. デッキをコンパイルする
npx tsx scripts/compose.ts inputs.json out/index.html
コンポーザーは inputs.json を読み込み、標準のAtelier Zeroスタイルシートを ../splatstudio-landing/styles.css からロードし、デッキ固有のルール（水平フレックストラック、スライドレイアウト、HUD、ドットナビゲーション、ESC概要、キーボード/ホイール/タッチハンドラー）を重ねて、1つの自己完結型HTMLファイルを書き出します。
4. セルフチェック
- 新しいブラウザタブでHTMLを開き、スライド1（カバー）が表示され、右上のクロームストリップに
01 / Nが表示されていることを確認。 -
→（またはSpace、下スクロール）を押す。スムーズに1ビューポート右にスライドし、ドットナビが進み、コーラル進行状況バーが前進することを確認。 -
Endキーを押す。最後のスライドにジャンプすることを確認。 -
Homeキーを押す。スライド1に戻ることを確認。 -
Escキーを押す。縮小サムネイルが表示された概要グリッドが現れ、任意のタイルをクリックしてジャンプし、概要が閉じることを確認。 - 1080pxおよび640pxにリサイズする。カバー/コンテンツスライドが1カラムに折りたたまれ、ドットナビは機能し続け、クロームストリップは縮小することを確認。
-
prefers-reduced-motion: reduce（DevTools → レンダリング）：ページ遷移は軽快で、乗り物酔いを誘発しないことを確認。 - Lighthouse：コントラストAA、font-display swap、レイアウトシフトなしを確認。
境界
- 姉妹スキルのスタイルシートを再利用すること。 コンポーザーはコンパイル時に
../splatstudio-landing/styles.cssを読み込みます。ここに重複したコピーを管理しないでください。Atelier Zeroトークンが更新された場合は、姉妹スキルで1度だけ編集してください。 - 姉妹スキルの画像ライブラリを再利用すること。 再プロンプトや再レンダリングは不要です。同じ16プレートが両方のサーフェスで機能します。
- スライドは単一ビューポートに保つこと。 スライドのコンテンツが1280×800で100vh × 100vwに収まらない場合、あふれて窮屈に感じられます。コピーを削るか、2つのスライドに分割してください。
- 垂直スクロールスナップに切り替えないこと。 水平スワイプの姿勢こそが、このスキルを雑誌の見開きのように感じさせるものです。垂直スクローラーにすると、ただの長いランディングページになってしまいます。
- ルーターを追加しないこと。 これは単一ファイルのアーティファクトです。複数ページのデッキは範囲外です。複数デッキのエクスペリエンスを実現するには、各デッキを個別にレンダリングし、親インデックスからリンクしてください。
関連項目
splatstudio-landing— ランディングページの姉妹スキル。guizang-ppt— このスキルが借用したマガジンデッキのナビゲーションパターン。design-systems/atelier-zero/DESIGN.md— トークン仕様。