cdesiles/design-doc

文書

文書は順に読まれ、紙に印刷されます。この2つの事実がレイアウトを制約します。テキストの幅は一定、実際の改ページ、ホバーに依存した要素は禁止です。

まずページネーションを決定する

• フロー型（デフォルト） — 連続したテキストフロー。ブラウザの印刷エンジンが自動的に改ページします。レポート、メモ、手紙、エッセイなど、長さが不定の文書に適しています。
• 固定ページ — 明示的に<section class="page">ブロックを使用し、1枚につき1ページ。ページ数がデザインの一部となる文書（1ページの履歴書、両面チラシ、証明書、ポスター）に適しています。

依頼者が「2ページ」と言った場合は固定ページ、「レポート」と言った場合はフロー型を意味します。本当に不明な場合は確認してください。間違った方式で作成すると、文書全体が無駄になります。

ジオメトリ

トークンファイルを<head>内でリンクし、文書がコンポーネントを使用する場合はcomponents.cssもリンクします。トークンの変数を色、書体、スペースに使用してください。以下のルールは紙面のジオメトリのみに適用されます。

@page { size: A4; margin: 0; }        /* または size: letter; */
body  { margin: 0; background: white; }
.page { width: 210mm; min-height: 297mm; padding: 24mm 22mm; box-sizing: border-box; }
.page + .page { break-before: page; }

@media screen {
  body { background: gainsboro; padding: 32px 0; }
  .page { margin: 0 auto 24px; box-shadow: 0 2px 24px color-mix(in srgb, black 12%, transparent); }
}

フロー型の文書では、固定の.pageを削除し、@page { margin: 22mm }を設定し、max-width: 66chの段を用意します。用紙サイズは、依頼者が明らかにアメリカ人の場合はレター、それ以外はA4とします。サイズを指定された場合は、そのサイズを使用します。

タイポグラフィ

• ボディは11–12pt、行間1.5–1.6。読まれるテキストは10.5ptを下回らないでください。
• 行長は60–75文字。それ以上広くなると、視線が行を追えなくなります。
• ボディ用に1つのテキストファミリー、見出し用にオプションでもう1つ。デザインシステムがある場合は、それと同じ組み合わせを使用します。
• 見出しはスケールに基づいてサイズ設定し、トップレベルの見出しは28–36ptと明確に大きくします。14ptの太字では不十分です。
• 強調はウェイトとスペースで行い、色のみに頼らないでください。グレースケールで印刷しても読める文書でなければなりません。

構造

• 実際のセマンティック要素を使用：h1–h3、p、ul、table、figure、blockquote。スタイル付けされたdivは使用しないでください。
• ページ番号は、文書が2ページを超える場合、@pageカウンターを使用して設定します。

  @page { @bottom-center { content: counter(page); } }
  

  サポートは部分的です。各固定ページにフットノート形式の番号を付けるのが信頼性の高い代替手段です。
• テーブル：数値は右揃え、テキストは左揃え、完全なボーダーではなく細い罫線、thead { display: table-header-group }でヘッダーを改ページで繰り返します。
• ページの3分の1以上の高さを持つ要素にbreak-inside: avoidを使用しないでください。
• 図にはキャプションを付けます。キャプションがない図は使用しないでください。

コンテンツ

ユーザーの言葉をそのまま保持してください。依頼された場合に限り、文章の切り取りや順序の変更を行ってもかまいません。言い換えは禁止です。セクションがまだ書かれていないために空の場合は、架空のテキストを作成するのではなく、明らかにそのギャップを残してください。

ストックフォトや、装飾のみの生成画像は使用しないでください。文書に実際の画像が必要な場合は、FLUXツールが利用可能であればそれを使用して生成し、そうでなければプレースホルダーとして、何がそこに属するかを示すモノスペースのメモを入れたボックスを使用します。

仕上げ

design-verifyを印刷幅で実行し、スクリーンショットを確認します。

node ~/.config/opencode/lib/design/verify.mjs "design/Report.html" \
  --width 900 --height 1200 --full --out design/.verify/report.png

以下をチェックします：テキストがページ端で切れていないか、見出しがページ末尾でorphanになっていないか、テーブルが不適切に分割されていないか、水平方向のオーバーフロー（印刷では右端のコンテンツが失われることを意味します）がないか。

その後、自分で一度PDFに印刷（Cmd-P、PDFとして保存）して、ページ数が正しく、実際の用紙サイズで何もずれていないことを確認します。