レスポンシブWebデザイン

Webサイトの標準形はデスクトップPC専用からマルチデバイス前提へ

サービス概要

Webサイトへのアクセスに用いられるデバイスは、デスクトップPCやノートブックPCばかりではありません。携帯電話はもちろん、近年急速に普及の進んでいるスマートフォンやタブレット型デバイスでWebサイトを利用することは、既に一般化しています。また今後、Webブラウザを搭載した電子ブックリーダーやテレビが普及すれば、Web閲覧デバイスの多様化に一層拍車がかかることになります。

個々のWeb閲覧デバイスは、それぞれに特性が異なります。ハードウエアについては処理能力（CPUやメモリ）、スクリーンの大きさ、キーボードやマウスの有無といった入力方式に違いがあります。ソフトウエアについても搭載しているプラットフォーム、OSやWebブラウザごとに相違があり、また使用する通信インフラについていえば、Wi-Fiか3G回線かで通信速度、ひいてはWebページの表示速度は大きく異なります。

かつて、デスクトップ／ノートブックPCからのアクセスが大半を占めていた時代には、まずデスクトップPCを前提にそれ専用のサイトを構築し、そのサブセットとして携帯サイトやスマートフォン専用サイトをつくり、サイトの一部を特定のデバイス向けに最適化する手法が多く採られてきました。しかし、近年のWeb閲覧デバイスの多様化のスピードはあまりに速く、そのような手法ではWeb閲覧デバイス間にある特性の違いに対応しにくくなってきています。

そうした環境変化のなかから生まれたのが「モバイルファースト」という理念であり、また「レスポンシブWebデザイン」という発想です。モバイルというコンテキストを踏まえてまずデザインを行い、デスクトップ向けにはそれを拡張するかたちでデザインを行う、というのがモバイルファーストの考え方です。レスポンシブWebデザインについては、その提唱者であるEthan Marcotte氏によれば

フレキシブルでグリッドベースのレイアウト
フレキシブルな画像やメディア
CSS3仕様のいちモジュールであるメディアクエリーの使用

の三つの要件を満たしたものがレスポンシブWebデザインとされています。これにより、モバイルデバイスであれデスクトップデバイスであれ、そのデバイスがどのような大きさのスクリーンを備えていようとも、一定の見やすさ・使いやすさを提供することが可能になります。

※ レスポンシブWebデザインを採用したサイトでは、多くの場合、モバイルに特化してデザインされた最適化サイトよりも、ページの表示速度は遅くなりがちです。これは、さまざまなデバイスを前提とした画像やスタイルシートなどを使うためです。しかし、レスポンシブWebデザインはモバイル対応ではなく、マルチデバイス対応のいち手法であり、両者では目的・動機の異なる点に注意が必要です。

サービス詳細

レスポンシブWebデザインの考え方に基づいて新規にサイトを構築、または既存サイトの一部のリデザインを行います。特定のデバイス向けの最適化手法ではなく、不特定のデバイス向けの汎用化手法であり、さまざまな大きさのスクリーンをもつ既存のデバイスに対応できるだけではなく、今後登場する未知のデバイス（のスクリーン）に対しても、対応しやすくなります。

ワンソース・マルチユース

「ワンソース・マルチユース」の考え方と同じく、単一のHTMLファイル、単一のコードベースでさまざまなデバイスに対応することになります。さまざまな要因からCMSのような仕組みを導入することが難しかったり、あるいはデバイスごとに最適化したサイトを複数運用することが難しいWebサイトにおいては特に、運用コストを抑えたマルチデバイス対応が実現できます。

CSS3の積極的活用

レスポンシブWebデザインの要件のひとつに、メディアクエリーの使用があります。これは、デバイスのもつ表示スクリーンの特性に応じ、コンテンツに適用するスタイルシートを調整するための仕様です。メディアクエリーに限らず、レスポンシブWebデザインにおいては、モバイルの通信環境においても可能な限り快適な表示を提供するために、積極的にCSS3を活用することで装飾のための画像点数を減らします。

サービスフロー

通例のPCサイト構築の流れと大きくは変わりません。ただし、モバイルファーストの理念を取り入れ、掲載するコンテンツや情報構造については、モバイルのコンテキストの踏まえた企画・設計を行います。また、どのようなスクリーンサイズに対しどのようなレイアウトを提供するか、またレイアウトを切り替える条件をどう設けるかも、レスポンシブWebデザイン特有の要件として検討プロセスが必要です。

検品についてはスマートフォン対応と同様、より良いユーザー体験を提供するために実機検証は必須とし、ビジュアルデザインの段階から可能な限り実機検証を実施いたします。ただし、どのデバイス上のどのブラウザを検品に用いるかについては、より広範な検討が必要になります。