レスポンシブデザインは、パソコン、タブレット、スマホなど、Webサイト訪問者が利用しているデバイスの種類に応じて表示させるデザインを変更する手法のことです。
目次
レスポンシブWebデザインとは画面デザインの調整方法の1つ
Webサイトの訪問者が閲覧に使用しているデバイスが、スマホかタブレットかパソコンかによって表示するデザインを変更し、訪問者がストレスなくWebサイトを閲覧できるようにします。
Webページは、HTMLを体とすると、体が身に付ける服をCSSで作ります。従来の方法では、パソコン閲覧用、スマホ閲覧用と各デバイスごとに最適化したHTMLとCSSを用意する必要がありました。
しかし、レスポンシブデザインでは、用意するのは1つのHTMLのみ。デバイス別にCSSを用意するだけで各デバイス別のページを表示することができます。
同じページなのに、パソコンのブラウザの画面幅を小さくしたら別のデザインが表示されたという経験はありますか？ そのサイトに使われている手法がレスポンシブデザインです。
PC・スマホ・タブレットの画面幅をカギにして表示デザインを変更する
レスポンシブデザインは、Webサイト閲覧者が使用しているデバイスの画面幅をキーポイントにして表示する画面を変更します。
HTMLの装飾であるCSSファイルに、こんな意味をもつプログラミングをしておくのです。
- パソコンの画面幅の場合：通常通りに表示
- タブレットの画面幅の場合：画像を小さいものにし、メニューをスライド式に
- スマホの画面幅の場合：画像を表示せず、メニューはメニューボタンから選択する
すると、指定された画面幅になった時点で、プログラミングされた通りの表示がされます。スマホで閲覧している人にはスマホ用の画面が、タブレットで閲覧している人にはタブレット用の画面が表示されるというわけです。
レスポンシブデザインをWebサイトに使うメリット・デメリット
レスポンシブデザインをWebサイトに採用するメリットとデメリットについて紹介します。
従来のようにデバイス別にHTMLとCSSを用意した方が、自サイトにとってメリットが大きいのか、レスポンシブデザインにした方がいいのか悩んでいる方は、参考にしてください。
| レスポンシブデザイン | 従来型 | |
| 費用 | 高め | 対応するデバイスの種類による |
| 制作時間 | 準備段階に時間がかかる | やや時間がかかる |
| デザインの自由度 | 低い | 高い |
| メンテナンスの煩雑さ | 楽 | めんどう |
| 対応できるデザイナー・コーダー | やや少ない | 多い |
レスポンシブデザインを使うメリット
自サイトにレスポンシブデザインを採用するメリットは5つあります。
- SEO対策として有利
- 各デバイス別のページが安く作成できる
- メンテナンスが楽
- ホームページの更新が1度で済む
- デバイス別のURLを用意する必要がない
SEO対策として有利
レスポンシブサイトにすると、 Googleの検索エンジン対策の中のモバイルフレンドリーを満たせます。
モバイルフレンドリーとは、モバイルデバイスでWebページを閲覧している人が不便を感じないようにする施策のことです。
Google検索セントラルの上級者向けSEOでも「サイトが検索結果に目立って表示されるようにする方法を学びましょう。」として「モバイルサイトを実装する 3 つの方法」にレスポンシブサイトを紹介しています。
自社サイトがモバイルフレンドリーになることで、検索結果の上位に表示される可能性が増えるということです。
自分のサイトがモバイルフレンドリーがどうかは、Googleが提供している「モバイルフレンドリーテスト」にて調べることができます。
各デバイス別のページが安く作成できる
レスポンシブデザインにすると、各デバイスごとに別のページを用意するよりも安価にホームページを用意することができます。
メンテナンスが楽
レスポンシブ Webデザインは、1つのHTMLファイルに対応した1つのCSSファイルがあるだけなので、メンテナンスが楽です。
従来のデバイス別にHTMLファイルとCSSファイルを用意する形式だと、何かの不具合が見つかりメンテナンスが必要になった場合、デバイスごとにHTMLファイルとCSSファイルを変更しなくてはいけません。
レスポンシブデザインは、手をいれるファイルが1つのなので、複数ファイルに対応するよりも気軽です。
ホームページの更新が1度で済む
ホームページを更新する場合、1度の更新で済むのもレスポンシブデザインのいいところです。
デバイス別に複数のHTML・CSSがある場合は、あるだけ更新する必要があります。更新等を制作会社にお任せしている場合は、その分だけ料金がかさむということにもなりますね。
デバイス別でページがあるときの更新を、自分でする場合は、抜け・漏れが発生する可能性もあります。
デバイス別のURLを用意する必要がない
デバイス別にHTMLとCSSを用意する場合、デバイスごとにURLを用意する必要があります。
レスポンシブデザインの場合は、URLも1つで大丈夫です。
レスポンシブデザインを使うデメリット
レスポンシブデザインを使うデメリットは4つあります。
- デバイスごとのデザインに制限が生じる
- パソコンのみ対応のホームページに比べて時間と費用がかかる
- 後からのデザインや機能の追加が難しい
- ブラウザと使用するレスポンシブの種類によっては使えない
デバイスごとのデザインに制限が生じる
レスポンシブデザインは、1つのHTML・CSSで全てのデバイスに対応するWebページの表示方法です。そのため、個別にHTML・ CSSを作成する場合に比べてデザインに制限が生じます。
あなたのWebサービスへの訪問者が、スマホから訪問してくるお客様とパソコンから訪問してくるお客様の傾向に明らかな違いがある場合など、傾向に合わせた細かい対策をしたい場合は個別にページを作った方が対策しやすいです。
パソコンだけのWebサイト制作よりも時間と費用がかかる
レスポンシブデザイン対応のWebサイトは、「パソコンだけ」「スマホだけ」に対応したWeb制作よりも時間と費用がかかります。
後からのデザインや機能追加が難しい
レスポンシブデザインは、デバイス別にページを作成するのに比べて、後からのデザインや機能の追加が難しいです。
Webサイトの設計の時点で「スマホのお客様にはこう見せたい」「パソコンにはこの機能を付けたい」といったところをしっかり詰めておかないと、「やっぱりパソコンだけにしておいたこの機能をスマホにも追加で」がきかないことが多いです。
ちょっとした変更が全体に及ぼす影響が大きく、Webサイトの納品日が大幅に遅れる原因にもなります。
ブラウザと使用するレスポンシブの種類によっては使えない
レスポンシブデザインは、閲覧しているユーザーが使っているブラウザの種類によってはうまく動作しないことがあります。
代表的なものが、インターネットエクスプローラーの古いバージョン（IE 1.8）です。シェア率は下がっているものの、社内環境でまだインターネットエクスプローラを使っている場合も多く、どこまで対応すべきなのかは、悩ましいところです。
