Webデザインの世界では「レスポンシブWebデザイン」が話題になっています。
……と言われてもピンとこない方もいるのではないでしょうか？
そのような方に向けてこの記事を執筆しました。レスポンシブWebデザインの概要やメリット・デメリットなど、基本的なことを知りたい方はぜひ最後まで読んでみてください。
Webデザインにおけるレスポンシブとは
インターネットへアクセスできるデバイスはいろいろあります。PCだけでなくスマートフォンやタブレットでインターネットへアクセスする方も多いでしょう。あるいは年代や職業によっては、スマートフォンしか使わない方もいるかもしれません。
それぞれのデバイスによってディスプレイの大きさや縦横の比率が異なります。そのため、デバイスの種類に関係なくWebページをそのまま表示すると、見づらくなってしまうのです。
スマートフォンが日本で発売される以前、携帯電話（いわゆるガラパゴス携帯＝ガラケー）で、一般的なWebサイト（携帯電話専用サイトではない）にアクセスすると、PCでWebサイトを見るときのようなレイアウトで表示され、文字が小さくて読みづらいこともありました。そういった問題を解決するのがレスポンシブWebデザインです。
Webデザインをレスポンシブにするメリット
レスポンシブWebデザインにすると、どのようなメリットがあるのでしょうか？
ユーザーが情報を見やすくなる
ユーザーによってインターネットを閲覧するデバイスが異なります。また、同じユーザーでも仕事で閲覧するときと、プライベートで閲覧するときにはデバイスが変わることもあるでしょう。どのようなデバイスでアクセスしても、そのデバイスに合わせて画面レイアウトを変えてくれるため、ユーザーがWebサイトを見やすくなるのです。
サイト管理が楽
「デバイスに合わせてレイアウトを変える」となると、レイアウトの数だけWebサイトのデータ（HTMLファイル）を管理しないといけないの？と思うかもしれません。しかし、レスポンシブWebデザインでは、基本的に一つのデータを管理するだけでよいのです。そのため、ユーザーへのメリットが大きくなるからといって、それ以上にサイト制作者のデメリットが大きくなるわけではありません。
SEO対策になる
スマートフォンでインターネットにアクセスするユーザーが増えていることを考慮し、「モバイルフレンドリー（モバイルユーザーが利用しやすい）の方が、SEOに有利といわれています。実際、GoogleもモバイルフレンドリーなWebサイトを優先して表示させているという話もあります。
そのため、レスポンシブWebデザインを取り入れてモバイルフレンドリーに対応すると、検索順位のアップが期待できるのです。
SNSでシェアされやすい
SNSのユーザーはスマートフォンでアクセスすることが多いでしょう。そのようなとき、レスポンシブWebデザインなら、スマートフォンに合わせてレイアウトを変えられるため、さまざまなWebサイトをシェアしやすくなります。
また、Webサイトの画像やWebサイトの説明文を表示できるOGP（Open Graph Protcol）を設定しておけば、よりシェアされやすくなります。OGPによりシェアした人の投稿の見栄えがよくなり、その投稿へのアクセス数（インプレンション数）をアップできる可能性があります。それが転じて、元のWebサイトへのアクセス数アップも期待できるのです。
レスポンシブWebデザインのデメリット
反対に、レスポンシブWebデザインのデメリットとして、どのようなものがあるのでしょうか？
デザインの制限やレイアウトの崩れがある
レスポンシブWebデザインでは、一つのHTMLファイルですべてのデバイスの表示に対応させます。そのため、凝ったデザインにするとデバイスによってはレイアウトが崩れることがあります。したがって、汎用的なデザインやフォントしか使用できず、Webサイトのデザイン上の個性を出すのが難しいかもしれません。
コーディングの時間が長くなる
レスポンシブWebデザインは一つのHTMLファイルでデバイスに合わせたレイアウトを提供できる反面、各々のデバイスに合わせた複数のデザインを実装するため、コーディングの時間は長くなる傾向にあります。
Webサイトの表示に時間がかかることがある
レスポンシブWebデザインでは、PCとスマートフォンなどで同じHTMLファイルを読み込みます。たとえば、スマートフォンで読み込むときには、余計なデータ（PCでは表示するが、スマートフォンでは表示しないデータ）も含めて読み込むことになります。そのため、表示が遅くなり、その間にユーザーが離脱する可能性があるのです。
ページ読み込み時間と離脱率の関係は、以下のようになるといわれています（※1）。
- 1秒〜3秒：離脱率32％
- 1秒〜5秒：離脱率90％
- 1秒〜6秒：離脱率106％
- 1秒〜10秒：離脱率123％
もちろんページ読み込み時間には、そのデバイスの電波状況や処理速度なども関係します。しかし、そもそもデータ量が多いと、読み込み時間が長くなる傾向になるのです。そのため、不必要なコンテンツや必要以上にデータ量の多い画像などの掲載は避けるようにしましょう。
※1：Think with Google「Find out how you stack up to new industry benchmarks for mobile page speed」
レスポンシブなWebデザインにする基本的なやり方
meta viewpointタグを追加する
meta viewpointタグを追加すると、アクセスしたユーザーのデバイスのサイズを検知できるようになります。meta viewpointタグを追加する方法はHTMLとWordPressで違っており、HTMLの場合はすべてのHTMLファイルのヘッダー部分に追加する必要がある一方、WordPressであれば共通のテンプレートファイルに追加するのみで対応できます。
CSSファイルで指定する
メディアクエリを開いて、CSSのブレイクポイントを指定します。これにより、デバイスに合った適切なサイズ、あるいは適切なレイアウトでWebサイトを表示できるようになるのです。
レスポンシブWebデザインの種類
一口にレスポンシブWebデザインといっても、その種類は三つあります。
レスポンシブレイアウト
レスポンシブレイアウトを採用すると、画面の幅に応じてCSSを切り替えられます。CSSとは「Cascading Style Sheets」の略で、文字の色やフォントなどWebサイトの装飾に使うものです。CSSを切り替えるには「ブレイクポイント」というピクセル数の設定が必要であり、これによりユーザーのデバイスに合わせてレイアウトに変更して表示してくれるのです。
リキッドレイアウト
リキッドレイアウトとは、ユーザーのデバイスに合わせてWebサイト全体の幅を変えるものです。たとえば、幅が絶対値で指定されたWebサイトがあったとします。PCで見ると全体が表示されたとしても、スマートフォンで見るとディスプレイの寸法の都合により、一部しか表示されません。表示されない部分を見るためには、横にスクロールする必要があります。
しかし、リキッドレイアウトではWebサイトのサイズを相対値（比率）で指定するため、どのようなデバイスでアクセスしても、最適なサイズでWebサイトを表示してくれるのです。
フレキシブルレイアウト
フレキシブルレイアウトも、Webサイトのサイズを相対値で管理するのはリキッドレイアウトと同様です。しかし、フレキシブルレイアウトでは最大幅と最小幅を（絶対値で）管理します。そのため、最大幅より大きく表示できるデバイスでアクセスしたときには、外側が余白として表示されるのです。PCなど想定される最大のデバイスで表示したときのサイズを固定したいときに、向いているレイアウトです。
まとめ
この記事ではレスポンシブWebデザインについて解説しました。スマートフォンからWebサイトにアクセスするユーザーの増加に合わせて、レスポンシブWebデザインが一般的になってきています。Webサイトを管理しやすく、さまざまなデバイスのユーザーにとって見やすくなるなどのメリットもありますが、デザインの制限を受けたりコーディングの時間が伸びたりといったデメリットもあります。
デメリットをよく理解したうえで、必要と感じるならばレスポンシブWebデザインに挑戦してみましょう。
