レスポンシブWebデザインについて

CSS2012年12月15日

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

レスポンシブWebデザインとは、PC、スマホ、タブレットなど異なるスクリーンサイズにおいて、HTMLを1ソースでスタイルを変えることによりそれぞれのデバイスにおいて柔軟にレイアウトやデザインを調整する手法のことを言います。

レスポンシブWebデザインを構成する技術

主にレスポンシブWebデザインは下記の3つの技術的な要素意で実装されることになります。

メディアクエリー

レスポンシブWebデザインでは、スクリーンの幅やデバイスの向きなどによって適用するスタイルを切り替えます。

フルードグリッド

従来のグリッドデザインに加え、ブラウザの幅が変わってもレイアウトを維持ししたまま柔軟に可変していくフルードデザインを組み合わせた手法を指します。
レスポンシブWebデザインでは、pxベースで設計・実装した後、値を%に変換してフルードデザインに変更していきます。

フルードイメージ

ブラウザの横幅に追随して画像のサイズを拡大・縮小していく手法を指します。これはCSSのみで実現・実装することが可能であり、イギリスのリチャード・ルター氏によって提唱された手法になります。

モバイルファーストの考え方

モバイルファーストとは、モバイルを起点としてWebサイトの設計を考えよう、というコンセプトのもと、ルーク・ウロブルスキ氏が提唱された考え方です。
従来のPC向けのWebサイトを作り終えてからモバイル版を後で考えるやり方とは、まったく異なるアプローチとなります。

モバイルファーストを提唱するのは以下の3つの理由があると、ルーク・ウロブルスキ氏は唱えています。

「成長」＝機会

iPhoneの世界的な大ヒットやAndroid端末の普及により、スマートフォンからのWebアクセスが急増しており、2015年にはPCの利用者をモバイル端末が超えるという予想もあり、モバイル端末の市場自体、爆発的な成長を続けています。そこには、モバイル端末の販売のみならず関連商品を販売するなどのあらゆる「機会」が生まれるのです。

「制約」＝集中

スマホに代表されるモバイル端末は、PCに比べてスクリーンサイズが限られています。ユーザーが1画面から得られる情報は必然的に少なくなるため、ユーザーが本当に必要としている情報を集約したうえで表示する必要があります。そのため、本当に必要なコンテンツはどれなのか、といったコンテンツの取捨選択が必要になってきます。

「機能」＝能力

例を挙げるとスマートフォンにはモーションセンサーがあり、端末の傾きや移動時の加速度によって表示や動作を変えられます。こうした機能はモバイル端末特有のもので、PCにはありません。

レスポンシブWebデザインのメリットとデメリット

以下、賛否両論あるかと思いますがレスポンシブWebデザインを構築する上でのメリット、デメリットを挙げてみました。

メリット

ワンソースであらゆるデバイスに対応することができるため、運用フェーズに入った後は作業工数が大幅に軽減されます。
構築時に本当に必要なコンテンツ、不必要なコンテンツを入念に精査することでユーザーに十二分に配慮したのコンテンツを提供することができます。
あらゆるデバイスに対し統一したURLを提供できるため、Googleのアルゴリズムとも親和性を図ることが可能です。
（Googleは公式にレスポンシブWebデザインを推奨しています）

デメリット

前述のメリットで「作業工数が大幅に軽減」と書きましたが、サイト内のモジュール（デザインパーツ）の追加・変更が頻繁に発生するサイトにおいてはこの限りではありません。
リッチなコンテンツやスマホライクなUIを大量に必要とするコンテンツの場合は、レスポンシブWebデザインは不向きです。
別個にサイトを作った方が逆にユーザーにとってもコンテンツ制作側にとってよい場合があるため、十分な検討が必要です。

最後に

レスポンシブWebデザインはあらゆるデバイスに「最適化」といった言い方がよく使われていますが、実際のところは「最適化」ではなく「汎用化」であると自分は考えています。
もっと噛み砕いた言い方をするなら、レスポンシブWebデザインはあらゆるデバイスにおいて「そこそこ」の使い勝手を提供するものです。

また、スクリーンサイズによって画像の出しわけをするのか、スマホでテーブルを表示した場合はどうするのか、などまだまだレスポンシブWebデザインは発展途上の面もあります。
制作者としては非常に有益な面も多いので、どんどん業界に浸透していくといいですね。

この記事を読んでいる方にオススメの記事

「CSS」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。