レスポンシブデザイン 第1回

レスポンシブデザインの基礎

今回からレスポンシブデザインについて学ぶ。
width:960px;

width:640px;

width:320px;

レスポンシブデザインとは

Webサイトを閲覧する際、表示画面のサイズにより適したレイアウトやフォントサイズが変わってくるであろう。表示デバイスごとに最適な構成を提供できれば、それはユーザビリティが高いといえる。しかし、色々な表示デバイスそれぞれに適した別のWebサイトを作っていたのでは、あまりにも工数が膨大となる。また、メンテナンス性も悪く、更新ミスにより情報の正確性が低下しやすくなる。
レスポンシブデザインはこの問題への回答として、単一のサイトでありながら複数の表示デバイスで良好な可読性と機能性を維持させることができる技術である。

背景

スマートフォンの普及率は全体で4割にものぼり、特に若年層では7割を超えている。この動きは今後も伸びると予想される。この数字が示すとおり、スマートフォンはPCに取って代わったと判断できる。
しかし、現状ではPCでの閲覧を前提としたWebサイトがまだまだ多いといった状況だ。つまり、スマートフォンやタブレットでも機能性や可読性の良好なサイト制作の需要はまだ大いに見込まれるものと見られる。Web技術を学ぶ身としては、その主要な技術となるレスポンシブデザインを習得するとこは重要となる。

表示デバイス

Webサイトを閲覧する手段といえば、かつてはPCだけであった。表示機能のみを担うモニタが存在し、それは画面サイズも15インチ～と比較的大きく、横長の表示がメインとなる。また、ポインティングデバイスであるマウスや、文字入力デバイスであるキーボードが別に存在している。
しかし現在、スマートフォンの普及率が爆発的に伸び、状況が大きく変わった。スマートフォンの表示デバイスは入力デバイスでもあり、縦長と横長の表示が混在し、そして概ね5インチ以下と何より小さい。
これらの中間に存在するタブレット端末は、仕様的にはスマートフォンに似るが、画面サイズは7～10インチが主流となっている。
このようなデバイスの差異を考慮せずにサイト制作を行なうと、問題が起こると容易に推測できる。PCでは問題なく閲覧ができても、スマートフォンでは著しく可読性や機能性が低下する、という構成では発信力やブランド力が低下していく。

技術概要

表示デバイスのサイズ情報がサーバに送信され、その情報をもとに表示を切り替えるコード記述がレスポンシブデザインの骨子となる。画面サイズに応じカラム数が増減したり、連続して表示される画像の改行位置が変わったりといった手法が多いが、中にはボタンの形状やコンテンツの位置関係といった箇所まで変えてしまう場合もある。
表現内容は様々だが、cssでこうした変化が付けられるようにhtmlでidやclassを定義することで実現している。別の言語を使うわけでもなく、未学習のタグやプロパティを大量に使うわけでもない。デバイスに対する理解に基づく先人の優れたアイデアで生み出された、素晴らしい技術である。

2つの手法

固定レイアウトと可変レイアウトという、2通りの手法が存在する。

固定レイアウト

固定レイアウトはタブレット用の画面サイズの幅をある程度の範囲で指定し、それ以下をスマートフォン用、それ以上をPC用として区切りを設ける手法である。表示デバイスのサイズがこの区切りを往来するたびに、それぞれに指定したcssが切り替わる格好だ。サンプル画像はこの可変レイアウトで私が作ったサイトである。

可変レイアウト

一方、可変レイアウトにはこうした区切りはなく、表示デバイスの大きさが常に保持された形で表示形態を変えるcssが記述される。例えば100pxの写真を10枚floatさせているとする。この時、表示デバイスの横幅300pxを超えれば3枚の画像が、400pxを超えれば4枚の画像が並ぶといった具合である。カラム構成を持たないサイトでの効果が高いが、半端な表示デバイスでの閲覧がない限り無意味である、という弱点も持つ。

感想

レスポンシブデザインの概念を初めて知ったときは、てっきり何か新たな言語や枠組みによって実現しているのだと勘違いをしていた。しかし、実際は私が今まで学習してきたような内容の組み合わせでレスポンシブを実現していることに感動を覚えた(記述については次回以降触れる)。こうした先人の知恵に容易に触れられるというのは大変恵まれていることであり、感謝するとともに自分もいつかこうした発信を生み出し業界に貢献したと感じた。