【入門】レスポンシブWebデザインとは？概要と作り方を丁寧解説

「レスポンシブWebデザインとは何？」や「CSSをどう使えばレスポンシブ対応になるの？」など、基礎知識を初心者向けに解説していきます。

今さら聞けないレスポンシブWebデザインについて、概要やメリット・デメリット、また作り方などをまとめています。Webサイト制作を効率的に進めるときに、ぜひご活用ください。

レスポンシブWebデザインとは？
- スマホ表示の対応方法とその違い、メリット・デメリット
- レスポンシブWebデザイン事例
レスポンシブWebデザインの作り方
レスポンシブWebデザイン対応するテンプレートのご紹介
まとめ

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

レスポンシブ（responsive）という用語には、敏感に反応するという意味があります。またレスポンスの言葉より派生しています。

できればコストをかけPCとスマホを別々のデザインで制作するのが、利用者には理想的です。ただこれではWebサイトの制作者にとって、Webサイト更新時のコストが2倍になり、運用を継続するのは難しくなりがちです。

そういった場合に、レスポンシブの考え方が役立ちます。PCなのかスマホなのか、Webサイトを利用する機器によってディスプレイの大きさが変わるため、どんな画面サイズでもわかりやすい画面表示が必要です。このように効率的に「切り替え」をする考え方や具体時な手法を、レスポンシブWebデザインといいます。

レスポンシブWebデザインのメリットとデメリットを比較し、Webサイトのレイアウト決めや制作手順を解説します。

【補足】
タブレット端末や高解像度に対応するRetinaディスプレイなどにも、同様の対応が必要です。この記事では、わかりやすくするために一般的なPCとスマホに限定してまとめています。

スマホ表示の対応方法とその違い、メリット・デメリット

スマホ表示に対応する主な方法には、「レスポンシブWebデザインでの対応」と「スマホ専用ベージの制作」の2種類あります。これらは、おおまかに以下の表のように比較することができます。

なお、基本となるファイルをHTMLとした場合を想定しています。厳密には、動的ページや変換ツールなどを利用しても可能ですが、複雑になるためこの記事では省略しています。

	レスポンシブWebデザインでの対応	スマホ専用ベージの制作
作成するHTMLファイル数	1 （PC表示用とスマホ表示用を兼ねる）	2 （PC表示用とスマホ表示用を別々に制作）
ページのURLアドレスの数	1 （PC表示用とスマホ表示用と同一）	2 （PC表示用とスマホ表示用は別々に存在する）
制御方法	独立したCSSファイルより、HTMLファイルに対して指定する	通常通り
メリット	・Google検索により優位になる（SEO対策）・ページ作成や更新の手間が減る	比較的自由なデザインレイアウトが可能
デメリット	・制御するCSSが複雑になる・デザインレイアウトの制約が若干ある	レスポンシブに比べ作業量は倍

レスポンシブWebデザイン事例

それでは、レスポンシブWebデザインに対応するWebサイトでは、PCとスマホでどのように表示が変わるのでしょうか。カゴヤサーバー研究室を例に、かわりやすく違いを解説していきましょう。

PCの場合	スマホの場合

（1）メニュー画面上部に横一列に表示	（1）メニュー通常は隠れているが、該当部分をタップすると開く（赤枠の部分）
（2）おすすめ記事のレイアウト画像は左側、文章は右側に表示	（2）おすすめ記事のレイアウト画像は上側、文章は下側に表示
（3）サイトバー（PCの場合）画面右側に表示	（3）サイトバー（PCの場合）画面の横幅全てにちょうど収まるように表示

このように、同じページでもPCとスマホでは表示が大きく変わりますね。

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

とても難しい印象がありますが、やり方自体はとてもシンプルです。多くの場合、次の2ステップで実現可能です。

HTMLファイルなどのヘッダー部分にmeta viewportタグを追加する
CSSファイルで、PC用とスマホ用の表示方法の違いを記述する

実際の作業では細かな調整が必要です。場合によっては表示画面を見ながら検証するため、時間がかかる場合があります。

ステップ（1） meta viewportタグを追加する

追加する箇所

HTMLファイルで作成されたWebサイトの場合は、すべてのHTMLファイルのヘッダー部分に追記します。一方、WordPressで作成されたWebサイトの場合は、共通のテンプレートファイル（header.phpなど）に追記します。

追加するソースコード例

【ソースコード】

いろいろな指定方法がありますが、多くの場合上記で通用します。この記述の意味は、おおむね以下の内容です。

利用者がアクセス時に使用した機器について、画面サイズなどの情報を入手する
この情報にある画面の横サイズから、PC向けかスマホ向けかを判断する

上記の判断のあとに具体的な指示（別ファイルのCSSなど）に従って、Webサイトの表示がPCとスマホで切り替えられます。

ステップ（2） CSSファイルで指定する

「メディアクエリ」を使います。適用されるCSSの指示内容を、画面サイズによって切り替えできるところがポイントです。これにより、PCとスマホで異なる表示やレイアウトができるようになります。メディアクエリを使った具体的な指示内容は、以下の通りです。

■PC向けの場合
例として、表示画面のサイズが481px以上の場合を想定しています。この数字を「ブレイクポイント」と呼び、ポイントのサイズになると、PCとスマホでの指示内容が切り替わります。481pxという数字は、任意の数字を指定できます。紛らわしいですが、この場合の「min-width」とは、ここで指定した481pxサイズ以上の場合の指示内容になります。

【ソースコード】

@media screen and (min-width: 481px)　{ }

{ }内に、通常のCSSを入れます。

■スマホ向けの場合
次に、表示画面のサイズが0px～480pxの場合は以下の通りです。同様に、この場合の「max-width」とは、ここで指定した480ｐｘサイズ以下の場合の指示内容になります。

【ソースコード】

@media screen and (max-width: 480px)　{ }

{ }内に、通常のCSSを入れます。