レスポンシブデザインとは？作り方のコツやCSS実装方法、テンプレート・参考サイトを紹介

レスポンシブデザインとは、Webサイトのレイアウトをデバイスの画面サイズに合わせて最適化するデザインのことです。

従来はWebサイトを閲覧するにはパソコンを使うのが主流でしたが、現在はスマートフォンの普及により、様々なデバイスから閲覧するようになっています。
スマホ・タブレット・PCでは画面の大きさが異なるため、見るデバイスによってWebサイトは異なる見え方になります。

そこで重要視されているのが、ユーザーのデバイスによってWebサイトのデザインが最適化される「レスポンシブデザイン」の実装です。

レスポンシブデザインに対応しているサイトは、使用するデバイスによってWebサイトのデザインが自動で最適化されます。
Googleもレスポンシブ化を推奨しているため、サイトをレスポンシブ化させることはユーザーの利便性向上だけでなく、間接的なSEO対策にも繋がるのです。

ただ、レスポンシブデザインをどのように実装すれば良いのかわからない方も多いでしょう。

本記事ではレスポンシブデザインのメリット・デメリットや作り方のコツ・CSS実装方法、テンプレート・参考サイトを紹介します。
レスポンシブ化がお済でないサイト運営者の方は、本記事を参考にレスポンシブデザインを実装して、Googleやユーザーに好まれるサイトにしていきましょう。

モバイルフレンドリーとは？対応方法やチェック用テストツール、SEOとの関係を解説

レスポンシブデザインとは

レスポンシブデザインとは、Webサイトのレイアウトをデバイスの画面サイズに合わせて最適化するデザインのことです。
スマホやタブレット、PCなど画面サイズが異なるデバイスが存在する中、レスポンシブデザインは1つのHTMLで構成されています。

ユーザーがPCでアクセスした場合はPCの画面サイズに最適化され、スマホでアクセスした場合はスマホの画面サイズに最適化されたデザインが表示される仕組みです。

デバイスの画面サイズによって自動で最適化されるため、ユーザーはストレスなくページを閲覧できるようになります。
また、サイト運営者視点からしてもレスポンシブデザインを実装することで、PC用サイトとスマホ用サイトを別々に作る手間が省けます。

つまり、レスポンシブデザインを実装することはユーザー・サイト運営者どちらにとってもメリットがあるのです。

SEOに効果的なHTMLタグの書き方とは？基本構造やエラーがないかチェックする方法

レスポンシブデザインが主流になった理由

画面サイズによってデザインが最適化される「レスポンシブデザイン」が主流になったのは、ここ数年です。
ここでは、レスポンシブデザインが主流になった理由について紹介します。

1. スマートフォンの普及により画面サイズが多様化された
2. Googleがレスポンシブデザインを推奨している

それぞれ詳しく見ていきましょう。

スマートフォンの普及により画面サイズが多様化した

レスポンシブデザインが主流になったのは、スマートフォンの普及が大きな理由です。
従来はWebサイトを閲覧するのに、パソコンを使うのが主流でした。
しかし、現在はGoogle検索を利用するユーザーの多くがスマートフォンやタブレットを使っています。

総務省が発表したデータによると、2021年の「端末別のインターネット利用率はスマホが68.5%、パソコンが48.1%とスマホが20.4ポイントも上回っています。

この結果からもわかるように、今のインターネットの主流はパソコンではなくスマホです。
従来のようにPCサイズに合わせたページだと、スマホやタブレットでアクセスしたユーザーがストレスを感じて、すぐにページを離脱してしまう原因になります。

ユーザーがどんなデバイスでそのページにアクセスしても、ストレスなくページを閲覧できるようにレスポンシブデザインが使われるようになったのです。

Googleがモバイルファーストインデックスへ移行した

もう一つの理由は、モバイルユーザーの大幅増を受けて、Googleが2021年からモバイルファーストインデックス（MFI）へ移行することを発表したからです。

モバイルファーストインデックス（MFI）とは、スマホ用ページを優先的にクロール・インデックスし、ページを評価する仕組みのことです。

従来は、主にPC用ページを優先的にクロール・インデックスされていました。
ただ、前述したとおりスマホの利用者がPCの利用者を上回ったことで、スマホ優先の基準に変更されたのです。

レスポンシブデザインに対応していないサイトはレイアウトが崩れたり、画像が見づらかったり、ユーザーに使いづらいと思われてしまいます。
その結果、検索エンジンから「ユーザーにとって有益なサイトではない」と評価されてしまい、検索順位が低下してしまう恐れがあるのです。

SEOでマイナス評価を受けないためにも、レスポンシブデザインに対応する動きが加速していきました。

モバイルファーストインデックス(MFI)とは？SEOへの影響や対策・確認方法、完全移行した理由をわかりやすく解説

レスポンシブデザインのメリット

レスポンシブデザインには次のようなメリットがあります。

1. ユーザーの利便性が向上する
2. モバイルフレンドリーに適応できる
3. Webページ更新の手間が削減できる
4. SEO評価が分散しない

1つずつ詳しく見ていきましょう。

ユーザーの利便性が向上する

レスポンシブデザインはユーザーの利便性が向上します。

例えば、PC用のページにしか対応していない場合、スマホでアクセスすると「文字が小さい」「画像が小さすぎる」などの致命的なエラーが起きやすいです。
ユーザーは見づらいWebサイトをわざわざ見ようとしないため、途中で離脱してしまう原因になってしまいます。

レスポンシブデザインに対応していれば、ユーザーが使用しているデバイスに合わせて最適化されたページが表示されるので、ストレスなく閲覧できます。

モバイルフレンドリーに適応できる

モバイルフレンドリーとは、Googleが「モバイルファーストインデックス」への取り組みと同時に加えた、スマホユーザーの利便性を重視する評価基準のことです。
モバイルフレンドリーは、モバイル対応がされているサイトのランキングを上げる仕様で、直接的に検索順位に関わってきます。

4 月 21 日から実施されるモバイル フレンドリー アップデートにより、モバイル検索では、携帯端末で読みやすく使いやすいページの掲載順位が引き上げられます。

引用：Google検索セントラル

レスポンシブデザインにするということは、自動的にモバイルにも対応するということになるので、モバイルフレンドリーにも適応できるのです。
スマホユーザーにとっても使いやすいサイトになるので、SEOにも強くなります。

なお、自社サイトがモバイルフレンドリーになっているか確認したい方は「モバイルフレンドリーテスト」で自社サイトのURLを入力するだけでチェックできます。

モバイルフレンドリーとは？対応方法やチェック用テストツール、SEOとの関係を解説

Webページ更新の手間が削減できる

レスポンシブデザインは、Webページの更新の手間が削減できます。

通常スマホ用ページを作成するとなれば、PC版ページとは異なるHTML・URLを作成しなければいけません。
PC用・スマホ用でURLを分け、alternateタグなどで正規化しながら運用する場合、コンテンツの追加や更新・修正が必要となり、時間と手間がかかってしまいます。

レスポンシブデザインに対応していれば、CSSファイルが各デバイスに合わせて画面サイズを最適化してくれるため、1つのHTML・URLだけの管理で済みます。
レスポンシブデザインに対応させることは、ユーザーだけでなくサイト運営者にとってもメリットがあるのです。

alternateタグ(Link rel=alternate)の意味とは？記述方法や多言語・スマホサイトなど事例を解説

SEO評価が分散しない

URLがひとつのレスポンシブデザインは、Googleの検索エンジンからのページ評価が分散しないため、SEOの観点でも有利です。
同一コンテンツであっても、PC用とスマホ用でURLが2つ存在している場合、SEO評価が分散してしまうリスクがあります。

また、重複コンテンツとして評価を下げる要因になってしまうリスクもあります。

一方、レスポンシブデザインで1つのURLに統一することで、SEO評価が分散しません。
実際にGoogle公式サイトでもレスポンシブデザインを使用することで、適切にインデックスできると記載されています。

PC 用のページとモバイル用のページを単一の（同一の） URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。

引用：Google検索セントラル

正当なSEO評価を受けるためにも、レスポンシブデザインに対応させることが大切です。

重複コンテンツを避ける方法とは？判定基準や原因別の対策方法、SEOへの影響を解説

レスポンシブデザインのデメリット

レスポンシブデザインにはメリットだけでなくデメリットもあります。
主なデメリットは次の2つです。

1. CSSの記述が難しい
2. 動作が遅くなる場合がある
3. Webデザインの自由度が低い

1つずつ詳しく見ていきましょう。

CSSの記述が難しい

WordPressの場合はレスポンシブデザイン対応のテーマを使用するだけで簡単にレスポンシブデザインを実装できますが、CSSを作成する場合はコードを記述する必要があります。
PCやスマホ、タブレットなど各デバイスの画面サイズに合わせて、幅の指定やデザインの設定を行わなければいけません。

推奨されているコードをコピペすれば、レスポンシブデザイン対応のサイトは作成できますが、記述を間違えると表示されない・デザインが崩れるなどのトラブルに繋がります。

レスポンシブ用の記述に慣れていないと、作業工数がかかってしまう、トラブルが起きやすいという点はデメリットと言えるでしょう。

WordPressのSEO対策設定のやり方とは？初心者向けにプラグインや投稿設定を方法を解説

動作が遅くなる場合がある

レスポンシブデザインにすると、動作が遅くなる場合があります。
なぜなら、スマホ用ページを表示する際もPC用のHTMLを読み込んでしまうからです。

Webサイトの表示速度が遅すぎると、ユーザーの離脱率を高めてしまう恐れがあります。
場合によってはCSSファイルを圧縮したり、画像サイズを小さくしたりするなどして、ページの表示速度が遅くなりすぎない工夫が必要です。

スマホ用ページの表示速度を測定・改善したい場合はGoogleが提供する「PageSpeedInsights」をご利用ください。

Webサイト表示速度の改善方法とは？読み込みスピードを計測するツールや数値の目安を紹介

Webデザインの自由度が低い

レスポンシブデザインで一つのHTMLを使用すると、Webデザインの自由度が下がります。
レスポンシブ対応していないWebサイトであれば、PC向けとスマホ向けのデザインを大きく変えることも可能です。

しかし、レスポンシブデザインは統一したデザインになるため、デバイスによって幅などを変えることくらいしかできません。
デバイスごとにターゲットや訴求方法を変えたい場合は、レスポンシブデザイン以外でのスマホ対応を検討する必要があるでしょう。

レスポンシブデザインの作り方・実装方法

レスポンシブデザインを作る方法はいくつかあります。
ここでは、レスポンシブデザインの作り方・実装方法を紹介します。

1. WordPressの場合はレスポンシブ対応テーマを使う
2. viewport・CSSを実装する
3. 制作会社に依頼する

1つずつ詳しく見ていきましょう。

WordPressの場合はレスポンシブ対応のテーマを使う

サイト運営でWordPressを使用している場合は、レスポンシブ対応のテーマを導入するだけで簡単にレスポンシブデザインを導入できます。
WordPressのテーマとは、サイト全体のデザインや構成を設定するためのテンプレートです。

無料のテーマでも、レスポンシブに対応しているテーマはたくさんあります。
有料のテーマはレスポンシブ対応はもちろん、豊富なデザインテンプレートやSEO対策に優れています。

レスポンシブ対応のおすすめWordPressテーマは次の4つです。

• Cocoon（無料）
• Lightning（無料）
• SWELL（有料）
• SANGO（有料）

とりあえずレスポンシブデザインにしたいだけであれば無料テーマでも十分ですが、本格的にメディア運営をしていきたい場合は有料テーマの導入もおすすめです。

WordPressのSEO対策設定のやり方とは？初心者向けにプラグインや投稿設定を方法を解説

viewport・CSSを実装する

WordPress以外でレスポンシブデザインを作るには、viewportの設定が必要です。
viewportとは「表示領域」を示すタグで、デバイスの画面サイズに合わせて、最適なデザインを表示させる役割があります。

まずは、HTMLファイルにviewportを記述します。

<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>

上記のコードはGoogleが推奨する記述方法なのでコピペしてお使いください。

続いて、CSSファイルにPCとその他のデバイス用に振り分ける設定をします。

/*—– PC向けの記述 —–*/
@media screen and (max-width: 961px) {
 /* PC向けのスタイル */
 }

/*—– タブレット向けの記述 —–*/
@media screen and (min-width: 480px) and (max-width: 767px) {
 /* タブレット向けのスタイル */
 }

/*—– スマホ向けの記述 —–*/
@media screen and (max-width: 479px) {
 /* スマホ向けのスタイル */
 }

上記のコードは、横幅が961px以上の場合はPC、480px～767pxはタブレット、479px以下はスマホという振り分けになります。
上記のコードをそのままコピペすることで、ユーザーがページを閲覧しているデバイスに最適化されたサイズで表示されます。

viewportとは？設定方法やHTMLのmeta要素の記述方法を解説

制作会社に依頼する

WordPressを使っていない、技術的に実装が難しい場合には、制作会社へ依頼する方法があります。
自社にHTMLやCSSに関する知識や経験がある人がいない場合、人件費や時間的コストがかさむことも少なくありません。

制作会社であれば知識や経験が豊富なため、理想的なサイトを構築してもらえます。
予算に余裕がある場合やレスポンシブデザイン化に時間をかけたくない場合は、制作会社に依頼することも検討しましょう。

なお、弊社ではこれからWebサイトの制作やリニューアルを行う企業様向けに、Web制作サービスをご用意しております。
もちろん、スマホでも見やすいように、レスポンシブ対応のデザインでWeb制作を行わせていただいております。
以下のページよりサービスの詳細をご覧ください。
株式会社IIPのWebサイトリニューアルサービス

レスポンシブデザインのテンプレート配布サイト

WordPressであればレスポンシブデザインに対応しているテーマを利用すれば、簡単にレスポンシブデザイン化できます。
HTMLサイトを作る場合はviewport・CSSの実装が必要ですが、記述ミスの恐れがあるため、「レスポンシブデザインのテンプレート」を利用するのがおすすめです。

ここでは、無料で利用できるレスポンシブデザインのテンプレート配布サイトを紹介します。

1. TempNate
2. TEMPLATE PARTY
3. 無料ホームページテンプレート.com

1つずつ詳しく見ていきましょう。

TempNate

TempNateは、商用利用可能なレスポンシブデザインテンプレートを無料で配布しているサイトです。
大手携帯ショップや省庁をはじめ、数千サイトに採用されています。

Web専門のディレクターが作った430種類・約1,230パターンが無料で利用可能です。
会員登録不要で気軽にダウンロード・利用できる上、有償で著作権表示を外すこともできます。

TEMPLATE PARTY

TEMPLATE PARTYはホームページテンプレートを無料で配布しているテンプレートサイトです。

ホームページテンプレートに加えて、お好みのパーツをコピペして使える「テンプレートのパーツ配布コーナー」もあります。
ビジネス向けや飲食店向け、個人サイト向けなど、サイトのジャンルに合わせたテンプレートが用意されているのも特徴です。

ライセンス契約をすれば、著作権表示を削除することもできます。

無料ホームページテンプレート.com

無料ホームページテンプレート.comは商用利用可能なレスポンシブHTMLテンプレートです。
企業サイトや店舗サイト、各種サービスサイトなど様々な用途で利用できます。

テンプレート内の写真やイラストをそのまま利用することも可能です。
約100種類のテンプレートが用意されており、シミュレーターを使うことで、自社サイトで実装したときのデザインも確認できます。

レスポンシブ対応のWordPressテーマも提供しているので、WordPressを使ってサイト運営している方にもおすすめです。

レスポンシブデザインに関するよくある質問

レスポンシブデザインに関するよくある質問をまとめました。
ぜひ参考にしてください。

レスポンシブデザインは必須ですか？

レスポンシブデザインはGoogleがあくまで推奨しているだけで、必須ではありません。
ただ、PC用ページとスマホ用ページを別々で運用するのは人的ミスが起こりやすく、SEO上のリスクもあります。

そのため、特別な理由がない限りはレスポンシブデザインにするのがおすすめです。

レスポンシブデザインの最適ブレイクポイントは？

レスポンシブデザインの最適なブレイクポイントをデバイス別に紹介します。

• パソコン：960px～1,280px
• タブレット：768px～960px
• スマホ：375px～428px

デバイスが可変するポイントをデバイスごとに設定することで、各デバイスに適したWebページが表示できます。