PR

 レスポンシブ(呼応する、すぐ反応する)Webデザインとは、表示サイズの異なるディスプレイ環境に合わせてWebページのデザインを可変にする実装方法のことです。具体的には、CSSレベル3の「Media Queries」というプロパティを記述する方法で実装します。これで表示領域のピクセルサイズごとにプロパティを出し分けて、大きい画面なら3カラム、スマートフォン程度のサイズなら1カラム、のようにレイアウトスタイルをダイナミックに変更するのです。HTMLのMeta要素などで、ブラウザ側の拡大率を利用してディスプレイにレイアウトを収める操作を併用します。

レスポンシブな手法で実装したランディングページ
レスポンシブな手法で実装したランディングページ
[画像のクリックで拡大表示]

 こうした実装手法は広まってきています。Internet Explorer9の普及でCSS3のカバー率が向上したことや、スマートフォンとPCのように異なる表示環境でコンテンツを閲覧する機会が増えたことなどが背景にあります。私の業務でも、レスポンシブな実装でコンテンツを作ることが増えてきました。

 もっとも、制作の世界では、(レスポンシブのように)1つのHTMLをスマートフォンとPCの両方の環境で使えるように作らずに、それぞれの最適化したコンテンツを個別に作ればよいのではないか、といった議論があります。しかしレスポンシブを採用する大きな理由があります。

 まず、ページを個別に作ると、コンテンツに唯一のURLを与えられません。レスポンシブ実装はコンテンツに唯一のURLが与えられるという点でも優れています。Googleのような検索システムからコンテンツを確実にたどってもらうためには唯一のURLが望ましいことは明らかです。「リダイレクト」機能を使うと、アクセス元の端末に合わせてURLを変えられますが、ブラウザの履歴をたどりにくくするデメリッットがあります。リダイレクトに頼らずコンテンツを届ける方法は、いまのところレスポンシブデザインだけです。

 そして何よりも、レスポンシブのメリットは「コンバージョン率」を上げられることです。