今、レスポンシブについて調べている人は、スマートフォン対応のWebサイトを作ろうと思っているのではないでしょうか？ パソコンやタブレットの画面幅を基準としたWebページの他に、スマホ画面に最適化したページを用意しておくのは、モバイル端末でネット接続をするのが当たり前の時代において必ず抑えておきたいところ。
でも、パソコン画面用とタブレット画面用のサイズでページを用意して、さらにスマートフォン用の画面サイズでページを用意するとなると、それだけで3種類が必要です。
さらにスマホは種類が多く、例えば同じiPhoneでも、新旧あわせたら10種類以上の画面サイズが存在します。そのすべてに最適なページを個別で作成するなんて。
そこで検討したいのが、レスポンシブデザインの採用です。レスポンシブデザインとは何ができるのか、どうやって作成するのかをご紹介します。
レスポンシブデザインとは？スマホで見ても表示が崩れない！
レスポンシブWebデザインとは、ユーザーがWebサイトを閲覧する際の環境によって、レイアウトを調整するデザインです。パソコン、スマートフォン、タブレット、それぞれの端末の画面サイズで自動的に判断し、表示を変えているのです。
閲覧者のデバイスを判断して表示を変える必要性
ここ数年、インターネットを楽しむためのデバイスの多様化が進んでいます。昔はインターネットといえばパソコンで見るものでしたが現在はスマホ利用者の数がパソコンを上回っています。
かつてはデバイスによって表示するページを変えるという手法が取られていました。あるいはスマートフォン用に縦長の画面に対応する形でページを作成し、それをそのままパソコンで表示する人も。
しかし現在は、アクセスするファイルはひとつで、自動的にデザインが調整される形が主流となりました。それがレスポンシブWebデザインです。
昔の「ホームページ」をスマホで見ると……？
昔はWebサイトのことをホームページと呼んでいました。本来ホームページというのは、Webサイトの一番トップに表示されるページのことのみを指す言葉です。
しかし、その言葉がWebサイトそのものを意味していた時期がありましたその頃に作られたWebサイトを今スマートフォンで見ると、かなり表示が崩れていることがあります。
パソコンのブラウザで見る時とは全く違うデザインになっていたりして、驚いた人も少なくありません。デバイスによって画面サイズが違うため、どうしてもそのような表示になってしまうわけです。
カラムを上手に切り替える
よくあるWebサイトやブログのレイアウトで、画面が縦に2分割、あるいは3分割されているようなレイアウトがあります。
あの縦方向の列のことを「カラム」と言います。このタイプのレイアウトは、横が長く縦が短いパソコンのディスプレイにおいては、とても収まりが良いです。
しかし、これを縦長の画面であるスマホでそのまま見ようとすると、表示がおかしくなってしまいます。しかしそのサイトがレスポンシブWebデザインで作られている場合は、自動的にレイアウトが変更になるのです。
例としては、左右に並んでいたカラムが上下に並ぶなどして、見やすく調整されます。画面が縦長であるため、このほうが収まりが良く見やすくなりますね。このように自動的にレイアウトが調整されるような設定をファイルに組み込むのがレスポンシブデザインです。
レスポンシブウェブデザインはいつから？驚きの歴史に注目！
端末の画面サイズによってレイアウトが自動的に変わるレスポンシブの仕組みは、いつ頃から登場したのでしょうか。
始まりは2001年！ブラウザのビューポート幅に適応するサイト
閲覧者が使用しているブラウザの幅に適応するレイアウトが初めて実装されたのは2001年のことです。まだブラウザによっては再読み込みが必要でしたが、画期的な試みでした。
初めて「レスポンシブウェブデザイン」という言葉が作られたのはいつ？
その後2010年に「レスポンシブウェブデザイン」という言葉が作られ、理論と実践が書かれた本が発売されます。それから少しずつ知名度が高まり、2013年が「レスポンシブウェブデザインの年」と呼ばれるようになったのです。
スマホユーザーが増加した現在、レスポンシブは必要不可欠
個人がネットを利用する際に使うデバイスを総務省が調査したところ、スマホがパソコンを上回るという結果が出ました。（スマートフォンが59.7％、パソコン52.5％）
ネットを楽しむ環境がこのように変化してきた今、レスポンシブWebデザインは不可欠なものとなりつつあります。
レスポンシブデザインの特徴やメリットは？
使用する端末によって表示が変わるレスポンシブデザインを取り入れることで、何かメリットはあるのでしょうか。
別々にページを作成しているわけではない
注目すべきところは、わざわざ別のファイルを作成して振り分けているわけではない点です。レスポンシブ登場前は、PC用とスマホ用、それぞれ表示されるファイルを分ける方法が取られることもありました。
しかしそのようにすると、URLが変わってしまうのがWeb管理者の悩みのタネでした。レスポンシブWebデザインの場合はひとつのファイルで対応するため、サイトやファイルを分けて作る必要がありません。それにより被リンク数の分散を防ぎ、検索エンジンGoogleの評価が下がることを防ぎます。
レスポンシブWebデザインがSEOに強いと言われるのは、このような理由です。Googleのモバイルフレンドリーでは、レスポンシブデザインが推奨されています。
モバイルフレンドリーとは、モバイル端末利用のユーザーがサイトを問題なく閲覧できるということです。サイトの評価が上がれば、検索順位の上昇に繋がるというわけです。
CSS（スタイルシート）の記述だけ！CMSでも簡単設定
CSS（スタイルシート）を活用する方法が最も簡単で、好まれています。CSSとはページのスタイルを指定するものです。レスポンシブの場合、画面サイズによって読み込むCSSを振り分け、スタイルを変更するという形になります。
また、HTMLのmetaタグに記述するという手もあります。WordPressなどのCMSの場合、最初からレスポンシブWebデザイン対応のテーマを選ぶだけでOKです。あるいはテーマをカスタマイズしたり、プラグインを選ぶのも良い手段です。
PCがメインの層にはちょっと物足りない面もある？
もともとレスポンシブデザインの最大の目的は、スマホで美しく表示させるためでした。最近はどうしてもスマホユーザーをメインに捉えなければいけないので、パソコンユーザーは物足りないかもしれません。
レスポンシブWebデザインのサイトを外注したい時は？
スマートフォンやタブレットにもきちんと対応する、便利なレスポンシブWebデザイン。これを導入してWebサイトを作りたい人は、外注のエンジニアやライターに作業を依頼してみましょう。
放置しているホームページ、レスポンシブにしませんか？
スマートフォンが登場する前に作ったWebサイトをお持ちの方は、これを期に改装してみてはいかがでしょうか？企業のオウンドメディアとして運営する場合も、古いデザインのままではスマホ世代には響きません。
HTMLからCMSに変更する手も！そっくりそのまま作り変えてもらう
すでにHTMLで作られているサイトを丸ごとCMSで作り直すという手もあります。文章などのコンテンツをCMSで再編集し、新たなサイトとして公開するのです。
CMSであればレスポンシブデザインに対応しています。SEO対策を行い、Webサイトの収益化を狙ってみるのも良い方法でしょう。
CMSの使い方がわからないという人は、クラウドソーシングサービスなどで外注に依頼すると良いですね。CMSの設置や管理代行を引き受けてくれるフリーランサーがたくさんいます。