⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？

【PR】楽天市場　【PR】じゃらん　【PR】一休　【PR】Qoo10　【PR】Abema

多くのホームページに導入されているレスポンシブデザインですが、レスポンシブ化することによってどのようなメリット、またはデメリットが発生するか把握できていますか？

「Googleが推奨しているから」、「流行しているから」、という単純な理由でレスポンシブデザインを導入するのではなく、長所短所を見極めたうえで、自社のホームページに最適だと判断したうえで利用するのが良いでしょう。

今回は、レスポンシブデザインのメリットとデメリットを解説します。

1．レスポンシブデザインとは

レスポンシブデザインとは、Webサイトのデザインを「閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザイン」を指します。

従来の検索ユーザーの多くはPC画面からコンテンツを閲覧していましたが、検索ユーザーの使用デバイスがスマートフォン・タブレット・PCなど、画面サイズの異なるデバイスに変化したため、それぞれの画面サイズに対応するレスポンシブデザインに注目が集まっているのです。

また、レスポンシブデザインは1つのHTMLで配信され、デバイスごとにCSSを用意して表示を変える仕組みをとっています。

この仕組みのおかげで、いずれのデバイスに対しても同じURL・HTML・CSSを使用できるため、「モバイル版ページでは表示されるが、PC版ページではエラー表示になる」といったユーザビリティを低下させる事態を回避することができます。

Googleはモバイル版ページを作る方法として以下の3つを想定していますが、実装と維持が最も容易であるレスポンシブデザインの実装を推奨しています。

レスポンシブデザイン：検索ユーザーのデバイスの種類に応じて画面サイズが変化

動的な配信：同じ URL で異なる HTML（および CSS）をサーバーから返す

別個URL：PC版・モバイル版それぞれのHTMLを用意し、URLも別個で作成

2．レスポンシブデザインが求められる背景（参考：2021年時点の背景とその後の経緯）

【重要】本記事は執筆当時（2021年3月）、Googleが同月にMFI（モバイル・ファースト・インデックス）への完全移行を発表した直後に執筆されています。当時は「未対応のサイトは今後検索順位が下落するかもしれない」という将来のリスクとして説明されていましたが、その後 MFIへの移行は実際に完了しています。Googleは2024年7月に、全サイトのクロールをスマートフォン用Googlebotに移行したMFIの完了を公式に宣言しました（実質的な全サイト移行自体は2023年5月頃には完了していたとされています）。つまり「今後のリスク」ではなく、すでに確定した過去の出来事です。

レスポンシブデザインは以前から存在していましたが、Googleが2021年3月にMFI（モバイル・ファースト・インデックス）へ完全移行する旨を発表したことから、さらに関心が高まりました。

MFIとは、Googleのクローラーがモバイル版ページをインデックスすることを意味していますが、従来のPC版ページのインデックスからモバイル版ページのインデックスに完全移行した結果、現在では全サイトがPC用GooglebotではなくSP用Googlebotによってクロールされています。

つまり、モバイル版ページの準備は、現在ではWebサイトを運営する上で不可欠の対応となっています。

3．レスポンシブデザインのメリットは？

レスポンシブデザインのメリットとしては、どのデバイスでも同一のファイルを利用できるため、管理が非常に簡単になることと、デバイス毎の表示エラーを減らせることにあります。以下、主なメリットを並べておきます。

  • 現在多くのブラウザによってサポートされているCSS3を使用しているため、汎用的である。より多くの人に見てもらえる。
  • カラムや画像が、スクリーンサイズに合わせて自動的に適切なサイズになる。そのため、サイト上の情報を適切に得ることができる。
  • HTMLを分けるモバイルサイトでは、デバイスの数だけHTMLを増やしていかなければならないが、レスポンシブで制作すればHTMLファイルは同一なので管理がしやすい。修正も1つのHTMLだけでよいので、モバイルサイトは古いままといった事態を防げる。

4．レスポンシブデザインのデメリットは？

レスポンシブデザインを導入した際のデメリットは、スマホサイト上で起こるものが多くあります。パソコン用の情報をスマホで読み込むというのは、パソコンよりもスペックが劣るスマホにとっては、データ読み込みなど負荷のかかる作業になります。

スマホでの読み込み時間の遅さは、ユーザビリティに大きく影響するため、掲載する情報はシンプルにしてできるだけ読み込みに時間がかからないようにすることが重要です。以下に主なデメリットを並べておきますのでご確認ください。

  • PC用のHTMLコードやCSSも読み込むため、表示に時間がかかる。CSSで画面に表示しないようにしても、読み込みは行われるため、ユーザーが待ちきれなくなる恐れがある。
  • 画像も同様。PC用の大きい画像では携帯用の3G/4G回線で読み込むのに時間がかかる。
  • シンプルなページであればよいが、レスポンシブサイトの制作は通常より工数がかかる場合が多い。
  • PCサイトのテキストや画像が多すぎる場合、スマホページでは文字が溢れてしまうなどレスポンシブ化は難しくなる

5．レスポンシブWebデザインの作り方

レスポンシブデザインを作るには、ページのHTMLとCSSファイルにそれぞれ「meta viewportタグ」と「メディアクエリ」を記述する必要があります。記述自体は簡単な作業なので覚えておくと便利です。

5-1．meta viewportタグを追加する

HTMLファイルで作成したWebサイトの場合は「すべてのHTMLファイルのヘッダー部分」、WordPressで作成したWebサイトの場合は「header.php」に以下のコードを記述します。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

meta viewportタグを記述することにより、

①閲覧ユーザーの使用デバイス情報の取得、

②取得情報から画面横のサイズを把握してPC版・スマホ版を判断、ができるようになります。

meta viewportタグの記述に加えてCSSファイルにメディアクエリを記述することで、デバイスごとの画面表示を変えることができます。

5-2．CSSファイルにメディアクエリを記述する

メディアクエリを使うことによって、閲覧ユーザーの画面サイズに応じたページサイズの切り替えができるようになります。まずは、PC版ページを表示する値（ブレイクポイント）を指定していきます。

@media screen and (min-width: 481px)　{ }

「min-width: 481px」と指定することで、画面横のサイズ（CSSピクセル）が481pxに達した時に、モバイル版ページからPC版ページへと画面サイズが切り替わるようになります。また、{ }内には通常使用するCSSコードを記述していきます。

次に、画面サイズが0px〜480pxの場合に表示するモバイル版ページの設定を行っていきます。CSSファイルには以下のコードを記述しましょう。

@media screen and (max-width: 480px)　{ }

「max-width: 480px」と指定することで、480px以下の画面サイズではモバイル版ページが表示されるようになります。

6．レスポンシブデザインのテンプレート（参考）

1つのHTMLで様々なデバイスに対応できるレスポンシブデザインですが、1つのデザインを作成することに変わりはないため、制作に時間がかかってしまいます。自社サイトの方針もよりますが、予め作成されているテンプレートやWordPressのレスポンシブ対応テーマを活用して効率化するのも一つの方法です。※以前ご紹介していた外部テンプレートサイトのリンク先は現在利用できない可能性があるため、利用の際は最新のテンプレート配布サイトを検索してご確認ください。

また、WordPressを自社サイトに導入している方は「WordPressのレスポンシブデザイン対応テーマ」を購入することによって、自動的にレスポンシブデザイン実装を完了させることが可能です。

7．まとめ

総務省の統計にもあるように、現状では個人のインターネット利用は、PCよりスマホの割合が上回っています。そのためWebサイトの管理者は、スマホ対応のサイト運営が必須となってきました。

前述の通り、GoogleはMFI（モバイル・ファースト・インデックス）への完全移行をすでに完了しており（2024年7月公式宣言）、モバイル版ページがないWebサイトはすでに検索面で不利を受けやすい状況にあります。まだレスポンシブ対応をしていないサイトは、早急に対策を講じてください。

⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？

【PR】楽天市場　【PR】じゃらん　【PR】一休　【PR】Qoo10　【PR】Abema