株式会社コプロシステム

お問い合わせ

2013年6月28日

レスポンシブWebデザインのメリット・デメリットをわかりやすく!解説

  • このエントリーをはてなブックマークに追加

こんにちは、コプロシステムWebデザイングループの石川です。

このTips*Blogでも今まで何回か取り上げてきた「レスポンシブWebデザイン」というテーマですが、
今回のエントリーでは、そのメリット・デメリットについてまとめてみました。

Web関係の仕事を生業としている方にとってはいまさら感のある話題なのは承知の上なのですが、
Web関係の仕事に直接かかわらない人からも「レスポンシブWebデザイン」のワードを聞くことが最近多かったのと、そういう方にメリット・デメリットをちゃんと説明するためにも、わかりやすい図解入りでまとめてみました。
(今回のイラストは、我がチームの早水が担当!)

関連記事

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

前知識として、念のため。

PC用サイトとスマートフォン(以下スマホ)用サイトを用意する場合、↓このように、ユーザが閲覧しているOSやブラウザ(ユーザーエージェント)を判別して、サーバーサイドプログラムで表示するHTMLを振り分けるという手法が一般的です。

この人はパソコンで閲覧しているから → パソコン用のHTMLを表示
この人はiPhoneで閲覧しているから → スマホ用のHTMLを表示
というように、複数のHTMLを割り振っています。

それに対しレスポンシブWebデザインは、

OSやブラウザを判断基準にしているのではなく、↓ブラウザの横幅サイズを判断基準にして、CSS(スタイルシート)を切り替えている手法です。

この人は1200ピクセルのブラウザで見てるから → ○○という装飾
この人は480ピクセルのブラウザで見てるから → ■■という装飾
といった感じで、1つのHTMLを使用します。

メリット1 ワンソース管理!

上図の通り、1つのHTML(ワンソース)を管理します。
例えば、サイト完成後のメンテナンスで、テキスト修正や画像差し替え程度の小規模メンテナンスなら作業時間も減りますし、ミスのリスクも減ります。

※レイアウト変更やコンテンツまるごと追加という中規模~大規模のメンテナンスなら話は別です。

メリット2 SEOに有効的!

Googleは、サイトの構築手法の一つとしてレスポンシブWebデザインを推奨しているようで、「Google ウェブマスター向け公式ブログ: Google がお勧めするスマホに最適化されたウェブサイトの構築方法」では下記のように述べています。

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

つまり、↓こういうことだと理解しています。

メリット3 URLが統一されることでシェアがしやすく!

例えば、レスポンシブWebデザインではなく、PC用ページとスマホ用ページを用意しているサイトがあったとします。

ユーザーAさんが、そのサイトをPCで閲覧中、TwitterでそのサイトのURL(PC用)を共有しました。

オフィスで仕事中のBさんは、PCでAさんのツイートを見てURLをクリック。
→ PCサイトを開き、特にストレスもなく閲覧ができました◎

電車で移動中のCさんは、スマホでAさんのツイートを見てURLをクリック。
→ スマホでPCサイト開き、操作にストレスを感じてすぐ離脱×

というようなことが起こってしまい、「PC用とかスマホ用とか分けないで...」となる可能性がありますが、レスポンシブWebデザインではブラウザの横幅サイズを判断基準にできるため、表示が自然と切り替えられ上記のようなことが起こりません。

メリット2で引用したGoogle公式ブログでも、

PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり...

と書かれています。

デメリット1
見えないだけで存在してるんです...だからスマホだと重くなるかも

例えば、
ブラウザ横幅が1200ピクセル(PCと仮定)の時は、大きい画像を表示
ブラウザ横幅が480ピクセル(スマホと仮定)の時は、大きい画像を非表示
というように作成するとします。

切り替えの要であるCSS(スタイルシート)上は、
480pxの時だけ「display:none;(非表示)」と書いたとします。

でもHTML上は、「img src="xxx.jpg"」という記述自体が非表示になるわけではありません。HTMLソース上に存在するのは変わらないので、ユーザが使用しているブラウザはその画像を当然読み込もうとします。
もしサイズが重い画像を使用していたら、スマホサイトの表示速度は著しく落ちてしまいます。

スマホの回線速度もだいぶ速くなってきたとはいえ、まだまだこれからの印象です。
少なくとも私は、LTEですが残念ながらそこまで恩恵を実感できていません...。
なので、注意が必要です。

デメリット2
構築が複雑になる=構築に時間がかかる=費用が増える

切り替えるレイアウト毎にデザインを用意したり、
HTMLコーディングの構築が複雑だったり、
チェックが増えたり
など従来の制作方法と比較して設計段階でも構築段階でも複雑になるため、従来より費用が増えてしまうケースもあります。

その他のデメリット

その他にも、

・スマホやタブレットであえてPCサイトが見たい場合でも、見ることができない

・ちゃんと設計しないと、タブレットのたて向きと横向きとで全然違うレイアウトになって、操作に混乱を招いてしまう

・CSS3だけだとフィーチャーフォン(ガラケー)に対応できない

などが挙げられます。

まとめ

数年前に彗星の如く現れたレスポンシブWebデザイン。

素晴らしい手法の一つだとは思いますが、あくまで構築手法の一つです。上記のように万能というわけではありません。
案件の内容によっては、その他の手法と組み合わせてやっていかなければいけないでしょう。

弊社のサイトで採用した理由としては、

  • デメリット面よりもメリット面の比率が大きかった
  • 新しいことにチャレンジしたかった

という理由があります。
リニューアルしてからまだ1ヶ月ちょっとしか経っていませんが、他の施策(コンテンツ発信力強化、ソーシャルメディア活用など)と合わせてアクセス数や問い合わせ数をかなり伸ばすことができたので、採用してよかったと感じてます。

レスポンシブWebデザインを推奨 or 批判するものではなく、
Web制作に関わることになった方々がこのエントリーを思い出して、検討材料の一つとして使ってもらえたらな と思います。

(文・石川 イラスト・早水)

参照したサイト



  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Webデザイン」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP