graphic-case-study

グラフィック事例紹介

顧客事例の詳細から、プロフェッショナルなB2B事例紹介PDFを生成します。出力は、自己完結型のHTMLファイル（任意のブラウザーで開けます）と印刷用PDFです。7種類のページレイアウトと9種類のスタイルプリセットに対応しています。

---

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

1. すべてのページがA4キャンバス（1200×1697px）内に収まる必要があります。コンテンツをはみ出させないでください。
2. 拡大縮小可能なフォントサイズにはすべてclamp()を使用してください。pxの固定値を使えるのは構造上の境界線や線のみです。
3. HTMLは自己完結型の単一ファイルにしてください。CSSはすべてインラインにします。フォントCDNリンク以外に外部依存関係を含めないでください。
4. HTMLをチャットにそのまま出力しないでください。ファイルに保存し、概要のみを表示してください。
5. 成果を示す数値は、視覚的に目立つようにしてください。本文テキストの少なくとも3倍のサイズにします。
6. ありきたりなAI生成のようなデザインは避けてください。ディスプレイフォントにInterを使わない、白地に紫のグラデーションを使わない、最後を「Thank You」で締めくくらない、を守ってください。

---

ステップ1：概要の確認

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

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

"事例紹介を作成するには、次の4つの情報が必要です：

1. 顧客名 — 会社名（または匿名化するための説明：「Fortune 500の小売企業」など）
2. 課題 — 製品を利用する前に、どのような問題がありましたか？（2〜5文）
3. ソリューション — 製品はどのように課題を解決しましたか？（機能、アプローチ）
4. 成果 — 測定可能な成果。理想的には3つの数値（割合、削減時間、売上への影響など）"

4つすべてがそろうまで待ってください。

---

ステップ2：詳細の確認

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

"作成を始める前に、いくつか質問があります：

コンテンツ

1. 顧客の概要 — 業界、企業規模、所在地は？（任意。概要ページで使用します）
2. 推薦コメント — 顧客のコメント（40語以内）＋発言者名＋役職はありますか？（または「後で追加する」）
3. ページ数 — 1ページ（要約カード）／2ページ（標準、デフォルト）／4ページ（詳細）
4. 顧客ロゴ — URL、または「なし」

デザイン 5. 自社名 — CTAページに記載する提供元の名前（ロゴURLがあればそれも） 6. スタイル — clean-slate／midnight-editorial／matt-gray／product-minimal／mint-pixel-corporate／warm-earth／brutalist／magazine-red／「選択肢を見せて」 7. 向き — A4縦（デフォルト、1200×1697）／横向き4:3（1200×900）

出力 8. 匿名化しますか？ — 会社名をそのまま使用／業界を示す表現に置き換え 9. スラッグ — ファイル名のスラッグ（例："acme-corp-2025"）。省略した場合は顧客名から作成します"

省略された場合のデフォルト値：

質問	デフォルト
顧客の概要	なし
推薦コメント	なし
ページ数	2
顧客ロゴ	なし
自社名	コンテキストから作成
スタイル	clean-slate
向き	A4縦
匿名化	会社名をそのまま使用
スラッグ	顧客名をケバブケースに変換

スタイルが「選択肢を見せて」の場合： 表紙のみの単一ページHTMLプレビューを3種類生成します。.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 ページ	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 ページの場合の例：

Proposed structure (2 pages, clean-slate style):

Page 1:
  [cover] -- Acme Corp cut reporting time by 80%
  [challenge-solution] -- manual process / DataPulse automation

Page 2:
  [results] -- 80% time saved, 95% error reduction, $200K saved
  [closing-cta] -- Get in touch: [email protected]

Does this structure work, or should I adjust anything?

ステップ 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（両方必須）

使用禁止語（例外なし）：「powerful」、「seamless」、「game-changing」、「leverage」、「innovative」、「revolutionary」、「transform」、「cutting-edge」、「robust」、「unlock」、「scalable」（水増しの形容詞として）。

コピーの方針： 形容詞より数値を優先します。すべてのセクションで、機能ではなく成果を先に示します。断片的な表現も使用できます。

ステップ 5：HTML の生成

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

このスキルの参照ファイル：

• references/design-system.md
• references/page-library.md
• references/style-presets.md

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

• /Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css -- 内容全体を <style> ブロック内にそのまま含めてください

生成ルール：

1. 自己完結型の HTML を 1 つ作成します。CSS はすべてインラインにします。外部参照として許可されるのはフォント CDN の <link> のみです。
2. viewport-base.css の内容全体をそのまま <style> ブロック内に含めてください。言い換えたり短縮したりしないでください。
3. viewport-base.css を貼り付けた後に、ポートレート A4 用のオーバーライドを追加します。

   /* A4 portrait 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;
   }
   

4. 各ページのセクションは <section class="slide"> にします。これは export-pdf.sh による検出に必須です。
5. 各ページにコメントを付けます：/* === PAGE N: SECTION-TYPES === */
6. 結果セクションの統計値は、最小値を clamp(2.5rem, 7vw, 5rem) にします。ヒーロー指標はアクセントカラーにします。それ以外の指標はセカンダリテキストカラーにします。
7. 画像が提供されていない場合は、CSS で生成したビジュアル（幾何学模様、グラデーション背景、アイコン風の CSS 構造）を使用します。プレースホルダーの枠を表示しないでください。
8. SlidePresentation JS は使用しないでください。.reveal の登場アニメーション用に、最小限の IntersectionObserver のみを含めます（閲覧時の体験向上のためです。PDF エクスポートでは自動的に最終状態がレンダリングされます）。
9. 横向き 4:3（指定された場合）：graphic-slide-deck の比率から clamp() の値を使用します。横向き 1200×900 の場合、1vw=12px となり、ポートレートと同様です。

タイポグラフィの規律（すべて clamp() を使用し、A4 ポートレート 1200px 向けに調整）：

• 表紙の見出し：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 には付けない

デザイン品質：

• 結果セクションでヒーロー指標が視覚的に際立っている。アクセントカラーで最大サイズとし、同等の強さで競合する要素がない
• スタイルプリセットのトークンが一貫して適用されている（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> ブロック全体（そのままコピー）
• 最小限の HTML シェルで囲んだ個別の <section class="slide">
• 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 を含めない）

チャットに次の内容を提示します。

## Case Study: [customer name]
Date: [today] | Style: [style] | Pages: [N] | Format: A4 portrait
Vendor: [your company] | Customer: [customer name]

---

### Files
Main:      case-study/[slug]/index.html
Per-page:  case-study/[slug]/page-01.html -> page-0N.html
PDF:       case-study/[slug].pdf

---

### Case Study Checklist
- [ ] Replace [IMAGE: logo] placeholder with real logo file
- [ ] Verify all stats are accurate (page [results page number])
- [ ] Confirm customer has approved quote usage
- [ ] Proof company name spelling, speaker title accuracy
- [ ] Test PDF page count = [N] and no content clips
- [ ] Share PDF at case-study/[slug].pdf

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

---

セクションの参照

セクション	目的
cover	オープニングページ -- 顧客名、主な成果、ロゴ
overview	一目でわかるプロフィール -- 業界、規模、ユースケース
challenge	課題 -- 背景と問題点
solution	製品がどのように課題を解決したか -- 機能の紹介
results	主要な指標と、それを裏付ける説明
testimonial	顧客からの引用文を全幅で掲載
closing-cta	ベンダーのロゴ、連絡先、次のステップ