CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Mckee

Responsive-web-design-devices

弊社でもレスポンシブWebデザインのご依頼が増えてきており、いくつかの案件に関わる中でメリット・デメリットがあることを実感してきました。この機会に、世の中の意見を調べながらメリット・デメリットについてまとめました。まずは「レスポンシブWebデザインとは」からおさらいです。

アイキャッチ画像の作者: Muhammad Rafizeldi (MRafizeldi)
[CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)],
via Wikimedia Commons

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

デバイスの画面サイズ(ブラウザのウィンドウサイズ)に応じて、ページの見た目(レイアウト)を切り替えるデザインのことです。1つのHTMLソースで、複数デバイス(PC、スマートフォン、タブレット)の見た目を実現するものです。

レスポンシブWebデザインを実現する手法

レスポンシブWebデザインは、下記の手法を用いて実現される技術です。
それぞれを簡単に説明します。

Fluid Image (フルードイメージ)

Fluid Image (フルードイメージ)とは、画像サイズをブラウザーのウィンドウ幅にあわせる方法です。ウィンドウサイズに応じて、縦横比を保持したまま拡大・縮小させます。

Fluid Grid (フルードグリッド)

Fluid Grid (フルードグリッド)とは、任意のグリッド(格子状の区切り)に要素を当てはめていく「グリッドデザイン」と、要素を可変にレイアウトする「リキッドレイアウト(可変レイアウト)」と呼ばれる手法が組み合わさったもので、可変なグリッドデザインを「フルードグリッド」といいます。

Media Queries (メディアクエリー)

Media Queries (メディアクエリー)とは、CSS3の機能で、デバイスの状態(表示幅等)を条件に見た目を切り替える技術です。

フレームワーク

最近ではレスポンシブWebデザインを実現するフレームワーク(Twitter BootstrapFoundationなど)が登場しており、それらを利用することで、一から制作しなくても、ある程度工数を抑えてレスポンシブWebデザインが実現できます。GoogleもWeb Starter Kitを発表したばかりです。
ただ、どれも凝ったデザインや動きに対しては独自にカスタマイズが必要となります。

レスポンシブWebデザインの例:Carousel Template · Bootstrap
(Twitter – Bootstrap のデモです。ウィンドウサイズを変更するとレイアウトが変わります)

フレームワークまとめは下記から

メリット

さて、本題のレスポンシブWebデザインのメリット・デメリットです。まずはメリットから。

更新が楽

1つのHTMLファイルで管理できるので、テキスト変更・画像差し替え程度であれば更新は手軽です。

URLをPCとスマホで同一にできる

これによって、リンク・シェアがしやすくなり、SEOにも有効ということになります。
Googleは下記のように述べています。

「PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。」(※1)

ユーザビリティが向上する

ある程度デバイス(ウィンドウサイズ)に合わせた見た目になるので、操作性が向上します。
ショッピングカート等は特にスマホの見た目の有無で操作性が大きく変わるので、離脱率・売上に大きく影響すると思います。

デメリット

続いて、デメリットとして考えられるのは下記の点です。

設計が大変

1つのHTMLファイルで複数のデバイスの表示を実現するには、設計が大切になります。PCとスマホで、どこをどのように画像を切り替えるのか、CSSで対応する箇所・画像にする箇所の関係も、複数デバイスのことを考慮しなくてはならなりません。その分、費用と時間がかかります。設計後、途中で仕様が変更になると、設計し直す箇所が広範囲な場合、再設計はなかなか骨が折れます。

細かいデザインに対応が難しい

ウィンドウサイズによって要素が動くため、閲覧環境によっては細かなデザインに対応しきれない場合があります。

表示が遅くなる場合がある

どうしてもスマホで不要な要素や画像をCSSで非表示にする場合に、見た目上は見えてなくてもHTML上に存在するという状況があります。例えば非表示にした箇所に画像があった場合、見えない画像をサーバから取得しているため、その分表示に時間がかかります。

ユーザービリティが低下する面がある

メディアクエリーが画面サイズでレイアウトを決定してしまうため、ブラウザの拡大機能に反応してレイアウトが変わってしまったり、スマホでPCの見た目のまま閲覧できない等に、ユーザーが困ることがありそうです。

各デバイス専用に最適化されたデザインには敵わない場合がある

レスポンシブWebデザインによって、各デバイス毎にそれなりの見た目は提供できますが、最適にデザインされた見た目には敵いません。そのような見た目をレスポンシブWebデザインで追い求めると、ページのコンテンツによっては無理が出てきたり、レスポンシブWebデザインのメリットが損なわれる場合があります。

まとめ

今回挙げたデメリットは、技術と時間と気合でカバーできるかもしれませんが、あくまでもレスポンシブWebデザインを気軽に使おうとした場合には、デメリットとなると思います。本当に基本的なことですが、レスポンシブWebデザインにはメリットとデメリットがあるので、それらを考慮して使用するかどうか検討することが大切です。レスポンシブWebデザインが合わない案件の場合、費用と時間が成果に見合わない結果になってしまうので、メリットが十分に得られる場合にのみ使用するのがオススメです。決して流行りだからと選択することのないように!
レスポンシブWebデザインを取り巻く技術は日々進化を続けています。今後も状況が変わっていくと思うので、メリット・デメリットについても変化するかもしれませんが、どのような状況でもその技術についてを良く理解しておくことが大切だと感じました。引き続き勉強してまいります。

参考・出典

Subscribe:
pagetop