ウェブサイト制作の時に印刷も想定したデザインや構築にするのが理想ですが、既存のウェブサイトを印刷用に最適化することも可能です。

印刷に最適化する準備

ウェブサイトを印刷用に最適化する前に、いくつかの事前準備が必要になります。

用紙のサイズと向きを決める

A4やB3など、お客様に印刷される用紙のサイズと、縦・横の向きを決める必要があります。
ウェブサイトは縦に長いため、一般的には「A4の縦」での印刷が良いでしょう。

ユーザーの印刷環境を想定

お客様によっては、モノクロでの印刷を標準としている場合もあります。

濃い背景色や、白抜きの文字などはモノクロではキレイに見えないため、ウェブサイトを印刷に最適化する際にはモノクロでの印刷も想定した調整が必要になります。

印刷で不要なパーツを決める

印刷用に最適化する殆どの作業が、印刷しないパーツを決めることです。

例えば、メニューやフッターのリンク、バナー、トップページのニュース一覧などは印刷では不要になります。

印刷フレンドリーな具体的な調整

動画やアニメーションを使ったウェブサイトでは印刷用に調整が必要となります。
下記が印刷用に調整が必要なパーツになります。

動画

印刷では写真に差し替えて印刷できるようにします。

画像のスライダー

３枚の画像をスライドしている場合は、印刷用の１枚を決めると良いでしょう。

Google Map

Google Mapを埋め込んでいる場合は、Lazy loading機能のため、印刷されないことがあります。

loading="lazy"をオフにするloading="eager"としても効果がないため、JavaScriptでLazy loadingがオフの状態でGoogle Mapを表示させるなどの対応が必要になります。

非表示から表示されるアニメーション

非表示から表示へアニメーションさせているパーツも正常に印刷されないことがあります。
Media Queryなどで、印刷用のコーディングで回避するなどの対応が必要になります。

アコーディオンやオーバーレイで表示されるパーツ

FAQでよく利用されるアコーディオンは、印刷では表示した状態にします。

オーバーレイで表示されるパーツを印刷可能にする場合、調整する工数が多くなり、予算が膨らむ場合があります。印刷用の予算で最も協議が必要な工程になるでしょう。

スクロールに連動するパーツ

スクロールに合わせて、表示が切り替わったり、スライドするパーツも印刷用の調整で工数が多くなり予算が膨らむ傾向があります。

クリックで表示されるパーツ、動画やインタラクティブなパーツが多いほど、印刷用に調整するコストが膨らみます。

印刷用に最適化するより、ホワイトペーパーや営業資料がダウンロードできるコンテンツを追加した方がコストが安くなるケースもあります。

ただし、ウェブサイトは更新されているが、ダウンロード資料が更新されずに古い資料のままというのもありますので、運営も視野に入れたコスト算出が必要になります。

ブラウザでの確認方法

印刷用にレンダリングされた状態をブラウザで確認することができます。

Chromeの場合は下記の方法で印刷用スタイルシートのレンダリングを確認できます。
開発者ツールで「Rendering」を選択します。

メディアクエリを「Print」に変更するとOKです。

Edgeなど各ブラウザにも同様のレンダリング機能が備わっています。
Edgeの場合は下記の方法で印刷用レンダリングを確認できます。

レンダリングの設定で「印刷」を選択するとOKです。

100%印刷された状態を確認できるわけではありませんが、ざっくりと印刷されたレイアウトを確認したい場合に役立ちます。

印刷用のメディアクエリ

印刷用のメディアクエリが用意されています。

メディアクエリの利用方法は二通りの方法が考えられます。

ひとつは「オリジナルのCSSにメディアクエリを追記する方法」です。
「@media print」を利用して記述していきます。

具体的な記述は下記になります。

CSS

もうひとつは「印刷用のCSSを用意して読み込ませる方法」です。オリジナルのCSSに手を加えられないケースに用いられます。

下記が具体的な記述になります。headerで印刷用のCSSを読み込む事で印刷用のレイアウトが反映されます。

HTML

印刷に最適なサイズ単位の「pt」を使ってWEBと印刷を兼用させるより、メディアクエリでWEBと印刷を切り分けた方がレイアウトのコントロールもしやすいです。

印刷用の画像やフォントサイズの単位

印刷物を制作する場合、pxではなくmmやptなどの単位を使用します。ウェブサイトの制作でもmmやptを利用できるので、印刷用のコーディングではmmとptを利用します。

画像サイズや余白はmmを利用します

画像や余白の単位は「mm」で指定します。mmの他にcmも利用できます。

マージンやパディングなどの設定にmmやcmの単位を利用したサンプルが下記になります。

フォントサイズの指定

フォントサイズの指定は印刷に最適な「pt」を使用します。

なぜフォントサイズでptを利用するのか？

フォントサイズをpxで指定して印刷した場合は、印刷の解像度でフォントサイズが異なるトラブルが発生します。

例えば、フォントサイズ14pxで、解像度が150dpiで印刷すると、1インチが150pxのため、14px / 150dpi = 約0.093インチ（約2.36mm）となります。

フォントサイズ14pxを解像度350dpiで印刷した場合は、14px / 350dpi = 約0.04インチ（約1.01mm）となります。

一方、フォントサイズをptで指定した場合、印刷の解像度が150dpiでも350dpiでも1ptは約0.35mm（0.3528mm）として印刷されます。解像度に左右されずに絶対値として印刷されます。

解像度の異なるプリンターでも一貫したフォントサイズで印刷されるptでフォントサイズを指定した方が、デザインのコントロールができます。

印刷物で最適なフォントサイズ

ウェブの文脈で考えると1ptは1.333pxとされ、14pxの場合は14/1.333=10.5ptとなります。

下記の図はpxとptのサイズを表した図です。

Wordのフォントサイズ指定もptが基準となっていますので、Wordでptのフォントサイズを体感するのも良いでしょう。

最小のフォントサイズは6pt

モニターより印刷の方が可読性は少し高くなるため6ptの文字サイズでも可読できます。
雑誌などでも6pt～7ptのフォントサイズは多く使用されていますので、注釈などの本文より小さなフォントサイズとして利用できます。

本文のフォントサイズは9pt、10.5pt、11pt

新聞や雑誌は10.5ptが基準として、8pt～11ptのフォントサイズが本文に使用されており、もっとも可読し易いフォントサイズとされています。
Wordのデフォルトのフォントサイズも10.5ptですね。

書籍や小説は8pt～10.5ptのフォントサイズが使用されています。

本文は10.5ptを基準として、全体的な文字数やデザインから9ptまたは11ptにするかを決めると良いでしょう。

キャッチコピーや見出し、リード文のフォントサイズは12pt以上

雑誌やカタログのキャッチコピーは24pt（32px相当）や30pt（40px相当）など自由なフォントサイズが利用されています。

リード文はボールドで10pt～12ptのフォントサイズがよく利用されています。

印刷の特徴として文字は画面で見るより太って印刷されますので、モニターで見えるウェイトより一つ下のウェイトにすると良いでしょう。

印刷用CSSのティップ

印刷用のCSSのティップをいくつかご紹介します。

改ページ

改ページをコントロールするCSSプロパティとして、コンテナやブロックの手前で改ページをコントロールする「break-before」と、コンテナやブロックの後ろで改ページをコントロールする「break-after」が用意されています。

改ページの値は改行させない「avoid-page」など、さまざまな値もありますが、マージンやパディングの余白によって強制的に改ページとなる場合もあるため、改行の値のみを利用して印刷をコントロールした方がスムーズです。

背景を印刷する

プリンターで「背景を印刷しない」に設定されている場合、backgroundに関するCSSプロパティは印刷されません。

CSSプロパティの「color-adjust:exact;」で背景色や背景画像を印刷させることが可能になります。bodyに記述すればOK。

ブラウザやプリンターによっては印刷できないこともあるためデザインのリスクも考えて利用してください。

リンクはURLを表示

参照先のリンクはCSSプロパティ「content」を利用してURLを表示させると良いでしょう。

リンクのテキストの後に、URLが表示されて印刷されます。

商談の場で、先方がウェブサイトを印刷して資料として持っている事はよくあるシーンです。
また、紙媒体での共有はよくあることで、セミナーページや商品ページ、企業へのアクセスページなどを印刷用に最適化するのも良いでしょう。