「レスポンシブWEBデザイン」のメリット・デメリット - 岡山のホームページ制作会社

東京と福岡で桜が開花したことを伝えるニュースを横目に見ながら、今日もブログ執筆に勤しむ3月…4月初旬には、ここ岡山でも見頃を迎える予想が出ているということで、今年も旭川河川敷ではお花見を楽しむ方々で賑わう姿が見られそうな今日この頃、皆さまはいかがお過ごしでしょうか？

こんにちは、きびだんごの制作担当・濱崎です。

「レスポンシブ対応＝レスポンシブWEBデザイン」についてのおさらい

前回、「今こそ知っておいてもらいたい「レスポンシブ対応」のこと」の記事内でも触れましたが、ここで「レスポンシブ対応＝レスポンシブWEBデザイン」について、もう一度おさらいしてみましょう。

Google社では、「レスポンシブWEBデザイン」のことを次のように説明しています。

レスポンシブウェブデザイン（RWD）は、サーバーからどのデバイスに対しても常に同じHTMLコードを配信し、CSSを使用して各デバイスでのページのレンダリングを変える設定方法です。
すべてのGooglebotユーザーエージェントがページとそのアセット（CSS、JavaScript、画像）をクロールできる状態であれば、Googleのアルゴリズムによってこの設定が自動的に検出されます。
（Google Developers）

つまり…

「レスポンシブWEBデザイン」とは、パソコン（以下、PC）やスマートフォン（以下、スマホ）、タブレットなどの端末でWEBサイトを閲覧する際に、そのWEBサイトのページの構成要素として読み込まれる単一のHTMLファイルを、CSSと呼ばれる記述言語を駆使することで、端末によって異なる複数の画面サイズに適応して表示を変え、最適な外観や使い勝手を提供するために設計されたデザイン手法です。
「レスポンシブWEBデザイン」に対応（「レスポンシブ対応」）していることは、すべてのGooglebotユーザーエージェントがクロールできる状態にあれば、Googleのアルゴリズムによって自動的に検出するので、特段何もしなくも大丈夫。

…ということなのです。

その利便性から、今やスマホは多くの人々が日常生活を送る上で手放せない存在となり、スマホによるインターネット接続率が8割に迫る中で、Google社が「モバイルフレンドリーアップデート」や「モバイルファーストインデックス」などの導入によるモバイル重視の姿勢を明らかにしていることからも、「レスポンシブWEBデザイン」は今や必須条件である、と言い切っても齟齬はないでしょう。

今回は、そんな『「レスポンシブWEBデザイン」のメリット・デメリット』に焦点を当てます。

「レスポンシブWEBデザイン」のメリット

Google社では『レスポンシブデザインにする理由』として、「レスポンシブWEBデザイン」をおすすめする理由に以下のものを挙げています。

URLが1つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。
対応するパソコン用ページやモバイル用ページが存在することをGoogleのアルゴリズムに伝える必要がなく、ページへのインデックスプロパティの割り当てが正確に行われます。
同じコンテンツのページをいくつも維持管理する手間が省けます。
モバイルサイトでよくある誤りに陥る可能性を抑えることができます。
ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。ユーザーエージェントに基づくリダイレクトはエラーが発生しやすく、ユーザーエクスペリエンスを損なうおそれがあります（詳しくは、ユーザーエージェントを正しく検出するをご覧ください）。
Googlebotがサイトをクロールするために必要なリソースを節約できます。同じコンテンツのページが複数存在すると、別々のGooglebotユーザーエージェントが複数回クロールしてすべてのバージョンを取得する必要があります。一方、レスポンシブウェブデザインの場合は、1つのGooglebotユーザーエージェントがページを一度クロールするだけで済みます。Googleによるクロールの効率が上がると、サイト内のより多くのコンテンツがインデックスに登録され、適切な間隔で更新されることにつながります。
（Google Developers）

そこで、この『レスポンシブデザインにする理由』を参考に、「レスポンシブWEBデザイン」のメリットを紐解いてみましょう。

サイトの運用・管理に係る手間の省力化とミスの抑制
WEBサイトのページの構成要素として読み込まれるHTMLファイルが1つなので、情報の修正や更新などの書き換え作業が1回だけで済み、かつPCやスマホなどの複数の端末で同じ情報が反映され、端末ごとに書き換える手間を省くことができます。
また、別途モバイル向けのWEBサイトを構築していた場合によくある、修正点の反映漏れ・リンク切れなどのユーザーにとって不利益なミスが起こる可能性を軽減することにもつながります。
ソーシャルメディアを通じた露出度の向上
「ソーシャルメディアの浸透とスマホ対応の必要性」の記事内でも触れていますが、ソーシャルメディアの存在はもはや無視できないものとなっています。
URLが1つであることは、簡単に「シェア」でき、それだけ多くのユーザーに自社の商品やサービスなどの情報を届けることが可能になります。
モバイル検索における正当なインデックスが期待できる
モバイル向けに最適化されたWEBサイトを高く評価し検索結果に反映する「モバイルフレンドリー」と、モバイルを主軸・PCを副軸に評価・インデックスする「モバイルファーストインデックス」に対応することになり、それはユーザーエクスペリエンスの向上を目指すGoogle社が提示する指針にも則したものにもなるので、正当なインデックスが期待できます。

「レスポンシブWEBデザイン」のデメリット

しかしながら、この「レスポンシブWEBデザイン」、メリットばかりではありません…デメリットもあります。

スマホでの表示に時間がかかる
デバイスに関わらずHTMLファイルを1つにすることで、その恩恵を受けているわけですが、返せばPCでもスマホでも同じデータを読み込ませることになるので、そのデータ量も長大となるケースが多く、その中にはスマホでは表示しないデータも含まれることになり、必然的に読み込みが完了して表示されるまでの時間がかかりがちです。
工数が膨らむ
お手元のスマホとPCの画面を見比べていただければわかると思いますが、サイズ・情報量・縦横比はもちろん、操作方法も異なります。そうなれば、各端末ごとに最適なコンテンツ構成・レイアウト・インターフェイスを設計し、デザイン・コーディングをするため、おのずと工数も膨らみます。
デザインやレイアウトに制約がある
WEBサイトのデザインやレイアウトを実現するための根幹となるHTMLファイルが1つだけなので、端末ごとに大幅にデザイン・レイアウトが異なるような見せ方をすることができません。