published on
印刷用CSSについて
制作の終盤になってよく上がってくる修正依頼に、「ここ印刷されないよ?どうにかして。」と、いうものがあります。
リスト関連のタグのマーカーに背景画像を使うというのは広く定着したテクニックだと思いますが、各ブラウザのデフォルト設定では背景画像が印刷されないようになっているので、だいたいここを指摘されるんですね。
設定の「背景画像を印刷する」の項目をチェックしてください。で、済めばいいんですが、こういうことを言い出す人はまず納得してくれません。あるサイトの制作中に、マーカーをimgタグで入れろと言われたことがあります。HTML文書にとって、alt属性を入れようのないimgタグなどゴミでしかないので、この時は強硬に反対して、なんとかわかっていただきましたが。
これはもちろん、キックオフ・ミーティングの段階で詰めていなかったこちらの落ち度ではあると思うんですが、まず課題に挙がらないこともよくあるので注意しています。
ここで整理すると、本来メディアにはメディアに適したデザインがあり、モニターに最適化したデザインをそのまま印刷することに問題があると思います。そこで印刷用CSSを設置することが最適な方法だと思うのですが、ただこれもそれぞれのサイトのユーザ属性によっては一概に言い切れないとも思います。リテラシーの低いユーザには、PCのモニターに映ったとおり印刷されるものだと思っている人がたくさんいるのも事実です。なので、「ここ印刷されないよ?どうにかして。」という要望が上がってくるのもわかります。
ただ、ここで考えて欲しいのはなんでそのページを印刷するの?ということです。
このページが気に入ったから資料に、という目的のユーザはふつうはまずいません。会社概要のページがいちばんわかりやすいので例に出すと、ほとんどのユーザは、「連絡先」と「地図(あれば)」を印刷したいんです。「サービス案内」でもおなじです。「どんなサービスを扱っているのか?」を印刷したいのであって、グローバルメニュー(印刷しても機能しません)もコピーライト(そもそもなんの効力もありません)も必要ありません。(※2009年9月9日追記 Canonが実施したユーザー調査によると、Webページの印刷では、70%を超えるユーザが「不要な部分(ページ)が印刷される」ことが不満と答えています。)
整理すると、印刷についての対処法は二通りあると思います。
印刷用CSSを設置しないで、見た目通り印刷できるようにして、設定の「背景画像を印刷する」の項目をチェックしてください。という一文は必ずどこかに掲載すること。もう一度ユーザ像を思い浮かべてください。Webサイトをよく印刷するユーザは、CSSレイアウトがあたりまえになった現在、そのサイトを見る以前にどこかで同じ経験をしていて、すでに「背景画像を印刷する」の項目にチェックを入れています。
あとは印刷用CSSを設置して、最適なデザインを提供し、その旨をどこかに掲載すること。サイトの規模の大小にかかわらず、「このサイトについて」というコンテンツはあると思うので、ここに掲載することで済む話だと思うんですがいかがでしょうか?



