レスポンシブデザインが登場する前は、多くのユーザーはWebサイトをPC画面で閲覧していました。

以降、ユーザーが使う端末の種類が増え、それぞれの画面サイズに対応できるようにする考えが、レスポンシブデザインへと繋がりました。

このレスポンシブデザインの仕組みにより、検索するユーザー側も、メディアを運営する側も、大きなメリットを享受できるようになります。SEOへの直接の影響はないものの、サイトの使い勝手に大きく寄与しますので、間接的に重要な要素です。

この記事ではレスポンシブウェブデザインについて詳しく解説していきます。

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

レスポンシブデザインとは、Webサイトを見るために使う端末によってフレキシブルに表示の切り替え可能なWebサイトの作り方を指します。

スマートフォンの普及により、今やWebサイトはPCで見る考え方から、いつでもスマートフォンで手軽に見ることができるものへと変わっていきました。

また、スマートフォンだけではなく、タブレット端末なども登場し、これらの端末で閲覧できるWebサイトの設計や、デザインが求められています。

レスポンシブデザインを導入することで、同一内容の情報を、異なる画面サイズの端末で表示可能です。

レスポンシブデザインの仕組み

WebサイトはHTMLとCSSを用いて配信され、HTMLにはコンテンツ情報が、CSSにはページレイアウト情報が記載されています。

そして、これらの情報を、Webサイトを見るためのソフトウェアであるブラウザで、画面に表示しています。

つまり、1つのHTML情報を各端末ごとにCSSを用意し、画面表示を切り替えるのがレスポンシブデザインの仕組みです。同じ情報を用いつつ、見せ方を変える方法がレスポンシブデザインです。

共通のURLやHTMLの情報を使うこの仕組みを使うことで、ユーザーが使ういずれかの端末の表示エラーが起きる障害を回避し、ユーザビリティの向上やクローラー巡回時の確認負荷を軽減できます。

レスポンシブ化が必要な理由

レスポンシブ化が必要な理由は次の２つです。

• SEO対策の観点でGoogleからレスポンシブ化が求められている
• ユーザーフレンドリーなWebサイトにするため

SEO対策の観点でGoogleからレスポンシブ化が求められている

運営しているWebサイトをレスポンシブ化することで、次のような評価を下げる事象の排除につながります。

• PC用サイトページで表示されているコンテンツの一部が、スマートフォン用サイトページに存在しない
• PCを用いたWifi環境を想定したサイト構築をしているため、スマートフォン等の端末でサイトにアクセスした場合の表示速度が遅くなる
• PC以外の端末に合わせた画面デザインになっておらず、ユーザーがサイトから早期離脱してしまう

Googleがモバイル用サイトページをインデックスする、モバイル・ファースト・インデックス（MFI）への完全移行を2021年3月に発表しました。

これにより、モバイル用サイトページを作成していないWebサイトへの検索順位下落が危惧され、モバイル用サイトページが必要な状況が、メディア運営側にあります。

また、Google側はPCとスマートフォンで、Webサイトのコンテンツ内容や構成要素が異なる場合、評価を下げるとしています。

よって、先ほど説明したHTMLを1つにし、各端末ごとにCSSを用意する形が望ましいとされているのです。

ユーザーフレンドリーなWebサイトにするため

レスポンシブ化は運営側だけの視点だけではありません。当然、Webサイトを閲覧するユーザーのためにも必要な対応です。

ユーザーフレンドリーなWebサイトになると、ユーザーに自社商品やサービスの魅力が伝わりやすくなります。また、Webサイト内でのUIが向上するため、コンバージョンに近づけることが可能です。

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

メリットしかないように感じるレスポンシブデザインですが、デメリットも存在します。

それぞれの特徴をしっかり押さえておきましょう。

メリット

レスポンシブデザインのメリットは次のとおりです。

• モバイル・ファースト・インデックス（MFI）に対応できる
• SEO効果が得られやすくなる
• Webサイトの管理工数を削減できる
• サイトデザインを端末に関係なく統一できる
• SNSなどでシェアされやすくなる

モバイル・ファースト・インデックス（MFI）に対応できる

レスポンシブデザインを導入することで、スマートフォン用のWebサイトをインデックス評価の主軸とするGoogleの方針に合わせることが可能です。

現在、ユーザーの多くがスマートフォンで情報取集をしていることから、スマートフォン用サイトのコンテンツが判断基準となる流れにも対応できます。

SEO効果が得られやすくなる

端末の種類に関係なく、1つのURLでWebサイトにアクセスすることが可能です。

その結果、URLの正規化やサイト評価の統一などのSEO効果を得られやすくなります。

Webサイトの管理工数を削減できる

レスポンシブデザインの導入により、Webサイトの運営側はHTMLファイルを1つ管理するだけとなり、管理工数が削減できます。

それにより、Webサイト管理にかかる人件費などの事業コストの削減にも繋がり、あらたに集客活動や新規事業投資の予算として活用可能となります。

サイトデザインを端末に関係なく統一できる

各端末間で1つのHMLファイルを利用しているため、各端末に限らず、コンテンツ設計や画面設計を統一できます。

統一できることにより、Webサイト管理者側でもWebサイトのコンテンツを把握しやすくなり、ユーザーにとっても、デバイスの種類を気にすることなく、Webサイトを訪問できます。

SNSなどでシェアされやすくなる

レスポンシブデザインはユーザーが使う端末の種類に関係なく、1つのURLで表示されます。

そのため、ユーザー側は容易にSNSで気に入ったWebサイトを紹介・シェアすることが可能です。

シェアされたWebサイトは端末種類の制約を受けないため、レスポンシブデザインに対応していないURLと比べ拡散性が高くなります。

デメリット

• デザインの制限がありデザイン崩れやデザインが似通ってしまう
• スマートフォン用Webサイトの表示に時間がかかりやすくなる
• レスポンシブデザインへの切り替え工数やコストが多くかかる
• レスポンシブデザインへの実装に時間がかかる

デザインの制限がありデザイン崩れやデザインが似通ってしまう

レスポンシブデザインは、その仕組み上、1つのHTMLファイルを使うため、レイアウトの大幅変更はできません。

よって、各端末に対応させるため汎用性のあるデザインやフォントに限られます。

そうすることで、デザインが似通ったWebサイトになったり、こだわり過ぎたデザインにしてしまうと画面表示出来ないことも考えられます。

レスポンシブデザイン導入時には、簡潔かつ汎用性の高いデザインでの制作を検討すると良いでしょう。

スマートフォン用Webサイトの表示に時間がかかりやすくなる

1つのHTMLファイルの情報を、スマートフォン用のWebサイトに読み込ませるため、スマートフォン用のWebサイトで表示させないデータも読み込まれてしまいます。

そのため表示時間がかかる可能性があり、こういった細かい部分にも気を配れるかが、ユーザーが離脱しにくいWebサイト構築につながります。

レスポンシブデザインへの切り替え工数やコストが多くかかる

今まで運用してきたデザインから、レスポンシブデザインへの切り替えには、導入時のコンテンツや画像などのコンテンツ設計・構築コストがかかります。

様々な端末に対応したデザインとするため、最初のWebサイトの設計には人一倍時間をかけて取り組む必要があります。

この意識があるかないかで、結果が大きく異なるため、十分に注意しましょう。

レスポンシブデザインへの実装に時間がかかる

レスポンシブデザインの仕組み自体は簡素化できますが、実際、1つのHTMLファイルを各端末ごとに作成したCSSで制御するためには、CSSの記述も複雑になります。

各端末にあったデザインやコーディングをしないと、画面表示やレイアウト崩れの原因にもなります。

レスポンシブデザインのレイアウトを3つ紹介

レスポンシブデザインには、次の3つのレイアウトがあります。

• レスポンシブレイアウト
• リキッドレイアウト
• フレキシブルレイアウト

レスポンシブレイアウト

レスポンシブレイアウトは、端末ごとの画面幅の数値でCSSを切り替えるレイアウトです。

ブレイクポイントと呼ばれるCSSを切り替えるピクセル数を指定します。このピクセル数により、各端末にあったレイアウトの表示が可能です。

レスポンシブレイアウトのメリット

このレスポンシブレイアウトのメリットは次の3つです。

• 各端末の画面サイズに合わせた画面幅に自動調整してくれる
• 1つのCSSで複数デバイスに対応でき、管理やメンテナンスの工数が抑えられる
• 人気のあるWebサイトで導入されている

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

一方、レスポンシブレイアウトのデメリットは次の3つです。

• CSSのデザイン設定が複雑になる
• PCとスマートフォンでそれぞれレイアウトを変えると、画面表示速度が遅くなる可能性がある
• 端末ごとに合わせた画面表示サイズのCSSを作る必要がある

リキッドレイアウト

リキッドレイアウトは、画面表示させる各端末の画面幅が変わるのに合わせ、サイト全体の画面表示幅も変わる特徴があります。

リキッドレイアウトは各表示単位を％で指示することで、全体がどの端末でもしっかりと表示され、視認性の高いサイトに仕上がります。

リキッドレイアウトのメリット

• 画面にあったレイアウトが表示される
• スマートフォン画面ではPCレイアウトに近い状態の表示になる
• レイアウトが崩れにくい
• 新しい端末による規格の変動を受けにくい

リキッドレイアウトのデメリット

• 別のレイアウトデザインに変更する場合の工数がかかる
• 全体的に締まりの無いデザインになりやすい

フレキシブルレイアウト

各要素のパーセントで設定するのはリキッドレイアウトと同じですが、フレキシブルレイアウトの場合、画面の最小と最大幅の設定が可能です。

PC用Webサイトのレイアウトだけ固定したい場合、このレイアウトは向いています。

フレキシブルレイアウトのメリット

• 全体としてまとまったデザインに仕上げることができる
• 画面の最小・最大幅を可変数で設定できる

フレキシブルレイアウトのデメリット

• リキッドレイアウトに対しCSSに外枠要素の追加記述が必要となる

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

レスポンシブデザインを実装するためには、次の2つの作業が必要です。

• HTMLにmeta viewportタグを記述する
• CSSファイルにメディアクエリを記述する

HTMLにmeta viewportタグを記述する

まず、HTMLの＜head＞タグ内にviewport（ビューポート）と呼ばれるmetaタグを次のように記述します。

【記述内容】

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>

このように記述することで、それぞれの端末に合わせた見やすい画面表示が可能となります。

記述内の各項目を下記にまとめています。

実装箇所	説明
meta name=”viewport”	viewportとは、それぞれのデバイスの画面幅に合わせて表示する大きさを調整するコードの意。
content=width=device-width	width=device-widthとは、サイトに訪れたユーザーの端末に合わせた横幅を取得する意味。特に指定のない限り、device-widthとする。
initial-scale=1.0,minimum-scale=1.0	画面表示倍率を指定する箇所。多くのサイトで初期のズーム倍率である1.0を指定。 必須指定ではないため、特に指定がなければそのままとする。 最少倍率（minimum-scale）と最大倍率（maximum-scale）の指定が可能。

CSSファイルにメディアクエリを記述する

メディアクエリを使うことで、サイトを訪れたユーザーの端末に応じたページサイズの切り替えが可能となります。

メディアクエリはそれぞれの端末に合わせ、次のように実装します。

【PC用のCSSコード】

@media screen and (min-width: 767px) { /*ウィンドウ幅が767px以上の場合に適用*/

#menu-bg {background-color: #00FFFF; /*青色*/}}

【スマートフォン用のCSSコード】

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/

#menu-bg {background-color: #00FF00; /*緑色*/}}

【タブレット用のCSSコード】

@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/

#menu-bg {background-color: #FF0000; /*赤色*/}}

レスポンシブデザインで使えるCSS

レスポンシブデザインの実装には上記以外にも、次のCSSのコードを活用できます。

• 「display:none」でコンテンツを非表示にする
• floatの解除
• 画像やコンテンツの横幅調整

「display:none」でコンテンツを非表示にする

PC用のWebサイトページをスマートフォン用に対応しようとしても、うまくいかないコンテンツが出てきた場合、「display:none」を使います。

具体的には次のように記述します。

【記述例】

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxの場合に適用*/

#menu-bg {display:none; /*非表示*/}}

ただし、使いすぎは各端末で表示されるページに違いが発生するため、代替コンテンツを作成するなどの考慮が必要です。具体的には、PC用ページには画像を、スマートフォン用ページにはテキストといった具合です。

floatの解除

floatとは横並びのレイアウトを作成するCSSのプロパティです。

通常は記述した要素は縦並びで表示されますが、floatを使うことで横並びのレイアウトに変更できます。

PC用やスマートフォン用にCSSを作ることができれば理想ですが、PC用のWebサイトページに実装したデザインがスマートフォン用の画面にも適用されている場合、横並びでデザインされたfloatを解除する必要があります。

具体的には次の通りです。

【記述例】

@media screen and (max-width: 479px) { /*ウィンドウ幅が0～479pxの場合にcssを適用*/

#contents #l_contents {width: auto;float: none;}

#contents #r_contents {width: auto;float: none;}}

コンテンツを左右に表示させている記述を「float: none」とすることで、横並びのレイアウトに変更しています。

画像やコンテンツの横幅の調整

スマートフォン画面に対応していないコンテンツの場合、横スクロールで表示する画面が残っています。

画面に表示されているコンテンツの横幅が各端末の画面に対し、可変設定になっていないからです。

その場合、次のように記述します。

【記述例】

img {max-width: 100% ;height: auto;}

#menu {max-width: 1000px;width: 100%;margin-left: auto;margin-right: auto;}

「max-width」「width:100％」を活用することで、コンテンツがスマートフォン画面に合わせた表示になります。

レポンシブデザインの実装時の注意点

レスポンシブデザインを実装する際、注意すべき点は次の4つです。

• 対応端末を明確にすること

「ユーザーは様々な端末でWebサイトを閲覧する」。これをまず頭に入れなければいけません。

ユーザーが使用する端末を想定したデザイン作りを考慮することが、レスポンシブデザイン実装の一歩です。

• スマートフォン用の画面設計からはじめること

レスポンシブデザインを実装する際には、まずスマートフォン用の画面設計から始めるようにしましょう。

ほとんどのユーザーがスマートフォンからアクセスしており、デザイン作成側としても効率的に作業が可能です。

• 画像ファイルの容量をできる限り、少なくすること

スマートフォンでのWebサイト閲覧が主流となり、画像ファイルの容量が多いとそれだけ画面表示に時間がかかります。

Webサイトの表示を遅くさせないためにも、次の施策を検討してみましょう。

• 画像サイズの小さいファイル使用や画像ファイルの形式を検討する
• 表示したい画面幅に応じて画像サイズを切り替える
• CSSスプライトを活用する
• 高解像度ディスプレイに対応したCSSを実装する
• CSSの記述内容を見直すこと

Webサイトの表示速度が遅くなる原因の1つに、CSSの記述内容の非効率性が挙げられます。実際画面表示に3秒以上かかってしまうと、ほとんどのユーザがWebサイトから離脱するというデータがあります。次のポイントを見直すことで、表示速度向上や、ひいてはWebサイトの評価向上につながります。

• セレクタの見直し
• CSSのインライン化
• HTTPりのリクエスト数の削減

レスポンシブデザイン対応は、いまや必須事項！

レスポンシブデザインを自社のWebサイトに導入することは、SEOの視点でも必須と言える状況です。

様々な端末に対応できるだけではなく、管理工数やブランデングにおいてもメリットが非常に多いデザインと言えるでしょう。

Googleがモバイル・ファースト・インデックスを推奨していることもあり、多くの企業でレスポンシブデザイン導入が加速しています。

導入時に大事なことは、自社がターゲットとするユーザーが、どのようなシーンでどういうデバイスでWebサイトを訪れるかを考え、最適なデザインを選択することです。

そこさえきちんと押さえておけば、レスポンシブデザインは自社のWebサイトに大きなメリットをもたらしてくれるはずです。