「レスポンシブ・デザイン」とは - いまさら聞けないスマートフォン用語

スマートフォンは、携帯電話とコンピュータ両方の顔を持ちます。ですから、スペック表を見れば専門用語のオンパレード……これではおいそれと比較できません。このコーナーでは、そんなスマートフォン関連の用語をやさしく解説します。今回は「レスポンシブ・デザイン」についてです。

＊＊＊

レスポンシブ・デザインとは、表示に使うWEBブラウザの画面サイズに応じてレイアウトを変更させるWEBページの設計を指します。この設計方針に基づき構築されたWEBサイトは、共通のアドレスで運用しつつも、パソコンやスマートフォン、タブレットなど利用する機器の画面サイズに見合ったデザインを適用することができます。

従来のWEBサイトは、パソコン用・スマートフォン用などと複数のページを用意し、アクセスがあるとそれぞれのページに振り分ける動作を行っていました。一方レスポンシブ・デザインで構築されたWEBサイトは、アクセスしてきた機器の画面サイズを確認したうえで、ページデザインや表示するコンテンツを動的に変更します。

運営側のメリットとしては、管理工数の低減が挙げられます。複数のページを管理する必要がなく、メンテナンスの労力を大幅に削減できます。1つのソースを更新すれば、どの機器からアクセスしても同様に更新された状態となるため、スマートフォンとPCでは表示される内容が違う、ということがありません。

同様の効果を発揮する手法として「(スマートフォン)最適化サイト」がありますが、レスポンシブ・デザインでは画面サイズのみで端末の違いを判定することが主眼であり、スマートフォン対応だけが目的ではありません。共通の素材が使われるため、どのような機器で閲覧しても内容が同じという点のほうが重要な意味を持ちます。

レスポンシブ・デザインに基づくWEBサイトかどうかは、パソコンのWEBブラウザでアクセスすれば確認できます。たとえば、アップルのWEBサイトをパソコンのWEBブラウザで開き、ウインドウの状態にしたうえで左右の幅を狭めていくと、ページのレイアウトが自動的に変化してスマートフォン/タブレット風のデザインになることがわかるでしょう。