レスポンシブデザインとは?特徴とSEO効果について

今回のコラムでは、レスポンシブデザインの基礎知識とSEO効果についてご説明いたします。
レスポンシブデザインを実際に構築するのは制作者ですが、制作会社に依頼したりサイトの運営をするのであれば基礎知識として頭に入れておくことをお勧めします。

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

レスポンシブデザインとはWEBサイト制作において、ユーザーが使用する各デバイスの画面幅に合わせて、レイアウトを最適化することです。
レスポンシブデザインの特徴は、1つのファイルでどのデバイスにも対応できることです。

スマートフォンでサイトを表示させる方法

スマートフォンサイトを表示させるためには、以下の3つの方法があります。

  1. レスポンシブデザイン:1つのURL、1つのファイルで制作
  2. 動的な配信:1つのURL、2つのファイルで制作
  3. 別のURLを使う:2つのURL、2つのファイルで制作

レスポンシブデザインが主流となった背景

以前、WEBサイトはPCで見ることが主流でした。スマートフォンが普及し、今や日本人の9割以上がスマートフォンを所有していると言われています。

2015年に行なったWEBサイトへのアクセス調査で、スマートフォンからのアクセスが、PCからのアクセスよりも多くなっていることが分かりました。
それを受けて、モバイルファーストインデックスという取り組みが開始されました。

モバイルファーストインデックス(MFI)とは?

モバイルファーストインデックスとは「検索エンジンでの評価基準をスマートフォンサイトにする」という取り組みです。
これまでは、WEBサイトの評価基準はPCサイトのコンテンツでしたが、スマートフォンサイトが作られていない、あるいはPCサイトの内容と大きく異なる場合、スマートフォンユーザーが使いづらいと言われていました。

そのためGoogle社は2018年3月より、WEBサイトの評価基準にはスマートフォン版のサイトを使用する、と発表しました。これにより、スマートフォンユーザーがWEB検索をした時に、最適な検索結果が表示されるようになりました。

以降、徐々にモバイルファーストインデックスが広まっていき、Google社の取り決めにより2021年3月にはモバイルファーストインデックスに完全に移行しました。

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

制作者

サイト制作の効率化

HTMLファイルは1つのものを使用し、全てのデバイスに対応させることができるため、効率的にサイト構築をすることが可能です。
さらに、サイトの更新や修正があった際にもまとめて編集することができます。

エラーが少なくなる

複数のファイルでPCサイト、スマートフォンサイトを管理している場合、スマートフォンでは表示できるがPCサイトでは表示されない、などのエラーが発生することがあります。
表示エラーが出てしまうと、検索エンジンでユーザーの使いやすさを意識したサイトではない、とみなされてしまう可能性もあります。

一方レスポンシブデザインは、1つのファイルで一元管理ができるため、このようなエラーはほとんどありません。

ユーザー

SNSでのシェアが拡大しやすい

例えば、PCサイトのURLがSNSでシェアされた際に、それを見たユーザーがスマートフォンから閲覧したとします。
スマートフォン用のURLが別で作られてしまっている場合、そのURLを開いてもスマートフォンに適したサイトは開くことができません。

これがレスポンシブデザインであった場合、URLは同じものを使用しているため、自動でスマートフォンのサイズに合ったサイトを開くことができます。
この違いで、使いやすさ・見やすさが格段に変わり、サイトからの離脱率にも影響が出ます。
URLが同じであることで、PC、スマートフォンからそれぞれシェアを拡大していくことができます。

制作・運用にかかる費用が少なくなる

PCサイトとスマートフォンサイトの2つを作るよりも、1つのURLで制作できるレスポンシブデザインに対応している方が費用は安くなります。
また、ドメインも1つあれば良いため、管理費用も1サイト分で済みます。
ただし、制作会社によってはレスポンシブデザインが追加料金で取られてしまうことがあるため注意が必要です。

どの端末で閲覧しても、使いやすいサイトが表示される

レスポンシブデザインは、ピクセルで幅を指定し、「この範囲はこう表示させる」という指示を出してサイトを構築していくため、どの端末で閲覧しても使い勝手の良いサイトが表示されます。
 

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

制作者

デザインの制限

スマートフォン専用のサイトと比べると、デザインが若干制限されます。コンテンツ内容、順番などをPCサイトと同じものを使用するためです。
また、コンテンツの内容によってはデザインが似たようなものになってしまう可能性もあります。

ユーザー

サイトの表示に時間がかかる

デバイスのサイズによって表示の仕方が異なるため、読み込むコードも変わります。
それにより、スマートフォンサイトでは読み込む必要のないコードも読み込まれてしまい、表示するまでに時間がかかってしまうことがあります。
サイトを開いてから表示されるまでの時間が長いと、SEOでの評価が下がる可能性も出てくるため注意が必要です。
ただし、これはサイトの構築方法や対策をすることによって改善できる可能性が高いため、表示までの時間が長いかもと感じたら一度ご相談ください。

ガラケー(ガラパゴス・ケータイ)には対応していない

デバイスの幅に合わせて表示することができると説明しましたが、ガラケーにはレスポンシブデザインは対応していません。
ガラケーに合わせたサイトを表示させるためには、ガラケー専用のファイルを作る必要があります。
ただし、2026年3月31日で3G回線の利用が終了予定となっていることや、ガラケーの利用率が著しく低いことから、ガラケー対応のサイトを制作している会社はほとんどないでしょう。

レスポンシブデザインにおけるSEOの効果と影響

Google検索エンジンの評価分散を防止

PCサイト、スマートフォンサイトでそれぞれURLを用意している場合、検索エンジンではページごとに評価がされてしまいます。
重複コンテンツとみなされてしまった場合、SEOペナルティを受ける可能性もあるため、お互いのファイルが同じものであるという意味のタグを入れなければなりません。

評価が分散されるというのは、簡単に説明すると100点満点のコンテンツが、50点・50点に分かれてしまう、というイメージです。
Google社でも検索エンジンでの評価対象が減らせるように、レスポンシブデザインでの制作を推奨しています。
レスポンシブデザインでは、1つのURLを使用するため、評価対象ももちろん1つです。評価が分散されることはありません。

ユーザビリティの向上

ユーザビリティとは、ユーザーにとって使いやすいサイトかどうか、ということです。
レスポンシブデザインにすることで快適にサイトを閲覧することができれば、サイトからの離脱率も低くなります。
ユーザーの視点に立ち、ニーズに合わせて作成していくことで、結果的にSEO対策にもなっています。

レスポンシブデザインに対応したホームページ制作は歯科WEBデザインへ

弊社では、SEOを意識したレスポンシブデザインにも力を入れて制作を行なっています。
また弊社の料金プランでは、WEB制作料金にレスポンシブデザインも含まれているため、追加料金をいただくことは一切ありません。
ご自身のサイトで疑問に思ったことや、レスポンシブ対応についてわからないことがございましたら、いつでもお気軽にご相談くださいませ。

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


この投稿へのトラックバック

トラックバックはありません。

トラックバック URL