ブログ

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デザインのメリット

一つの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を考慮するとモバイルファーストインデックスへの対応も必要になりますが、どのようなモバイル対応を行うのか、レスポンシブウェブデザインでない場合はモバイルファーストインデックスへの対応は十分か、といった点については検討しておくことをおすすめします。

◇この記事もおすすめ!
・SEO対策(検索エンジン最適化)とは?初心者にもわかりやすく解説します





■関連情報:サクラサクマーケティングのSEOコンサルティングサービス
中小・ベンチャー企業の売上をサポートするSEO対策低価格・高品質なSEOコンサルティング

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

監修者:根岸 雅之

記事一覧

取締役社長 COO

2006年株式会社オプトにてSEMコンサルタントとして、大手企業のリスティング広告の運用に従事。

その後、サクラサクマーケティング株式会社に転職し、SEOコンサルタントとして、10年以上、100サイトの以上の顧客のWEBマーケティングのパートナーを担う。また、セールス、新規企画開発、アライアンスと幅広く従事し、2014年より取締役社長として会社を牽引。



無料資料ダウンロード

サービス資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

  1. SEO対策(検索エンジン最適化)とは~Googleで上位表示を実現する方法

    目次 1. SEO(Search Engine Optimization:検索エンジン最適化)とは2. SEOの現在(検索エンジン最適化≒Google最適化)2-1. 進化し続けるGoogleとSEO手法2-2. SEO […]...

    1. ウェブマスターオフィスアワーまとめ(2019年12月5日)

      2019年12月5日にウェブマスターオフィスアワーが行われました。 Googleの金谷さんとあんなさんが発言した内容をまとめます。 直近のイベント 11/23 ウェブ解析士会議大阪 11/25 ウェブマスターカンファレン […]...

      1. 最新SEO・コンテンツマーケティングセミナー随時開催中【東京】-Googleの最新トレンドからWEB集客戦略までSEOプロが徹底解説

        目次 セミナー概要以下のような方の参加がおススメですSEOセミナー内容講師紹介セミナー参加者の声&風景 セミナー概要 サクラサクマーケティングでは、社長の根岸が毎月4回、東京恵比寿の本社にて最新のSEO・コンテンツマーケ […]...

おすすめコンテンツ

  1. SEO対策(検索エンジン最適化)とは?初心者にもわかりやすく解説します

    SEO対策とは「検索エンジン最適化」のことで、数あるWeb集客手法の中でも、検索エンジンからの成果を最大化することです。基本的にはユーザーや検索エンジンからより評価されるように、WebサイトやWebページの変更・改修を続 […]...

    1. コンテンツマーケティングとは?特徴と事例、社内でできる方法を解説します

      ここ数年で急激にコンテンツマーケティングという言葉を聞くようになりました。しかし、「興味があるがまだ着手できていない」という人や、「そもそもどんなコンテンツを作ればいいのかわからない」、「社内で運用しているが成果がでない […]...

      1. SEOに強いコンテンツは回答性×網羅性×文字数×ユーザー体験

        目次 SEOに強いコンテンツとは回答性網羅性文字数ユーザー体験[回答性×網羅性×文字数×ユーザー体験]を考慮したSEOに強いコンテンツ制作お問い合わせフォーム SEOに強いコンテンツとは 検索エンジンで上位表示をさせるた […]...

最新情報を取得する

PAGE TOP