open-design-landing-deck

open-design-landing-deck

open-design-landing の姉妹スキルです。同じ Atelier Zero のビジュアルシステム（温かみのある紙、Inter Tight + Playfair Display、 イタリック体のセリフ体による強調、コーラルのドット）を採用しつつ、長いスクロールページではなく、横方向にスワイプする雑誌風のデッキとしてページを構成します。

ナビゲーションモデルは、意図的に guizang-ppt スキルから取り入れています。←/→ 矢印キー、ホイール／ スワイプ、概要グリッドを表示する ESC によって、ページ単位でめくる紙の雑誌のような操作感を実現し、スクロールするウェブスライドデッキとは異なる体験にしています。

inputs.json + ../open-design-landing/styles.css
        │
        └──────────► scripts/compose.ts
                            │
                            ▼
                   <out>/index.html
                   (one viewport per slide, horizontal swipe)

できること

• 1つの自己完結型 HTML ファイルに、ビューポートサイズのスライド N 枚を、変形する1本のフレックストラック上に横並びで配置します。
• キーボードナビゲーション：←/→ · ↑/↓ · 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     — title plate, hero collage
2. section   — "I. The problem"
3. content   — about / manifesto, bullets
4. content   — capabilities, bullets
5. stats     — 4 numbers
6. section   — "II. How it feels"
7. content   — method, bullets
8. content   — selected work
9. quote     — customer testimonial
10. cta      — primary + secondary action
11. end      — mega kicker + signature

ワークフロー

1. inputs.json を作成する

inputs.example.json（Open Design のピッチデッキ）をベースにします。ブランドブロック、画像戦略、アセットのパスは姉妹スキルと共通です。すでに open-design-landing のブリーフを作成済みの場合は、brand と imagery をそのままコピーしてください。

各スライドの kind を選び、schema.ts にある型付きフィールドを入力します。MixedText（サンセリフ体を基調とし、イタリック体のセリフ体による強調箇所と、末尾のコーラルのドットを組み合わせたもの）は、姉妹スキルと同じ形式です。inputs.example.json を参照してください。

2.（任意）画像を生成するか、スタブを作成する

このスキルには独自の画像ジェネレーターやプレースホルダースクリプトは付属していません。open-design-landing の16枠ライブラリを共有しています。再生成またはスタブを作成するには：

# generate via gpt-image-2 (fal.ai)
FAL_KEY=... npx tsx ../open-design-landing/scripts/imagegen.ts ../open-design-landing/inputs.example.json --out=../open-design-landing/assets/

# or paper-textured SVG placeholders
npx tsx ../open-design-landing/scripts/placeholder.ts ../open-design-landing/assets/

デッキの inputs.imagery.assets_path に、PNG が保存されている場所を設定してください（サンプルのデフォルトは ../open-design-landing/assets/ です）。

3. デッキを構成する

npx tsx scripts/compose.ts inputs.json out/index.html

コンポーザーは inputs.json を読み込み、../open-design-landing/styles.css にある Atelier Zero の標準スタイルシートを読み込みます。デッキ固有のルール（横方向のフレックストラック、スライドレイアウト、HUD、ドットナビゲーション、ESC で表示する概要、キーボード／ホイール／タッチのイベントハンドラー）を重ねて適用し、自己完結型の HTML ファイルを1つ生成します。

4. セルフチェック

• HTML を新しいブラウザータブで開き、スライド 1（表紙）が表示され、右上のクロームストリップに 01 / N と表示されること。
• →（または Space、または下方向へのスクロール）を押します。ビューポート 1 つ分、滑らかに右へスライドし、ドットナビゲーションが進み、コーラルの進捗バーが進むこと。
• End を押します。最後のスライドに移動すること。
• Home を押します。スライド 1 に戻ること。
• Esc を押します。縮小サムネイル付きの概要グリッドが表示され、タイルをクリックすると該当スライドに移動して概要が閉じること。
• 1080px と 640px にサイズ変更します。表紙／コンテンツスライドが 1 列に折り返され、ドットナビゲーションが引き続き機能し、クロームストリップが縮小すること。
• prefers-reduced-motion: reduce（DevTools → Rendering）を設定します。ページ遷移が軽快なままで、乗り物酔いを引き起こさないこと。
• Lighthouse：コントラスト AA、font-display swap、レイアウトシフトなし。

境界

• 姉妹スキルのスタイルシートを再利用します。 コンポーザーはコンパイル時に ../open-design-landing/styles.css を読み込みます。ここで重複したコピーを 管理しないでください。Atelier Zero のトークンが変更された場合は、 姉妹スキルで一度だけ編集します。
• 姉妹スキルの画像ライブラリを再利用します。 再度プロンプトを実行したり 再レンダリングしたりする必要はありません。同じ 16 枚のプレートを どちらの用途にも使えます。
• スライドは 1 ビューポートに収めます。 スライドのコンテンツが 1280×800 の 100vh × 100vw に収まらない場合、はみ出して窮屈に感じられます。 テキストを短くするか、2 枚のスライドに分割してください。
• 縦方向の scroll-snap に切り替えないでください。 横方向にスワイプする操作が このスキルを雑誌の見開きのように感じさせます。縦スクロールでは、 長いランディングページになってしまいます。
• ルーターを追加しないでください。 これは単一ファイルの成果物です。 複数ページのデッキは対象外です。複数デッキを表示する場合は、それぞれを 個別にレンダリングし、親インデックスからリンクしてください。

関連項目

• open-design-landing — ランディングページの姉妹スキル。
• guizang-ppt — このスキルが採用している、マガジンデッキの ナビゲーションパターン。
• design-systems/atelier-zero/DESIGN.md — トークン仕様。