スマートフォンファーストで作ると印刷対応が難しい
レスポンシブWEBデザインで作られたページの場合、画面幅によってCSSを切り替えます。
普通にブラウザで閲覧するには問題になりませんが、印刷する時・・・この時には思い通りにならない場合が大半です。
あなたは印刷をしようと思ってパソコンのブラウザーから印刷ボタンを押したとき、画面に出ている物とは異なるレイアウトで出力されたという経験はありませんか？
レスポンシブWEBデザインは様々なデバイスで表示する事を前提としています。
スマートフォンからパソコン、もしかしたらテレビ、携帯ゲーム機、プロジェクターやスクリーンで映すかもしれません。
これらの機器はインターネット回線を使ってホームページを見にきますね。
その時に問題となるのが「回線速度」です。
固定回線から無線回線まで様々な環境が想定されます。同じホームページでも通信環境の良し悪しで表示までの時間が変わりますね。
ここで表示されるまで待ってくれればいいのですが、あまりに遅いと戻るボタンから検索一覧へ戻ってしまいます。
せっかく作ったのに、表示に時間がかかりすぎる為に見てもらえない・・・という事が起こるんですね。
これではもったいないです。こういった状況を回避するためにスマートフォンファーストでページデザインをする場合がほとんどです。
ですがコーディングはどうでしょうか？
デザインをスマートフォンファーストで作り込むのは通信環境に配慮していていいのですが、HTMLコーディングまでスマートフォンファーストにしてしまうと印刷がうまくいきません。
それはCSSを切り替えるメディアクエリをプリンターが読み取れていないからなんです。
印刷対応した作りとは
メディアクエリを追加で書き、プリンターに対応した物を書き足したり、印刷用のCSSを作って読み込ませる。
という方法もありますが、もっと簡単な方法があります。
それは印刷表示したいデザインはメディアクエリ内に書かないということです。
通常通りのページコーディングをして、そこにつけ足す形でそれぞれの画面幅に合わせたCSSをメディアクエリに書いていくという訳です。
これなら少ない労力で対応できそうですね。
パソコンファーストでコーディングしたところで、ページ表示時に読み込まれるCSSの総量は変わらないのであまり問題なさそうです。
スマートフォンやタブレットから印刷をかけた時にもパソコンの画面が出力されてしまいますが、レスポンシブWEBデザインという特性上、対応は難しいものです。
画面に映ったまま印刷してほしいものですが、プリンターには画面幅はありません・・・なのでどのデバイスから印刷しようとしているのかが判断できていないのではないでしょうか・・・
こういった部分にも技術の向上で対応できるようになりそうですね。
今はまだ対応が難しい状況なので、スマートフォン・タブレットそれぞれの印刷に対応したい場合、レスポンシブWEBデザインではなく、専用にページを作り分けるという方法がベターです。
印刷の需要について
そもそも印刷しなくても、タブレットやスマートフォンで表示されている画面を見ればいいじゃない！と思う方もいるかもしれませんが、紙に出力したいという需要はまだまだあります。
出力してスクラップブックに貼り付ける。線を引いてメモにする。学習に使う。インターネット回線を借りて閲覧したページを出力して持ち帰る。そもそも紙で見たい。
時代はアナログからデジタルに変わりつつあるので、将来的にはどんどん利用する機会が減ってしまうかもしれませんが、きっと残り続けると思います。
書籍も電子化して持ち歩く時代ですが、紙の方が手触りだとか物質としての存在感だとか、そういう質感がはっきりしています。
それに印刷する紙を変えれば見た目の質感や手触り、光の反射による見え方などなど・・・見た時の感じ方や受ける印象にも影響も変わります。
それはデザインに大きく関わる部分です。
もしかしたら紙に香りをつけるのも面白いかもしれませんね。
紙の方が画面ではなかなかできない事も紙でならできる事がまだ多くありそうです。
まとめ
・パソコンファーストのコーディングを心掛ける
・レスポンシブWEBデザインの場合はデバイス毎に出力されるデザインを変更できない
・各種デバイス毎によって見えている通りに印刷対応するなら、それぞれ専用のページを設ける方法を採る
