無料レポートDLSEO無料診断ホームブログGoogleが推奨するレスポンシブWebデザインの作り方と移行時の注意点ブログGoogleが推奨するレスポンシブWebデザインの作り方と移行時の注意点2017/11/12ブログSEO全般スマホ最適化TweetShare+1HatenaPocketfeedlyスマホユーザーが増えてきたことにより、Webサイトがスマホの画面領域でも快適に閲覧できることが求められています。この対応のことをモバイル対応と呼びますが、PCでの閲覧を前提としていたWebサイトにとってモバイル対応は必ずしも楽なことではありません。モバイル対応方法の1つとして、「レスポンシブWebデザイン」があります。レスポンシブWebデザインは検索エンジンであるGoogleが推奨していますが、その理由や、レスポンシブWebデザインの概要、メリット、作成方法等についてご説明します。目次レスポンシブWebデザインとはレスポンシブWebデザインのメリット一つのURLで複数デバイスに表示を合わせられるSEOの観点でも有利になるレスポンシブWebデザインのデメリットモバイル端末での表示速度に懸念があるcssが複雑になる場合があるGoogleがレスポンシブWebデザインを推奨する理由レスポンシブWebデザインは必須なのか推奨しているが必須ではない将来のことを考えるとレスポンシブが良策レスポンシブサイトの作り方viewportの設定スタイルシートを分けるレスポンシブサイトに移行する方法まとめレスポンシブ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はレスポンシブウェブデザインを推奨しています。理由の一つとして、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を設定します。content=”width=device-width,initial-scale=1′′>スタイルシートを分けるスタイルシート(css)を複数の条件に分けることで同一のHTMLでも異なる端末で違ったWebデザインを表示できるようになります。ウィンドウの幅が500px以上の時はこのデザイン、500px以下の時はこちら...といったように、条件を分けて設定します。ウィンドウの横幅に応じてスタイルシートを変更するには、メディアクエリを使います。「横幅がこのサイズ(325)以下の時はスマホ、326-950の間ではタブレット、951以上はPCといった具合に分けることができます。relによって参照するcssを変えることもできます。{/*スマホ用のcssを記述*/}また、実際に表示して見え方を確認してください。サイズが合ってない画像があれば、スマホ用cssで調整するようにしましょう。レスポンシブサイトに移行する方法PCとスマホで別々のURLにて配信を行っていたサイトがレスポンシブ方式に移行する場合、SEOを考慮した設定が必要です。レスポンシブ対応を行った後に、従来のモバイル用URLからレスポンシブWebデザインのURL(PC用のURL)に301リダイレクトを行います。モバイル用のURLそれぞれから対応するPC用ページへ1:1にリダイレクトする必要があるため、注意が必要です。HTTPヘッダー、PC用ページに記載されていたrel=”alternate“など、別々のURLを用いていたために行った設定をすべて削除します。統一されたURLでは、rel=canonicalを用いて、自己カノニカルすることをおすすめいたします。まとめレスポンシブウェブデザインはGoogleが推奨しているモバイル対応方法とはいえ、唯一必須のものではありません。SEOを考慮するとモバイルファーストインデックスへの対応も必要になりますが、どのようなモバイル対応を行うのか、レスポンシブウェブデザインでない場合はモバイルファーストインデックスへの対応は十分か、といった点については検討しておくことをおすすめします。無料メルマガのご登録(無料)SEOの最新情報を無料でお届けします!メルマガのご登録、誠にありがとうございます。COO2006年株式会社オプトにてSEMコンサルタントとして、大手企業のリスティング広告の運用に従事。その後、サクラサクマーケティング株式会社に転職し、SEOコンサルタントとして、10年以上、100サイトの以上の顧客のWEBマーケティングのパートナーを担う。セールス、新規企画開発、アライアンスと幅広く従事し、2014年より取締役社長として会社を牽引。無料メルマガのご登録(無料)SEOの最新情報を無料でお届けします!メルマガのご登録、誠にありがとうございます。学ぶ】なぜ中小企業のWEBマーケティングは失敗するのか?vol.1:市場環境編サクラサクマーケティング株式会社の社長の根岸です。今回は中小企業ならではのWEBマーケティングが苦戦する理由を弊社の顧客、また弊社自身の事例から解説していきたいと思います。[...]...令和時代に活躍出来るWEBコンサルタントとして押さえておくべき4つのスキル初めまして。私がサクラサクマーケティングに入社してから4年。[...]...【SEO検証】オリジナル画像を使うと順位が上がるのか?サクラサクラボ事例を公開!記事などに画像を使用する際には、PIXTAやShutterstockなどの素材画像を使用することも多いかと思います。その他の記事を見るおすすめコンテンツSEO対策(検索エンジン最適化)とは?初心者にもわかりやすく解説しますSEO対策とは「検索エンジン最適化」のことで、数あるWeb集客手法の中でも、検索エンジンからの成果を最大化することです。[...]...コンテンツマーケティングとは?特徴と事例、社内でできる方法を解説しますここ数年で急激にコンテンツマーケティングという言葉を聞くようになりました。Editorカリフォルニアワインの世界サクラサクLABOでは、WEBマーケティングでもっとも重要な最新のSEO情報を提供しています。初心者の方からプロのコンサルタントの方まで、幅広くご活用ください。