HTML5のレスポンシブ対応とは？Webデザインにおける応答性の重要性を解説

HTML5は、最新かつ人気の高いWebデザイン言語として、デザイン業界に大きな変革をもたらしました。従来のHTMLと比較したとき、HTML5を特別な存在にしている最大の要因こそが「レスポンシブ（応答性）」です。

Webページのレスポンシブ性とは、ページがブラウザ上に読み込まれた後、閲覧に使われたデバイス（PC、スマートフォン、タブレットなど）に応じて、適切な出力・表示を行う能力のことを指します。

旧来のHTMLには多くの制約があり、それが新バージョン誕生のきっかけとなりました。当時のWebデザイナーには、変化するテクノロジーに合わせて柔軟にページを作り込む自由度がなかったのです。

最新のテクノロジーでは、ユーザーはデスクトップPC、ノートPC、スマートフォン、iPadなど、さまざまなデバイスからWebページへアクセスします。しかも、これらのデバイスはそれぞれ画面サイズが異なります。デザイナーたちは「すべての端末にフィットするソリューション」を求めており、その答えとして登場したのがHTML5でした。

リキッドレイアウト

HTML5は、HTML・CSS・JavaScriptを組み合わせた技術体系です。これにより、水のような流動的で柔軟なレイアウトを持つWebページを作成できます。水が容器の形に合わせて形を変えるように、リキッドレイアウトではコンテンツを指定されたコンテナの中で自在に配置できます。同じWebサイトでも、iPadで開けばその画面サイズに合わせて調整され、スマートフォンで同じURLにアクセスすれば、その画面幅に収まるように表示されます。

もう一つ、デザイナーたちが抱えていた課題が「コンテンツの出し分け」でした。モバイル画面とノートPCの画面で、それぞれ異なるコンテンツを表示したい場合はどうすればよいのでしょうか。この背景にある心理的な理論を、ごく簡単な例で説明しましょう。あなたがオフィスにいて、チームが突然外でのランチ会を計画したとします。あなたはスマートフォンを取り出し、近くのレストランを探すWebページ（ZomatoやDineoutなど）を開き、条件で絞り込み、要件に最も合うお店を選ぶでしょう。

一方、ランチ会が「今週末」に予定されている場合はどうでしょうか。この場合、あなたはおそらくノートPCを開き、同じサイトのページをじっくり眺め、特典やオプションなどを確認することになります。

この例からわかるのは、モバイルでWebページを開くユーザーは多くの場合急いでいて、デザインをじっくり鑑賞する時間がないということです。こうしたユーザーは、洗練されたUIよりも機能性を重視します。しかし、同じページをノートPCやデスクトップのブラウザで見る場合、ユーザーにはデザインの細部を楽しむ余裕があるかもしれません。

レスポンシブ対応により、Webデザイナーはページを伸縮させてデバイスの画面領域にフィットさせたり、画像やタグを表示・非表示にしたりすることができます。

レスポンシブWebデザイン（RWD）とは、ユーザーのデバイスの画面解像度に応じてレイアウトを調整しながらページを開発するという概念です。これによりデザイナーはレイアウトを調整し、営業時間、電話番号、アクセス方法、メニューへのリンクといった重要情報を先に提示できます。一方、デスクトップで見るレストランのページには、スマホで閲覧中には気に留めなかった装飾や付加機能がすべて揃っている、というわけです。

RWDのレイアウトは、ピクセルやポイントのような固定値ではなく、emやパーセントといった可変的な（リキッドな）パラメータを使って構築されます。

ページにレスポンシブ性を持たせるためには、ページの構造を見直し、HTML5の基本概念を取り入れる必要があります。HTML5でコードを書く際の基本ガイドラインは以下の通りです。

• コンテンツはHTMLファイルに記述する
• 見た目と配置はCSSファイルに記述する
• 検証（バリデーション）はJavaScriptファイルに記述する

つまり、レスポンシブを実現するには、デバイスの画面サイズの変化に応じてCSSファイルを差し替えるだけでよく、HTMLページ内のコンテンツ自体はそのまま維持できるのです。

RWDの戦略

レスポンシブWebデザインでは、従来の「グレースフルデグラデーション（Graceful Degradation）」ではなく、「プログレッシブエンハンスメント（Progressive Enhancement）」という手法が採用されます。

グレースフルデグラデーションは、最新かつ最も高性能なブラウザ向けにWebページを構築することを重視するアプローチです。その後、古いブラウザ向けのサポートも提供されますが、ある程度の不具合は織り込み済みとなります。

一方、プログレッシブエンハンスメントはブラウザではなくコンテンツに焦点を当てます。この概念は「コンテンツ起点（コンテンツアウト）」のアプローチと捉えることができます。たとえば、ピーナッツ入りのM&M'sチョコレートを思い浮かべてください。

• ピーナッツ：リッチなセマンティックHTMLでマークアップされたコンテンツ
• コーティング：クリーミーで豊かなCSS

そして、ハードキャンディの殻にあたるのが、さらに追加されるJavaScriptです。

RWDフレームワーク

HTML5フレームワークとは、あらかじめ作成された再利用可能なCSS・JSファイルとダミーテキストを含むテンプレートのことです。これらは、駆け出しの開発者が基本デザインから素早くスタートできるよう支援してくれます。レイアウトは定義済みで、デザインも用意されています。

レスポンシブ対応を実現するためのフレームワークは市場に多数存在します。中でも最も人気があり、導入が簡単なのがTwitter Bootstrapです。その他にも、Foundation、Skeleton、Boilerplate、Kickstartなど数多くのフレームワークがあります。これらの多くは、初期レイアウト開発のベースとしてグリッドシステムを採用しています。

Twitter Bootstrapはモバイルファーストのアプローチを採用しており、無料で利用でき、インストールも簡単です。汎用的なCSSファイルがパッケージに含まれており、Webページ上のほとんどの要素やコントロールのデザインをサポートします。さまざまな種類のレイアウトが用意されており、Webページ構築に役立ちます。

レスポンシブWebデザインは今や最も需要の高い技術であり、徐々にあらゆるWebサイトにとって標準的な要件となりつつあります。実装に関する豊富なオンラインサポートが存在し、実際に試せる多彩なツールも揃っています。