【知識】レスポンシブWeb（ウェブ）デザインって何？

レスポンシブWebデザインって何？

レスポンシブWebデザインとは、ひとつのHTMLで様々なデバイス（装置・機器）のブラウザ（サイトを閲覧するためのソフト。例、Chrome、Safariなど）に対応するデザインのことをいいます。

WebサイトがPCからのみ閲覧される時代は終わりました。

スマートフォンやタブレットといったモバイルツールの登場により、Webサイトを閲覧するデバイスには様々なサイズが存在しています。

また、Googleによってモバイルフレンドリー（モバイルから見ても見やすく）というひとつの目安が掲げられ、SEO的観点からも、あらゆるブラウザに対応するためのデザイン手法の一つとしてスタンダードになっているのが、レスポンシブWebデザインです。

そしてGoogleは「モバイルファーストインデックス」を発表しました。

「モバイルファーストインデックス」とは、これまではサーチエンジンがPC向けのサイト内容をもとにインデックスしてコンテンツを評価していたのを変更し、モバイル向けサイトの内容をメインの評価対象にしてインデックスする、という方針のことです。

今後ますます、モバイルでの閲覧が第一前提となっていく流れのように見えます。

レスポンシブWebデザイン前夜

レスポンシブWebデザインがうまれる以前、WebサイトはどのようにしてPCとその他のデバイスに対応していたのでしょうか。

2000年代前半、WebサイトはPCで閲覧されることを前提として作られており、例えばモバイル（携帯電話等）からWebサイトを閲覧できたとしてもそのデザインは崩れていることが多く見づらかったり、閲覧自体がしづらかったり、そもそもパケット通信が遅くかつ料金が高額だったため、閲覧しようという人も少なかったでしょう。

モバイルツールへの対応その歴史

モバイルツールの機能向上や情報通信インフラの拡大により、モバイルツールからのアクセスによるシェアが大きくなったWebサイトは、様々なサイズのブラウザに対応する必要性に迫られます。

そこで、Webサイトは、アクセスのあったツールに対して、PCとモバイルとを分けて表示させることを始めました（URL自体が異なります）。

さらにはサーバサイドがアクセスのあったユーザのデバイスを判定し、それぞれのWebサイトに振り分け異なるWebサイトを表示する手法もうまれました（URLは同じでもHTMLは異なります）。

これらは、PCサイトとは別の、モバイルのために専用のWebサイトを用意するという手法です。

モバイルツール専用サイトのデメリット

PCとモバイルで異なるWebサイトに振り分けて表示させる場合、ユーザのデバイスに応じて、URLを変えたり、リダイレクトが発生したりするため、Webサイトを読み込むまでの時間がかかってしまいます。

また、異なるWebサイトになってしまうため製作コストがかかること、さらにURLが違う場合は、該当Webページをリンク・シェア（任意のURLを、Webページに貼ってつながったり共有したりすること）しにくいこと、このようなデメリットがあります。

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

ひとつのHTMLで、様々なデバイスに対応できるWebサイトを表現するために、レスポンシブWebデザインは生まれました。

Webページのデザインを見やすいように、それぞれのデバイスのブラウザサイズに応じて自動的に切り替えているのです。

レスポンシブWebデザインは、デバイスによってWebサイトを振り分けないので、Webサイトが読み込まれるまでの時間が短縮されること、HTMLがひとつなので製作者側はメンテンスが容易であること、URLがひとつなのでユーザ側はリンク・シェアしやすいこと、がメリットとしてあげられます。

さらには、URLが統一されていることでクローラ巡回※が一回で済むというGoogleサイドとしてのメリットがあります。GoogleはモバイルフレンドリーとしてレスポンシブWebデザインをひとつの指標にすると発表しました。

レスポンシブWebデザインは様々なデバイスに対応するWebサイトを製作するための手法としてSEOの観点からもいまや主流となっています。

※クローラ巡回・・・検索エンジンのデータベースを作成するため、 世界中のありとあらゆるサイトの情報を収集するプログラムのことを"クローラ(Crawler)"という。

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

レスポンシブWebデザインにはメリットだけでなく、デメリットもあります。

PCとモバイルとを振り分けないので、Webサイトを読み込むまでの速度が向上する一方で、レスポンシブに対応するための長い記述になってしまったHTML、スタイルシートを読み込むのに時間がかかり、Webサイトを読み込んでから表示するまでの速度がその意味では低下します。

また、ひとつのHTMLで複数のデザインを表現しているため、構築のための仕組みが複雑となってしまいます。古いブラウザや、特殊なデバイスには対応できていないという点もデメリットのひとつです。

レスポンシブWebデザインの作り方

viewport（ビューポート：表示するサイズのこと）

HTML上のヘッダー中にviewport（ビューポート）というメタタグを設定し、ページの横幅サイズを指定することにより表示します。アクセスがあったツールの横幅に合わせるために、以下のように記述します。

<meta name="viewport" content="width=device-width, initial-scale=1">

メディアクエリ（ブラウザ幅の条件に応じて適用するスタイルシートを切り替えられるCSS3の機能）

スタイルにメディアクエリを設定します。例えば、ウィンドウの幅が1,024px以下の場合に適用させるスタイルとして、以下のように記述します。

@media(max-width: 1024px){}

可変サイズ

スタイルとして画像イメージなどのサイズをパーセントで指定する（pxなどの絶対値で指定しない）ことにより、そのブラウザに合ったサイズに可変して表示させることができます。

例えば、以下の記述により、画像サイズが横幅に合わせて可変します。

img {
width:100%;
height: auto;
}

表示切り替え

要素に「display:none;」というスタイルを指定することにより、その要素は表示されなくなります。

例えば、サイズ幅の広いブラウザでは大きな画像を表示し、小さな画像は表示せず、その逆で、サイズ幅の狭いブラウザでは大きな画像は表示せず、小さな画像の表示に切り替える、などということができます。

PCからもモバイルツールからも集客を見込めるように、レスポンシブWebデザインを始めてみませんか。