レスポンシブルWEBデザインとは

Webサイトはスマートフォンの利用が多くなり、BtoBのサイトであっても、50%以上がスマートフォンからのアクセスというWebサイトも珍しくなくなっています。弊社が管理しているWebサイトでも90%以上がモバイル、タブレットからというWebサイトもあります。こうした利用するデバイスが変化してきている世の中の流れからスマートフォンへの対応を行わないのは不自然ですし、合理的な判断ではないでしょう。

レスポンシブルWEBデザインとはアクセスしてくるデバイスに応じて適切な画面表示を行うWEBデザインを指しています。アクセスしてくるデバイスは多岐にわたり、画面のサイズも様々です。大きく分けてPCとスマートフォン、タブレットがあります。
PCでも画面サイズは、代表的なサイズのFullHD (1920×1080)から4K (3840×2160)、5K(5120×2880)とサイズ展開も幅が広くなっています。スマートフォンについては、日本国内においてはiPhoneのシェアがかなり高く60%を超えているとのデータもあり、そのiPhoneのサイズ展開は、iPhoneSE(320×568)、iPhone7,8(375×667)、iPhone7Plus,8Plus(414×736)、iPhoneX(375×812)といったとものになっています。Androidの端末においては、Sony Xperiaが国内ではシェアが高く、画面のサイズは、SO-02J(360×640)などがある(360×640)を多くの端末で採用されています。タブレットについては、iPad（768×1024）などがありますし、他にもあります。さらに、スマートフォン、タブレットについては目の近くで見ることを想定しているのか、画面の詳細度がほぼ2倍にちかくなっていますので、綺麗に表示させるためにはこのサイズの倍の大きさの画像を用意する必要があります。こうしてみてみても微妙に違う画面サイズのデバイスが数多く存在しており、それぞれに最適なWEBサイトのコンテンツを提供することができるのがレスポンシブWEBデザインです。

参考データ

• iPhone/iPad/Apple Watch解像度(画面サイズ)早見表
• 世界40カ国、主要OS・機種シェア状況【2017年9月】アウンコンサルティング株式会社調べ

PC画面サイズ

• FullHD (1920×1080)
• WUXGA (1920×1200)
• WQHD (2560×1440)
• WQXGA (2560×1600)
• 4K (3840×2160)
• 5K(5120×2880)

スマートフォン・タブレット画面サイズ

• iPhoneSE(320×568)
• iPhone7,8(375×667)
• iPhone7Plus,8Plus(414×736)
• iPhoneX(375×812)
• Android SO-02J(360×640)
• iPad（768×1024）

レスポンシブルWEBデザインは、スマートフォン向けの画面をPCからアクセスした場合に表示するHTMLと同じHTMLが適用されますが、CSSでその表示を切り替え、複数の画面サイズでも同じような雰囲気でユーザーが閲覧できるようにするものです。また、レスポンシブルデザインでも画面横幅100%に応じて画像サイズなどが変化するリキッドレイアウトデザインというものも可能でデザインの表現の幅も広がっています。

レスポンシブルデザインのメリット

別々にHTMLを用意する必要がないので、HTML側のメンテナンス性が向上します（逆にCSSのメンテナンス性は若干落ちます）。スマートフォン向けのWEBサイトを用意する場合はURLが別々のものになってしまう場合もありますが、レスポンシブルデザインの場合は、URLが別々のものにならないため、SEO効果も期待できます。また、余計なリダイレクトがなくなるため、高速にページを表示させることができます。現在PC向けのWEBサイトがある場合も、レスポンシブルデザインを追加することが可能です。PCでみてもモバイルからみても同じようなデザインでサイトを閲覧することができるため、一般的には閲覧ユーザーもどのWEBサイトを見ているのかの認識が容易で、ブランド認知向上に効果があるといわれています。別々にファイルを用意するより初期の制作工数が軽くなる傾向があります。

レスポンシブルデザインのメリットまとめ

• URL同一になるためSEO効果が期待できる
• メンテナンスが軽くなる
• 初期構築工数が減る
• どのデバイスから見ても同じような印象を与えることができる

レスポンシブルデザインのデメリット

そもそもモバイルとPCでは利用するシーンが同じではなく、それぞれに最適なユーザー体験を提供するということを考えると一緒にしてしまうことに無理があるという考えもあります。モバイルサイト、PCサイト、モバイルのアプリなど多くの環境でも快適に利用できるようにするのがベストだとも言えます。また、PCでは表示しているが、モバイルの場合には表示しないというケースがレスポンシブルデザインでは発生することがあります。その場合、回線速度を気にしなければならないモバイル環境に対して必要のないデータを送ってしまうということが起き、結果的に必要ないデータをユーザーにダウンロードさせてしまいます。当然ですが、コスト面を見ても、PCサイトだけ、モバイルサイトだけのWEBサイト制作より工数が増えるためその分割高となってしまいます。

SEOを考えるとAMP(Accelerated Mobile Pages)への対応の方がいいのでは？

PC、スマートフォン別々にHTMLを用意する場合の方が最適なケースもあるでしょう。検索エンジンのgoogleはモバイル環境でも高速で快適なブラウジング環境を提供するWEBサイトを優先的に上位表示するアルゴリズムを採用しています。そのWEBサイトの仕様がAMP(Accelerated Mobile Pages)と言われるものになり、モバイルでWEBページをを閲覧するときに高速にコンテンツを表示できるフレームワークです。モバイルでの検索結果ページに対応しているWEBページの場合にはAMPとラベル表示がされています。
先ほどURLがモバイル、PCで統一となるためにSEO効果が高いという表現をしましたが、モバイルに限っていえばAMP対応した方がSEO効果は高い可能性もあります。ただ、その場合同じコンテンツに対してURLが複数存在るうような仕組みとなってしまうと、被リンクという概念では分散してしまいますので、それぞれSEO対策が必要となってしまいますので、悩ましいところではあります。ただAMP対応していないために検索順位を落とすということはないようです。
AMP プロジェクト

レスポンシブルデザインのデメリットまとめ

• 初期工数が増える
• 余計なデータをダウンロードさせてしまうためページが重くなる
• AMP対応の方が高速、検索結果の表示にAMPラベルをつけることができる
• ユーザー体験がアプリなどに比べると制約がある

SEOとレスポンシブルデザイン

URLが別々にならないので、googleもレスポンシブルデザインを推奨しています。下記のようにあげています。
https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=ja

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

先ほどAMPについて書きましたが、モバイルフレンドリーとAMPでは目指しているところが異なるようですが、それぞれに最適なコンテンツとユーザー体験を提供できればいいですが、費用対効果などを考えるとレスポンシブルWEBデザインを採用するのが現時点でメリットが大きいです。