レスポンシブデザインは、PCやスマートフォンなどのデバイスに応じて画面表示を最適化する手法です。
以前はPCが主流でしたが、現在はスマートフォンやタブレットなど、さまざまなデバイスから閲覧するユーザーが増えています。コンテンツの表示崩れを防ぎ、ユーザーの利便性を下げないためにも、レスポンシブデザインに対応する必要があります。
しかし、レスポンシブデザインのメリットや導入方法がわからず、未だ対応できていないWeb担当者もいるでしょう。
そこで本記事では、レスポンシブデザインの概要や導入方法を解説します。
SEOへの影響も取り上げるので、ぜひ参考にしてください。
＜SEO対策について詳しく知りたい方はこちら＞SEO対策とは？SEO対策のメリット・デメリットと対策方法を詳しく解説
目次
Googleが推奨するレスポンシブデザインとは？
レスポンシブデザインとは、異なるデバイスに合わせて画面表示が切り替わる仕様を指します。
デバイスごとに表示を最適化することで、ユーザーのストレスを軽減したり、検索エンジンのクロール効率を高めたりする効果が期待できます。弊社ランクエストの公式サイトも、レスポンシブデザインに対応しています。
上記のように、スマートフォンとPCで自動的に表示が切り替わります。さまざまなデバイスからWebサイトへの流入が見込めるという理由から、多くのコーポレートサイトやECサイトで導入されています。
また、Webサイトのレスポンシブ化はGoogleからも推奨されています。2015年4月のアップデートで「モバイルファースト」を打ち出し、検索順位を決める指標をPCからモバイルへ移行しました。
そのため、モバイルフレンドリーが適用されたWebサイトは、Googleから評価されやすくなります。レスポンシブ化しただけで検索順位が変わるとは言い切れませんが、サイトの利便性を下げないためにも、最適化しておくとよいでしょう。
Googleがレスポンシブデザインを推奨する理由
Googleはレスポンシブデザインのほか、以下2つの方法をモバイルフレンドリーに対応する方法としてあげています。
|
動的な配信 |
共通のURLを使用し、デバイスに合わせて異なるHTMLを配信する |
|
別個のURL |
デバイスごとに異なるURLで専用のページを用意し、異なるHTMLを配信する |
上記の方法は、いずれもデバイスごとにHTMLファイルを用意するため、制作工数が増え管理も面倒になります。一方、レスポンシブデザインの場合CSSの調整のみで制作が可能なため、実装や維持が簡単です。
以上の理由から、モバイルフレンドリーに対応する方法として、Googleはレスポンシブデザインを推奨しています。
モバイルファーストとPCファーストの違い
モバイルファーストとPCファーストファーストには、それぞれ以下の意味があります。
|
モバイルファースト |
スマホユーザーの心理や利便性を優先する |
|
PCファースト（デスクトップファースト） |
PCユーザーの心理や利便性を優先する |
Googleは、スマホでのWeb閲覧数がPCを上回ったことを皮切りに、スマホ閲覧時の利便性を重要視してアルゴリズムを更新する動きを見せています。具体的には、以下のようなアップデートが行われました。
|
2015年4月 |
モバイルフレンドリーアップデート |
|
2018年3月 |
モバイルファーストインデックス |
|
2021年6月 |
ページエクスペリエンスアップデート |
モバイルフレンドリーアップデートでは、モバイルデバイスでの閲覧に最適化されていないWebサイトの順位が引き下げられました。また、モバイルファーストインデックスを導入し、SEO評価の基準をPCページからスマホページに変更しています。
加えて、ページエクスペリエンスアップデートでは、Webサイトでのユーザー体験の計測指標であるCore Web Vitalsが評価対象に加わりました。
これにより、スマホユーザーが快適に利用できないコンテンツは、上位に表示されづらくなっています。以上の理由から、SEOを意識したWeb制作において、モバイルファーストの理解が不可欠です。
モバイルフレンドリーとレスポンシブデザインの違い
モバイルフレンドリーは、スマホ閲覧に最適化されたWebサイトを指す言葉です。一方で、レスポンシブデザインとはデバイスの画面サイズに応じて自動でレイアウトが変更されるデザインのことです。
レスポンシブデザインを導入しても、それだけでモバイルフレンドリーになるわけではありません。1つの手段であることを理解し、レスポンシブデザインを使ってスマホユーザーの利便性を上げることにフォーカスしてデザインしましょう。
レスポンシブデザインの導入方法
レスポンシブデザインを導入する方法は以下の3つです。
- HTMLとCSSで実装する
- レスポンシブに対応したWordPressテーマを使用する
WordPressでWebサイトを運営している場合は、レスポンシブに対応したテーマを使用すれば導入できます。
それぞれ見ていきましょう。
HTMLとCSSで実装する
CSSにmediaクエリ、HTMLにviewportタグを実装すれば、レスポンシブデザインが実装できます。それぞれ、以下の役割があります。
|
メディアクエリ |
コンテンツの表示領域をデバイスの画面幅に応じて最適化する |
|
ビューポートタグ |
デバイスの画面幅に応じて異なるCSSを吐き出す |
メディアクエリだけでも画面の幅に応じてデザインは変更できます。
しかしビューポートと組み合わせると、デバイスごとにより最適なデザインで表示できるようになるため、両方設定するのがおすすめです。それぞれの設定方法について、詳しく解説していきます。
メディアクエリを記述する
CSSにメディアクエリの@media規則を記述すれば、デバイスごとに画面表示を切り替えられます。書式にはいくつかパターンがありますが、レスポンシブ化の場合は以下の形式が使用されます。
| @media メディアタイプ and (条件) |
メディアタイプの主な種類は以下のとおりです。PCやスマートフォン、タブレットにレスポンシブデザインを対応させたい場合は、「screen」を記述しましょう。
| メディアタイプ | 表示するデバイス |
|---|---|
| all | すべてのデバイス |
| screen | ディスプレイ（PC・スマートフォン・タブレット） |
| プリンター | |
| speech | 音声出力デバイス |
| tv | テレビ |
条件の箇所には、以下のキーワードを当てはめましょう。例えば、幅480px以下のディスプレイ端末のみレスポンシブを適用したい場合は、以下のように記述します。
{}内には、実行する処理を記述しましょう。
|
＠media screen and (min-width: 480px){ |
以上の場合は「max-」、以下は「min-」を条件の先頭に付けてください。
| 条件キーワード | 概要 |
|---|---|
| width | ディスプレイの幅 |
| height | ディスプレイの高さ |
| device-width | 表示領域の幅 |
| device-height | 表示領域の高さ |
ビューポートタグを設置する
ビューポートタグ（viewport）は、コンテンツの表示領域をデバイスごとに最適化するメタタグです。ユーザーが使用する端末に応じて、画面表示や幅を自動で調整できます。
適用する際は、HTMLファイルのhead要素内に以下のように記述します。
| <meta name=”viewport” content=”width=device-width,initial-scale=1″> |
表示領域を細かく設定したい場合は、「content=”〇〇”」の部分に以下を記述することで、幅や倍率、拡大縮小の許可を指定できます。
| プロパティ | 概要 | 設定値 |
|---|---|---|
| width | ディスプレイの幅 | ・200～10,000px ・デバイスの幅に合わせる場合はdevice-width |
| height | ディスプレイの高さ | ・200～10,000px ・デバイスの幅に合わせる場合はdevice-height |
| user-scalable | 拡大縮小の許可 | ・yes（許可） ・no（拒否） |
ビューポートタグだけでは、デバイスに応じてページが見やすく拡大されるだけです。
メディアクエリと組み合わせてはじめてレスポンシブデザインになるため、必ず両方設定しましょう。
JavaScriptを使用する
WebサイトのデザインにJavaScriptを使用している場合、処理を変更しないとデザインが崩れます。該当箇所に以下のように条件分岐を用いて、対応しましょう。
| if (matchMedia(‘only screen and (max-width:◯px //スマホのブレイクポイント)’).matches) { //スマホの時の処理 } else if (matchMedia(‘only screen and (max-width:◯px //タブレットのブレイクポイント)’).matches){ //タブレットの時の処理 } else { //PCの時の処理 } |
レスポンシブに対応したWordPressテーマを使用する
WordPressでWebサイトを運営している場合は、レスポンシブデザインに対応するテーマを使用すれば容易に導入できます。CSSやHTMLを変更する必要もないので、ITの専門知識がなくても問題ありません。
レスポンシブデザインに対応している、代表的なWordPressテーマは以下のとおりです。
レスポンシブデザインに対応したCMSを利用する
新規作成やリニューアルの際に、レスポンシブデザインに対応したCMSを利用すれば、簡単に導入できます。直感的にデザインできるものが多く、専門知識や難しい作業無しでWebサイトを構築できるためおすすめです。
代表的なCMSには、以下のようなものがあります。
- WordPress
- WIX
- Jimdo
- EC-CUBE
- Movable Type
レスポンシブデザインに便利なCSS
レスポンシブデザインの実装に便利なCSSを表にまとめましたので、参考にしてください。
|
プロパティと値 |
役割 |
メリット |
|
display:none; |
コンテンツを非表示にする |
PCとスマホで異なるコンテンツを表示したい |
|
display:flex; |
特定の親要素内の子要素が並列になる |
PCとスマホでコンテンツの表示変更が簡単になる |
|
display:grid; |
特定の親要素内の子要素をタイル状に配置できる |
PC・スマホ問わずにレイアウトの自由度が高い |
|
overflow-x:scroll |
画面を横スクロールできるようになる |
画像や表など、スマホの画面サイズに合わせると表示が不自然になるコンテンツの視認性を上げる |
|
擬似クラスと疑似要素 |
条件に応じて、要素の一部にスタイルを適用できる |
ハンバーガーメニューなど、スマホ特有のデザインが実装しやすい |
レスポンシブデザインは、PCとスマホで共通のHTMLファイルを使用するため、デザインの自由度が低いです。しかし、上記をはじめとするCSSを使いこなせれば自由度が上がるため、積極的に使用しましょう。
レスポンシブデザインを実装する際の注意点
レスポンシブデザインが実装されているサイトでも、タブレットでの閲覧が考慮されていないことがよくあります。
スマホとPCでは画面サイズが違いすぎるため、適切な設定を行わないと中間に位置するタブレットでのデザインが崩れてしまうのです。
最優先はスマホですが、タブレットを利用しているユーザーも少なくありません。メディアクエリにブレイクポイントを最低2つは設定し、すべてのデバイスで快適に閲覧できるWebサイトを目指しましょう。
レスポンシブデザインの適用を確認する方法
-
-
- デベロッパーツールを使用する
- モバイルフレンドリーテストを利用する
-
それぞれ詳しく解説していきます。
デベロッパーツールを使用する
デベロッパーツールは、Google Chromeというブラウザに搭載されている機能です。
以下の手順で利用できます。
-
-
- Google Chromeでレスポンシブデザインを導入したWebサイトにアクセスする
- ブラウザ右上のメニューをクリック
- 「その他のツール」から「デベロッパーツール」を選択（またはF12キー）
- デバイスマークをクリックしてデバイスの種類を選択
-
デザインが崩れていたり、PC表示のままだったりした場合は、一度ブラウザを更新すればレイアウトが変更されます。それでも表示が変わらない場合、CSSが正しく適用されていない可能性があるので再度、設定を見直しましょう。
またデベロッパーツールは、細部の表示が実機と異なることもあるため、必ずスマホでの確認も行ってください。
モバイルフレンドリーテストを利用する
モバイルフレンドリーテストは、Googleが提供しているツールです。以下の手順で簡単にページがモバイルフレンドリーか確認できます。
-
-
- モバイルフレンドリーテストにアクセス
- 「テストするURLを入力」に確認したいページのURLを入力し、「URLをテスト」をクリック
- テストの結果を確認する
- モバイルフレンドリーテストにアクセス
-
「ページはモバイルで利用できます」と表示されていれば、レスポンシブデザインが適用されていますただし、デザインが意図通りに反映されているかまでは確認できません。
必ず該当ページにスマホでアクセスし、動作を確認もしましょう。
レスポンシブデザインのメリット
Webサイトにレスポンシブデザインを導入することで、以下のようなメリットを得られます。
- SEO評価の分散を防止できる
- Webサイトを一括で管理できる
- リダイレクトの手間が省ける
- アクセス解析がしやすくなる
順番に見ていきましょう。
SEO評価の分散を防止できる
レスポンシブ非対応の場合、各デバイスに最適化したWebサイトを、別々のURLで作成しなければなりません。コンテンツの内容は同じでも別のサイトと認識されるので、SEO評価が分散する恐れがあります。
レスポンシブデザインを導入すれば、異なるデバイスから同じURLにアクセスできます。サイトのSEO評価を分散させることなく、適切な判断を得られるでしょう。
Webサイトを一括で管理できる
デバイスごとに異なるURLを作成した場合、それらを一括で管理できません。コンテンツを修正・更新する際は、URLごとに対応する必要があります。
しかしレスポンシブデザインを導入すれば、Webサイトを一括で管理できるようになるため、工数の削減につながります。
リダイレクトの手間が省ける
端末ごとに複数のURLを作成している場合、スマートフォンユーザーがPCサイトにアクセスした際に、リダイレクトが発生します。
レスポンシブデザインを導入すれば、1つのURLで複数のデバイスに対応できるため、リダイレクトの手間が省けます。
アクセス解析がしやすくなる
スマホサイトを異なるURLで用意している場合、2サイト分のアクセス解析が必要です。
しかし、レスポンシブデザインであればURLが変わらないため、まとめてデータを抽出でき、工数を大幅に削減できます。
レスポンシブデザインのサイトのアクセス解析には、Googleアナリティクスを使いましょう。ユーザーの利用デバイスが確認できるため、閲覧の比率やデバイスごとのユーザーの行動も解析可能です。
レスポンシブデザインのデメリット
SEO評価の分散防止やリダイレクトの省略など、多くのメリットがあるレスポンシブ化ですが、以下のようなデメリットも存在します。
- CSSの構築に時間とコストがかかる
- 読み込み速度が遅くなる場合も
- デザインの自由度が下がる
それぞれ見ていきましょう。
CSSの構築に時間とコストがかかる
CSSやHTMLにコードを記述する導入は、専門知識が必要になるので時間がかかります。また外部に委託する場合は、加えてコストも発生します。
自社サイトにレスポンシブデザインが必要か検討したうえで、導入しましょう。
読み込み速度が遅くなる場合も
レスポンシブデザインでは、スマートフォンやタブレットでPCと同じ容量の画像やHTMLコードを読み込むケースがあります。
そのため表示環境や端末によっては、読み込み速度が遅くなり、ユーザビリティやSEO評価が低下する恐れがあります。
レスポンシブデザイン導入後、読み込み速度が遅いと感じた場合は、画像をテキストに変更したり表示サイズを小さくしたりしましょう。
デザインの自由度が下がる
レスポンシブデザインでは、PCサイトと共通のHTMLを使用します。そのため、レイアウトの変更やセクションごとのサイズ調整などに限界があります。
CSSやJavaScriptで工夫すれば、ある程度は対応できますが、やりすぎると表示速度が遅くなるなどのデメリットがあります。Core Web Vitalsの数値やユーザビリティの低下など、SEOに悪影響を与える可能性もあるため、おすすめできません。
スマホとPCで大きく異なるデザインでページを表示したい場合、動的な配信か別個のURLでサイトを制作しましょう。
まとめ：レスポンシブデザインを導入してサイトの利便性を高めよう
レスポンシブデザインは、PCやスマートフォン、タブレットなどデバイスごとに画面表示を最適化できるデザインです。導入することで、ユーザビリティの向上や間接的なSEO評価が見込めます。
CSSやHTMLに直接記述する他、WordPressでサイトを運営している場合は、特定のテーマを使用すればレスポンシブデザインを容易に導入できます。
設定した後は、ブラウザのデベロッパーツールを活用して、正しく適用されているか確認しましょう。
弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。SEO対策にお悩みの方は、お気軽にご相談ください。
株式会社eclore Web Director / Marketing Director
デザイン専門学校を卒業後、2012年に入社。Web領域を中心に、コーポレートや採用サイト、メディアサイトなどのデザイン、コーディング業務に従事。また、リスティングを中心とした広告運用も担当。SEO・広告の観点で優位性のあるWeb制作を得意としています。Web制作数 年間100以上 / 広告運用額 年間2億円以上。
