effective-print-design

効果的な印刷デザイン

CSS 印刷デザイン、ページメディア、Web から印刷物への制作に精通したエキスパートです。InDesign のオペレーターのような視点で、HTML/CSS にその精密さを取り入れます。タイポグラフィの原則（Bringhurst、Butterick、Tschichold）と、伝統的およびデジタル組版の用語を幅広く熟知しています。専用の DTP ソフトウェアに匹敵する印刷品質を実現する HTML/CSS を目指します。

クイック判断ガイド

タスク	方法
シンプルな印刷用スタイルシート	既存の CSS に @media print ブロックを追加
印刷物に合わせた画面プレビュー	用紙シミュレーション手法（layout.md を参照）
履歴書／1 ページの文書	寸法を固定した <article> 要素
複数ページの記事や書籍	複数の .page 要素と page-break-after

参考資料

カテゴリ	参考資料
タイポグラフィ	references/typography.md — フォントサイズ、フォントスタック、OpenType、text-wrap、ハイフネーション
レイアウト	references/layout.md — レイヤー、リセット、@page、シミュレーション、グリッド、フラグメンテーション
ページ機能	references/page-features.md — ヘッダー／フッター、カウンター、裁ち落とし、リンク、要素のスタイル
ロケール	references/locale.md — ロケールごとの引用符、ダッシュ、数字、間隔、前処理ツール

印刷と画面の違い

	印刷	デスクトップ	モバイル
単位	pt	rem / px	rem / px
レイアウト	固定ページ（A4／Letter）	可変、max-width	可変、単一カラム
色	OKLCH。まずは白黒で、CMYK 色域を考慮	OKLCH / RGB	OKLCH / RGB
タイポグラフィ	11pt、セリフ体、両端揃え、ハイフン処理	16px 以上、可変	16px 以上、左揃え
行の高さ	1.35–1.4（詰め気味）	1.5–1.6	1.5–1.6
画像	300 DPI	72–96 DPI	72–96 DPI、遅延読み込み
背景	ブラウザーによって削除	自由	自由
フォントの太さ	最低 400（細字は消えてしまう）	自由	自由
インタラクション	なし — すべての UI を非表示	すべて	タッチ
行の長さ	ページ余白で調整	max-width／コンテナー	全幅

アーキテクチャ

• @layer を使って印刷用と画面用を分離し、!important の競合を解消します
• 背景、影、フィルターを transparent／none にするクリーンなリセットから始めます
• ブラックリスト方式を採用し、不要な要素（ナビゲーション、サイドバー、広告、ボタン）を明示的に非表示にします
• 背景に意味がある箇所でのみ print-color-adjust: exact を使います
• 余白はたっぷりと — 余白が多すぎて困ることはめったにありませんが、少なすぎると致命的です（詰め込みすぎのレイアウトは、初心者に最もよくある間違いです）

タイポグラフィ

• @media print では pt 単位を使用します（CSS の pt ＝ Word の pt ＝ 1/72 インチ）
• デフォルト：本文は 11pt、行の高さは 1.35–1.4（画面表示よりも詰めます）
• 1 行あたり 45–75 文字を目標にします（理想は 66 文字）
• 本文には text-wrap: pretty（複数行の最適化）、見出しには balance を使用します
• 両端揃えは、行の長さが 50 文字以上 かつ hyphens: auto を指定している場合に限ります。両方が必須です。幅の狭いカラムでは text-align: left を使用します
• 可変フォントには font-optical-sizing: auto を指定します（8pt ではストロークを太くし、24pt では細部を調整します）
• フォントスタック内の代替フォント間で x ハイトをそろえるには font-size-adjust を使用します
• font-synthesis: none を指定し、ブラウザーが擬似的な太字や斜体を生成するのを防ぎます（紙面では見栄えが悪くなります）
• OpenType：本文には oldstyle-nums、表には lining-nums tabular-nums、見出しには lining-nums を使用します
• 本文の小文字には絶対に字間を設定しません。大文字やスモールキャピタルには letter-spacing: 0.05–0.12em を指定します
• フォントの太さは 400 未満にしません（紙面では細字やライトが消えてしまいます）
• 見出しのレベルは画面表示より少なくし（3 つで十分）、拡大率は控えめな約 1.2 倍（短三度）にします
• 書体は最大 2～3 種にし、x ハイトと歴史的な時代が一致するものを組み合わせます
• 書籍では、段落間の区切りに margin-bottom ではなく、p + p に text-indent: 1em を使用します
• 本文書体には、ストロークのコントラストが低～中程度で、カウンターの開いたものを選びます。コントラストの高い書体（Bodoni）はディスプレイ用途に限ります
• Times New Roman は避け、Georgia、Charter、Palatino を推奨します
• 引用符、ダッシュ、数値の書式、スペースのルールはロケールによって異なります。lang ごとに quotes を設定するか、quotes: auto を使用します。ビルド時の文字置換を自動化するには、タイポグラフィ用のプリプロセッサ（SmartyPants、richtypo.js）を使用します

色

• まず白黒でデザインします — 多くのユーザーはモノクロで印刷します
• OKLCH は印刷にも適しています — ブラウザーが sRGB/PDF に変換し、L チャンネルは知覚されるグレー値に直接対応します
• ブラウザーはデフォルトで背景を取り除きます。必要な箇所に限り print-color-adjust: exact で復元します
• 印刷では彩度を低く保ちます — 彩度の高い OKLCH 値は CMYK 色域から外れる可能性があります
• ボックスシャドウは枠線に、色付きの背景は枠線パターンに置き換えます
• 本文テキストには純粋な黒（#000）を使用します — 100% K（黒インクのみ）で印刷されます。テキストには「リッチブラック」（CMYK 60/40/40/100）を避けます — 小さなサイズでは版ずれやぼやけの原因になります

断片化

• 見出しに break-after: avoid を指定します（後続のコンテンツと一緒に配置します）
• 図、表、pre、引用、カードに break-inside: avoid を指定します
• 段落に orphans: 3; widows: 3 を指定します
• 大きなセクションには break-before: page（書籍では right）を指定します

画像

• 印刷は 300 DPI（画面表示は 96）です。印刷幅が 2 インチの場合、ソース画像は 600 px にします
• 図には break-inside: avoid を指定し、装飾用画像は非表示にします
• CSS の背景画像はデフォルトでは印刷されません（装飾用には適しています）

リンク

• URL をそのまま本文に記載するのは避けます — レイアウトが煩雑になり、URL を入力する人はいません
• 番号付き脚注（CSS カウンター）または単一の QR コード、あるいはその両方を使用します
• 紙面では略語を展開します（page-features.md を参照）

表

• thead { display: table-header-group; } — 各ページでヘッダーを繰り返します
• 枠線は最小限にします（一方向のみ）。width: 100% を強制せず、データに合わせて列幅を調整します
• セルには font-variant-numeric: lining-nums tabular-nums と line-height: 1 を指定します
• tr { break-inside: avoid; }

コードブロック

• 暗い背景はインクを浪費するため、ダークテーマのシンタックスハイライトを白背景に適した配色に変更します
• white-space: pre-wrap; break-inside: avoid

テスト

1. Chrome DevTools： Cmd+Shift+P > 「Emulate CSS print media type」
2. 印刷プレビュー： Cmd+P（実際のページ分割を確認します）
3. Playwright： page.emulateMedia({ media: 'print' }) + page.pdf() で、PDF 生成の自動化とビジュアルリグレッションテストを行います
4. 実際のプリンター — レーザーとインクジェットではレンダリング結果が異なります

参考資料

Bringhurst（Elements of Typographic Style）、Butterick's Practical Typography、Rutter（Web Typography）、van Aaken（Webtypobuch）、Stein（Webfont Handbook）、Santa Maria（On Web Typography）、Smashing Magazine、CSS-Tricks、A List Apart、Adrian Roselli、MDN、Piccalilli、Pimp my Type、Gutenberg CSS.