近年では、ほとんどのWebサイトに「レスポンシブデザイン」というものが導入されています。レスポンシブデザインはWebサイトを快適にするために有効なものですが、果たして自分のWebサイトにおいて最適な方法で利用できているでしょうか。意外と「流行しているから一応取り入れている・・・」など単純な理由から利用している場合も多く見られます。
この記事では、レスポンシブデザインの概要情報からメリットデメリット、制作方法まで解説していきます。自分のWebサイトに最適なレスポンシブデザインを制作するためのヒントとして、この記事を参考にしてみてはいかがでしょうか？
——————————————–
■1）レスポンシブデザインとは？
1_1：レスポンシブデザインの仕組み
1_2：レスポンシブデザインのメリット・デメリット
■2）レスポンシブデザインが注目される背景
2_1：レスポンシブデザインが広まったきっかけ
2_2：多くのHPでレスポンシブデザインを採用している理由
■3）レスポンシブデザインが向いているHPとは？
3_1：Webサイトのリニューアルが必要な場合
3_2：Webサイトの更新や修正の頻度が高い場合
3_3：SNSなどでのシェア数を増やしたい場合
■4）レスポンシブデザイン製作時のポイント
5_1：レイアウト種類
5_2：製作時の注意点
■5）レスポンシブデザインの事例を紹介
4_1：NIXON（ニクソン）
4_2：小笠原ベストマッチ
4_3：東京西徳洲会病院
■6）レスポンシブデザインのテンプレート紹介
6_1：無料ホームページテンプレート.com
6_2：saetl.net
6_3 :Narrow
■7）おわりに
——————————————–
レスポンシブデザインとは？
- レスポンシブデザインの仕組み
レスポンシブデザインとは、「WebサイトのURLが同一であっても、パソコン・スマホ・タブレットなど異なる端末（デバイス）に関わらず、画面サイズに適応して表示を変えることができる」ものを指します。Webサイトを構成するHTMLは同一のものですが、CSSは端末（デバイス）ごとに用意して表示方法を変えることができるのです。つまり、Webサイト上の内容は全て同じですが、端末（デバイス）ごとに見せ方を変化させることができるということです。
- レスポンシブデザインのメリット・デメリット
【メリット】
・SEO観点において、Googleが推奨
レスポンシブデザインは、SEOの観点において有用であるとされています。その理由には、「Webサイトの表示エラーのリスクを回避できる」という点が挙げられます。
Webサイトの表示エラーのリスクを回避できる理由は、レスポンシブデザインを採用しているWebサイトは異なる端末（デバイス）であっても、同一のURL・HTML・CSSであることが関係しています。端末（デバイス）ごとのWebサイト構成データを用意する必要がないため、「パソコンでは表示されるにも関わらずスマホではエラー表示になってしまう」というような事象が起こりにくくなります。また、表示エラーが減ることでユーザビリティが向上し、検索上位になるポイントの一つとなり得ます。
・管理コストが楽
レスポンシブデザインを採用したWebサイトであれば、Webサイトを構成するHTMLは一つ用意すれば済むため、情報の修正や更新の作業を端末（デバイス）に応じて行う必要がなくなります。複数のHTMLがある場合、その数に応じた作業回数が発生してしまうため、管理コストがかさむことになります。
・シェアされやすい
レスポンシブデザインを採用したWebサイトは、デバイスに関わらずURLが単一であるため、ユーザーがシェアしやすくなります。見せたいユーザーのデバイスに応じて、提示するURLを変える必要がないため、URLを共有する際の手間がなくなります。
【デメリット】
・表示に時間がかかる
レスポンシブデザインを採用したWebサイトは、どの端末（デバイス）でも同一のWebサイト構成データを読み込むことになります。例えば、パソコンと同じデータをスマホで読み込ませるという事象が起こった場合、端末（デバイス）が異なるため読み込むことができる容量も異なり、読み込みが完了するまでの時間に差が生まれてしまいます。この場合で言えば、スマホでの表示に時間がかかってしまうということが考えられます。表示に時間がかかることはユーザビリティに悪影響を及ぼすため、できるだけ読み込みに時間がかからないよう工夫をする必要があります。
・制作の工数がかかる
レスポンシブデザインはURL・HTML・CSSは一つだけですが、端末（デバイス）ごとのデザインはそれぞれ制作しなければなりません。それに応じでコーディング作業も必要となるため、制作工数がかかってしまいます。
・デザインやレイアウトに制限がある
レスポンシブデザインを採用すると、Webサイトのデザインやレイアウトを構成するHTMLは一つだけになるため、端末（デバイス）に応じて大幅にデザインやレイアウトを変更することができません。どの端末（デバイス）であっても、基本的なWebサイトのデザインは同じになります。
レスポンシブデザインが注目される背景
- レスポンシブデザインが広まったきっかけ
レスポンシブデザインが広く使われるようになったきっかけには、「スマートフォンやタブレットの普及」が大きく関係しています。スマートフォンやタブレットなどの端末が普及する以前は、インターネットを利用するのにはパソコンを使う人が大多数を占めていました。しかし、iPhoneを筆頭にしたスマートフォンが2007年に日本国内に登場し、その後スマートフォンやタブレットの保有率が世界規模で徐々に高くなっていきました。
インターネットを利用するための端末がパソコンだけではなく、スマートフォン、タブレットと複数のデバイスが使われるようになると、デバイスに応じたWebサイトの作成が必要になっていきました。それぞれのデバイスに最適なWebサイトを作成するために、レスポンシブデザインが広く知られるようになっていったのです。
- 多くのHPでレスポンシブデザインを採用している理由
近年では、多くのWebサイトでレスポンシブデザインが採用されるようになっています。その理由は、「Googleがレスポンシブデザインを推奨している」ことが大きく関係しています。Googleは2015年に、検索結果の順位判定基準の一つに「モバイルフレンドリー」を採用すると発表したことが大きなきっかけとなっています。「モバイルフレンドリー」とは、パソコン・スマートフォン・タブレットなど、どのデバイスを使用して閲覧しても見やすいWebサイトであるかどうかというものです。モバイルフレンドリーを実現化するためにGoogleが推奨したのが、レスポンシブデザインだったのです。
レスポンシブデザインが向いているHPとは？
レスポンシブデザインには利点が多く存在しますが、やみくもに採用しても最適であるとは言えません。レスポンシブデザインを採用するべきWebサイトなのかどうかをきちんと判断する必要があります。ここでは、レスポンシブデザインを採用するべきシチュエーションについて解説します。
- Webサイトのリニューアルが必要な場合
GoogleのSEOアルゴリズムでは、モバイルフレンドリーであるWebサイトを高く評価するとされています。今現在パソコン用のWebサイトを持っていて、新たにスマートフォンやタブレット向けのWebサイトの作成が必要である場合は、レスポンシブデザインを採用することで制作工数を削減することができるでしょう。
- Webサイトの更新や修正の頻度が高い場合
Webサイトの内容の更新や修正、ページの追加など、デザイン面以外の更新の頻度が比較的高い場合は、レスポンシブデザインを採用するといいでしょう。レスポンシブデザインであれば、一度の修正で、パソコン・スマートフォン・タブレットそれぞれのサイトの更新が可能となり、Webサイト更新時の工数を削減できます。特に、Webサイト更新に割ける人員が少ない場合は、手間が省くことができるためおすすめです。
- SNSなどでのシェア数を増やしたい場合
レスポンシブデザインを採用したWebサイトは、単一のURLで複数のデバイスから適切にアクセスが可能となります。キャンペーンなどでWebサイトの拡散をしたい場合、TwitterやInstagram、FacebookなどのSNSでシェアするURLは一つでいいため、ユーザーがシェアしやすくなり、拡散率が上がることが期待できます。
レスポンシブデザイン製作時のポイント
- レイアウト種類
【レスポンシブレイアウト】
レスポンシブレイアウトとは、「ブレイクポイント」と呼ばれる、CSSが変わる画面の幅の数値でレイアウトが変わるものを指します。パソコンでWebサイトを閲覧している時にウィンドを小さくしていくと、ある一定のウィンドウの大きさでWebサイトのレイアウトも変化するということです。
【リキッドレイアウト】
リキッドレイアウトとは、画面の幅に合わせてWebサイトの表示サイズが変わるものを指します。 一般的には、スマートフォンの画面サイズはタブレットより小さく、タブレットの画面サイズはパソコンより小さくなっていますが、近年ではデバイス間で画面サイズが大差ない事例が増えています。例えばタブレットの画面サイズとあまり変わらないスマートフォンや、パソコンの画面サイズとあまり変わらないタブレットが販売されていることがあります。しかし、リキッドレイアウトであれば、デバイスの規格が大きく変わっても対応がしやすくなります。
【フレキシブルレイアウト】
フレキシブルレイアウトとは、リキッドレイアウトのように画面の幅に合わせてWebサイトの表示サイズが変わるのに加えて、最小と最大幅を指定するものを指します。例えば、画面サイズが大きい場合は周りに余白が生まれるなど、パソコン閲覧の場合のみに幅の固定をしたい場合などに採用されます。
- 製作時の注意点
【対応させるデバイスをよく考える】
最近では、パソコン・スマートフォン・タブレットの3つのデバイスから閲覧されることは最低限想定するべきであるとされています。タブレットはスマートフォンよりは保有率は低くなっていますが、だからと言ってパソコンとスマートフォンだけに対応させておくと、タブレットで閲覧した際にWebサイトのデザインが正しく表示されない場合があります。ユーザーはあらゆるデバイスからWebサイトを閲覧するということを想定しておきましょう。
【画像ファイルに気をつける】
スマートフォン表示の際には、画像の読み込みに時間がかかってしまいます。画像ファイルは小さいものを使ったり、表示に合わせて少なくしたりするなどの対応が必要となります。ただし、近年では高解像度ディズプレイを採用したデバイスも増えているため、通常の画像ファイルの2〜3倍のものが必要となる場合があります。
【スマートフォンから設計する】
パソコンやタブレットなど、画面サイズが大きいデバイスのものから設計すると、文章量が多いコンテンツなどはスマートフォンでは見辛くなってしまいます。まずは、画面サイズの小さいデバイスから設計し、どのデバイスからでも見やすいWebサイトを目指しましょう。
レスポンシブデザインの事例を紹介
最新のレスポンシブデザインを採用しているWebサイトをいくつか紹介します。実際にレスポンシブデザインを採用しているWebサイトを閲覧することで、レスポンシブデザインのメリット・デメリットを体感できることでしょう。パソコン・スマートフォン・タブレットなど、複数のデバイスを使用して閲覧してみることをおすすめします。
- BABY-G
https://baby-g.jp
- スターバックス
https://www.starbucks.com/
レスポンシブデザインのテンプレート紹介
ここでは、無料でダウンロードできる商用使用可能なレスポンシブデザインのテンプレートをご紹介します。初めてレスポンシブデザインを採用するという方はぜひ参考にしてみてはいかがでしょうか？
- 無料ホームページテンプレート.com
http://f-tpl.com/
英語表記のテンプレートサイトが多い中、日本語表記のわかりやすいサイトです。「高品質で商用利用可能な無料店プレート」を売りにしており、効率的にクオリティの高いホームページを作成することができます。
- saetl.net
http://saetl.net/index.html
こちらも日本語表記のサイトです。著作権の表示がなく、シンプルでおしゃれなデザインのものが多く提供されています。SEOについての解説なども詳しくされているので、知識を深めつつレスポンシブデザインをホームページに取り入れる事が可能です。初心者におすすめのテンプレートサイトです。
- Narrow
https://freehtml5.co/
非常におしゃれでグラフィカルなテンプレートが多数用意されています。ビジネスサイトにおすすめできるテンプレートが多く存在しており、ハイセンスなホームページを作成することが可能です。
おわりに
レスポンシブデザインは、近年ではほとんどのWebサイトで採用されています。Webサイトを閲覧するためのデバイスが多様化しているため、レスポンシブデザイン化することはほとんど必須であると言えるでしょう。ただし、闇雲にレスポンシブデザイン化することが適切であるとは言い切れないため、Webサイト運営の目的を考え運用を検討してみましょう。
