レスポンシブデザイン（レスポンシブWEBデザイン）とは？SEOで重要な理由や対応方法など紹介
サイト運営者の方にとって、レスポンシブデザインという言葉を聞いたことがある方は多いはずです。レスポンシブデザインは、現代のスマホ社会におけるSEOで、ぜひ知っておきたい用語の1つです。
そこでこの記事では、レスポンシブデザインの意味やSEOにおける重要性、対応方法などを紹介します。スマホ対応のサイトを構築したいと考えている企業は、ぜひこの記事を参考にしてください。
レスポンシブデザインとは
レスポンシブデザインとは、パソコンやタブレット、スマホなどあらゆるデバイスに1つのHTMLファイルで制作したサイトのデザインです。現代のWebサイトでは、このレスポンシブデザインで運営する企業が多くなっています。
レスポンシブデザインでは、たとえばパソコンとスマホでサイト内の同じURLに入力したとき、各デバイスに応じた最適なデザインが表示されるようになっています。もしレスポンシブ非対応のPCサイトページをスマホで閲覧すると、文字が小さくて非常に見にくいデザインとなってしまいます。
スマホが当たり前の時代において、レスポンシブデザインの重要性は高まっています。
レスポンシブデザインがSEOにおいて重要な理由
現代のSEOでは、レスポンシブデザインの重要性が高まっています。なぜレスポンシブデザインが重視されるのでしょうか？主な理由を3つ紹介します。
- Googleがスマホ対応を重視している
- ページのインデックス数に影響する
- すべてのデバイスにコンテンツを表示できる
Googleがスマホ対応を重視している
レスポンシブデザインが重要な理由の1つは、サイトの検索順位を決めているGoogleがスマホ対応を重視しているからです。
Googleは「モバイルフレンドリー」という考え方を重視しています。モバイルフレンドリーとは、スマホに優しいサイトを指しています。今やパソコンよりもスマホのほうがサイトを見るユーザーが多くなっています。仮にサイトがスマホ用の閲覧に対応していない場合、ユーザーはページを読むためにズームのような操作が必要になります。
このようなサイトの不便さは離脱の原因になるとGoogleはアドバイスしているので、サイト運営者もレスポンシブデザインで対応する重要性が高まっています。
ページのインデックス数に影響する
レスポンシブデザインは、1つのURLであらゆるデバイスの閲覧に対応しています。つまり、クローラーがサイトを巡回する時のURLの数が減るので、その分インデックスの効率が上がるメリットがあります。
たとえばパソコンとスマホ用でURLが別の場合、クローラーは2つのページに対して巡回する必要があります。クローリングの手間が増える分、インデックスされるまでの時間もかかってしまいます。
一方でレスポンシブデザインであれば、1つのURLに対してクロールするので、その分インデックスされるまで時間は早くなるのです。
すべてのデバイスにコンテンツを表示できる
レスポンシブデザインは、その特性上、すべてのデバイスにコンテンツを表示できます。これは言い換えれば「表示されないデバイスがない」というメリット得られます。
たとえばパソコン用のサイトと、スマホ用のサイトを別で作成していたとします。この時、スマホ用のサイトを閲覧するユーザーには、パソコン用サイトからスマホ用のサイトへリダイレクトさせます。このリダイレクトが正常に作動すれば問題ありませんが、万が一設定を間違えた場合、スマホユーザーにパソコンのサイトが表示されることになるのです。
この点、レスポンシブデザインは同じHTMLファイルはデバイスごとにデザインを最適化するので、上記のような誤りが発生しません。オペレーションを簡単にする点でも、やはりレスポンシブデザインを導入するのがおすすめです。
レスポンシブデザインの特徴
レスポンシブデザインならではの特徴を理解することで、よりユーザーに優しいサイトを構築できるようになります。ぜひレスポンシブデザインの魅力を知って、導入を検討してみてください。
- サイトのURLは1つのみ
- ユーザーが利用するデバイスに応じてサイズを変えられる
- HTMLとCSSのみでデザインを作れる
サイトのURLは1つのみ
レスポンシブデザインは、あらゆるデバイスに1つのURLで対応できるのが大きな魅力です。なぜなら、1つのHTMLファイルだけで、レスポンシブデザインを制作できるからです。
サイトのURLが1つだけなので、先述の通りインデックスの効率を上げたり、さらにはアクセス解析ツールの分析もしやすかったりするメリットがあります。URLを分けた場合はアクセス解析も複雑になってしまいますが、1つのURLで構成するレスポンシブデザインは、この課題を解決しているのです。
ユーザーが利用するデバイスに応じてサイズを変えられる
レスポンシブデザインは、ユーザーが利用しているデバイスのサイズに応じて、サイトのデザインを切り替えています。そのため、今後新たなデバイスが導入されることになっても、その度にコードを追加したり修正したりする手間が発生しません。
一度コードを設定すれば、その後オペレーションを最小限にして各デバイスに対応できるのも、レスポンシブデザインならではの魅力です。
HTMLとCSSのみでデザインを作れる
レスポンシブデザインは、HTMLとCSSの2つだけで制作できます。JavaScriptのような言語を知らなくても対応できるのが、レスポンシブデザインの特徴です。
さらに記述のほとんどがCSSにあるため、複数ファイルを修正するような手間も発生しません。仮にレスポンシブデザインを修正したいときも、比較的に簡単に対応できるのがレスポンシブデザインのメリットです。
サイトをレスポンシブデザインにする方法
既存のサイトをレスポンシブ化するのに必要な「HTMLにviewportを設定する」と「CSSにメディアクエリを書く」について紹介します。
- HTMLにviewportを設定する
- CSSにメディアクエリを書く
- ブレイクポイントを設定する
- Chrome DevToolsで確認する
1. viewportを設定する
まずはviewportを設定します。viewportとは表示領域を示す言葉で、アクセスしたデバイスごとに横幅を設定するものです。具体的には、HTMLの<head>タグ内に、次の記述を加えます。
| <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> </head> |
width=device-widthは、デバイスに依存しない形で、画面の幅に合わせたページを指示します。これにより、デバイスに関係なく、画面サイズに合わせられるようになります。
2. CSSにメディアクエリを書く
viewportを設定したあとは、CSSにメディアクエリを記述します。CSSにメディアクエリを使うことで、閲覧するユーザーに応じてページのサイズを切り替えられるようになります。
まずは、パソコン用のページを表示するためのメディアクエリを記述します。
| @media メディアタイプ and (条件) { } |
メディアタイプには、以下のような種別があります。
| screen | パソコンのスクリーン |
| プリンター。印刷プレビュー。 | |
| all | すべてのデバイス |
| tv | テレビ |
| projection | プロジェクター |
たとえば、以下のような画面サイズにしてメディアクエリを設定してみます。
- 画面サイズが480px以上：CSS①
- 画面サイズが768px以上：CSS②
- 画面サイズが1024px以上：CSS③
| @media screen and (min-width: 480px) {<CSS①> } @media screen and (min-width: 768px) {<CSS②> } @media screen and (min-width: 1024px) {<CSS③> } |
これで、メディアごとにページサイズを最適化できる、メディアクエリの記述方法の一例です。
3. ブレイクポイントを設定する
メディアクエリを記述する際に、ブレイクポイントを設定することになります。ブレイクポイントとは、デバイスごとに画面サイズが切り替わるポイントを指します。
ブレイクポイントの具体的な数値については、どれがいいというものはありません。なぜなら、スマホの中でも機種によって画面幅が異なるためです。
ブレイクポイントの範囲を紹介しますので、この数値を参考にしてご自身のサイトと合う値を決めてみてください。
- スマートフォン：320px～540px
- タブレット：600px〜1024px
- パソコン：1,280px〜
4. Chrome DevToolsで確認する
レスポンシブデザインのコード記述が完了した後は、きちんと作動するかどうか確認します。作動するかどうか確認するには、Google Chromeのディベロッパーツールを使います。
Google Chromeのディベロッパーツールでは、端末ごとに動作確認ができます。レスポンシブデザイン対応の確認に適したツールなので、ぜひ使ってみてください。
自社でレスポンシブデザインに対応できない場合
自社で対応できない場合の、レスポンシブ化の方法について2つ紹介します。
- 外部に依頼する
- レスポンシブ対応済みの既存テーマを使用する
おそらくこの2つのどちらかで対応する企業が多いでしょうから、ぜひ参考にしてください。
外部に依頼する
無難なのは、レスポンシブ化を外部に依頼する方法です。具体的には、サイト制作会社または個人のプログラマーのどちらかに依頼することになります。レスポンシブ化にかかる費用は、主に対応するプログラマーの人件費です。
また外部にレスポンシブ化を依頼するには「既存のページをレスポンシブ化」または「レスポンシブ対応のページ」のどちらかになります。サイト制作会社に依頼したほうが費用はかかりますが、高品質なデザインに仕上がる可能性が高くなります。一方で個人のプログラマーに依頼した場合、品質は劣るかもしれませんが、低価格で発注可能です。
レスポンシブ対応済みの既存テーマを使用する
CMSがWordPressであれば、すでにレスポンシブ化しているテーマを利用する方法もあります。公開されているテーマの多くはレスポンシブに対応しているため、WordPressの場合はすぐにレスポンシブ化できます。
テーマにも無料と有料のものがあるため、価格や性能を比較して導入を検討してみてください。
レスポンシブデザインの注意点
レスポンシブデザインは優れていますが、いくつか注意点もあります。注意点を理解してから、レスポンシブ化するかどうか検討してください。
- 制作に時間がかかる
- 表示速度が遅くなる可能性もある
- 専用サイトを作るよりデザインが劣る可能性も
制作に時間がかかる
レスポンシブ化は、通常のサイト設計やデザインよりも時間がかかります。なぜなら、1つのHTMLおよびCSSで、各デバイスに対応する必要があるためです。
特に、スマホのタッチデザインに対応するには相応のスキルが必要になります。経験のあるプログラマーやWebデザイナーに依頼する必要があり、ノウハウがないとエラーも多く発生するので余計に時間がかかってしまうのです。
そのため、外部に制作を依頼する時は時間がかかることを理解しておいてください。
表示速度が遅くなる可能性もある
レスポンシブデザインにすると、ページの表示速度が落ちる可能性もあるので注意してください。なぜならパソコンやタブレット、スマホでページを読み込んだとき、そのデバイスに関係ない要素まで読み込んでしまうからです。
レスポンシブデザインは、1つのURLですべてのデバイスに対応できるのが大きなメリットです。一方でスマホでレスポンシブデザインのページを閲覧した場合、スマホだけでなく、パソコンやタブレットなどのコードも読み込んでしまうのです。
読み込むファイルが多いほど表示速度も遅くなってしますので、その点は考慮しておいてください。
専用サイトを作るよりデザインが劣る可能性も
デザイン面だけで見れば、各デバイスごとに作る専用サイトよりも、レスポンシブデザインのほうが劣る可能性もあります。レスポンシブデザインは1つのHTMLファイルであらゆるデバイスに対応したデザインにするため、バランス感が崩れる可能性もあるからです。
そのため、デザインに凝ったサイトにしたい場合は、レスポンシブデザインよりもデバイスごとにデザインを設定するほうがよいケースもあります。ただし、高度なコードに関するノウハウがあれば、レスポンシブデザインでも十分に優れたデザインにできます。
まとめ
レスポンシブデザインとは、パソコンやタブレット、スマホなどあらゆるデバイスに1つのHTMLファイルで制作したサイトのデザインです。1つのURLであらゆるデバイスに対応できるため、インデックスの効率を上げたり、アクセス解析を容易にしたりするメリットがあります。レスポンシブデザインに対応するには、自社でコードを追加修正する以外に、外部に制作を依頼したりWordPressのレスポンシブ対応のテーマを利用したりする方法があります。現在レスポンシブデザイン未対応の企業は、この機会にぜひ導入を検討してみてください。
この記事の監修者
日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで1000以上のサイトのSEO対策を手掛けてきました。
