レスポンシブWebデザインとは？メリットとデメリットを徹底解説

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

レスポンシブWebデザインとはスマートフォン、タブレット、パソコンといった複数の異なる画面サイズのデバイスに合わせて、ページのレイアウトやデザインを自動的に適切なサイズに合わせることを言います。

例えば、パソコンとスマホで同じサイトにアクセスした場合でも、それぞれの画面サイズに応じて自動的にページのデザインやレイアウトが変わる為、見やすいサイトが表示されます。

パソコンだけにしか対策を取っていないWebサイトを携帯で見た場合はどうなるのでしょうか。

Webサイトを開いた時に、右にスクロールしなければ画像が見えなかったり、文字が正しく表示されなかったり。

上記のように不具合が生じて、見てくれたユーザーが内容を見ずにサイトから離れてしまうのです。

このレスポンシブWebデザインをGoogleが推奨しています。

画面サイズやデザインが適切な幅に合わせて自動的に適切に表示がされるので、ユーザーが快適にサイトを利用できます。

正しく画像が表示されない、文字がおかしくなっているなどの不具合が非常に少ない事があげられます。

見てくれているユーザーがいかにGoogleが重視しているのかがわかります。

また、URLが一つになるため検索エンジンのクローラーが巡回時に確認する部分を少なくすることができます。

後ほど説明しますが、同じサイトでも今まではパソコン用、スマホ用と分かれてWebページを用意していることが多かった為、検索の順位を決めるクローラーも二回巡回しなくてはなりませんでした。

だからこそ、パソコン用もスマホ用も一つのURLで見れるレスポンシブWebデザインが推奨されているのです。

そもそもWebサイトというものは、HTMLファイルとCSSファイルで構築されています。

文字の表記などはHTMLファイルで、デザインなどはCSSファイルで作成し、ブラウザがそれらの情報を構築して画面に表示しています。

普段私たちが何気なく見ているWebサイトは、文字とデザインが別れて作られているのです。

レスポンシブWebデザインのメリット・デメリット

ここでは、メリットとデメリットを詳しく説明していきます。

レスポンシブWebデザインを採用することのメリット・デメリットを理解していきましょう。

管理が簡単にできる（面倒な作業が一回で済むようになる！）

冒頭でパソコン用とスマホ用でページを作らなければならなかったとご説明しましたが、このHTMLファイルを、パソコンならパソコン用のHTMLファイル、スマホならスマホ用のHTMLファイルと分けて修正や更新の作業をしなくてはならなかったのです。

レスポンシブWebデザインは、HTMLが一つなのでWebサイトに載せる情報の修正や更新が１回で済ませることができます。

だからこそ、レスポンシブWebデザインを採用することで手間がかかる事が少なくなり効率が上がります。

解析がしやすくなる

先程パソコン用とスマホ用のHTMLファイルが別だと修正が二回必要になることを説明しましたが、解析も同様に一つ一つのURLごとにすることが必要でした。

レスポンシブWebデザインを導入することによりURLが一つで対応できるため、アクセス解析なども一回で見れるようになります。

またURLが一つの為、ユーザーからのシェアもされやすくなるのでこちらもメリットになります。

以前はスマホ用のモバイルサイトとパソコン用のサイトがあった場合、見せたいユーザーのデバイスに合わせて異なるURLを送らなかった為、その不便な点がなくなります。

上位表示されやすくなる

パソコン用、スマホ用と分けてページを持っていた場合、各デバイスごとのHTMLファイル、URLがあり修正も解析も手間がかかると説明しました。

レスポンシブWebデザインにすると、URLが統一となり※検索エンジンの評価もまとまるため、順位が上がりやすくなるのです。

別々のリンクだと、クローラーに違うサイトと認識されてしまい、パソコンは〇位、スマホは〇位と評価をされてしまいます。

URLが一つであれば内容も分散されない為、評価がされやすくなるということです。

※検索エンジン…検索窓と呼ばれるボックスにキーワードを入力して検索ボタンを押すと、世界中のWebサイトの中から、そのキーワードへの関連性の高いWebサイトを探し出し、一覧表示してくれるシステムのことです。

普段あなたが、検索で使っているGoogleやYahoo!で調べているそのものが、検索エンジンになります。

デメリット

ここからはデメリットを解説していきます。

メリットも踏まえつつ、どのような支障があるのかも含めて今後の採用基準にしてみてくださいね。

表示されるまで時間がかかる

レスポンシブWebデザインはHTMLファイルが1つなのでパソコンと同じデータをスマホにも読み込ませます。

HTMLが一つで管理がしやすいメリットがありました。

しかし、ここではそこが懸念点になります。

例えば携帯でレスポンシブWebデザイン対応のサイトを見たとします。

HTMLファイルが一つである為、パソコンで対応する用のHTMLコードやCSS、画像など大きいファイルも同時に読み込んでしまい、サイトが表示されるまで多少の時間がかかってしまうのがデメリットと言えるでしょう。

自身のサイトの読み込み時間はどれくらい？

自身が持っているサイトは読み込みがどれくらい時間がかかるのか気になる方はいらっしゃるのではないでしょうか？

そんな方は、GoogleのPageSpeed Insightsで測定することができます。

評価の基準は、スコアが100点に近いほど、高い評価となります。

0～49点は赤（遅い）、50～89点は黄色（普通）、90～100点は緑（速い）と表示されます。

またページ下部の詳細には、改善案も表示されます。

ここで赤い表示が出ている箇所は早急に改善が必要。

オレンジは改善が必要という目安など、どこが原因で遅くなっているのかも確認することができます。

90点以上がユーザーが利用しやすいサイトになりますので、90点以上を目指せるように日々よりよいサイトにしていきましょう。

現状がどの数値にあたるのか、一度調べてみてはいかがでしょうか。

下記Googleより引用

デバイスごとにデザインや文章量などを変えることができない

HTMLファイルが1つなのでスマホとパソコンでコンテンツの順番を変えること、大きくレイアウトを変えることはできません。

また、デバイスごとに文章量を変えたりすることもできません。

レスポンシブ化することでスマホやタブレットで表示したときの画像が正しく反映されていなかったりと、様々な問題も起こる可能性があります。

HTMLファイルが一つになっており情報が複雑化されている為、Webデザインに必要な知識をもっていないと対処できないこともあるので注意が必要です。

費用と時間がかかる

HTMLファイルが一つで管理できる便利さがありますが、だからこそサイト制作は難しくなります。

まずレスポンシブWebデザイン用のcss等、必要に応じて新たなファイルや記述が必要となります。

その結果、費用と構築にも時間がかかることになります。

時代はスマホに向けたサイト作成へ

では、なぜレスポンシブWebデザインをGoogleは推奨しているのでしょうか？

現在インターネットの利用状況がパソコンよりも、スマホの方が高いからになります。

総務省が平成22年～平成30年にかけて調査した「主な情報通信機器の保有状況（世帯）」によると平成29年にパソコンが72.5%、スマホが75.1%と7年目にして初めて3.4%上回りました。

平成30年には、パソコンが74.0%、スマホが79.2％と5.2%増加しています。

前年比と比べると1.8%増加しています。

今後もますますスマホの保有率が上がることが考えられるため、いかにスマホにWEBサイトが対応できるかが重要となってきます。

下記、総務省より引用

レイアウトを紹介

PC、タブレット、スマホ、各デバイスに対応しているレイアウトはいくつかあります。

ここではレスポンシブ・リキッド・フレキシブルの3種類のレイアウトについてご紹介します。

レスポンシブレイアウト

今回ご紹介している、レスポンシブレイアウト（レスポンシブWebデザイン）になります。

画面の幅に応じてcssを切り替えるレイアウトのことを言います。

簡単に説明すると、パソコンで見ていたWebサイトをスマホで見た時に、デザインや背景色や文字などは変わらずにスマホでも見やすく表示されます。

ですが実は、デザインや文字の幅などが調整され見やすくなっているというような感じです。

cssの切り替えを行うピクセル数は「ブレイクポイント」と呼ばれ、このブレイクポイントの値を指定して、ユーザーの使用デバイスに適した表示をすることが可能になります。

この数値だったらこの画面サイズで表示する。

というような形です。

デバイスごとに画面サイズを用意しておいて、そのデバイスに合った画面サイズを表示させるのがレスポンシブレイアウトになります。

リキッドレイアウト

リキッドレイアウトとは、画面のサイズに合わせて表示されるレイアウトのことです。

さっきのレスポンシブと変わらないのでは、と思った方もいるかと思います。

大きく違う点は、表示されるデザイン（見方）が変わるか変わらないかです。

文章、デザインを全く変えずにできるのがこのデザイン。（レスポンシブは不要なものを非表示に出来たりする）

画面のサイズ幅に合わせて液体のように広がっていき、どのデバイスの画面にピッタリにすることができるのがリキッドレイアウトになります。

イメージしてみてください。

あなたの目の前には、新品の小さめで木目調の机があります。その机に爪楊枝4本で四角を作って置きました。

その上から水のしずくを4滴ほど垂らします。

そうすると徐々に雫は広がっていき、爪楊枝ピッタリに広がりますよね。

その広がりを表すのがリキッド（液体）レイアウト、画面ピッタリに表示することになります。

フレキシブルレイアウト

リキッドレイアウトの便利版と考えておくのがいいでしょう。

リキッドレイアウトと同様に、各要素の単位をパーセンテージで表示するものになります。

それに加えて、最小幅、最大幅を指定することができます。

設定した最大幅よりも大きい画面で表示した場合には、まわりに余白を作って見やすいサイトにすることができるレイアウトなります。

レスポンシブデザイン以外でスマホ対応にする方法

レスポンシブWebデザインの他にスマホ対応する方法は何があるのでしょうか？

メリット・デメリットも交えてご紹介します。

メリット

パソコンのページとは別のURLとなるため、 デザインやレイアウトなどを自由に作成することができます。

既存のURLをレスポンシブ対応するとなると全体的な見直しをする必要がある為、時間がかかります。

スマホのページを新しく作る時は、既存のURLに追加するだけなので簡単です。

デメリット

レスポンシブデザインに対応していないWebサイトのデメリットと変わらないので、ポイントだけご紹介します。

・ページのURLが別になるので修正を二度しなくてはならなくなり手間がかかる。

・ページのURLが別になるので、情報が分散されSEOの効果も弱まってしまう。

上記のレスポンシブWebデザイン以外のスマホ対応ができる方法もある点を踏まえて、Googleが推奨してるのはレスポンシブWebデザインであり、いま最も採用されているスマホ対応のレイアウトになっているのは事実です。

ただ、それぞれの会社のWeb戦略に合うようなスマホ対応のWebサイト、最適なデザインを選択し採用することが大切です。

まとめ

いかがだったでしょうか？今回はレスポンシブWebデザインについて説明して参りました。

PCよりも、スマホの使用率が高くなっており、今後もスマホに適したサイト制作が不可欠になってくることでしょう。

メリット・デメリットを把握し、この機会にレスポンシブWebデザインを取り入れてみてはいかがでしょうか。