レスポンシブデザインとは？【5分でわかる】メリット、作り方

昨今では、PC やスマートフォン、タブレットといった、さまざまなデバイスに対応する「レスポンシブデザイン」が、Webページを開設する上で必要不可欠になっています。
本記事では、そんなレスポンシブデザインについて基礎知識から作り方まで解説します。

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

レスポンシブデザインとは、Webページを表示するデバイスの画面サイズに合わせて CSS を切り替えることで、一つの html でページレイアウトを最適化する方法を指します。
※レスポンシブ (responsive) は、敏感に反応するという意味。
「レスポンシブ Webデザイン」とも呼ばれ、Webページにレスポンシブデザインを実装させることで、 SEO への良い効果が期待できるだけでなく、サイトの管理の手間が省けるといったメリットが得られます。
現在、企業サイトやショップ紹介といったWebサイト構築において主流となっているレスポンシブデザインですが、Google社もこの方法を推奨しています。
※同社はレスポンシブデザインを推奨しているものの、検索順位に大きく影響は無いと明言しています。

レスポンシブデザイン以外でスマホ対応させる方法は？

PC 版の Webページ以外にモバイル版ページでスマホ対応させる方法として、次のようなものがあります。

動的配信 (サーバーサイドテンプレート)
サーバ側でデバイスに応じた個々の HTML や CSS を組み立てる手法。

モバイル専用サイト構築
モバイル向けの Webページを PC版の Webページとは別で HTML を用意し、URL も別で構築する方法。

アダプティブデザイン
アダプティブデザインは、各デバイスの「HTML」を用意し、ユーザの閲覧環境に合わせてレイアウトを最適化する手法です。

ほかにもいくつかありますが、Google社は実装と維持が最も容易なレスポンシブデザインを推奨しています。

レスポンシブデザインが求められる背景は？

レスポンシブデザインが求められる背景として、まずはスマホの本格的普及が挙げられます。従来は PC の利用が多かったのに対し、さまざまなデバイスから閲覧するようになり、なかでも、スマホが普及したことでスマホの重要度が激増しました。そのため、PCからだけでなく、どのデバイスからでも見やすい Webページを作る必要が出てきました。
また、2018 年には Google社が MFI (モバイルファーストインデックス) を導入し、2021 年 3 月には完全移行を発表したことでレスポンシブデザインに対する関心が高まっています。
この MFI とは、スマートフォンでの Webサイトの表示や使用感を基準としてWebサイトに対する評価や検索順位の決定を行う仕組みです。
この MFI への完全移行により、SEO対策もスマートフォンを中心に行う必要が生じました。そのため、モバイル版の Webページの表示が崩れていたり、PC版のページしかなかったりと、スマートフォンユーザにとって快適でない Webページは、SEO で圧倒的に不利になってしまい、検索結果も上位は獲得できません。
また、スマートフォン版と PC版で内容や構成要素が異なる場合も評価が下がります。
このような背景から、1 つのデバイスと、利用デバイスに対応する CSS に切り替え絵を行ってレイアウトを変更するレスポンシブデザインの採用が推奨されているのです。

自社サイトがモバイルフレンドリーであるか確認する方法は？

MFI の導入に伴い、Webページはモバイルフレンドリーであるかが焦点になりました。
モバイルフレンドリーとは、スマートフォンにおけるユーザビリティの高さの指標となる言葉です。自社サイトがモバイルフレンドリーであるかどうかは以下のサイトで確認できます。
Googleモバイルフレンドリーテストページ

レスポンシブデザインの種類は？

レスポンシブレイアウト
レスポンシブレイアウトとは、ブレイクポイントで CSS の切り替えを行う手法です。
ブレイクポイントとは、画面幅の数値に合わせて CSS を切り替える際に基準となるピクセル数のことです。

リキッドレイアウト
リキッドレイアウトは数値を指定せずに、利用デバイスの画面幅に応じて柔軟にレイアウトを変更する手法で、シンプルな Webページから 1 ページあたりの画像や文章量が多く、すべての要素を見やすく表示させたい場合にも対応しています。

フレキシブルレイアウト
フレキシブルレイアウトは、リキッドレイアウトに加えて画面の最小幅と最大幅を指定する手法です。最大幅を超えた場合は余白が発生します。大画面の PC で閲覧した場合でもデザインの崩れが起きにくいのがポイントです。

グリッドレイアウト
グリッドレイアウトは、画面の幅に合わせてボックス型のコンテンツを並べる手法で、画面の幅が変わってもレイアウトが崩れにくくカスタマイズや修正がしやすいです。レスポンシブデザインとの相性がよく、簡単に実装可能です。

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

Webページ更新の手間を削減できる
レスポンシブデザインは、1 つの HTML で複数端末に最適化できるため、Webページの更新も 1 つで済みます。レスポンシブデザインでないと、それぞれのデバイス用の Webページデザインを管理しなくてはなりません。

同一URLで管理するためSEOに有利
レスポンシブデザインを実装した Webページは、1 つの Webページで複数の端末に最適化でき、同一の URL で管理できるため SEO にも有利と言えます。
レスポンシブデザインでない場合は、Webページの内容は同じでも URL が異なるため、URL ごとに SEO 評価は分散してしまいます。その点、レスポンシブデザインを実装した Webページでは URL も 1 つで済むため、SEO 評価の分散を防げます。
MFI への完全移行に対応するために推奨されているレスポンシブデザインですが、副次的効果として SEO 評価の低下の防止にもつながります。

コストの削減
レスポンシブデザインは、1 つの Webページで管理するため、ファイルの作成も 1 つで済み、Webページの制作コストも削減できます。自社でデザインをする場合は、工数削減につながり、外部に委託する場合は、制作費を削減できます。

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

レスポンシブデザイン用のCSSを記述しなくてはならない
Webページにレスポンシブデザインを実装する場合、複数のデバイスごとに文字サイズやデザインの幅などを指定するなど、コーディングを行う必要があり、その分時間と手間がかかります。ただ、レスポンシブデザインを実装せずに Webページを構築する場合、デバイスごとに構築しなくてはならないため、結果的にコーディング工数も増え、時間もかかることになります。

デザインの自由度が下がる
レスポンシブデザインは、すべてのデバイスで同じ HTML を使用するため、デザインの自由度が低く、デバイスによって見た目を大きく変えることはできません。

デバイスによってデザインが崩れる場合もある
レスポンシブデザインは、PC やスマートフォンなどのデバイスサイズを想定してデザインを構成しますが、指定外の画面サイズからアクセスがあった場合は、デザインが崩れてしまう場合があります。

動作が遅くなる場合もある
HTML が 1 つであるため、スマートフォンでもパソコンと同じデータを読み込んでしまい、動作が遅くなる場合があります。
これはコーディングを工夫することで解消できます。

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

meta viewportタグの追加
まず、meta viewport タグを追加します。viewport タグとは、HTMLファイルで描写領域を指定するためのメタタグを指します。
複数のデバイスに対応させるのに必要なもので、HTMLファイルで構築された Webページには、ファイルのヘッダー部分に meta viewport タグを追記する必要があります。WordPress などの既存の Webサイトで作成された Webページであれば、共通のテンプレートファイルに追記します。
◆ソースコード例

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

上記タグを追加することで、Webページ訪問者の利用デバイスの画面サイズなどを読み取れるようになります。
「content=”width=device-width」で、画面幅を指定しています。レスポンシブ Webデザインではデバイスによって画面幅が異なるため、このように記述し、画面サイズによって柔軟に対応できるようにしています。また、画面幅を指定する場合は、たとえば「content=”width=400”」と記述すると、画面幅が 400 px ということになります。
次に「initial-scale=1.0」で、画面のズーム率を指定しています。「initial-scale=1.0」とすると等倍で表示されます。

CSSファイルで指定
続いて、メディアファイルを用いて viewport にどのデバイス向けか判断する横幅サイズを CSSファイルで指定します。
メディアクエリとは適用する CSS を切り替えるコードです。デバイスの画面サイズに合わせて CSSファイルをそれぞれ指定し、メディアクエリを用いて viewport を判別することで適切な CSS に切り替えます。
レスポンシブデザインでは、メディアクエリと併せて、ブレイクポイントが設定されているため、その値を境として CSSファイルを切り替えられ、各デバイスに適した Webページを表示できます。
ブレイクポイントは Webサイトをどのデバイス向けにするかなどによって変わります。
値は任意で決められるので、オーソドックスなスマホの横幅や PC を参考に決めましょう。

◆ソースコード例

PC向けの場合　(表示画面が960px以上の場合）
@media screen and (min-width: 960px)
タブレット
@media only screen and (min-width: 600px) and (max-width: 959px)
スマホ向けの場合　（表示画面が599xp以下の場合）
@media screen and (max-width: 599px)

デバイスごとの CSSファイルを用意し、HTML 部分に次のようなコードを入れると、「画面幅が 599 px以下の時に A.css ファイルを適用する」ようになります。
◆ソースコード例

<link rel="stylesheet" media="(max-width: 599px)" href="A.css">

レスポンシブデザインを実装する上での注意点は？

スマホ版から設計する
横幅のあるコンテンツや文章量の多いコンテンツがスマホの画面幅では非常に見にくく、ユーザビリティも下がるため、このような制約の多い Webページを設計する場合はスマホ版から取り掛かるのがよいでしょう。

画像ファイルは小さく少なくする
読み込み時間を短縮するため画像を使う場合は次のことを意識しましょう。

• 画像ファイルは小さくする
• CSS や Webフォントを使用する
• CSS スプライト (複数の画像を1枚の画像とし、CSSで表示する箇所を指定する方法) をとる
• 画面幅に合わせて読み込む画像を小さいものにする

レスポンシブデザインの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、レスポンシブデザインに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。