訪問者が役立つページを見つけ、会議用に印刷してみると、比較の後半が欠けていることに気づきます。画面では説得力のあるウェブサイトでした。しかし紙の上では、追従メニューが見出しを覆い、暗い背景がページを埋め尽くしています。印刷は、単にスクリーンショットをプリンターへ送ることではありません。読む状況そのものが変わるのです。
読み手に何を持ち帰ってほしいかを考える
サービスの説明、候補の一覧、編集記事では、それぞれ目的が異なります。スタイルを調整する前に、ブラウザーを離れても理解できるように残すべきものを見極めましょう。主題、不可欠な詳細、関連する画像、そして元の情報へ戻る手段です。提案の意味を変えてしまう条件を、印刷版で知らないうちに省いてはいけません。
アニメーションによる装飾やナビゲーションの操作要素を、すべて再現する必要はありません。そうした要素を取り除けば、本来の内容に使えるスペースが生まれます。ここでの判断基準は編集の視点にあります。ウェブサイトを一度も見たことがない人にも、この文書が何について書かれたものなのかが伝わるでしょうか。
内容は同じまま、見せ方を変える
CSSの印刷用スタイルを使えば、テキストの別コピーを管理することなく、ページを紙やPDF向けに調整できます。MDNでは、このためのメディア種別としてprintを説明しています。内容の参照元を共通にすれば、ウェブページは修正されたのに古い印刷版はそのまま、という事態を減らせます。
私たちは、読みやすい文字、控えめな余白、明確な見出しを備えたシンプルなレイアウトを出発点にしています。重要なセクションを区別する手がかりを、装飾的な背景だけに頼るべきではありません。ブラウザーが背景を省略したり、読み手がモノクロ出力を選んだりしても、意味が伝わる必要があります。
関連する情報はまとめ、長い内容は無理なく次のページへ流す
説明から切り離された画像は、意味が曖昧になることがあります。対応する値がない表の見出しも、同じように役に立ちません。CSSのbreak-insideプロパティは要素内の区切り方に影響しますが、ルールを設定するだけでは、結果を確認したことにはなりません。大きなブロックも、ページの利用可能な範囲に収まる必要があります。
短い例も長い例も確認しましょう。用紙をもう1枚増やしたくないという理由だけで、比較全体を読めないほど小さな文字に押し込めないことが大切です。ここでも、小さな画面で使いやすい比較を作るときと同じ考え方が当てはまります。特定の見た目の配置を保つことよりも、ラベルと値の関係を保つことを優先してください。
最新のページへ戻る道を残す
紙ではリンクをクリックできません。必要な箇所には、説明のない「詳しくはこちら」ではなく、読める形で出典のアドレスを載せましょう。内容に合ったページタイトルと短い出典表記があれば、読み手は後で文書を特定しやすくなります。情報が頻繁に変わる場合は、印刷したコピーがいつまでも最新であるかのように見せるのではなく、その情報の背景や位置づけを説明してください。
技術的なURL、追跡用パラメーター、個人に関する詳細を、自動的にすべて載せないようにしましょう。印刷版は、別の人に渡されることがよくあります。特にフォームや訪問者が入力したデータを含むページでは、掲載する情報を意図的に選ぶことが必要です。
スタイルシートだけでなく、出力結果を確認する
印刷プレビューを開き、最初、中ほど、最後のページを確認しましょう。途中で切れた列、本文から離れた見出し、大きすぎるロゴ、欠けた画像、不要な白紙がないかを見てください。読み手に関係する用紙サイズやブラウザーの設定も試します。あるブラウザーで保存したPDFは、確認のための有用な資料にはなりますが、すべての端末で同じ出力になることの証明にはなりません。
これは継続的なウェブサイトのメンテナンスの一部です。内容やレイアウトが変わったら、印刷結果もあらためて確認しましょう。目標は、紙に画面をまねさせることではありません。同じ情報を、別の状況でも役立つものにすることです。