グラフィックケーススタディ は何をしますか？
顧客の成功事例から、プロフェッショナルにデザインされたB2BケーススタディPDFを生成します。出力は単一の自己完結型HTMLファイル（ブラウザで開く）と印刷可能なPDFです。7種類のページセクションレイアウトと9種類のスタイルプリセットをサポートします。
重要なルール -- 絶対に守ること:
- すべてのページはA4キャンバス (1200×1697px) に収めること。コンテンツがはみ出してはいけません。
- すべてのスケーラブルフォントサイズには
clamp()を使用。固定pxは構造的な境界線/ラインのみ。 - 単一の自己完結型HTML: すべてのCSSはインライン。ゼロ外部依存（フォントCDNリンクを除く）。
- HTMLをチャットに出力しない。ファイルに保存し、概要のみ表示。
- 結果の統計数字は視覚的にdominantにすること -- 本文テキストサイズの少なくとも3倍。
- 一般的なAIクソ出力禁止: 表示フォントにInterを使用しない、白地に紫色のグラデーションを使用しない、「ありがとうございました」で締めくくらない。
ステップ 1: 情報収集
開始には4つの情報が必要です。メッセージに4つすべてが含まれている場合はステップ2に進みます。
不足しているものがあれば、正確に次のように尋ねてください:
"ケーススタディを作成するには、次の4つが必要です:
- 顧客名 -- 会社名（匿名化する場合は、"Fortune 500リテーラー"などの説明を使用）
- 課題 -- 御社の製品を使用する前、顧客はどのような問題を抱えていましたか？（2～5文）
- ソリューション -- 御社の製品はそれをどのように解決しましたか？（機能、アプローチ）
- 結果 -- 測定可能な成果：できれば3つの統計値（%、節約時間、収益影響など）"
続行する前に4つすべてが揃うのを待ちます。
ステップ 2: 完全な情報収集
すべての質問を1つのメッセージでカテゴリ別にまとめて尋ねます。ユーザーはスキップ可能で、デフォルト値が適用されます。
"作成を開始する前にいくつか質問です:
コンテンツ
- 顧客コンテキスト -- 業界、企業規模、所在地？（オプション、概要ページで使用）
- お客様の声 -- 顧客の引用（40語以内）+ 発言者名 + 役職？（または「後で追加します」と応答）
- ページ数 -- 1ページ（サマリーカード）/ 2ページ（標準、デフォルト）/ 4ページ（詳細）
- 顧客ロゴ -- URL または「なし」
デザイン 5. 御社名 -- CTAページ用のベンダー名（ロゴURLがあればそれも） 6. スタイル -- clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / "show me options" 7. 向き -- A4縦（デフォルト、1200×1697）/ 横4:3（1200×900）
出力 8. 匿名化？ -- 会社名を保持 / 業界の説明に置き換え 9. スラッグ -- ファイル名スラッグ（例: "acme-corp-2025"）; スキップされた場合は顧客名から自動生成します"
スキップ時のデフォルト:
| 質問 | デフォルト |
|---|---|
| 顧客コンテキスト | なし |
| お客様の声 | なし |
| ページ数 | 2 |
| 顧客ロゴ | なし |
| 御社名 | コンテキストから推測 |
| スタイル | clean-slate |
| 向き | A4縦 |
| 匿名化 | 名前を保持 |
| スラッグ | 顧客名をkebab-caseに変換 |
スタイル = "show me options" の場合:
3つの単一ページHTMLプレビュー（カバーページのみ）を生成します。.claude-design/previews/style-a.html、style-b.html、style-c.htmlに保存。それぞれを開く: open .claude-design/previews/style-a.html など。ケーススタディのコンテキストに合う3つのスタイルプリセットを選択します。ステップ3の前にユーザーに選択を求めます。
ステップ 2.5: 内部ページアーキテクチャ（ユーザーには表示しない）
ステップ3の前に内部的に導出します。ユーザーに質問しないでください。
ヒーローメトリクスの特定: 結果から最も印象的な数値（最大の%、最大の$、最大の乗数）をスキャンします。このメトリクスはアクセントカラーで処理され、結果ページで最大の視覚的ウェイトを持ちます。
ページ数 -> 構造テンプレート:
| ページ数 | ページシーケンス |
|---|---|
| 1ページ | 1ページ: [cover-compact] -- すべてのコンテンツを1ページに凝縮 |
| 2ページ | ページ1: [cover] + [challenge-solution] 積み重ね · ページ2: [results] + [testimonial-cta] 積み重ね |
| 4ページ | ページ1: [cover] · ページ2: [overview] + [challenge] · ページ3: [solution] + [results] · ページ4: [testimonial] + [closing-cta] |
スタイル選択から導出されるビジュアルキャラクター:
- clean-slate → プロフェッショナルな権威、十分な余白、エンタープライズセーフ
- midnight-editorial → プレミアムなダーク、エディトリアルな重み、テック/AI企業向け
- matt-gray → 信頼できるニュートラル、運用系、ボードセーフ
- warm-earth → 親しみやすい温かみ、コンサルティング/エージェンシー/サービス向け
- brutalist → 大胆で目立つ、デザイン先進的、注意を引く
- 未指定の場合: B2B SaaSのデフォルトはclean-slate、テクニカル企業のデフォルトはmidnight-editorial。
ステップ 3: ページ構成
計画前に references/page-library.md を読んでください。
完全なページシーケンスを計画します。references/page-library.md にある7つのセクションタイプから各ページセクションに割り当てます。複数のセクションを1ページ内に積み重ねることができます。
各ページに [section-type] ラベルを付けた番号リストとして出力します。2ページの例:
提案構成（2ページ、clean-slateスタイル）:
ページ1:
[cover] -- Acme Corp、レポート時間を80%削減
[challenge-solution] -- 手動プロセス / DataPulse自動化
ページ2:
[results] -- 80%時間短縮、95%エラー削減、20万ドル節約
[closing-cta] -- お問い合わせ: [email protected]
この構成で問題ありませんか？調整が必要ですか？
ステップ4に進む前に確認を待ちます。
ステップ 4: コンテンツドラフト
ページセクションごとにコピーを書きます。プレーンテキストのみ -- まだHTMLは使用しません。
セクションごとのコピールール:
cover: 会社名 + 見出しとなる結果（12語以内、数字で始めること: 「Acme、レポート時間を80%削減」）+ オプションのカテゴリラベル（「カスタマーサクセスストーリー」）overview: 4つの事実のみ -- 業界 / 企業規模 / 所在地 / ユースケース -- 各値は4語以内challenge: コンテキスト段落（2～3文）+ 3つの痛点（それぞれ1文、箇条書きの埋め草は不可）solution: 2～3の機能コールアウト -- 機能名（3語以内）+ それぞれ1文の成果説明results: 3つのメトリクス（数値+短いラベル+1行のコンテキスト）。オプション: 2文のナラティブ。数字と同じウェイトの本文コピーは禁止。testimonial: 正確な引用（40語以内）+ 発言者名 + 役職 + 会社closing-cta: 見出し（5語以内）+ CTAアクション文（3語）+ メールアドレス + URL（両方必須）
禁止ワード（例外なし）: "パワフル", "シームレス", "革新的", "活用", "画期的", "変革", "最先端", "堅牢", "アンロック", "スケーラブル"（形容詞の埋め草として）。
コピーの哲学: 数字は形容詞に勝る。すべてのセクションを、機能ではなく成果で始める。フラグメントでも問題ありません。
ステップ 5: HTML生成
HTMLを生成する前にすべてを読んでください:
このスキルの参照ファイル:
references/design-system.mdreferences/page-library.mdreferences/style-presets.md
frontend-slidesの相互参照（このファイルを正確に読んでください）:
/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css-- その内容全体を<style>ブロック内にそのまま含めてください
生成ルール:
- 単一の自己完結型HTML。すべてのCSSはインライン。フォントCDN
<link>が唯一の外部参照。 viewport-base.cssの内容全体を<style>ブロック内にそのまま含めること -- 言い換えたり短縮したりしないでください。- viewport-base.css を貼り付けた後、A4縦のオーバーライドを追加:
/* A4 portait overrides */ html { scroll-snap-type: none; scroll-behavior: auto; } .slide { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; position: relative; scroll-snap-align: none; } - すべてのページセクション =
<section class="slide">-- export-pdf.sh の検出に必要。 - 各ページにコメント:
/* === PAGE N: SECTION-TYPES === */ - 結果の統計数値: 最低
clamp(2.5rem, 7vw, 5rem)。ヒーローメトリクスはアクセントカラー。その他のメトリクスはセカンダリテキストカラー。 - 画像がない場合 -> CSS生成のビジュアル（幾何学図形、グラデーション背景、アイコン風CSS構造）。表示可能なプレースホルダーボックスを出力しないこと。
- SlidePresentation JSを含めない。
.revealのエントランスアニメーション用の最小限のIntersectionObserverのみ含める（ビューワーエクスペリエンス用。PDFエクスポートは自動的に最終状態にレンダリングされます）。 - 横4:3（要求された場合）: グラフィックスライドデッキの比率から
clamp()値を使用 -- 横1200×900は1vw=12px、縦と同様。
タイポグラフィの規律（すべてclampベース、1200px A4縦に調整）:
- カバー見出し:
clamp(2rem, 5vw, 3.5rem) - セクション見出し:
clamp(1.25rem, 2.5vw, 2rem) - 本文:
clamp(0.875rem, 1.25vw, 1.1rem) - 統計数値（ヒーロー）:
clamp(3rem, 8vw, 5.5rem)、アクセントカラー - 統計数値（セカンダリ）:
clamp(2.5rem, 7vw, 5rem)、セカンダリカラー - 引用:
clamp(1.1rem, 2vw, 1.5rem)、イタリック - ラベル/キャプション:
clamp(0.65rem, 0.9vw, 0.8rem)、大文字
ステップ 6: セルフQA
すべての項目をチェック。すべての失敗を修正すること -- 省略しない。
レイアウトとレンダリング:
- すべての
.slideにheight:100vh; height:100dvh; overflow:hiddenがある - すべてのスケーラブルフォントサイズが
clamp()を使用している - 1200×1697ビューポートでコンテンツがはみ出していない --
references/page-library.mdの制限に対して各ページの密度を確認 - すべての画像プレースホルダースポットにCSS生成ビジュアルが存在する
- CSSに
-clamp(),-min(),-max()がない -- 負の値はcalc(-1 * ...)でラップ
構造:
- ページ数がステップ3の計画と一致する
- すべてのページが
class="slide"を使用している - ステップ3のすべてのコンテンツセクションが存在する
-
class="slide"は<section>要素のみにあり、内部のdivにはない
デザイン品質:
- ヒーローメトリクスが結果セクションで視覚的にdominant -- アクセントカラー、最大サイズ、同じウェイトの競合要素なし
- スタイルプリセットトークンが一貫して適用されている（
references/style-presets.mdの色、フォント） - スロップパターンがない（
references/style-presets.mdの禁止リストを確認） - タイポグラフィ階層が明確: カバー見出し >> セクション見出し >> 本文（少なくとも2:1の比率）
コンテンツ:
- どのコピーにも禁止ワードが含まれていない
- カバーの見出しが数字または測定可能な結果で始まっている
- お客様の声の引用が40語以下である
- クロージングCTAに見出し + アクション + メールアドレス + URL（4つすべて）がある
- 結果セクションのすべての統計値にラベルがある（裸の数字は不可）
ステップ 7: 出力
メインHTMLを保存:
mkdir -p case-study/[slug]
保存先: case-study/[slug]/index.html
開く: open case-study/[slug]/index.html
ページごとのHTMLファイル（常に生成）:
メインHTMLから各 <section class="slide"> を抽出します。それぞれについて、以下のスタンドアロンファイルを作成:
- メインHTMLからの
<style>ブロック全体（そのままコピー） - 個々の
<section class="slide">を最小限のHTMLシェルでラップ - JSなし（静的なページごとの表示用）
保存先: case-study/[slug]/page-01.html、page-02.html など。
PDFエクスポート（A4縦の場合は常に実行）:
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
case-study/[slug]/index.html \
case-study/[slug].pdf --portrait
横4:3が要求された場合は、--portrait を省略し、代わりに --compact（1280×720）を使用します。
注: 初回実行時はPlaywrightが自動的にインストールされます（約30～60秒）。ユーザーに通知します。
クリーンアップ: ステップ2でスタイルプレビューファイルが生成された場合は、.claude-design/previews/ を削除します。
ステップ 8: サマリー（チャットにHTMLは表示しない）
チャットに以下を表示:
## ケーススタディ: [顧客名]
日付: [今日] | スタイル: [スタイル] | ページ数: [N] | 形式: A4縦
ベンダー: [御社名] | 顧客: [顧客名]
---
### ファイル
メイン: case-study/[slug]/index.html
ページごと: case-study/[slug]/page-01.html -> page-0N.html
PDF: case-study/[slug].pdf
---
### ケーススタディチェックリスト
- [ ] [IMAGE: logo] プレースホルダーを実際のロゴファイルに置き換える
- [ ] すべての統計値が正確であることを確認する（[結果ページ番号]ページ）
- [ ] 顧客が引用の使用を承認していることを確認する
- [ ] 会社名のスペル、発言者の役職の正確性を確認する
- [ ] PDFのページ数が [N] であり、コンテンツがクリップされていないことをテストする
- [ ] case-study/[slug].pdf でPDFを共有する
チャットにHTMLを表示しないでください。
セクションリファレンス
| セクション | 目的 |
|---|---|
| cover | 表紙 -- 顧客名、見出しとなる結果、ロゴ |
| overview | 概要プロフィール -- 業界、規模、ユースケース |
| challenge | 課題 -- コンテキスト + 痛点 |
| solution | 製品がどのように解決したか -- 機能コールアウト |
| results | 主要メトリクス + 補足ナラティブ |
| testimonial | 顧客からの全幅プルクォート |
| closing-cta | ベンダーロゴ + 連絡先情報 + 次のステップ |