レスポンシブデザインとは?メリットデメリットや制作方法まで詳しく解説!

2018.10.17

Design
SEO
Webデザイン
レスポンシブ
広告

近年では、ほとんどのWebサイトに「レスポンシブデザイン」というものが導入されています。レスポンシブデザインはWebサイトを快適にするために有効なものですが、果たして自分のWebサイトにおいて最適な方法で利用できているでしょうか。意外と「流行しているから一応取り入れている・・・」など単純な理由から利用している場合も多く見られます。

 

この記事では、レスポンシブデザインの概要情報からメリットデメリット、制作方法まで解説していきます。自分のWebサイトに最適なレスポンシブデザインを制作するためのヒントとして、この記事を参考にしてみてはいかがでしょうか

 

 


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


  • レスポンシブデザインの仕組み

レスポンシブデザインとは、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は一つでいいため、ユーザーがシェアしやすくなり、拡散率が上がることが期待できます。

 

 


レスポンシブデザインの事例を紹介


最新のレスポンシブデザインを採用しているWebサイトをいくつか紹介します。実際にレスポンシブデザインを採用しているWebサイトを閲覧することで、レスポンシブデザインのメリット・デメリットを体感できることでしょう。パソコン・スマートフォン・タブレットなど、複数のデバイスを使用して閲覧してみることをおすすめします。

 

 

  • NIXON(ニクソン)

http://www.nixon.com/jp/jp/

NIXON(ニクソン)は、大手スポーツ系腕時計メーカーです。NIXON(ニクソン)の腕時計は、他社とは一線を画す先進的なデザインの腕時計が人気となっているため、そのイメージを彷彿とさせるオシャレで洗練されたデザインのWebサイトが特徴的です。ECサイトも運営しており、ラインナップ数が多いですがどのデバイスからでもそれらを探しやすいデザインとなっています。

 

 

  • 小笠原ベストマッチ

http://www.letsgo-ogasawara.com/

小笠原ベストマッチは、小笠原諸島の旅行やツアーの比較検討ができるWebサイトです。トップページでは、フルスクリーンで小笠原諸島の自然が詰まった動画が再生されるようになっています。特にスマートフォンで閲覧する際には、まるで小笠原諸島の海に潜っているような演出がみられたり、ページ移動の際には波のようなアニメーションになったりするなど、Webサイト全体で小笠原諸島の魅力を伝えるようなデザインとなっています。

 

 

  • 東京西徳洲会病院

http://www.tokyonishi-hp.or.jp/

東京西徳洲会病院は、病院紹介サイトです。レスポンシブデザインにおいてはとてもオーソドックスな作りですが、「丁寧に作られている」と評価の高いWebサイトの一つです。パソコンで閲覧した場合は情報量が比較的多いですが、スマートフォン表示の際には表示する情報書が絞られるようになっており、どのデバイスで閲覧しても使いやすいようデザインされているのが特徴です。

 

 


レスポンシブデザイン製作時のポイント


  • レイアウト種類

【レスポンシブレイアウト】

レスポンシブレイアウトとは、「ブレイクポイント」と呼ばれる、CSSが変わる画面の幅の数値でレイアウトが変わるものを指します。パソコンでWebサイトを閲覧している時にウィンドを小さくしていくと、ある一定のウィンドウの大きさでWebサイトのレイアウトも変化するということです。

 

【リキッドレイアウト】

リキッドレイアウトとは、画面の幅に合わせてWebサイトの表示サイズが変わるものを指します。 一般的には、スマートフォンの画面サイズはタブレットより小さく、タブレットの画面サイズはパソコンより小さくなっていますが、近年ではデバイス間で画面サイズが大差ない事例が増えています。例えばタブレットの画面サイズとあまり変わらないスマートフォンや、パソコンの画面サイズとあまり変わらないタブレットが販売されていることがあります。しかし、リキッドレイアウトであれば、デバイスの規格が大きく変わっても対応がしやすくなります。

 

【フレキシブルレイアウト】

フレキシブルレイアウトとは、リキッドレイアウトのように画面の幅に合わせてWebサイトの表示サイズが変わるのに加えて、最小と最大幅を指定するものを指します。例えば、画面サイズが大きい場合は周りに余白が生まれるなど、パソコン閲覧の場合のみに幅の固定をしたい場合などに採用されます。

 

 

  • 製作時の注意点

【対応させるデバイスをよく考える】

最近では、パソコン・スマートフォン・タブレットの3つのデバイスから閲覧されることは最低限想定するべきであるとされています。タブレットはスマートフォンよりは保有率は低くなっていますが、だからと言ってパソコンとスマートフォンだけに対応させておくと、タブレットで閲覧した際にWebサイトのデザインが正しく表示されない場合があります。ユーザーはあらゆるデバイスからWebサイトを閲覧するということを想定しておきましょう。

 

【画像ファイルに気をつける】

スマートフォン表示の際には、画像の読み込みに時間がかかってしまいます。画像ファイルは小さいものを使ったり、表示に合わせて少なくしたりするなどの対応が必要となります。ただし、近年では高解像度ディズプレイを採用したデバイスも増えているため、通常の画像ファイルの23倍のものが必要となる場合があります。

 

【スマートフォンから設計する】

パソコンやタブレットなど、画面サイズが大きいデバイスのものから設計すると、文章量が多いコンテンツなどはスマートフォンでは見辛くなってしまいます。まずは、画面サイズの小さいデバイスから設計し、どのデバイスからでも見やすいWebサイトを目指しましょう。

 

 


おわりに


レスポンシブデザインは、近年ではほとんどのWebサイトで採用されています。Webサイトを閲覧するためのデバイスが多様化しているため、レスポンシブデザイン化することはほとんど必須であると言えるでしょう。ただし、闇雲にレスポンシブデザイン化することが適切であるとは言い切れないため、Webサイト運営の目的を考え運用を検討してみましょう