document-design

ドキュメントのデザイン

カスタマイズ可能なブランド設定を適用した、プロフェッショナルで印刷に適した HTML ドキュメントを作成し、PDF にエクスポートします。

ブランド設定

ドキュメントを作成する前に、プロジェクトのルートにある pdf-playground.local.md を確認します。存在しない場合は、従来の Claude Code パスである .claude/pdf-playground.local.md を確認します。両方存在する場合は、プロジェクトルートのファイルのみを使用します。どちらも存在しない場合は、妥当なデフォルト値を使用するか、ユーザーにブランドカラーを尋ねます。

ブランド設定の読み取り

選択した設定ファイルの YAML フロントマターを解析します。

---
brand:
  name: "Organization Name"
  tagline: "Tagline"
  website: "https://example.com"
  email: "[email protected]"

colors:
  primary: "#CA3553"
  secondary: "#000000"
  background: "#FFFFFF"
  text: "#2d2a28"
  muted: "#666666"

fonts:
  heading: "Playfair Display"
  body: "Source Sans 3"

style:
  headingCase: "sentence"
  useOxfordComma: true
---

デフォルトのブランド値

設定ファイルがない場合は、次のデフォルト値を使用します。

• プライマリカラー：#CA3553（赤）
• セカンダリカラー：#000000（黒）
• 見出しフォント：Playfair Display
• 本文フォント：Source Sans 3
• 見出しの大文字・小文字：文頭のみ大文字

基本原則

1. 印刷を最優先したデザイン：すべてのドキュメントは、適切な余白を設けた 8.5" × 11" のレターサイズを対象とします
2. ブランドへの準拠：ブランド設定にある色とフォントを使用します
3. デフォルトは文頭のみ大文字：ブランド設定で「タイトル」ケースが指定されている場合を除きます
4. きれいなエクスポート：ドキュメントが PDF に印刷した際に正しくレンダリングされる必要があります

CSS 変数

ブランド設定から CSS 変数を生成します。

:root {
    --primary: [colors.primary];
    --secondary: [colors.secondary];
    --background: [colors.background];
    --text: [colors.text];
    --muted: [colors.muted];

    /* Derived colors */
    --primary-dark: [darken primary by 15%];
    --gray-100: #f5f4f2;
    --gray-200: #e8e6e3;
}

印刷用 CSS の基本

ページ設定

@page {
    size: 8.5in 11in;
    margin: 0;
}

@media print {
    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .page {
        page-break-after: always;
        page-break-inside: avoid;
    }
}

固定ページ寸法

.page {
    width: 8.5in;
    height: 11in;
    padding: 0.5in 0.75in;
    padding-bottom: 1in; /* Space for footer */
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

固定フッター

.page-footer {
    position: absolute;
    bottom: 0.4in;
    left: 0.75in;
    right: 0.75in;
    font-size: 9pt;
    border-top: 1px solid var(--gray-200);
    padding-top: 0.1in;
    background: var(--background);
}

フッターの余白（重要）

コンテンツがフッターに重なったり接触したりする問題が繰り返し発生しています。

推奨レイアウト、グリッド行 auto 1fr auto：

.page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
}

これにより、ヘッダーとフッターは自然な高さになり、コンテンツは残りのスペースを埋めます。マジックナンバーを使った calc() は不要で、フッターの余白は構造によって確保されます。

必須の対策：

1. ページに grid-template-rows: auto 1fr auto を指定し、コンテンツとヘッダー、フッターの間に自動的にスペースができるようにします
2. コンテンツコンテナーに overflow: hidden を設定し、テキストが範囲を超えてはみ出さないようにします
3. コンテンツ領域内に最低でも padding-bottom: 0.3in を設定し、バッファーを設けます
4. ヘッダーやフッターの高さにマジックナンバーを使った固定の height: calc(...) を指定してはいけません。パディングやフォントサイズが変わると、ずれが生じます
5. レンダリング後、納品前に必ずスクリーンショットを撮り、ページ下部を目視で確認します
6. コンテンツがあふれる場合は、コンテンツを減らし、フッターとの余白は絶対に縮めないでください。スペースがさらに必要な場合は、まずヘッダーを詰めます

タイポグラフィのパターン

フォントの読み込み

@import url('https://fonts.googleapis.com/css2?family=[heading-font]:wght@400;600;700&family=[body-font]:wght@400;500;600;700&display=swap');

body {
    font-family: '[body-font]', Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.6;
    color: var(--text);
}

h1, h2, h3 {
    font-family: '[heading-font]', Georgia, serif;
    font-weight: 700;
}

見出しのスタイル

.section-title {
    font-size: 26pt;
    color: var(--secondary);
    margin-bottom: 0.25in;
}

.section-title::after {
    content: '';
    display: block;
    width: 0.5in;
    height: 3px;
    background: var(--primary);
    margin-top: 0.12in;
}

よく使うコンポーネント

表紙のヘッダー

<header class="cover-header">
    <div class="logo-bar">
        <div class="logo-primary">[brand.name]</div>
    </div>
    <div class="cover-title-block">
        <div class="cover-eyebrow">[Document type] • [Date]</div>
        <h1 class="cover-title">[Title in configured case]</h1>
    </div>
</header>

予算表

.budget-table thead {
    background: var(--secondary);
    color: white;
}

.budget-table tbody tr:last-child {
    background: var(--primary);
    color: white;
    font-weight: 700;
}

ハイライトボックス

.highlight-box {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 0.3in;
}

ドキュメント作成のワークフロー

1. ブランド設定を確認します。まずプロジェクトルートの pdf-playground.local.md を確認し、次に従来の .claude/pdf-playground.local.md をフォールバックとして確認します
2. インストール済みのこの SKILL.md を見つけ、同じディレクトリからバンドルされたリソースを解決します。プラグインルートの環境変数が利用できるとは想定しないでください
3. スキル相対の templates/ ディレクトリからテンプレートを読み込みます
4. CSS 変数とコンテンツにブランド設定を適用します
5. ユーザーの要件に基づいてコンテンツをカスタマイズします
6. 現在の作業ディレクトリにHTML ファイルを保存します
7. Playwright のブラウザツールを使ってプレビューを提示します

PDF エクスポートの手順

1. Chrome で HTML ファイルを開きます
2. Ctrl+P（Mac の場合は Cmd+P）を押します
3. 「送信先」で「PDF に保存」を設定します
4. 「余白」を「なし」に設定します
5. 「背景のグラフィック」を有効にします
6. ファイルを保存します

追加リソース

テンプレート

インストール済みスキルの templates/ ディレクトリにある、すぐに使えるテンプレート：

• proposal-template.html
• report-template.html
• onepager-template.html
• newsletter-template.html
• slides-template.html
• event-template.html

slides-template.html には、ローカルの写真やワードマークのパスが例として記載されていますが、画像アセットは同梱されていません。このテンプレートを基にスライド資料を作成して提供する前に、すべての CSS の url(...) と <img src> の参照を、利用可能なアセットに置き換えてください。適切な画像がない場合は、解決されていない参照をすべて削除し、テンプレートのグラデーションまたは単色のスライドバリエーションを使い、見つからないワードマーク画像はテキストに置き換えてください。解決されていないローカルアセットのパスが残ったまま、スライド資料を提供してはいけません。

ブランドの例

インストール済みスキルの brands/ ディレクトリにあるブランド設定の例：

• default.yaml - デフォルトのブランド設定
• ccm.yaml - Center for Cooperative Media
• example-newsroom.yaml - ニュースルーム設定のサンプル

リファレンスファイル

CSS パターンの詳細については、インストール済みスキルの references/css-patterns.md を使用してください。

プレビューコントロール

再利用可能なプレビューアセットは、インストール済みスキルの controls/ ディレクトリにあります。 これらのファイルはドキュメント生成用のリソースです。Claude 専用のプレビューコマンドやプラグインフックが Codex の機能になるわけではありません。

関連項目

最終版の PDF または編集可能なドキュメントを確認、共有、送信、検証するには、document-delivery を使用してください。