レスポンシブWEBデザインのメリット、デメリットとは？
最終更新日：2023/11/17
「レスポンシブWEBデザインって耳にすることは多いし、見かけることも多くなったけど、うちはBtoBだから関係ないんだよ」というお声はよく聞くものです。
が、ターゲットユーザーがスマートフォンを使ってWEBサイトを閲覧してくれるかどうか以外にも、判断基準にしてほしいメリットとデメリットが、レスポンシブサイトにはたくさんあるんです。
今回は、当社のレスポンシブWEBデザイン対応事例と併せて、レスポンシブ対応におけるメリットとデメリットをご紹介します。
関連リンク
1. レスポンシブWEBデザインとは
パソコン・スマホ・タブレットなど、閲覧デバイスが増えたことで、ひとつのサイトデザインではWEBサイトが見づらいという傾向が出てきました。
そこで出てきたのがレスポンシブWEBデザインです。さまざまな端末画面が次々と出てくるようになりましたが、そのそれぞれに合わせて単一のHTMLファイルが自動的に最適を図ってWEBサイトのデザインを調整して表示する手法を指します。
従来のWEBサイトは、
パソコンで閲覧 → パソコン用のHTMLでデザイン表示
モバイルで閲覧 → スマホ用のHTMLでデザイン表示
このように、複数のHTMLページを用意して、更新を行っていく必要がありました。
しかし、レスポンシブWEBデザインなら
パソコンで閲覧 → ブラウザの横幅に合わせてレイアウトが自動最適化（例：横幅960px以上はパソコンのレイアウト）
モバイルで閲覧 → ブラウザの横幅に合わせてレイアウトが自動最適化（例：横幅600～959pxはタブレット、480～599pxはスマホ横向き、479px以下はスマホ縦向きのレイアウト）
となります。表示させる部分を閲覧ブラウザの横幅によって、レイアウトが自動最適化してくれるんですね。これがレスポンシブデザインと呼ばれるものとなります。
関連リンク
＞まるでDTPデザインのようなレイアウト。テキストとコンテンツを「重ねる」デザインがトレンド！
2. レスポンシブWEBデザインのメリット
１．ワンソース管理が可能
PCサイトとスマホサイトでHTMLが別構築されていないため、サイトのメンテナンス工数を削減することができます。
また、ひとつのHTMLを更新すると、どのデバイスから見た場合でも同じ更新がされている状態になるため、ミスも少なく、修正も容易に行うことができるのがレスポンシブサイトの最大の魅力です。
２．SEOに効果的
検索結果の表示順位に関わる、判断基準のGoogleアルゴリズムに4月大きな改訂がありました。
それが【モバイルフレンドリー】です。
モバイルフレンドリーとは？
WEBサイトをモバイル端末での表示に最適化＝スマホ対応することいいます。
モバイルフレンドリーに対応しているWEBサイトは、拡大しなくても読みやすいテキストサイズ、横スクロールの必要がない、リンクやボタンがタップしやすい、Flashを使用していないなどの項目を満たしている必要があります。
レスポンシブ対応していないサイト構築だと、HTMLがPC用とスマホ用でそれぞれあるため、Googleクローラーが「これは不正なミラーサイトか？」と判断に迷ってしまうことがあります。
そうするとそのWEBサイトの評価はあがりづらくなってしまうことがあります。
クローラーが迷わないためにも、きちんとスマホに最適化しているレスポンシブサイトの構築が必要でしょう。
また、モバイルフレンドリーかどうかを簡単にチェックできるツールがGoogleから展開されているので試してみてはいかがでしょうか。
Google モバイルフレンドリーテスト：https://search.google.com/test/mobile-friendly
３．将来的に出てくるデバイスにも対応可能
端末の画面サイズに依存しないため、今後でてくるであろう端末に対しても、しっかりとしたユーザビリティの上で表示させることが可能です。
レスポンシブWEBデザインは、その表示の横幅によってデザインを切り替えることになるため、新たなデバイスの登場にあわてて対応する必要が少なくなるでしょう。
3. レスポンシブWEBデザインのデメリット
１．スマホ表示が重くなる
たとえば、横幅1200ピクセルのときは【××画像】を表示、480ピクセルのときは【××画像】を非表示、というようにサイト構築するとします。
その場合、もし480ピクセルの非表示時端末だとしても、切り替えのスタイルシート内にはタグが打ちこまれていますので、一旦そのソースを読み込もうとします。
そのために、サイズが重い画像をサイト上で使用していた場合、スマホサイト上では表示速度が落ちてしまうことがあり、レスポンシブサイトのデメリットといえます。
２．構築に工数がかかる
表示させるデバイスごとにレスポンシブ対応のデザインを用意したり、コーディングの構築が複雑になっているため、今までの制作時間と比較すると設計の段階でも構築の段階でも工数が増えます。そうすると、構築コストがレスポンシブサイトの方が高くなってしまいます。
３．デザインに合わせてコンテンツの精査が必要
一般的に、PCサイトは表示画面が大きいため、多くの情報を盛り込んでも問題がありません。
しかし、スマホやタブレット端末になると小さな画面での回遊が必須になるため、ユーザビリティが高くなるようなデザインやコンテンツの構想が必要です。レスポンシブにする場合は、PCで見た場合、スマホで見た場合、など、デバイスごとのコンテンツ精査が必要になります。
４．IE8以下の古いブラウザに対応していない
レスポンシブデザインは古いブラウザを使用している端末には対応しておりません。
そのため、せっかく構築したWEBサイトが思ったような表示をされない端末も当然ながらあります。
また、ガラケーと一般的に呼ばれているフューチャーフォンにも未対応となっています。
4. 実際のレスポンシブ事例を見てみよう
当社のWEB制作でも、もちろんレスポンシブWEBデザインを適応させていただくことが可能です。
今回は、「日本製紙クレシア」様（http://pro.crecia.co.jp/）を事例に、レスポンシブの世界を体感していただければと思います。
標準PCブラウザ
【ラインアップから探す】では、ピックアップ商品と商品種類別の入り口があったり、上部にあるメニューはテキストで横に羅列して配置されている状態ですね。
グローバルメニューが変化
先ほど、上部にテキストで羅列配置してあったメニュー部分が、いわゆる【 ハンバーガーメニュー 】に切り替わっていますね。ここをクリックすると、ホームや商品情報、資料請求などの項目がプルダウン表示されます。
サムネイルの画像やレイアウトの変化
ピックアップ商品だけの表示になり、商品種類別の入り口が非表示になっていますね。下部のお問い合わせからメールニュース登録までのバナーも横に三つ配置されていたのが、縦にデザイン変更されています。
このように、画像が自動的に小さくなったり、配置が換わったり、メニュー表示が変わったりと、ブラウザサイズに合わせてデザインが最適化されます。
これをすべて単一のHTMLで行えるのがレスポンシブデザインとよばれるものです。
5. レスポンシブWEBデザインの作り方
ここでは、デザイナー向けではなくWEBサイトを運用する担当者向けに、レスポンシブWEBデザインがどのように作られるのか、どのような考え方で制作を依頼すれば良いかがわかるように概要をお伝えしていきます。
ブレイクポイントを設定する
上でもご紹介したように、レスポンシブWEBデザインはワンソースで制作するため、デバイスの種類ではなく、表示される幅ごとにレイアウトを決めます。
そこで、決めなければならないのが「ブレイクポイント」。「●px～●pxまではこのレイアウト」のように指定するということです。
パソコン上でレスポンシブサイトを表示させて、ブラウザの幅を少しずつ狭めていくと、あるところからガクンとレイアウト表示が変わります（実際に、上でご紹介した事例のサイトで試してみてください）。
この境界線がブレイクポイントです。
デバイスサイズのトレンドはその時代によって変化しますので、時代に合わせて「パソコンとモバイルで分ける」「パソコンとタブレットとスマホで分ける」などの方針を決め、さらにサイズをpxで指定します。
viewport（ビューポート）を設定する
デバイスごとに見やすい文字の大きさなどを調整するための設定を、HTMLのヘッダにあるmetaタグ内に記述します。
メディアクエリを設定する
上で決めたブレイクポイントごとにデザインを指定するCSS（スタイルシート）を変更するため、メディアクエリを設定します。
方法は2つあります。まず、用意するCSSは一つで、そのなかでメディアクエリを指定る記述を行う方法、もう一つは、CSSをブレイクポイントの数だけ用意し、HTML内でメディアクエリを設定する方法ですが、後者は共通する部分が多いほど二度手間になります。
6. まとめ
レスポンシブWEBデザインがあなたのWEBサイトにとって必要が不必要かはターゲットユーザー層だけで判断するべきではありません。
メリット、デメリットそれぞれをふまえた上で、レスポンシブ対応が必要か考えていただけたらと思います。
また最後に、レスポンシブでもマルチデバイス対応でも、ユーザーに見てもらうためのWEBサイト制作で重要なポイントは下記の3点です。
・どの閲覧デバイスでも、ファーストビューは最重要
・スマホで表示したいこと、PCで表示したいことを整理する
・閲覧デバイスごとに構築の段階での表示テストをする必要がある
以上です！PCからもスマートフォンからも集客が最大化できるように、もう一度サイトの構築を見直してみてはいかがでしょうか？
