graphic-ebook

graphic-ebook

B2B SaaS 向けの、プロフェッショナルなデザインの電子書籍を作成します。リード獲得用コンテンツ、ゲート付きガイド、ナーチャリング用コンテンツ、ホワイトペーパーに対応します。HTML + CSS → 印刷用 PDF。3～10 ページです。

重要なルール

どのステップよりも先に、以下のルールを必ず守ってください。

1. すべてのページを A4 キャンバス（1200×1697px）内に収めてください。コンテンツをはみ出さないでください。
2. スケーラブルなフォントサイズにはすべて clamp() を使用してください。固定の px 値は、境界線や構造要素に限ります。
3. HTML は単一の自己完結型にしてください。CSS はすべてインラインにします。外部依存関係として使用できるのは、フォントの CDN <link> のみです。
4. HTML をチャットにそのまま貼り付けないでください。 ファイルに保存し、概要のみを表示してください。
5. 本文を中心に構成してください。テキストカラムおよびテキストサイドバーのあるすべてのページで、行の高さを 1.75 以上にします。1 カラムの本文は最大幅を 65ch 以下にします。
6. 汎用的な AI 生成コンテンツは避けてください。ディスプレイフォントに Inter を使わないこと、白地に紫から青へのグラデーションを使わないこと、最後を「Thank You」で締めくくらないこと。
7. ビジュアルのリズムを保ってください。テキストカラムのページを 2 ページ以上続けて配置しないでください。章の導入、引用のコールアウト、または統計グリッドを挟んでください。
8. HTML の生成前に、デザインの方向性を決定してください。 トーン、特徴的な要素、背景のシステムをそれぞれ 1 つ選びます。汎用的なデザインは失敗です。各電子書籍はテンプレートの使い回しではなく、対象読者とテーマに合わせた独自のデザインにしてください。
9. * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } — グローバル CSS に必ず含めてください。これがないと、Chromium は PDF 内の背景色をすべて削除します。
10. 表紙以外のすべてのページに、ページ番号とブランド名を記載したフッターを付けてください。各 .slide の下部に絶対位置で配置します。

---

ステップ 1：ブリーフの確認

必須項目は 4 つです。ユーザーのプロンプトに 4 項目がすべて含まれている場合は、ステップ 2 に進んでください。

不足がある場合は、次の内容だけをそのまま質問してください。

"電子書籍を作成するため、次の 4 項目を教えてください。

1. トピック — 電子書籍のテーマは何ですか？（具体的に記入してください。「マーケティングのヒント」ではなく、「CAC を削減する 5 つの方法」のように）
2. 対象読者 — 誰が読みますか？（役職、会社規模、課題：「解約率の高さに悩む、従業員 50～500 人の SaaS 企業のカスタマーサクセスマネージャー」のように）
3. 読後に取ってほしい行動 — 読者に何をしてほしいですか？（デモを予約する、テンプレートをダウンロードする、チームに共有するなど）
4. コンテンツ — 既存のコンテンツはありますか？ それともトピックに基づいてこちらで草案を作成しますか？"

ここで停止して回答を待ってください。参考ファイルを読まないでください。HTML やアウトラインを生成しないでください。

---

ステップ 2：詳細の確認

9 つの質問をすべてまとめて、項目ごとにグループ分けして 1 回のメッセージで尋ねてください。回答がない項目には、既定値を適用します。

コンテンツ

1. ページ数 — 3～5 ページ（クイックガイド／チェックリスト）／6～8 ページ（標準的なガイド）／9～10 ページ（詳細ガイド）（既定値：6）
2. 重要な要点 — 読後に読者に知ってほしい、または実行してほしいことを 3～5 個挙げてください（章立てに反映します）
3. ブランド名 — 表紙とフッターに掲載する会社名または製品名（または「skip」）
4. ブランドロゴ — URL または「none」

デザイン 5. スタイル — clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / soft-cloud / 「show me options」（既定値：clean-slate） 6. 章の数 — メインのセクション数（既定値：ページ数から算出）

出力 7. CTA の詳細 — デモ予約／ニュースレター登録／テンプレートのダウンロード／その他（既定値：「デモを予約」） 8. 連絡先情報 — 最後の CTA ページに掲載するメールアドレスと URL（または「後で追加します」） 9. スラッグ — ファイル名に使うスラッグ（例：「reduce-churn-guide-2025」）。省略時はトピックから算出します。

既定値：

質問	既定値
ページ数	6
重要な要点	トピックから算出
ブランド名	なし
ブランドロゴ	なし
スタイル	clean-slate
章の数	ページ数から算出
CTA の詳細	デモを予約
連絡先情報	プレースホルダー（チェックリストに明記）
スラッグ	トピックの kebab-case

スタイルが「show me options」の場合： 1 ページの HTML プレビューを 3 種類（表紙のみ）作成し、.claude-design/previews/style-a.html、style-b.html、style-c.html に保存してください。それぞれを自動的に開いてください。ステップ 3 に進む前に、ユーザーに選んでもらってください。

---

Step 3: 内部アーキテクチャ

内部で導き出してください。ユーザーには表示しないでください。

章 → ページの対応：

ページ数	標準的な構成
3	表紙 + [本文ページ 1 ページ] + クロージング CTA
4	表紙 + [章の導入 1 ページ + テキストカラム 1 ページ] + クロージング CTA
5	表紙 + 目次 + [章の導入 1 ページ + テキストカラム 1 ページ] + クロージング CTA
6	表紙 + 目次 + [章の導入 2 ページ + テキストカラム 1 ページ] + クロージング CTA
8	表紙 + 目次 + [章の導入 3 ページ + 本文ページ 2 ページ] + クロージング CTA
10	表紙 + 目次 + [章の導入 4 ページ + 本文ページ 3 ページ] + 要点まとめ + クロージング CTA

目次ルール： 6 ページ以上の電子書籍には目次を含めてください。3〜5 ページの電子書籍では、表紙に「内容紹介」の箇条書きを載せるか、目次を省略してください。

3 点 CTA 構成（6 ページ以上の電子書籍の場合）：

1. 導入部 CTA（2 ページ目の後） — 「[url] で [tool] をご覧ください」のような控えめな 1 行の本文中の言及
2. 電子書籍中盤の CTA（統計グリッドまたは章の導入の後） — 1 行の CTA を含む小さな .callout--stat または .callout--tip ボックス
3. クロージング CTA（最終ページ） — コンバージョンを促す、ページ全体を使った主要な CTA

視覚的なリズムの確認： text-column ページが 2 ページ以上連続する計画になっている場合は、先に進む前に、その間に quote-callout または stat-grid を挿入してください。

デザインの方向性（スタイルプリセットと対象読者から導き出します。ユーザーには表示しないでください）：

判断項目	導き出す基準
トーン	この対象読者が期待する感情的なトーンは何か（権威ある、編集的、活気のある、落ち着いた、温かみのあるなど）
シグネチャー要素	一貫して使う視覚的な仕掛けを 1 つ選びます。装飾的な大きな数字、斜めのアクセントバー、ドットグリッドのオーバーレイ、表紙のグラデーションメッシュ、罫線、幾何学図形のはみ出しなどから 1 つ選び、使い続けてください。
背景のシステム	ページごとに背景をどう変化させるか。表紙と章の導入は最も個性的にします。本文ページは控えめにしますが、すべてを白背景にはしないでください。クロージング CTA は暗色、またはアクセントカラーを全面に使った反転デザインにします。同じ背景のページが 3 ページ以上連続しないようにしてください。
モーションのスタイル	.reveal アニメーションの動きはどうするか。一貫性を保つため、translateY(16px) → 0、scale(0.97) → 1、translateX(-12px) → 0 から 1 つ選びます。遅延時間は 0.1 秒ずつずらします。
記憶に残るディテール	読者がデザインについて覚えているであろう唯一の要素は何か。CSS を書き始める前に、それを明確にしてください。

スタイルプリセットだけでは明確な方向性を導き出せない場合は、この対象読者とトピックに対して、最高水準のデザイン会社なら何を制作するか考えてください。そのうえで実行してください。

本文の文章量の上限：

• text-column 1 カラム：1 ページあたり最大 180〜250 語
• text-column 2 カラム：1 ページあたり最大 280〜380 語（各カラム 140〜190 語）
• text-sidebar：本文 140〜180 語 + サイドバー ≤70 語
• chapter-intro：40〜60 語（予告のみ）
• quote-callout：30〜45 語
• stat-grid：3〜6 個の指標。ラベルは最小限にします

---

Step 4: ページ構成

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

各ページに [layout-type] ラベルを付けた番号付きリストを出力してください。6 ページの場合の例：

Page 1: [cover] — title, subtitle, brand
Page 2: [toc] — 3 chapter titles + page numbers
Page 3: [chapter-intro] — Chapter 1 opener
Page 4: [text-column] — Chapter 1 body (1-column)
Page 5: [stat-grid] — 4 key metrics
Page 6: [closing-cta] — demo booking CTA + contact

Step 5 に進む前にユーザーに確認してください。

---

ステップ 5：コンテンツの草案

各ページのコピーをプレーンテキスト（HTML なし）で作成します。レイアウトタイプごとのルール：

• cover：タイトル（≤10語。一般的なラベルではなく、価値または緊張感を先に打ち出す）＋サブタイトル（≤15語）＋任意のカテゴリラベル＋ブランド名
• toc：章タイトル（各≤6語）＋対応するセクション番号。番号付きの簡潔なリスト。
• chapter-intro：章番号（装飾用）＋章タイトル（≤8語）＋導入段落（2～3文）
• text-column (1-col)：セクション見出し＋本文の段落。最大250語。箇条書きより文章を優先します。すべての文に意味を持たせます。
• text-column (2-col)：同じルールを適用し、各カラムは140～190語とします。比較、手順のペア、2つの視点に使用します。
• text-sidebar：本文（140～180語）＋サイドバーのコールアウトタイプ（ヒント／警告／統計／引用／チェックリスト、最大70語）
• quote-callout：引用文（≤40語）＋出典表記（名前、肩書き、会社名または出典）
• stat-grid：3～6個の指標。数値＋ラベル＋1行の説明。任意：下に1文の説明を追加。
• key-takeaways：5～8個の要点（各≤15語）。可能な場合は命令形にします。
• closing-cta：見出し（≤5語、命令形）＋本文1文＋CTA のアクション＋メールアドレス＋URL（両方必須）

禁止語（例外なし）： "powerful", "seamless", "game-changing", "leverage", "innovative", "revolutionary", "transform", "cutting-edge", "robust", "unlock", "scalable"（埋め草としての使用）。

---

ステップ 6：HTML の生成

生成前に以下をすべて読んでください。言い換えたり要約したりせず、実際のファイルを読んでください。

このスキルのリファレンス：

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

同梱アセット（正確なパス。内容をすべてそのまま <style> ブロックに含める）：

• assets/viewport-base.css — このスキルのディレクトリ内に同梱

パスの解決： assets/ または scripts/ で始まるパスはすべて、この SKILL.md ファイルを含むディレクトリからの相対パスです。Claude Code へのインストール後は、~/.claude/skills/graphic-ebook/assets/ および ~/.claude/skills/graphic-ebook/scripts/ を使用します。読み込む前に、SKILL.md ファイルの場所から実際のパスを解決してください。

生成ルール

1. 単一の自己完結型 HTML。 CSS はすべてインラインにします。外部依存として許可されるのはフォント CDN の <link> のみです。

2. viewport-base.css の内容をすべてそのまま <style> ブロックに含めます。

3. A4 縦向き用のオーバーライドを viewport-base.css の後に追加します（同じ <style> ブロック内）：

/* 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;
}
/* CRITICAL: prevents Chromium from stripping backgrounds in PDF */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

4. 各ページは <section class="slide"> とします — export-pdf.sh によるページ検出に必須です。

5. 各ページにコメントを付けます： /* === PAGE N: LAYOUT-TYPE === */

6. 本文テキスト： clamp(0.875rem, 1.25vw, 1.05rem)、line-height: 1.75、text-column および text-sidebar レイアウトのすべての <p> に max-width: min(65ch, 100%) を指定します。

7. 統計の数値： メイン数値はアクセントカラーで clamp(3rem, 8vw, 5.5rem)。補助数値はセカンダリカラーで clamp(2.5rem, 7vw, 5rem)。

8. 画像が利用できない場合 → CSS で生成したビジュアルのみ（グラデーション、幾何学模様、ドットパターン、抽象要素）を使用します。プレースホルダーボックスは表示しないでください。

9. SlidePresentation JS は使用しません。 .reveal アニメーション用の最小限の IntersectionObserver のみを含めます。

10. 章番号の装飾（chapter-intro ページ）：

.chapter-number-deco {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 14rem);
  font-weight: var(--display-weight);
  opacity: 0.06;
  position: absolute;
  top: -0.1em;
  right: var(--page-padding);
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
  user-select: none;
}

11. タイプ別コールアウトボックス（text-sidebar ページ）：

.callout { border-left: 3px solid; border-radius: var(--card-radius, 4px); padding: clamp(0.75rem, 1.5%, 1.1rem); }
.callout-label { font-size: clamp(0.58rem, 0.8vw, 0.68rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5em; }
.callout--tip      { background: rgba(22, 163, 74, 0.07);  border-color: #16A34A; }
.callout--tip      .callout-label { color: #16A34A; }
.callout--warning  { background: rgba(217, 119, 6, 0.07);  border-color: #D97706; }
.callout--warning  .callout-label { color: #D97706; }
.callout--stat     { background: rgba(var(--accent-rgb, 100,100,100), 0.07); border-color: var(--accent); }
.callout--stat     .callout-label { color: var(--accent); }
.callout--quote    { background: var(--bg-elevated); border-color: var(--divider); font-style: italic; }
.callout--quote    .callout-label { color: var(--text-muted); }
.callout--checklist { background: rgba(8, 145, 178, 0.07);  border-color: #0891B2; }
.callout--checklist .callout-label { color: #0891B2; }

12. ページフッター（cover 以外のすべてのページ）：

.page-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: clamp(0.5rem, 1%, 0.625rem) var(--page-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--divider);
  font-family: var(--font-body);
  font-size: clamp(0.55rem, 0.75vw, 0.65rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

HTML：<div class="page-footer"><span>[Brand Name]</span><span>[N]</span></div>

13. 2 カラムレイアウト： display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4%, 3.5rem); を指定し、左カラムに border-right: 1px solid var(--divider) を設定します。

14. Text-sidebar レイアウト： display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3%, 2.5rem); を指定します。

デザイン品質ルール（フロントエンドデザインの原則に基づく）

これらは、生成するすべての電子書籍の美的な完成度を左右します。構造ルールを適用した後、出力前に適用します。

タイポグラフィ：

• ディスプレイフォントには、大きなサイズでも存在感が必要です。Plus Jakarta Sans 800、Instrument Serif、Syne、Lora、Frauncesはいずれも使用できます。ディスプレイ用にInterを太字で使うと、すぐに手抜き感が出ます。
• 階層が連続する2つのレベルで、同じフォントウェイトを使わないでください。表紙タイトル（800）→章見出し（700）→セクション見出し（700、サイズは小さめ）→本文（400/500）。
• プリセットが対応している場合は、ディスプレイフォントと洗練された本文用フォントを組み合わせてください（例：Instrument Serif + Inter、Syne + IBM Plex Sans）。単一フォントの組み合わせでは、代わりにウェイトのコントラストを使う必要があります。

背景と雰囲気：

• 表紙には必ず、視覚的な奥行きを生み出す大きな装飾的な::beforeまたは::after擬似要素を設けてください。例：opacity: 0.04–0.06のゴースト文字、はみ出す幾何学模様、放射状グラデーションのオーバーレイ、ドットや線のグリッドパターン。
• 章の導入ページは、隣接する本文ページと視覚的に対比させてください。var(--bg-alt)またはスタイルに合った代替表現を使います。
• 本文ページ（text-column、text-sidebar）は白やニュートラルな色でも構いませんが、統計グリッドや引用コールアウトのページには、独自の背景（代替セクション背景、浮き上がったカード、アクセントカラーの反転など）を設けてください。
• クロージングCTAは、必ず暗い色にするか、アクセントカラーを全面的に反転させてください。明るい色は使わないでください。ここがコンバージョンの瞬間です。
• 適切な場合は、CSSのテクスチャパターンを使ってください。ドットグリッドにはradial-gradient(circle, var(--accent) 1px, transparent 1px)、罫線にはrepeating-linear-gradient、切り抜いた幾何学模様には::beforeを使用します。

空間構成：

• 章の導入ページには、ゆとりのある余白を設けてください。視覚的な開放感が章の区切りを伝えます。
• 電子書籍ごとに少なくとも1つ、標準的なグリッドを崩す要素を設けてください。画面右端からはみ出すほど大きな章番号、本文に重ねた引用符、カラムの60％以上を占める統計数値などです。
• プリセットで明示されていない限り、中央揃えのレイアウトは避けてください。デフォルトで中央揃えにするレイアウトはquote-calloutだけです。

モーション：

• すべての.revealアニメーションで、デザイン方向のステップに基づいた一貫した動きを使ってください。
• 遅延は0.05秒刻みにし、累計で最大0.5秒までにしてください。アニメーション時間は0.65秒を超えないようにします。
• stat-grid内の統計項目は、カスケード効果が出るようにインデックスに応じて遅延させてください。
• フッター、枠線、罫線など、構造要素にはアニメーションを使わないでください。アニメーションはコンテンツを表示するものであり、レイアウトを形作るものではありません。

忘れられないディテールのルール： 最初のCSSを書く前に、この電子書籍を「きちんと組み立てただけ」ではなく、ひと目でデザインされたものだとわからせる唯一の要素を挙げてください。その要素に、CSSの工夫を最も多く注ぎ込みます。思いつかないなら、デザインを十分に考え抜けていません。

---

ステップ 7：セルフ QA

出力に進む前に、すべての不備を修正してください。このステップを省略しないでください。

レイアウトとレンダリング：

• すべての .slide に height:100vh; height:100dvh; overflow:hidden が設定されている
• * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } が全体に設定されている
• スケーラブルなフォントサイズはすべて clamp() を使用している
• 1200×1697 でコンテンツがはみ出していない — 各ページの密度を確認する
• プレースホルダーのボックスが表示されていない
• -clamp()、-min()、-max() を直接使用していない（負の値は calc(-1 * ...) で囲む）

構造：

• ページ数がステップ 4 の計画と一致している
• すべてのページで <section> のみに class="slide" を使用している
• ステップ 4 のすべてのレイアウトタイプが正しい順序で含まれている
• 6 ページ以上の電子書籍には目次が含まれている

読みやすさ：

• テキストカラムとテキストサイドバーのページで、本文の line-height ≥ 1.75 を満たしている
• 1 カラムの本文テキストの max-width ≤ 65ch を満たしている
• テキストカラムのページが視覚的な区切りなしに 2 ページ以上連続していない
• 目次に章タイトルと節・ページ番号が含まれている
• 章の導入ページに .chapter-number-deco がある（opacity 0.06–0.08）
• 表紙以外のすべてのページに、ページ番号とブランド名を含む .page-footer がある
• サイドバーのコールアウトボックスには、種類を示す CSS クラス（.callout--tip/warning/stat/quote/checklist）を使用している

デザイン品質：

• スタイルプリセットのトークンが一貫して適用されている（references/style-presets.md を参照）
• 手抜きのパターンがない（references/design-system.md の使用禁止リストを参照）
• タイポグラフィの階層：表紙タイトル >> 章見出し >> 節見出し >> 本文（レベル間の比率は最低 2:1）
• 統計数値が視覚的に際立っており、本文と同じ視覚的な強さになっていない
• 表紙に、単色の背景にテキストを載せるだけではない、目立つ装飾的な ::before／::after 要素がある
• 章の導入ページがコンテンツページと視覚的に区別できる（背景または処理が異なる）
• 締めくくりの CTA には暗色または全面アクセントカラーの反転背景を使用する — 明るい背景は不可
• 同じ背景色のページが 3 ページ以上連続していない
• デザイン方針のステップで決めたシグネチャー要素が存在し、見える
• 少なくとも 1 つのレイアウト要素がグリッドを崩している（特大の装飾番号、裁ち落としのシェイプ、目立つ統計数値など）
• リビールアニメーションの方向と段階的な表示が一貫している — 要素ごとにランダムではない

コンテンツ：

• 禁止語が含まれていない
• 表紙タイトルは 10 語以内で、価値または緊張感を前面に出している
• 引用コールアウトは 40 語以内
• 締めくくりの CTA：命令形の見出し + メールアドレス + URL（両方必須 — どちらかがなければ QA 不合格）
• 目次が実際のページ構成と一致している
• 6 ページ以上の電子書籍には 3 点構成の CTA が含まれている

---

ステップ 8：出力

mkdir -p ebook/[slug]

メイン HTML を作成： ebook/[slug]/index.html 開く： open ebook/[slug]/index.html

ページごとの分割（必ず生成）： 各 <section class="slide"> を、完全な <style> ブロックを含み、JS を含まない独立した HTML ファイルとして抽出します： ebook/[slug]/page-01.html、page-02.html、…（2 桁のゼロ埋め）

PDF エクスポート（必ず実行）：

bash [skill-root]/scripts/export-pdf.sh \
  ebook/[slug]/index.html \
  ebook/[slug].pdf --portrait

[skill-root] = この SKILL.md が格納されているディレクトリです。実行前に解決してください（例：Claude Code のインストール後は ~/.claude/skills/graphic-ebook）。

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

概要（チャットに HTML を含めない）：

## Ebook: [title]
Date: [today] | Style: [style] | Pages: [N] | Format: A4 portrait
Brand: [brand name] | Topic: [topic]

Files
  Main:      ebook/[slug]/index.html
  Per-page:  ebook/[slug]/page-01.html → page-0N.html
  PDF:       ebook/[slug].pdf

Checklist
- [ ] Replace contact info placeholders (email + URL on closing page)
- [ ] Replace brand logo initials with real asset
- [ ] Verify TOC section numbers match actual page positions
- [ ] Proof all stat accuracy (page [N])
- [ ] Review body copy — no page should feel overflowed
- [ ] Test PDF opens correctly (page count = [N])