スマホユーザーが増えてきたことにより、Webサイトがスマホの画面領域でも快適に閲覧できることが求められています。
この対応のことをモバイル対応と呼びますが、PCでの閲覧を前提としていたWebサイトにとってモバイル対応は必ずしも楽なことではありません。
モバイル対応方法の１つとして、「レスポンシブWebデザイン」があります。
レスポンシブWebデザインは検索エンジンであるGoogleが推奨していますが、その理由や、レスポンシブWebデザインの概要、メリット、作成方法等についてご説明します。
レスポンシブWebデザインとは
Webページのレイアウトを、デバイスに合わせて柔軟に表示を変えられるデザインをレスポンシブWebデザインと呼びます。RWDと略すケースもあります。
HTMLコードはどのデバイスでも同じですが、PCで見た時でもスマホで見た時でも、画面領域に描画の幅を合わせることができるWebデザインのことです。
一方で、PCにはPC用の、スマホにはスマホ用のHTMLを別々に用意する方法もあります。
この方法はさらに、同一のURLで出しわけるか、別々のURLで配信するかで分けることができますが、いずれにせよレスポンシブウェブデザインが１つのHTMLで対応するのとは異なっています。
レスポンシブウェブデザインでは、１つのHTMLで複数端末での表示に対応するため、やや複雑なcssが要求されます。
レスポンシブ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デザインは必須なのか
ここまで読むと、「これからは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に切り替えると発表しました。
詳細はコチラ
コロナウィルスによる影響で
もし、まだモバイル対応が完了していない場合は早急な対応が必要と言えます。
とはいえ焦ってサイトの切り替えを行うことで、かえってページの評価を下げることにつながってしまっては本末転倒になってしまいます。
対応方法にお悩みの場合は、まずは無料相談会で弊社のコンサルタントまでご相談を！
貴社サイトの状況をお伺いし最適な方針をご提案いたします。
