グラフィックスライドデッキ
簡単な指示、コンテンツメモ、または既存のファイルから、プロフェッショナルなデザインのHTMLスライドデッキを生成します。出力は単一の自己完結型HTMLファイルであり、ブラウザで開くことができ、ビルドツールは不要です。
重要ルール -- 絶対に守ること:
- すべてのスライドは100vhに収めること。スライド内でのスクロールは禁止。コンテンツが溢れる場合は、2枚のスライドに分割すること。
- すべてのフォントサイズと間隔は
clamp()を使用すること。スケーリングする要素に固定のpx/remを使用してはならない。 - 単一の自己完結型HTML：すべてのCSS/JSはインライン化。フォントCDNリンクを除き、外部依存関係ゼロ。
- チャット内にHTMLを直接出力しないこと。ファイルに保存し、サマリーのみ表示すること。
- 汎用的なAIの「スロップ」美学は避けること。
references/style-presets.mdの「使用禁止リスト」を確認すること。
ステップ1: 初期情報収集
開始には3つの情報が必要です。メッセージ内にすべてが揃っている場合は、ステップ2に進んでください。
不足しているものがあれば、正確に次のように尋ねてください：
「開始するには、3つの情報が必要です：
- 目的 -- このデッキは何のためですか？（投資家向けピッチ / 営業コール / カンファレンストーク / 社内プレゼンテーション / オンボーディング / その他）
- 対象者 -- 誰が見ますか？（VC、見込み客、チーム、経営陣、会議室、LinkedIn）
- トピックまたはコンテンツ -- メモ、URL、簡単な説明を貼り付けるか、ファイルをアップロードしてください」
続行する前に、3つすべての回答を待つこと。
ステップ2: 完全な情報収集
すべての質問を1つのメッセージで、カテゴリごとにグループ化して尋ねること。ユーザーはスキップ可能で、その場合はデフォルト値が適用されます。
「始める前にいくつか質問があります：
コンテンツ
- キーメッセージ -- 聴衆が帰る時に覚えていてほしい、たった1文
- スライド数 -- 短い（5-10）/ 中程度（10-20）/ 長い（20+）？
- コンテンツソース -- すべてのコンテンツ準備済み / 大まかなメモあり（私が構成します） / トピックのみ（私が草稿を作成します）？
- 既存アセット -- 含める画像、スクリーンショット、ロゴはありますか？（はい + パス / いいえ）
デザイン 5. スタイル -- midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "show me options" 6. アスペクト比 -- 16:9（1920×1080、デフォルト）/ 1:1（1080×1080、LinkedIn用） 7. インライン編集 -- エクスポート後もテキストをブラウザ上で編集可能にしますか？（はい / いいえ）
出力 8. 出力形式 -- HTMLのみ / HTML + PDF / HTML + PDF + URLにデプロイ 9. デッキ名 -- ファイル/フォルダ名のスラッグ（例：「q2-investor-pitch」）；スキップした場合は自動生成します」
スキップ時のデフォルト値:
| 質問 | デフォルト |
|---|---|
| キーメッセージ | 目的とトピックから自動生成 |
| スライド数 | 12 |
| コンテンツソース | トピックのみ |
| 既存アセット | なし |
| スタイル | clean-slate |
| アスペクト比 | 16:9 |
| インライン編集 | いいえ |
| 出力形式 | HTML + PDF |
| デッキ名 | トピックスラッグから自動生成 |
スタイルが "show me options" の場合:
デッキの目的に合った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（決定/推奨スライド）
レイアウト選択バイアス -- このデッキタイプに最も関連性の高い2〜3のレイアウトをメモし、ステップ3で優先的に使用する。
デザイン方針についてユーザーに尋ねてはなりません -- 常に回答から完全に導出すること。
ステップ3: 構造設計
計画の前に references/layout-library.md を読むこと。
スライドの全順序を計画します。各スライドに references/layout-library.md にある13のレイアウトタイプのいずれかを割り当てます。
デッキタイプ → 典型的な構造:
投資家ピッチ（12スライド）:
- [title-hero] 会社名 + タグライン
- [section-divider] 問題
- [text-full] 問題の詳細
- [text-left-image-right] ソリューション概要
- [image-full] 製品スクリーンショット
- [stat-highlight] 牽引力 -- 見逃せないスライド
- [comparison-table] 競合比較
- [timeline] ロードマップ
- [text-full] チーム
- [stat-highlight] 市場規模
- [text-left-image-right] ビジネスモデル
- [closing-cta] 依頼内容
営業デッキ（8-10スライド）:
- [title-hero]
- [quote-callout] 見込み客の課題
- [text-left-image-right] ソリューション
- [image-grid] 製品スクリーンショット
- [stat-highlight] ROI/結果 -- 見逃せない
- [comparison-table] 代替案比較
- [text-full] 実装 / 次のステップ
- [closing-cta]
カンファレンストーク（15-20スライド）: title-hero → section-divider → 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] を括弧で囲んだ番号付きリストで出力します。例：
提案構造（12スライド、midnight-editorialスタイル）：
1. [title-hero] DataPulse -- 5分で収益判断
2. [section-divider] 問題
...
12. [closing-cta] お問い合わせ先 + [email protected]
この構造で進めてよろしいですか？それともスライドを調整しますか？
ステップ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: 説明]two-column-text：2つのカラム見出し + それぞれ最大3個の箇条書きimage-full：[IMAGE: 説明]+ オプションのキャプション（最大10語）image-grid：最大6個の[IMAGE: 説明]プレースホルダーと短いキャプションstat-highlight：2〜4個の指標を数値 | ラベル形式で記述（例：3× | 成約高速化）。本文はゼロ。quote-callout：引用（最大30語） + 帰属（名前、肩書き）comparison-table：カラムヘッダー（最大3つ） + 4〜6個の行ラベル + セル内容（各1〜3語）timeline：3〜6個のマイルストーン（ラベル + 日付 + 1行の説明）closing-cta：見出し（最大5語） + CTAアクションテキスト + 連絡先情報（メール + URL -- 両方必須）
禁止ワード（すべてのコピーで例外なく使用禁止）： 「パワフル」「シームレス」「ゲームチェンジャー」「レバレッジ」「イノベーティブ」「レボリューショナリー」「トランスフォーム」「最先端」「ロバスト」「アンロック」「スケーラブル」（形容詞の詰め物として）。
コピーの哲学： 断片でも問題ありません。数字は形容詞に勝ります。すべての単語が存在する価値を証明しなければなりません。
ステップ5: HTML生成
HTMLを生成する前に、すべてを読むこと：
このスキルの参照ファイル:
references/design-system.mdreferences/layout-library.mdreferences/style-presets.mdreferences/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-- 出現アニメーション、背景効果、インタラクティブ効果
生成ルール:
- 単一の自己完結型HTML。すべてのCSSとJSはインライン化。フォントCDNの
<link>のみが外部参照。 viewport-base.cssの内容全体を<style>ブロック内に一字一句そのまま含めること -- 言い換えたり短縮したりしないこと。- Google FontsまたはFontshareのフォントのみ使用。フォントの選択は、
references/style-presets.mdで選択されたプリセットに従う。 html-template.mdのSlidePresentationクラスを使用する。完全なキーボードナビゲーション（矢印キー、スペース、Page Up/Down）、タッチ/スワイプ、プログレスバー、ナビゲーションドットを実装すること。ナビゲーションドットを構築する前に、必ずnavDotsContainer.innerHTML = ""を実行すること。- インライン編集が選択されている場合：
html-template.mdの完全なインライン編集システムをexportFile()を含めて実装すること。exportFile()関数は、outerHTMLを取得する前に、contenteditable、body.edit-active、.active/.showクラスを必ず削除すること。 - アスペクト比：
- 16:9（デフォルト）：スライドは
width: 100vw; height: 100vh - 1:1（LinkedIn用）：
--slide-height: min(100vh, 100vw)CSSカスタムプロパティを追加し、.slideで使用すること
- 16:9（デフォルト）：スライドは
- すべてのスライドセクションは
class="slide"を使用すること --export-pdf.shのスライド検出に必要。 - 各スライドの前にコメントを追加すること：
/* === スライド N: レイアウトタイプ === */ - ステップ2.5で特定された「絶対に見逃せないスライド」1枚に最大の視覚的重みを適用すること -- 最大のタイポグラフィ、最大のアニメーション、スタイルプリセットの特徴的な要素を最大強度で使用する。他のすべてのスライドは構成的に控えめにすること。
- 画像が提供されていない場合 → CSS生成のビジュアル（グラデーションメッシュ、幾何学図形、
animation-patterns.mdのグリッドパターン）を使用する。これはフォールバックではなく第一級のパスである。
タイポグラフィの規律:
- 統計数値：
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に、具体的なアクションと連絡先情報がある（単なる「ありがとうございました」ではない）
いずれかのチェックに失敗した場合：その場で修正し、先に進む前にメンタルチェックリストを再実行すること。
ステップ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は表示しない）
チャットで次のように表示：
## スライドデッキ: [デッキ名]
日付: [今日] | スタイル: [スタイル] | スライド数: [N] | アスペクト: [16:9 または 1:1]
目的: [目的] | 対象者: [対象者]
---
### ファイル
メイン: deck/[name]-slides/index.html
スライドごと: deck/[name]-slides/slide-001.html → slide-0NN.html
PDF: deck/[name].pdf [生成された場合]
ライブURL: [url] [デプロイされた場合]
---
### ナビゲーション
矢印キー / スペース / Page Up/Down -- スライドを進める
ナビゲーションドットをクリック -- 任意のスライドにジャンプ
タッチ / スワイプ -- モバイルでも動作
---
### カスタマイズ
ファイル先頭の :root CSS変数を編集して色を変更
@importフォントURLを変更してタイポグラフィを変更
要素から .reveal クラスを削除して出現アニメーションを無効化
---
### デッキチェックリスト
- [ ] [IMAGE: 説明] プレースホルダーを実際の画像に置き換える
- [ ] スライド [N] の指標/引用が正確であることを確認する（見逃せないスライド）
- [ ] ターゲットの表示サイズ（[1920×1080 または 1080×1080]）でテストする
- [ ] ライブプレゼンテーションの場合：ブラウザのキーボードナビゲーションを確認する
付録: ファイル構造
期待されるファイル構造は次のとおりです：
deck/
[name]-slides/
index.html # 完全なデッキ（SlidePresentation JS付き）
slide-001.html # スライド1のスタンドアロンスライド
slide-002.html # スライド2のスタンドアロンスライド
... # デッキ内のすべてのスライドに対して
[name].pdf # PDF出力（要求された場合）
.claude-design/ # スキップ可能、生成後に削除
previews/
style-a.html
style-b.html
style-c.html