本記事は、アーカイブに保存されている過去の記事です。最新の情報は、公益社団法人日本印刷技術協会(JAGAT)サイトをご確認ください。
急増するスマートフォンからのWebサイト閲覧に対応する手法のひとつである。
印刷は定型(変形判も含めて)サイズに合わせて、余白やレイアウトバランス、再現色域、組版ノウハウを駆使してレイアウトする。出力サイズが一定ではないWebの場合は、小さい画面の端末で見るとWebサイトの画像が切れたり、組版体裁がおかしくなる。今まではデバイスごとにサイトを分けていたが、多様な画面サイズに対応するためワンソースで済む方法としてレスポンシブWebデザインという手法が登場した。
なぜ最近レスポンシブWeb デザインが注目されだしたのかというと、スマートフォン(スマホ)の普及が第一番に挙げられる。デスクトップ(パソコン)でインターネットを見ているだけならサイズが異なっても少しドラッグするだけで事足りていたので、大きな問題もなかったのだが、スマホになるとそうはいかない。
新聞のように長年の経験から天声人語はここにあるということが明確に分かっているなら、PDF紙面をドラッグしながら読むのも難しくないが、Web 用に特化したサイトをドラッグしながら読むのは、非効率極まりない。スマホが増えると、さまざまな画面でハンドリングやデザインテイストが変わらないレスポンシブWeb デザインに注目が集まってくる訳である。
要はCSS3 のメディアクエリという機能を利用して、デバイスの幅を検知し、CSS を切り替える。メディアクエリはデバイスの種類と状態、「向き」「サイズ」「モノクロかカラーか」などを検知し、CSS をその状態によって読み替えることができる。例えば480 ピクセル以下は、1 段組み用のCSS を、480 ピクセル以上は2 段組み用のCSS を読み込めるといった具合にレイアウトの切り替えができるようになる。印刷業界はまじめに取り組まねばならない技術である。
(『JAGAT Info』2013年6月号より一部抜粋)
レスポンシブWebデザインの利点や問題点を理解し、ヤフー、日本科学未来館のスマートフォン対応事例を通じてクライアントの要望に応える「うまくいくスマホサイト」とは何かを考える。