印刷用デザインをきれいにまとめるための7つのポイント

印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。

印刷用デザインをどうするか。

当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。
さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。
ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。
なお、文末にアックゼロヨン受賞サイトの印刷プレビュー（Firefox2）のスクリーンショットと印刷用CSSのリンクを書いておきます。

1. 背景色、背景画像は使わない。

もちろん使ってもよいのですが、使っても意味がないというのが実情です。基本的にブラウザの初期設定では印刷では背景画像や背景色を印刷しないようになっているからです。この点が、印刷用デザインにとっての大きな特徴、というより制約になります。

2. 余白を十分に取る。

このような制約があるので、文章の可読性にも大きな制約が出ます。本文の要素間（見出しと本文など）の余白を大きめに取っておいたほうが各要素の関係性が分かりやすくなり、閲覧者が文章を読みやすくなります。

3. 本文は明朝で、見出しなどはゴシックにする。

ディスプレイでは文章が明朝では読みにくいため、通常ゴシックにしますが、印刷では明朝も使えるため、本文は明朝にします。一方で、見出しなどはタイポグラフィの考え方に従い、ゴシックのほうがよいと思います。

4. 文字サイズのコントラストを大きめに取る。

上記とも関連しますが、例えば本文が12ptくらいであれば、見出しは20ptにするなど、各要素間の文字サイズを思い切って大きく変えてみます。Web2.0系のデザインで流行したデザインのようにです。

5. 太字は本当に必要な時だけ使う。

見出しには太字を当てたくなりますが、我慢したほうがよいかもしれません。印刷における文字の太字はあまりきれいではありません（特にメイリオなど）。太字はstrong要素を使っている箇所など、本当に必要な箇所にだけ使います。

6. 白黒である必要はない。

プリンタがモノクロといえども白黒にこだわる必要はありません。もちろん、強調点が色合いでしか判断できないのは問題かもしれませんが。また、カラーを使うのであれば、PCのWebデザインと揃えると統一性が生まれます。

7. ボーダーを使いすぎない。

背景色、背景画像が使えないとなると、頼りにできるのはボーダーです。しかし、その結果あちこちにボーダーが用いられ、きれいなデザインができないことがあります。ボーダーはどんどん使えばよいのですが、余白やタイポグラフィをうまく使ったほうがきれいにまとまります。

参考：アックゼロヨン受賞作のスクリーンショット

今回、この記事を書くのに参考にしたWebサイトの印刷用デザインのスクリーンショットを貼り付けておきます。印刷用CSSを用意していないところ、また同じ制作会社が担当しているサイトは省きました。また、スクリーンショットはトップページではなく、実際にコンテンツがある下部のページです。

製品の特長 | MORISAWA PASSPORT モリサワ パスポート
http://www.morisawa.co.jp/shrd/print.css

業務分野 一般企業法務 | 西村あさひ法律事務所
http://www.jurists.co.jp/common/css/print.css

リビング　ダイニング トヨタホーム｜注文住宅 イメージ検索「タグル」
http://tagle.jp/shared/css/print.css

台風前線 2 | プロジェクト概要
http://front.eye.tc/common/css/print.css

ウェブサイト制作｜デジパ株式会社
http://digiper.com/css/print.css

旭松食品：おなか納豆のメカニズム
http://www.asahimatsu.co.jp/shared/css/print.css

ブログ, CMS (ホームページ制作会社 アルファサード - アクセシビリティ, ユニバーサルデザイン, ブログ・CMS, モバイル)
http://alfasado.net/common/css/print.css

ファミマTカード（豪華アーティスト真夏の共演！！ a-nation　真夏の野外ライブチケット ファミリーマート独占先行販売！！）｜FamilyMart
http://www.family.co.jp/css/print.css

開園時間・入園料｜東山動植物園
http://www.higashiyama.city.nagoya.jp/inc/print.css