初心者向け講座早見表
前回のWeb系コラムではギャラリーのように写真を配置するレイアウトについてのお話をしました。
今回は、印刷する可能性のあるWebページを準備する際の注意点について焦点を当ててみたいと思います。
WiFiやタブレットが普及したとはいえ、紙媒体で情報を取り扱いたいケースはまだまだ多く存在すると思います。
ユーザー側で印刷する必要のある申込書や地図などをWebページで表示する際は、CSSを画面表示用と印刷用に切り分けるということも、一般的に行われるようになってきています。
印刷を行う際は、インクの節約やプリンター自体の制約のため、モノクロで印刷する機会も多いと思います。画面上では情報はカラーで表示されていますが、モノクロで印刷された紙では、その色情報が失われてしまいます。
例えば、赤文字と青文字の違いや、鮮やかな赤色とくすんだ赤色の違いなどの情報は、モノクロ印刷時には再現されません。このような場合の対応策としては、
重要な文字情報については文字自体の太さやフォントサイズを変更することで、モノクロ印刷で色情報が失われたあとでも、情報自体の重要性を再現できるような工夫をすることが一般的です。
重要な情報と重要ではない情報を、文字の形状を変えて区別することで、色情報が失われても優先順位を保持することが可能となります。
例として、上記画像の中央近くにあるブラウザシェアのグラフを見てみましょう。
このグラフには色情報を失ってもそれぞれの要素を識別できるような工夫がなされています。各要素（ブラウザシェア）に補助用の棒線を用意し、文字情報で各要素の説明を把握可能とすることで、画面上では色による直感的なブラウザシェアを把握しつつも、印刷した紙媒体でもシェアの情報を判別しやすいデザインになっています。
例えば、このグラフ部分をモノクロに加工した場合は以下のようになります。
色による要素の識別はできなくなりましたが、文字による情報自体は取得可能であり、そこからシェア情報を判別することが可能です。
Google Map等の地図に店舗等の場所を掲載することも最近では一般的ですが、
モノクロで印刷すると見づらくなってしまう場合には、別途モノクロ印刷用の地図を用意する必要が生じるかもしれません。
印刷することが予想されるコンテンツにおいては、色情報が失われても必要な情報を判別できるような工夫をすると、ユーザビリティをより向上させることが可能となります。コンテンツ作成の際に、ぜひ参考としていただければ幸いです。
（担当：斉藤 万幾子）
