サクラサク

Googleが推奨するレスポンシブWebデザインの作り方と移行時の注意点

2024年6月19日

ねぎお社長 (根岸雅之)

スマホユーザーが増えてきたことにより、Webサイトがスマホの画面領域でも快適に閲覧できることが求められています。
この対応のことをモバイル対応と呼びますが、PCでの閲覧を前提としていたWebサイトにとってモバイル対応は必ずしも楽なことではありません。

モバイル対応方法の1つとして、「レスポンシブWebデザイン」があります。
レスポンシブWebデザインは検索エンジンであるGoogleが推奨していますが、その理由や、レスポンシブWebデザインの概要、メリット、作成方法等についてご説明します。

『SEO会社が作った、SEOチェックリスト147選-自社サイトのやるべきSEO施策一覧-』
Googleの検索エンジン最適化(SEO対策)を効果的に実施するための包括的なチェックリスト!
自社サイトのSEO対策において必要な改善点を見つけることができる内容を記載していますので
ぜひご活用ください!
無料ダウンロードはこちら

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

Webページのレイアウトを、デバイスに合わせて柔軟に表示を変えられるデザインをレスポンシブWebデザインと呼びます。RWDと略すケースもあります。
HTMLコードはどのデバイスでも同じですが、PCで見た時でもスマホで見た時でも、画面領域に描画の幅を合わせることができるWebデザインのことです。

一方で、PCにはPC用の、スマホにはスマホ用のHTMLを別々に用意する方法もあります。
この方法はさらに、同一のURLで出しわけるか、別々のURLで配信するかで分けることができますが、いずれにせよレスポンシブウェブデザインが1つのHTMLで対応するのとは異なっています。

レスポンシブウェブデザインでは、1つのHTMLで複数端末での表示に対応するため、やや複雑なcssが要求されます。

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

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

一つのURLで複数デバイスに表示を合わせられる

一つのHTMLファイルで様々なデバイスに対応できることが大きなメリットです。
PCとモバイルでHTMLが異なっていると、コンテンツに変更があった場合、両方のHTMLの修正が必要になりますが、レスポンシブウェブデザインではその心配がなく、管理が容易になります。。

SEOの観点でも有利になる

HTMLファイルが一つ、インデックスも一つなので、後述するようにGoogleも推奨しており、SEOの観点でも有利になると考えられます。

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

モバイル端末での表示速度に懸念がある

モバイル用にもPC用と同じHTMLを配信することから、不必要なファイルの読み込みも行われてしまい、PCに比べて回線速度の遅いモバイル端末では表示速度に懸念があります。

cssが複雑になる場合がある

PCで見た時でもスマホで見たときでもユーザビリティやユーザーエクスペリエンス(UX)を確保しようとすると、複雑なデザイン・レイアウトが要求されることがあり、その分cssも複雑になってしまう可能性があります。

GoogleがレスポンシブWebデザインを推奨する理由

上記のデメリットはあるとはいえ、Googleはレスポンシブウェブデザインを推奨しています。
理由の一つとして、Googleでモバイルファーストインデックス導入が控えていることが挙げられます。

Googleではスマホの普及が進んだことにより、Googleが今までPCサイトを基準にして検索順位を決定していたものを、モバイル(スマホ)サイトに基準を変更するという取り組みを行っています。
これがモバイルファーストインデックスです。

現在はまだ開始されていませんが、これを機に、Googleはレスポンシブウェブデザインを用いたサイト制作を強く推奨するようになりました。
理由としては、PCとスマホでHTMLが異なる場合、スマホ用HTMLではPC用のHTMLと比べてコンテンツやメタデータが少ない(または欠けている)場合が多く、そのままモバイルファーストインデックスを実装した場合、順位に悪影響があるケースが多いためと言われています。
実装にあたって大きな順位変化を避けたいGoogleが、そういった心配のないレスポンシブウェブデザインを推奨しているというわけです。

参考
モバイルファーストインデックス(MFI)とは?導入時期や必要な対策まとめ
/blogs/mobile-first-index/

レスポンシブWebデザインは必須なのか

レスポンシブWebデザインは必須なのか

ここまで読むと、「これからはSEOを考えるならばレスポンシブWebデザインが必須なのか」と、別々のURLを運用している方は不安に思われるかもしれません。
手間や費用が掛かってしまうケースが想定されるため、レスポンシブWebデザインを採用したくてもできないサイトもあるかと思います。

推奨しているが必須ではない

しかし、GoogleがレスポンシブWebデザインを推奨しているのは事実とは言え、必須ではありません。
レスポンシブWebデザインかどうかが直接順位に影響があるわけではなく、PC用とスマホ用で同じ内容のテキストやコンテンツが表示されており、メタデータの設定ができていれば問題ないと言えます。

将来のことを考えるとレスポンシブが良策

ただし、これから新規にサイトをオープンするのであれば、レスポンシブWebデザインを前提とした設計で進めましょう。
そもそもGoogleがレスポンシブWebデザインを強く推奨し始めたのは、将来的な視点に立って考えたことによるため、後々のことを考えればレスポンシブWebデザインでの作成が望ましいです。

レスポンシブサイトの作り方

レスポンシブサイトの作り方

それではレスポンシブサイトの作成方法の概要を以下に記載します。

viewportの設定

viewportとは「表示領域」のことを指します。要するに、それぞれの端末に合わせて表示領域を適切に調整するための設定です。
レスポンシブサイトを作るには、まずHTMLヘッダー内のmetaタグでviewportを設定します。

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

スタイルシートを分ける

スタイルシート(css)を複数の条件に分けることで同一のHTMLでも異なる端末で違ったWebデザインを表示できるようになります。
たとえばウィンドウの幅が500px以上の時はこのデザイン、500px以下の時はこちら…といったように、条件を分けて設定します。

ウィンドウの横幅に応じてスタイルシートを変更するには、メディアクエリを使います。
「横幅がこのサイズ(325)以下の時はスマホ、326-950の間ではタブレット、951以上はPCといった具合に分けることができます。

以下ではcss内インラインでの記述方式ですが、cssファイル自体を分割し、link relによって参照するcssを変えることもできます。

@media screen and (min-width:951px) {
/*pc用のcssを記述*/
}
@media only screen and (min-width:326px) and (max-width:950px) {
/*tablet用のcssを記述*/
}
@media screen and (max-width:325px) {
/*スマホ用のcssを記述*/
}

また、実際に表示して見え方を確認してください。サイズが合ってない画像があれば、スマホ用cssで調整するようにしましょう。

レスポンシブサイトに移行する方法

レスポンシブサイトに移行する方法

PCとスマホで別々のURLにて配信を行っていたサイトがレスポンシブ方式に移行する場合、SEOを考慮した設定が必要です。

まずはレスポンシブ対応を行った後に、従来のモバイル用URLからレスポンシブWebデザインのURL(PC用のURL)に301リダイレクトを行います。
ただし、モバイル用のURLそれぞれから対応するPC用ページへ1:1にリダイレクトする必要があるため、注意が必要です。

また、条件付きのリダイレクト、Vary HTTPヘッダー、PC用ページに記載されていたrel=”alternate”など、別々のURLを用いていたために行った設定をすべて削除します。
また、統一されたURLでは、rel=canonicalを用いて、自己カノニカルすることをおすすめいたします。。

まとめ

レスポンシブウェブデザインはGoogleが推奨しているモバイル対応方法とはいえ、唯一必須のものではありません。
SEOを考慮するとモバイルファーストインデックスへの対応も必要になりますが、どのようなモバイル対応を行うのか、レスポンシブウェブデザインでない場合はモバイルファーストインデックスへの対応は十分か、といった点については検討しておくことをおすすめします。

2020年9月までの切り替えを

Googleは2020年9月より全てのサイトをMFIに切り替えると発表しました。
詳細はコチラ
コロナウィルスによる影響で

もし、まだモバイル対応が完了していない場合は早急な対応が必要と言えます。
とはいえ焦ってサイトの切り替えを行うことで、かえってページの評価を下げることにつながってしまっては本末転倒になってしまいます。

対応方法にお悩みの場合は、まずは無料相談会で弊社のコンサルタントまでご相談を!
貴社サイトの状況をお伺いし最適な方針をご提案いたします。

無料相談会へのお申し込みはコチラ

執筆者 / 監修者

サクラサクマーケティング
株式会社

取締役 社長

ねぎお社長 (根岸雅之)

ねぎお社長 (根岸雅之)イラスト

サクラサクマーケティング株式会社 取締役社長 COO

1980年生まれ 大学卒業後、一貫して、広告・マーケティング業界に身を置く。2006年にSEM コンサルタントとして、インターネット総合代理店、株式会社オプトに入社。リスティング、ディスプレイ広告の運用から、SEOの施策提案など主にキーワードマーケティング領域に特化した業務に従事。同年10月に株式会社ブルトア(現サクラサクマーケティング株式会社)に転職。入社後は、営業をはじめ、SEOコンサルティング、新規事業開発、自社マーケ、人事、財務と幅広い領域を経験し、営業部長、執行役員、取締役と経て、2015 年に社名変更とともに取締役社長に就任。

SEOコンサルタントとして大規模サイトから新規サイトまで、売上向上に繋がるコンサルティングを武器に200サイト以上の実績。2023年には『なぜほとんどコンテンツマーケティングは失敗に終わるのか?』を執筆。ねぎお社長のSEOチャンネルをはじめ、YouTube、メルマガ、SNを通じて積極的に情報発信。

◇ 出版書籍

◇ 情報発信

◇ 掲載メディア

◇ 共催セミナー歴

  • オウンドメディアの成功事例とSEOを支える運用型広告の活用
  • 今日から始められるWebマーケティング~コンテンツマーケティングとGoogle マイビジネス~
  • GMO TECH × サクラサク共催セミナー~テクニカルSEOとコンテンツマーケ~
  • リモート環境下においても売上・利益が成長し続ける組織創りと営業戦略

関連記事

ブログ一覧

あっ!と思ったら
サクラサク
ご相談ください

まずは無料相談へのお申し込みがおすすめです。ベテランコンサルタントが直接対応いたします。

お電話でご相談の方はこちら

03-5776-2775

03-5776-2775

SEO・記事制作なら、
サクラサクにお任せください!

ご相談こちら
×