graphic-slide-deck

グラフィックスライドデッキ

概要、コンテンツのメモ、または既存ファイルから、プロフェッショナルにデザインされた HTML スライドデッキを生成します。出力は自己完結型の HTML ファイル 1 つです。ビルドツールなしで、どのブラウザーでも開けます。

---

重要なルール -- 必ず守ってください：

1. すべてのスライドを必ず 100vh 以内に収めてください。スライド内のスクロールは禁止です。コンテンツがはみ出す場合は、2 枚のスライドに分割してください。
2. すべてのフォントサイズと余白には、必ず clamp() を使用してください。サイズが変わる要素に固定の px/rem を使用しないでください。
3. HTML は自己完結型のファイル 1 つにしてください。CSS/JS はすべてインラインにし、フォント CDN リンク以外の外部依存関係は使用しないでください。
4. HTML をチャットに貼り付けないでください。ファイルに保存し、概要だけを表示してください。
5. 汎用的な AI っぽい見た目は禁止です。references/style-presets.md の「使用禁止」リストを確認してください。

---

ステップ 1：概要の確認

開始するには、次の 3 つの情報が必要です。メッセージにすべて含まれている場合は、ステップ 2 に進んでください。

不足しているものがある場合は、次のとおりに尋ねてください。

"始めるにあたり、次の 3 つを教えてください：

1. 目的 -- このスライドデッキは何のためのものですか？（投資家向けピッチ／営業商談／カンファレンストーク／社内プレゼンテーション／オンボーディング／その他）
2. 対象者 -- 誰が見る予定ですか？（VC、見込み顧客、チーム、経営幹部、カンファレンス参加者、LinkedIn）
3. トピックまたはコンテンツ -- メモ、URL、簡単な説明を貼り付けるか、ファイルをアップロードしてください"

3 つすべてが揃うまで待ちます。

---

ステップ 2：詳細の確認

すべての質問をカテゴリごとにまとめて、一度に尋ねます。ユーザーはどの項目も省略できます。省略した場合はデフォルト値を適用します。

"開始前に、いくつか質問があります：

コンテンツ

1. 重要なメッセージ -- 聞き手に帰るときに覚えていてほしい、1 文のメッセージ
2. スライド枚数 -- 短め（5～10 枚）／標準（10～20 枚）／長め（20 枚以上）？
3. コンテンツの準備状況 -- コンテンツはすべて準備済み／ラフなメモがある（構成はこちらで作成）／トピックのみ（こちらで草案を作成）？
4. 既存の素材 -- 含めたい画像、スクリーンショット、ロゴはありますか？（ある場合はパスを指定／ない場合は「なし」）

デザイン 5. スタイル -- midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / 「選択肢を見せて」 6. アスペクト比 -- 16:9（1920×1080、デフォルト）／1:1（1080×1080、LinkedIn） 7. インライン編集 -- 書き出し後に、ブラウザー上でテキストを編集できるようにしますか？（はい／いいえ）

出力 8. 出力形式 -- HTML のみ／HTML + PDF／HTML + PDF + URL にデプロイ 9. デッキ名 -- ファイル／フォルダー名に使う slug（例："q2-investor-pitch"）。省略した場合はこちらで決めます"

省略時のデフォルト値：

質問	デフォルト
重要なメッセージ	目的とトピックから導出
スライド枚数	12
コンテンツの準備状況	トピックのみ
既存の素材	なし
スタイル	clean-slate
アスペクト比	16:9
インライン編集	いいえ
出力形式	HTML + PDF
デッキ名	トピックの slug から導出

スタイルが「選択肢を見せて」の場合： デッキの目的に合った異なる 3 つのスタイルプリセットを使い、スライド 1 枚の HTML プレビューを 3 つ生成します。.claude-design/previews/style-a.html、style-b.html、style-c.html に保存します。それぞれを開きます：open .claude-design/previews/style-a.html など。ステップ 3 の前に、ユーザーに選んでもらいます。

---

ステップ 2.5：内部のデザイン方針（ユーザーには表示しません）

ステップ 2 の回答をもとに、ステップ 3 の前に以下を決定します。

ビジュアルの特徴（スタイルから判断するか、指定がない場合は推測します）：

• midnight-editorial または magazine-red → dark-editorial
• clean-slate または product-minimal → light-minimal
• matt-gray → neutral-professional
• brutalist → bold-expressive
• mint-pixel-corporate または soft-cloud → fresh-corporate
• スタイルが指定されていない場合：投資家向けピッチ → midnight-editorial、営業 → clean-slate、カンファレンス → brutalist または midnight-editorial、社内向け → matt-gray

見逃せないスライドを 1 枚 — ステップ 3 の前に特定します。

• 投資家向けピッチ → stat-highlight（実績／指標のスライド）
• 営業資料 → stat-highlight（ROI／成果のスライド）
• カンファレンストーク → quote-callout または stat-highlight（重要な洞察）
• 社内プレゼンテーション → closing-cta（決定／提案のスライド）

デザイン方針についてユーザーに尋ねてはいけません — 回答からすべて判断します。

---

ステップ 3：構成の設計

計画を立てる前に references/layout-library.md を読んでください。

スライド全体の順序を計画します。各スライドに references/layout-library.md にある 13 種類のレイアウトから 1 つを割り当てます。

資料の種類 → 一般的な構成：

投資家向けピッチ（12 枚）：

1. [title-hero] 会社名＋タグライン
2. [section-divider] 課題
3. [text-full] 課題の詳細
4. [text-left-image-right] ソリューションの概要
5. [image-full] 製品のスクリーンショット
6. [stat-highlight] 実績 — 見逃せないスライド
7. [comparison-table] 競合との比較
8. [timeline] ロードマップ
9. [text-full] チーム
10. [stat-highlight] 市場規模
11. [text-left-image-right] ビジネスモデル
12. [closing-cta] 提案依頼

営業資料（8〜10 枚）：

1. [title-hero]
2. [quote-callout] 見込み顧客の課題
3. [text-left-image-right] ソリューション
4. [image-grid] 製品のスクリーンショット
5. [stat-highlight] ROI／成果 — 見逃せないスライド
6. [comparison-table] 代替案との比較
7. [text-full] 導入／次のステップ
8. [closing-cta]

カンファレンストーク（15〜20 枚）： title-hero → section-dividers → text-full スライド → image-full → stat-highlight または quote-callout（見逃せないスライド） → timeline → closing-cta

社内プレゼンテーション（8〜12 枚）： title-hero → text-full（背景） → stat-highlight（現状） → two-column-text（選択肢） → comparison-table → text-full（提案） → closing-cta（決定事項 — 見逃せないスライド）

提案する構成を、[layout-type] を角括弧で囲んだ番号付きリストで出力します。例：

Proposed structure (12 slides, midnight-editorial style):

1. [title-hero] DataPulse -- Revenue decisions in 5 minutes
2. [section-divider] The Problem
...
12. [closing-cta] The ask + [email protected]

Does this structure work, or should I adjust any slides?

ステップ 4 に進む前に、確認を待ちます。

---

ステップ 4：コンテンツの下書き

スライドごとのコピーを順番に作成します。プレーンテキストのみで記述し、HTML はまだ使いません。

レイアウトごとのコピー規則：

• title-hero：見出し（最大 6 語）＋サブタイトル（1 文）＋任意のピル型バッジテキスト
• section-divider：セクション名のみ（2～4 語）
• text-full：見出し（最大 5 語）＋箇条書き 4～6 項目、または段落 2 つ（同じスライドに両方を配置しない）
• text-left-image-right / image-left-text-right：見出し＋箇条書き 3～4 項目＋[IMAGE: description]
• two-column-text：2 列の見出し＋各列に箇条書き最大 3 項目
• image-full：[IMAGE: description]＋任意のキャプション（最大 10 語）
• image-grid：最大 6 個の [IMAGE: description] プレースホルダーと短いキャプション
• stat-highlight：NUMBER | label の形式で指標を 2～4 個記載します（例：3× | faster close）。本文は一切含めません。
• quote-callout：引用（最大 30 語）＋帰属情報（名前、役職）
• comparison-table：列見出し（最大 3 個）＋行ラベル 4～6 個＋セルの内容（各 1～3 語）
• timeline：マイルストーン 3～6 個（ラベル＋日付＋1 行の説明）
• closing-cta：見出し（最大 5 語）＋CTA の行動テキスト＋連絡先情報（メールアドレスと URL の両方が必須）

使用禁止語（すべてのコピーで例外なく使用禁止）： 「powerful」、「seamless」、「game-changing」、「leverage」、「innovative」、「revolutionary」、「transform」、「cutting-edge」、「robust」、「unlock」、「scalable」（つなぎの形容詞として使用する場合）。

コピーの考え方： 断片的な表現でも構いません。形容詞より数字を優先します。すべての言葉に役割を持たせましょう。

ステップ 5：HTML の生成

HTML を生成する前に、すべて読んでください。

このスキルの参照資料：

• references/design-system.md
• references/layout-library.md
• references/style-presets.md
• references/animation-guide.md

frontend-slides の相互参照資料（次のファイルを正確に読み込んでください）：

• /Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css -- 内容全体をそのまま <style> ブロック内に含めます
• /Users/ksd/Desktop/Varnan_skills/frontend-slides/html-template.md -- SlidePresentation クラス、キーボード操作、インライン編集システム
• /Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md -- 登場アニメーション、背景エフェクト、インタラクティブエフェクト

生成ルール：

1. 自己完結型の HTML ファイルを 1 つ作成します。CSS と JS はすべてインラインにします。外部参照はフォント CDN の <link> のみです。
2. viewport-base.css の内容全体をそのまま <style> ブロック内に含めます。言い換えたり短縮したりしないでください。
3. フォントは Google Fonts または Fontshare のみを使用します。フォントは references/style-presets.md で選択したプリセットに基づいて選びます。
4. html-template.md の SlidePresentation クラスを使用します。完全なキーボード操作（矢印キー、スペース、Page Up／Down）、タッチ／スワイプ、進捗バー、ナビゲーションドットを実装します。ナビゲーションドットを作成する前に navDotsContainer.innerHTML = "" を実行してください。この手順は省略できません。
5. インライン編集を有効にする場合は、exportFile() を含む html-template.md のインライン編集システム全体を実装します。exportFile() 関数では、outerHTML を取得する前に contenteditable、body.edit-active、.active／.show クラスを必ず削除してください。
6. アスペクト比：
   • 16:9（デフォルト）：スライドは width: 100vw; height: 100vh
   • 1:1（LinkedIn）：CSS カスタムプロパティ --slide-height: min(100vh, 100vw) を追加し、.slide で使用します
7. すべてのスライドセクションで class="slide" を使用します。これは export-pdf.sh によるスライド検出に必須です。
8. 各スライドの前にコメントを追加します：/* === SLIDE N: LAYOUT-TYPE === */
9. ステップ 2.5 で指定された、最も印象的なスライドを最大限の視覚的な存在感で適用します。最大サイズの文字、最も多くのアニメーション、プリセットの特徴的な要素を最大強度で使用します。それ以外のスライドは、構成をより控えめにします。
10. 画像が提供されていない場合は、CSS で生成したビジュアル（グラデーションメッシュ、幾何学的図形、animation-patterns.md のグリッドパターン）を使用します。これは代替手段ではなく、正式な制作方法の 1 つです。

タイポグラフィの基本方針：

• 統計数値：clamp(3.5rem, 12vw, 9rem) -- スライドの 3 分の 1 を占める数値は、権威ある印象を与えます
• ヒーロー見出し：最低でも clamp(2.5rem, 8vw, 6rem) を使用します。安全性のためにサイズを小さくしてはいけません。
• ユーザーに表示される要素に固定の px／rem を使用しないでください。すべて clamp で指定します。

viewport-base.css の CSS に関する注意点： CSS で -clamp()、-min()、-max() を直接記述しないでください。calc(-1 * clamp(...)) のようにラップします。

ステップ 6：セルフ QA

各項目を確認します。不備があればすべて修正し、スキップしないでください。

ビューポートとレンダリング：

• すべての .slide に height:100vh; height:100dvh; overflow:hidden が設定されている
• すべてのフォントサイズと間隔に clamp() が使われている。拡縮する要素に固定 px が使われていない
• 1280×720 のビューポートでスライドがオーバーフローしない（layout-library.md の密度制限に照らして確認）
• 画像に max-height: min(50vh, 400px) が使われている
• ビューポートの高さが 700px、600px、500px の場合のブレークポイントが設定されている（viewport-base.css に準拠）
• prefers-reduced-motion メディアクエリーが設定されている
• CSS に -clamp()、-min()、-max() が使われていない。負の値が必要な場合は calc(-1 * ...) で囲んでいる

構造：

• スライド数がステップ 3 の計画と一致している
• すべてのスライドで class="slide" が使われている
• 各レイアウトタイプが references/layout-library.md に従って正しく実装されている
• キーボード操作、タッチ操作、進行状況バー、ナビゲーションドットを備えた SlidePresentation クラスがある
• ナビゲーションドットを作成する前に navDotsContainer.innerHTML = "" が実行されている
• インライン編集を有効にした場合、exportFile() が outerHTML を取得する前に編集状態を削除する

デザイン品質：

• 視覚的に際立つスライドが 1 枚あり、同じ強さのスライドの中に埋もれていない
• タイポグラフィの階層が明確である：ディスプレイ >> 見出し >> 本文（各階層間で少なくとも 2:1 のサイズ比）
• スタイルプリセットのトークンが一貫して適用されている（色、フォントは references/style-presets.md に準拠）
• 低品質なパターンが使われていない（references/style-presets.md の「使用禁止」リストを確認）

コンテンツ：

• どのスライドにも禁止語が含まれていない
• title-hero の見出しが 6 語以内である
• stat-highlight に数値と競合する本文がまったくない
• closing-cta に具体的なアクションと連絡先情報がある（「Thank You」だけではない）

いずれかの項目に不備がある場合は、その場で修正してから、次に進む前にチェックリストをもう一度確認してください。

---

ステップ 7：出力

最初にメイン HTML を保存します：

mkdir -p deck/[name]-slides

保存先：deck/[name]-slides/index.html

開きます：open deck/[name]-slides/index.html

スライドごとの HTML ファイル（必ず生成）：

メイン HTML から各 <section class="slide"> を抽出します。それぞれを、以下の内容を含む単独のファイルとして作成します：

• メイン HTML の <style> ブロック全体（そのままコピー）
• 個別の <section class="slide"> を最小限の HTML シェルで囲んだもの
• SlidePresentation JS は含めない（スライド単位での静的表示のため、ナビゲーションは不要）

保存先：deck/[name]-slides/slide-001.html、slide-002.html など（3 桁のゼロ埋め）。

PDF がリクエストされた場合：

bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
  deck/[name]-slides/index.html \
  deck/[name].pdf

注：初回実行時に Playwright が自動でインストールされます（約 30～60 秒）。その旨をユーザーに伝えてください。

デプロイがリクエストされた場合：

bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh \
  deck/[name]-slides/

クリーンアップ： ステップ 2 でスタイルプレビュー用ファイルを生成した場合は、.claude-design/previews/ を削除します。

---

ステップ 8：概要（チャットに HTML を出力しない）

チャットに以下を提示します：

## Slide Deck: [deck name]
Date: [today] | Style: [style] | Slides: [N] | Aspect: [16:9 or 1:1]
Purpose: [purpose] | Audience: [audience]

---

### Files
Main:      deck/[name]-slides/index.html
Per-slide: deck/[name]-slides/slide-001.html → slide-0NN.html
PDF:       deck/[name].pdf  [if generated]
Live URL:  [url]  [if deployed]

---

### Navigation
Arrow keys / Space / Page Up/Down -- advance slides
Click nav dots -- jump to any slide
Touch / swipe -- works on mobile

---

### Customize
Edit :root CSS variables at the top of the file to change colors
Swap the @import font URL to change typography
Remove .reveal class from elements to disable entrance animations

---

### Deck Checklist
- [ ] Replace [IMAGE: description] placeholders with real images
- [ ] Verify the metric/quote on slide [N] is accurate (the unmissable slide)
- [ ] Test on your target display size ([1920×1080 or 1080×1080])
- [ ] If presenting live: test keyboard nav in fullscreen mode (F11 / Cmd+Ctrl+F)
- [ ] Replace [QR: url] on closing slide with an actual QR code image

チャットに HTML を出力しないでください。

---

セクションのリファレンス

レイアウト	用途
title-hero	オープニングスライド — 大きな見出し＋補足テキスト
section-divider	セクションの区切り — 大胆なラベル、最小限の要素
text-full	見出し＋箇条書きまたは段落
text-left-image-right	左右並列：テキスト＋画像
image-left-text-right	左右並列：画像を先に配置
two-column-text	比較、メリット／デメリット、変更前／変更後
image-full	全面画像＋必要に応じてキャプション
image-grid	2×2 または 3×2 の画像ギャラリー
stat-highlight	大きく表示する KPI 指標を 2～4 個
quote-callout	引用文＋出典
comparison-table	機能／選択肢の比較表
timeline	水平または垂直のマイルストーン
closing-cta	最終スライド — CTA＋連絡先情報