スマートフォンに最適化されたサイト構築手法としてGoogleはレスポンシブ・WEBデザイン（以下RWD）を推奨しています。
また2015年4月12日以降「スマホ対応できているかどうか」を検索結果のランキング要素の評価基準とする「モバイルフレンドリー」というアルゴリズムが追加されました。
参考：Googleが”スマホ対応できているか”を検索結果に反映することを発表
近年、RWDを採用したECサイトが急速に普及していますが、それはサイト運用担当者・ユーザ双方にメリットがあるからに他なりません。そこで「なぜRWDなのか？」について解説するとともに改めてメリット・デメリットについてお伝えします。
レスポンシブ・WEBデザインのメリット
1.「なぜRWDなのか？」～RWDはGoogleが推奨するデザインパターン～
モバイルサイトを構築する方法としてGoogleは次に引用する３つの構成をサポートしています。
- レスポンシブ・WEBデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
- すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供するサイト。
- モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。
参考：Googleがお勧めするスマートフォンに最適化されたWEBサイトの構築方法
RWDの特徴は上記で言及する
- すべてのデバイスに対し単一のURLで提供
- １つのHTML・1つのCSSですべてのデバイスの表示する
いう点となりますが、これらの特徴が以下2と3で説明するRWDの最大のメリットとなります。
2.ワンソース管理が可能
RWDでは1つのHTML（コンテンツ）、1つのCSS（デザイン）でサイトの管理が可能です。
デバイスは異なってもコンテンツ（HTML）・デザインのコード（CSS）は同じなので、内容の修正・更新が１ファイルで済み、同じコンテンツのページをいくつも維持管理する手間が省けます。
モバイル用サイトとPC用サイトが別々の場合、例えばLPを作るにしても、モバイル用の画像やHTML、PC用の画像やHTMLをそれぞれ用意する必要があります。
またそれらの更新作業も別で維持管理しなければならず工数がほぼ2倍となるため、もはや2つのサイトを管理しているのと変わりません。
３.単一のURLでの運用によるSEO上の効果・リダイレクト設定が不要
PC用のページとスマホ用のページを単一のURLで運用できるためユーザーにとってはシェアやリンクが簡単になります。
モバイル用サイトとPCサイトでURLが違うなどマルチデバイスで異なるURLが２つ以上ある場合、どちらをシェアしたらよいのか分かりにくくなってしまい不便です。
さらにスマートフォンでスマホ用URLのサイトをTwitterでシェアし、それをPCでTwitterをみたユーザーがアクセスした場合に、サイト側で何も設定していなければPCユーザーはスマホ用サイトをPCで見るという不都合が生じ兼ねません。
またこの時に、ユーザーの端末に応じてリダイレクト設定が必要となりますがリダイレクトが発生することにより、読込速度の遅延や、ヒューマンエラーによるリダイレクトミスの発生する可能性もあります。ページ数が多いサイトほど設定や管理の手間も膨大となってしまいます。
レスポンシブウェブデザインで単一URLで運用することでミスを防ぐことが可能です。
Googleのbotにとってもメリット
またGoogleのbot（インターネット上にあるサイトを探しまわり、Googleの検索インデックスに登録していくプログラムのこと）にとってはコンテンツをより効率よくクロール・インデックスできるので自然検索での流入増加を期待できます。
弊社の事例でも、レスポンシブウェブデザインにリニューアル後に自然検索数や月間インデックス数が昨対で200％超の事例もあります。
参考：レスポンシブ化後売上前年比2倍に！データから銀座三愛「三愛水着楽園」売上増の要因を検証
レスポンシブ・WEBデザインのデメリット
逆にレスポンシブウェブデザインでのデメリットはどのようなものがあるのでしょうか？一般的に言われている例が以下の2つになります。
１.ページ読み込み速度が遅くなる場合がある
PC・タブレット・モバイル全てのデバイスで同一のHTMLを読み込むのでページ容量が大きい場合、通信環境によってはモバイル用サイトでの読み込み速度が遅くなってしまうこともあります。
原因としては、画像サイズの容量やソースコードの煩雑さなど様々なことが考えられます。
しかし、速度改善のための施策は数多くあり、弊社でも実際に速度を改善させるために様々なことを試しました。以下でご紹介する施策を実施することで速度改善は充分に可能といえるでしょう。
参考：速いレスポンシブECサイト。もう遅いと言わせない、レスポンシブWEBデザインのECサイト表示速度
参考：＜決定版＞レスポンシブECサイトの読込速度を上げるコーディング方法8選
参考：レスポンシブECサイトの読込速度を上げる方法7選 後編
レスポンシブウェブデザインの認知は高まってきたとはいえ、まだまだそのノウハウは多くありません。上記で紹介した施策を上手く組み合わせることで比較的読み込み速度の早いレスポンシブサイトを構築することができます。
2.レスポンシヴ・WEBデザイン特有のサイト構築ノウハウは必要
PC用サイトとモバイル用サイト、それぞれ別のHTMLを用意するのではなく1つのHTMLで全てのデバイス用のHTMLを記述するため、それに応じたノウハウ・知識が必要となります。
またRWDで重要な「モバイルファースト」でのページデザイン・レイアウト作成などの理解も必要となります。書籍による学習や実際にコードを書いてみるなどもちろん重要ですが、はじめはテンプレートのデザインを利用して制作する中でRWDの理解を深めるといったやり方でも良いと思います。
また予算があればデザイン・コーディングは外部制作会社に委託していまうのもよいでしょう。
参考：【保存版】レスポンシブWEBデザインのディレクションワークフロー
いかがでしたでしょうか？今回はRWDについての「総集編」といった意味合いも込めてモバイルファーストラボ記事を多めに引用しています。
レスポンシヴ・WEBデザインってなんだったけ？何ができるの？何がスゴいの？といった点の再確認としてご覧いただけましたら幸いです。
市川
