Webサイトを作成していると「パソコンでの表示は問題なくできるけど、スマホ対応もしたい！」と考える人も多くいるかと思います。今やパソコンよりもスマートフォンを使って検索を行いサイトを閲覧するのが当たり前となり、スマホ表示に対応することは必須と言えるでしょう。
この記事では、ウェブページやホームページをスマートフォンでもうまく表示できるために
- レスポンシブデザインとは？
- レスポンシブデザインのメリット・デメリット
- レスポンシブデザインの作り方
など初心者の方がWebサイト制作の際、これを見ればレスポンシブデザインを完成させられるように作り方を解説していきますので、ぜひご活用ください！
目次
レスポンシブデザインとは？
「レスポンシブデザイン」とは、ユーザーが使用しているデバイスの幅に合わせて表示ができるよう、Webサイトの表示を最適化するデザインのことです。
HTML/CSSファイルをパソコン用とは別に用意するのではなく、CSSに「任意の画面幅より小さかった場合はこのレイアウトを使用する」などと書き込むことで、同じHTMLファイルでもパソコン、スマホの幅に合わせた表示が可能となります。
※スマホだけではなく、タブレットの設定も可能です。
ただのスマホ表示ではない？スマホ表示とレスポンシブデザインの違い！
スマホ表示に対応する主な方法には「CSSによるレスポンシブなデザインでの対応」のほかに「スマホ専用ページの作成」というやり方もあります。
これはパソコン用とは別にスマホ用のHTML/CSSファイルを作成する方法です。
よって、ページURLもパソコン用とスマホ用で2つとなります。
簡単に言えば、レスポンシブ対応は「ユーザーが使用するデバイスの幅に合わせて、表示を切り替えること」に対して、スマホ表示では「スマートフォンできれいに見えるようにすること」が目的となります。
なぜレスポンシブなデザインが必要？メリット・デメリットを紹介
ではなぜ、レスポンシブ化する必要があるのでしょうか？
Googleは「モバイルファーストインデックス」を打ち出しており、Webサイトの評価軸をパソコンからスマホに変更しました。それにともないGoogleはレスポンシブデザインを推奨しています。
そのため、レスポンシブ対応していないWebサイトに関しては、SEOの観点から検索上位に上がらないリスクがあるのです。
また、パソコン用とスマホ用でページURLが別となる場合、コンテンツが重複していると判断されてしまい、SEO上不利に働く可能性もあるため対策が必要です。
ではレスポンシブデザインによるメリット・デメリットを紹介します。
レスポンシブデザインのメリット
- Google検索で優位になる可能性がある
- 1つのHTMLファイルなので、1回の更新でパソコン用もスマホ用も更新可能
- 2つのファイルを作成するより時間とコストの削減になる
レスポンシブデザインのデメリット
- CSSが複雑となる
- スマホ表示も意識したデザインが必要となり、デザインの自由度が下がる可能性がある
- スマートフォンでのページ表示が遅くなることがある
レスポンシブデザインの作り方
ここまでは、レスポンシブデザインについて説明してきました。
では実際にレスポンシブ対応に必要な基礎となる、3つの手順を説明します。
- viewportの設定
- メディアクエリの設定
- cssの値の変更
では、それぞれ解説していきます。
1.viewportの設定
まずはHTMLファイルのheadタグ内に、下記を追記します。
これは、表示領域に関する記述を意味しており、以下の内容を表しています。
- コンテンツの幅はデバイスの画面幅に合わせる
- 表示倍率の初期設定はそのまま表示(1.0倍)
まずはこれをそのままコピペしていただければ問題ありません。
2.メディアクエリの設定
次に、画面幅に合わせた表示にするためにCSSを設定します。
そこで使うのがメディアクエリです。
メディアクエリとは画面サイズによって適用されるCSSの指示内容を、切り替える設定のことです。
CSSファイルには下記のように記載します。
@media(max-width: 480px) {
/* ここにスマホ用のCSSを記述 */
}
（※閉じタグを忘れないように注意）
これは画面幅が480pxより小さい場合、このCSSを適用するという条件の指定となります。
480という数字は任意の数字に変更可能なため、タブレットの画面幅にも設定可能です。
レスポンシブデザインにおけるブレイクポイント
ブレイクポイントとはレスポンシブデザインの表示を切り替えるポイントのことを言います。
毎年最新のデバイスが発売されるためおすすめの値は存在しないのですが、一例としてデバイスごとの画面幅を紹介します。
| スマートフォン | 320px～540px |
|---|---|
| タブレット | 600px～1024px |
| パソコン | 1,280px～ |
実際に最適化したいデバイスやトレンドに合わせて、ブレイクポイントを変更することが必要です。
3.値の変更
ここまで用意ができたら、あとは実際にレスポンシブ時の要素の値を記述します。
ポイントとして横幅などの値は%で示すことをおすすめします。
pxで値を指定してしまうと、画面サイズが変わった際に見づらくなる可能性があるためです。
レスポンシブデザインでよく使うCSS
ここで実際にレスポンシブデザインでよく使うCSSについても紹介します。
値の変更はどのようなものに必要なのか参考にしてみてください。
画像サイズの変更
画像はスマホ表示の場合、小さすぎて見えなくなることがあります。
この場合は、画像の横幅をスマホの横幅いっぱいまで表示させると見やすくなるため、以下のように画像の横幅を100%にする内容を記述します。
（例）
@media(max-width: 480px) {
img {
width: 100% ;
}
}
コンテンツを非表示にする
パソコンではうまく表示されても、スマホだとうまく表示されないコンテンツや、スマホ表示に不要なものは、非表示にすることが可能です。
例えばスマホの場合、画像を非表示にしたい場合「display : none」と記述します。
（例）
@media(max-width: 480px) {
img {
display : none ;
}
}
レスポンシブの確認方法
レスポンシブの確認にはGoogle Chromeのデベロッパーツールがおすすめです。
Chromeデベロッパーツールの起動にはいくつかやり方があります。
- ウェブを開いた状態で「F12」キーを押す
- 右クリックをして「検証」をクリック
- 「Ctrl」＋「Shift」＋「I」キーを同時に押す
そうすると画面の右側に検証ツールが表示されます。
そこで以下の手順を行うと、デバイスごとのスマホ表示を確認することが可能です。
スマホ用のCSSが実際にうまく反映されているか、このデベロッパーツールで随時確認を行いながら作業するようにしましょう。
まとめ
ここまでいかがでしたか？今回は初心者の方でもわかるレスポンシブデザインについて説明しました。
みなさんも、これでまずは「レスポンシブデザインとはなにか」「レスポンシブデザインの書き方」について理解ができたと思います。
今回ご紹介した内容はスマホ対応のごく一部となります。
Webデザインは奥が深く、まだまだ実現可能なことはたくさんあります。
この記事をきっかけに、レスポンシブ対応やWebデザインが楽しいものだと、より感じてもらえるきっかけになれば幸いです。
