SEO研究所サクラサクラボ

SEO・コンテンツマーケティングを成功に導くパートナー

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

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

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

レスポンシブ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年生まれ 東京都稲城市出身、都立三鷹高等学校、専修大学文学人文科学を卒業後、2003年に学校関連の広告・出版を扱う株式会社JS コーポレーションに入社。
3年勤務した後に、学生時代より、ベンチャー企業への興味関心が高かったこと、より企業の課題解決に向き合っていきたいという想いから、WEB マーケティング業界へ転身。
2006年にSEM コンサルタントとして、インターネット総合代理店、株式会社オプトに入社。リスティング、ディスプレイ広告の運用から、SEOの施策提案など主にキーワードマーケティング領域に特化した業務に従事。

同年10月に、当時4名のベンチャー企業であった当社の役員と共鳴し、転職。入社後は、営業をはじめ、SEOコンサルティング、新規事業開発、自社マーケ、人事、財務と幅広い領域を経験し、営業部長、執行役員、取締役と経て、2015 年に社名変更とともに取締役社長に就任。

SEOコンサルタントとして大規模サイトから新規サイトまで、売上向上に繋がるコンサルティングを武器に200サイト以上の実績。9年連続でラスベガスで開催されるPUBCONに参加するなど海外の最新のSEO情報の収集にも尽力。
現在は、サクラサクラボの編集長、サクラサクラボチャンネルでの情報発信などの自社マーケティングを通じてBtoBマーケティングにも精通し、ここで培ったノウハウをもとにコンサルティングを展開。

3歳から現在に至るまで、サッカーを続けており、組織マネジメントにおいて、この経験値を大いに活用している。

その他のブログ記事

Return Top