レスポンシブデザインとは？概要と導入するメリット・デメリットを紹介

レスポンシブデザインは、パソコン、タブレット、スマホなど、Webサイト訪問者が利用しているデバイスの種類に応じて表示させるデザインを変更する手法のことです。

運営するサイトをスマホに対応させる場合や、新規でWebサイトを立ち上げる際に「レスポンシブにしましょう」と提案された経験がある人もいますよね。

「デザイナーから提案されたが、レスポンシブのことはよくわかっていない」という人のために、レスポンシブデザインについて紹介します。

レスポンシブWebデザインとは画面デザインの調整方法の1つ

レスポンシブデザインは、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が提供している「モバイルフレンドリーテスト」にて調べることができます。

参考：Google　モバイルフレンドリーテスト

各デバイス別のページが安く作成できる

レスポンシブデザインにすると、各デバイスごとに別のページを用意するよりも安価にホームページを用意することができます。

一般的なWeb制作会社に制作を依頼した場合、大まかな料金はこれくらいです。

実際の料金は制作会社に見積もりをとってもらう必要がありますが、これに企画管理費用が制作費用の1割から2割程度かかってきます。

メンテナンスが楽

レスポンシブ 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制作会社にトップページ＋下層ページ3つを制作依頼した場合の料金例をご紹介します。

スマホだけの場合よりも16万円、パソコンのみの場合よりも10万円近く費用に差が出ました。

制作期間に関しても、レスポンシブデザインはデバイス別のページを作成するよりも時間がかかります。

後からのデザインや機能追加が難しい

レスポンシブデザインは、デバイス別にページを作成するのに比べて、後からのデザインや機能の追加が難しいです。

Webサイトの設計の時点で「スマホのお客様にはこう見せたい」「パソコンにはこの機能を付けたい」といったところをしっかり詰めておかないと、「やっぱりパソコンだけにしておいたこの機能をスマホにも追加で」がきかないことが多いです。

ちょっとした変更が全体に及ぼす影響が大きく、Webサイトの納品日が大幅に遅れる原因にもなります。

ブラウザと使用するレスポンシブの種類によっては使えない

レスポンシブデザインは、閲覧しているユーザーが使っているブラウザの種類によってはうまく動作しないことがあります。

代表的なものが、インターネットエクスプローラーの古いバージョン（IE 1.8）です。シェア率は下がっているものの、社内環境でまだインターネットエクスプローラを使っている場合も多く、どこまで対応すべきなのかは、悩ましいところです。

レスポンシブWebデザインは対応方法により4種類に分かれる

レスポンシブデザインは、どうやってレスポンシブにするかによって4種類にわかれます。

具体的にはこの4つです。

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

レスポンシブレイアウト

レスポンシブレイアウトは、全体のレイアウトを変更せず、文字や画像サイズの変更によって各デバイスに対応する手法です。

（画像引用：Oculus）

デバイス間で閲覧できる情報に差がないので、どのデバイスから訪れた人にも同じ訴求ができるメリットがあります。

リキッドレイアウト

リキッドレイアウトは、対応するデバイスによってWebページを構成している要素の位置がずれていくレスポンシブの手法です。

（画像引用：ソウゾウするやさしい展）

大まかなデザインは変更せず、要素部分だけが各デバイスに対応してずれてくれるので各デバイスのユーザの利便性をあげます。

フレキシブルレイアウト

フレキシブルレイアウトは、対応デバイスのサイズによって、Webサイトを構成する要素が動いていくレスポンシブデザインです。

（画像引用：ナショナルジオグラフィックTV）

グリッドレイアウト

グリッドレイアウトの表示のされ方は、フレキシブルレイアウトと似ています。

手法としては新しい手法で、グリッドレイアウトに対応したテンプレートを使ってサイトを作ることで、Web制作初心者でも簡単にレスポンシブデザインに対応できます。

プログラミングスクールのWebデザインコースでよく見かける手法なので、スクールを卒業したばかりの人からの提案でよく見かけます。

レスポンシブWebデザインはテンプレート利用で簡単に作れる

レスポンシブデザインは、自分でも作ることができます。

自社サイトをWordPressで作成する場合は、レスポンシブ対応のテンプレートを利用すれば簡単にできますし、「WordPressの利用は避けたい」という人は、レスポンシブ対応のテンプレートを使えば簡単に作れます。

テンプレートを利用する際の注意点3つ

レスポンシブデザインに対応したテンプレートを利用する際に、注意しておくべき点が3つあります。

1. 利用規約は一読する
2. 商用利用可能なものを選ぶ
3. 利用時にしなければならないこと

テンプレートを利用する場合は、必ず利用規約を読みましょう。

• 商用利用の可否
• カスタマイズ可能な範囲
• 利用時にしなければならないこと
  （製作者のサイトや名前の明記など）

利用規約の中に記載されているこの3つのことには必ず目を通しておくべきです。そうすることで、利用後の無用なトラブルを防ぐことができます。

また、有料・無料に関わらず、利用時のトラブルやカスタマイズのサポートはしてもらえないことが多いです。自分のサイトオリジナルにカスタマイズする場合は、注意しながら慎重に行いましょう。

商用利用可能なレスポンシブ対応テンプレート3選

商用利用可能なテンプレートを5つ紹介します。

Free HomePAGE.net

公式サイト：https://free-hp.net/

Free HomePAGE.netが提供するテンプレートは、

• トップページ
• 下層ページ
• 問い合わせページ

の3つが含まれています。問い合わせページの送信はできませんが、メール送信機能などの追加機能が欲しい場合は、問い合わせれば有料でカスタマイズが可能です。

また、利用時に必要とされることが多い、以下の4つの項目については全て不要となっています。

• 著作権表示
• 利用報告
• ダウンロード元へのリンク
• 会員登録

テンプレートの利用方法やカスタマイズがわからないという人のために、29,800円（税別）でマンツーマンのワンデイセミナーも実施しています。オリジナルのホームページを自前で作りたいけれど、知識がない人にもおすすめのテンプレートです。

無料ホームページテンプレート.com

公式サイト：https://f-tpl.com/

無料ホームページテンプレート.comでは、HTMLテンプレートもWordPress用のテンプレートも取り扱っています。

無料ホームページテンプレート.comのレスポンシブ対応HTMLテンプレートは、

• 商用利用可能
• テンプレート内のイラスト・写真利用可能
• 原型がなくなるほどのカスタマイズOK

です。

しかし、テンプレート内の「Design by http://f-tpl.com」リンクは外せません。どうしても外したい場合は、2,980円でシリアルキーを購入する必要があります。

テンプレどん

公式サイト：https://popo-design.net/template/

テンプレどんのテンプレートは、4つのタイプが提供されています。4つのタイプは、LPテンプレート、シンプルコーポレート、ベーシックコーポレート、ポートフォリオの4つです。他のテンプレート配布サイトに比べると配布されているテンプレートの量は少なくなっています。

テンプレどんのテンプレートは、

• 商用利用可能
• 著作権表示のコピーライト削除可能
• 製作者への連絡不要
• カスタマイズ自由
• 同封画像の利用可能

です。

サーバーの設置やテンプレートを使用したホームページ制作は、見積もりの後、有料でお願いすることができます。

まとめ：レスポンシブサイト作成は計画・設計段階が一番重要

スマホやタブレット端末での訪問者が増えている以上、パソコン以外のデバイスに対応したサイトを作るのは必須です。

しかし、安易にレスポンシブサイトにするよりも自社が提供するサービスや顧客の特性を知った上で決定することが大切です。

レスポンシブサイトにする場合も、デザイナーに依頼するにせよ、自分で作るにせよ「誰に」「何を」「知ってもらいたいのか・してもらいたいのか」を決めておかなければ、失敗に終わる可能性もあります。

設計・計画段階が大切になってきますので、注意しましょう。