レスポンシブデザインとは？作り方とメリット・デメリット

2023.02.27 2023.02.27 Web制作

継続率90％、様々な広告媒体の運用を最適化したい方へ

あなたのサイトは、集客できていますか？各々の課題に沿ったSEOとユーザーに響くデザインを両立したサイト制作で、意識の高いターゲットをフロントへ呼び込みます。

レスポンシブデザインは、1つのhtmlファイルでWebサイトデザインを画面サイズ（横幅）に応じてページのレイアウトやデザインが最適に切り替えることを意味します。ページを作る時にレスポンシブデザインを採用することで、サイト運用やアクセス計測のタグ管理がしやすい特長があります。

今回は、レスポンシブデザインとは？についての解説と、レスポンシブデザインでページを作るメリット・デメリットを紹介します。

1 レスポンシブデザインとは
2 レスポンシブデザインのメリット
3 レスポンシブデザインのデメリット
- 3.1 デザインの自由度が低い
- 3.2 モバイルの表示速度が遅くなる
4 レスポンシブデザインの作り方
- 4.1 htmlファイルにmeta viewポートを記述する
- 4.2 cssファイルにメディアクエリ（@media～）を記述する
5 レスポンシブデザインテンプレート
6 レスポンシブWebデザインに関するよくある質問
7 おわりに

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

1つのhtmlファイルでマルチデバイス対応可能

レスポンシブデザインは、1つのhtmlファイルでデバイス毎に最適なWebデザインを表示させるためのデザイン手法の1つです。通常は、最適化するデバイス数だけhtmlファイルのコーディングが必要ですが、レスポンシブデザインは、1つのhtmlファイルだけで閲覧画面の横幅に応じた画面表示を切り替えることが出来ます。画面の切り替わりは、css内にメディアクエリと画面切り替えの横幅ピクセル（ブレイクポイント）を設定することで実現可能です。

以下はPCでChromeブラウザの横幅を縮めたときに切り替わる画面の説明です。

レスポンシブデザインの画面切り替わる例

デバイスの画面サイズに合わせたデザインを行い、画面サイズに応じて用意したページを表示させる手法のことを言います。パソコンやスマートフォンのデバイス画面は様々ですが、画面サイズに合ったレイアウトで柔軟に表示させることが可能です。

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

複数のデバイスにワンソースで対応できるレスポンシブWebデザインには、さまざまなメリットがあります。ワンソースでWebサイトを作成できるメリットを、いくつか紹介します。

メリット	詳細
URLをデザインで分ける必要がない	レスポンシブデザインは1つのURLでPCとSPを表示することが出来ますので、SP版にURLを用意する必要はありません。ページの更新やアクセス計測が1つで済む便利さがあります。
SEOのマイナス評価に陥りづらい	例えばPCとSPでURLが異なり、2ページ存在する場合は、評価を1つのページに集約するためのURL正規化対応をしないとSEOでマイナス評価を受けます。レスポンシブデザインはその対応が不要ですので、マイナス評価に陥りづらいと言えます。
情報の差分が起きづらい	レスポンシブデザインは、1つのhtmlファイルでコンテンツ（文章や画像など）を管理していますので、1つのhtmlファイルの修正でPCもSPも修正することが出来て工数が減ります。

URLをPCとSPで分ける必要がない

レスポンシブ開発の場合、PCとSPように画面を要しても1つのhtmlデータ（ワンソース）のため、URLはひとつになります。

TwitterやFacebookなどでWebサイトのURLが共有されることが多くなってきていますが、ひとつのWebサイトに複数のURLがあると効率的に共有してもらうことができません。URLがひとつであれば、ユーザー側も共有しやすくなり、発信しようとしている情報も拡散しやすくなるというメリットがあります。

SEOのマイナス評価に陥りづらい

レスポンシブWebデザインは、Googleがスマートフォンに最適化されたWebサイトの構築方法として推奨している手法の1つです。

PCとSPでURLが2つになる場合、SEO効果を毀損しないための設定が不可欠ですが、レスポンシブはURLが必要なため多くの設定を必要としません。そうした意味で、SEO観点の管理がしやすいことが特徴です。

ただし、レスポンシブであれば他の手法よりSEO効果が得られるわけではないので、その点に注意が必要です。サイト特性によって異なりますがレスポンシブ開発しない方が、ユーザビリティが良くCVRが高いこともあります。

情報の差分が起きづらい

パソコン用、スマートフォン用、タブレット用と3種類のWebサイトのデータを作ると、それぞれのWebサイトで載せている情報が異なってきてしまう場合があります。レスポンシブWebデザインで作成するとワンソースで済みますので、同じ情報をパソコン、スマートフォン、タブレットなどで閲覧することができます。ユーザーの閲覧環境に関わらず、常に同じ内容の情報を発信したい場合には、レスポンシブWebデザインの導入は有効な手段になります。

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

レスポンシブデザインを採用する恩恵を受けられる一方で、デメリットが存在します。レスポンシブデザインを採用するデメリットがサイト運営に影響しないかを事前に確認するとよいでしょう。

デメリット	詳細
デザインの自由度に制限がある	レスポンシブサイトは1つのhtmlファイルで同じコンテンツ（文章、画像など）を表示しますので、ページの構成を大きく変えることは難しくなっています。モバイルファーストでPCとSPで大きくデザインを変えたい場合は、レスポンシブデザインを採用しない方が良い場合があります。
モバイルの表示速度が遅くなる	レスポンシブデザインはPCとモバイルで同じhtmlファイルを読み込みますので、PC用のフルサイズをモバイルで読み込むことになると表示速度が遅くなります。モバイル向けに表示速度を最適化する必要があります。

デザインの自由度が低い

ワンソースで扱うことをメリットとしてあげましたが、一方でデザインやレイアウトをスマートフォン用とパソコン用で大きく変えたい場合はレスポンシブ開発では難しいケースが多くなります。
デバイス毎のデザイン変更が頻繁に発生するようなWebサイトには、レスポンシブWebデザインは適さない場合もあります。PCとSPで画面の操作性が違う傾向が見られた場合は、レスポンシブ開発を選択しない方が良いでしょう。

モバイルの表示速度が遅くなる

スマートフォン専用のWebサイトに比べるとレスポンシブWebデザインは表示速度が遅くなってしまう開発をしてしまうことがあります。PC向けの容量が重い画像をSPでそのまま表示してしまう場合、ページのファイルサイズが大きくなり、ページの読み込みに時間がかかるため、SPの表示速度が遅くなる場合があります。デバイス毎の画像最適化を忘れて開発しないように注意が必要でしょう。

レスポンシブデザインの作り方

レスポンシブデザインを作る方法は以下の手順の通りです。

htmlファイルにmeta viewポートを記述する
cssファイルにメディアクエリ（@media～）を記述する

どちらもhtmlやcssファイルに切替内容を記述します。

htmlファイルにmeta viewポートを記述する

レスポンシブデザインの設定は、htmlファイルのheadタグ内にmetaタグでviewportを設定します。実際の記述は以下のようになります。

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

この設定によってビューポート（表示領域）を各デバイスの画面幅に合わせて、表示を調整することが出来ます。レスポンシブデザインは画面幅に応じて表示領域を可変させますので、この設定が必要です。もし、viewportを設定しない場合は、ブラウザ枠外にコンテンツが表示されて横スクロールをしないとコンテンツが表示されない状況になります。

cssファイルにメディアクエリ（@media～）を記述する

画面幅に応じた表示内容を切り替えは、メディアクエリを使用します。メディアクエリに0～599pxのような横幅サイズを指定することで、該当の横幅サイズで適用されるcssの装飾スタイルが適用されます。PC、タブレット、モバイルと3つの表示切替をレスポンシブデザインで行う場合は、表示切替する画面の数だけメディアクエリを用意します。

メディアクエリの役割を言い換えると、条件分岐と似た性質を持ちます。「もし599ピクセルまでの画面なら、この装飾スタイルを適用する」といった条件分岐です。

/* ウィンドウ幅が0～760pxの場合に適用するCSS */
@media screen and ( max-width:760px )
{
	p
	{
		background-color: gray;	/* 灰色 */
	}
}

上記のメディアクエリを指定すると、760ピクセルまでの画面に適用される装飾スタイルが記述されています。画面が切り替わるポイント（760px）をブレイクポイントと言います。切り替えたい画面幅の分だけブレイクポイントを設定します。

レスポンシブデザインテンプレート

レスポンシブデザインのサイトを早く作りたいのであれば、レスポンシブデザインのテンプレートを利用してみるとよいでしょう。理解が深まり、開発速度がテンプレートデザインによって早まります。商用利用可能なレスポンシブデザインのテンプレートは以下のサイトの利用がおすすめです。

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

レスポンシブWebデザインとスマホ対応ページの違いはなに？

PC表示用とスマホ表示用に用意するhtmlファイル数が違います。レスポンシブWebデザインはワンソースで複数のデバイスに対応させることができるため、PCでもSPでもhtmlファイルやURLは同じになります。

レスポンシブWebデザインはどんなWebサイトにも向いているか？

管理や更新費用が安くなるメリットもありますが、PCとSPで表示内容を大きく変えづらいデメリットがあります。そのため、ユーザーの操作がPCとSPで違うのであれば、レスポンシブサイトが向いているとは言えません。

PC・スマホのみに対応するのではだめなの？

当社の制作事例では、PCとSP対応として2画面分のデザイン制作をすることが多いと言えます。開発コストに余裕があるのであればパソコン、スマートフォン、タブレットなどあらゆるデバイス画面に対応するデザインを用意するとよいでしょう。

LPにも適応できるの？

レスポンシブWebデザインはLPにも適応させることは可能ですが、デザインやレイアウトによって最適化が難しい場合もあります。レスポンシブWebデザインとスマホ対応のページにするのと、どちらが向いているのかをしっかり検討しましょう。

レスポンシブWebデザインをどう作ればいいか分からない場合はどうすればいいの？

レスポンシブWebデザインは、シンプルなサイトやあまりデザインの変更をしないサイトにとても有効な手法です。レスポンシブWebデザインでお困りの場合はレスポンシブ対応やサイトの構築について提案してくれるサービス会社に相談しましょう。当社の「サイト制作サービス」では、最適な方法を提案いたします。

おわりに

メリット・デメリットといっても運営する場面や利用する状況によって逆転することがあります。

Webサイト自体がシンプルで画像などが少ない場合や、デザイン変更が少ないWebサイト、デバイス毎の最適化が必要ないWebサイトの場合、レスポンシブWebデザインは有効な方法といえます。

逆に複雑な構造でデバイス毎にデザインを変更するようなWebサイトの場合は、レスポンシブWebデザインを使わないほうがよい場合もあります。

レスポンシブWebデザインはあくまでマルチデバイスに対応するひとつの方法として捉え、運営コストやWebサイトの目的、ターゲットユーザー、ユーザーの需要などを分析したうえ、他の方法と比較し導入するか検討することをお勧めします。

2023年最新版 SEOセルフチェックリスト無料プレゼント！

年間何百ものWebサイトを確認している当社でも、内部施策SEOが完璧にできているというサイトを見たことがありません。内部施策SEOに漏れがあるということは、自分でできることをやっていないということであり、それだけで機会損失を発生させている可能性があります。本書では、ご自身でセルフチェックと修正ができるよう、Googleが推奨する内部施策SEOのうち、重要なポイントをかいつまんでご紹介しております。

この記事を書いた人
最新の記事

石井

不動産営業の実務経験を持ち、メジャー7の不動産会社のWEBハウスエージェンシーとして勤務していた宅建資格を持つ異色なSEOコンサルタントです。不動産や求人検索、ECサイトにある検索システムのテクニカルなSEOを支援する実績があります。宅建士、上級ウェブ解析士、HTML5(Javascript) レベル2の資格保有。