サイトのリニューアルサイトや新しくサイトを作る場合、スマートフォン対応をどうしようか迷う人もいるのではないでしょうか。PCとスマートフォン向けのページを作ると、２倍の工数や費用がかかります。
ただ、そんな時に知っておいて欲しいのが「レスポンシブ開発」です。スマートフォンサイトを作るときに知っておいて欲しい開発手法の1つです。
とは言え、レスポンシブサイトのことがよくわからない人もいるのではないでしょうか。
今回は「レスポンシブサイトがわからない！」という人のためにレスポンシブサイトの仕組みについて説明していきます
Contents
レスポンシブサイトとは
レスポンシブサイトとは「同一のURLであるのにブラウザの横幅にあわせて、デザインを変更することで、PC,スマートフォンに関わらずどんな閲覧環境でもページの表示する」ことが出来ます。
レスポンシブサイトは「ワンソースマルチデバイス」とも表現され、1つのファイルでPCやスマートフォンに対応した表示切り替えを行うことが出来ます。
レスポンシブによるサイトが増えた背景
レスポンシブサイトは様々なサイトで作られており、増えてきています。なぜかというとレスポンシブサイトでサイトを作ることにメリットがあるからです。では、一体どのような理由でレスポンシブサイトが増えたのかを説明していきます。
背景①：あらゆる端末のディスプレイサイズに合わせるのが困難に
レスポンシブサイトが増えたのは、あまりにも多くのデバイス機器が生み出されているという背景があります。
昨今はPCのディスプレイサイズが多種多様であるだけでなく、PCの中でもデスクトップ型やモバイルPC、タブレットであれば様々なディスプレイサイズ、スマートフォンでも様々な機種が開発されており、そのディスプレイサイズの種類は数え切れない程あります。
全てのデバイス機器に対応した画面サイズのページを用意することは、容易ではありません。
かといって、単一的なディスプレイに合わせられたサイトでは、表示崩れを起こしてしまう可能性もあります
その点、レスポンシブサイトは「1つのファイルでPCをスマートフォンなどを横幅に合わせた画面にしてくれる」ので、横幅のページレイアウトやデザインを横幅にあわせて調整してくれる点が受け入れられています。
背景②：開発コストが抑制できる
レスポンシブサイトは、１ファイルでPC版やスマートフォン版などの表示切り替えを行います。そのため従来の2つのファイルを作成する必要があったスマートフォン対応の場合と比べ、レスポンシブサイトは開発工数が抑えられます。
開発工数が抑えられるということは、開発費用の抑制といったメリットがあります。それがレスポンシブ開発でサイトが作られることが増えた背景にあります。
背景③：サイト運用・管理の手間が楽になる
レスポンシブサイトは、先ほどからお伝えしているように1つのファイルです。1つのファイルであるため、何らかの修正作業が必要になった時、１箇所の修正をするだけで、PCとスマートフォンの修正が完了することになります。
背景④：Google推奨の開発手法である
レスポンシブサイトはGoogleが推奨している開発手法です。PCやスマートフォン対応のページをレスポンシブサイトで作ったとしても、運用管理が楽であるのことが理由です。
また、従来のPCとスマートフォンを別々のURLで作る方法より、SEO対策のミスが少なく済む可能性がある点も推奨されている理由です。
レスポンシブサイトの確認方法
では、レスポンシブサイトであるかどうかを知りたい、調べたいという時にどうすれば調べることができるでしょうか？実際にスマートフォンでそのサイトを見ても分からないこともあります。
ところが、レスポンシブサイトかどうかを確認するのは非常に簡単です。
レスポンシブサイトは、サイトを表示しているときにディスプレイの横幅を可変させることで、表示が切り替わります。そのため、実際にPCでサイトを表示する時にブラウザの横幅を長くしたり短くしたりすればわかります。
ブラウザの横幅を短くして、ある横幅のタイミングで表示切り替えが行われたら、それはレスポンシブサイトです。
もしPCとスマートフォンとタブレットで表示切り替えを3パターン用意したい場合は、レスポンシブサイトのブレイクポイントは2つ必要になります。
レスポンシブサイトの作り方
レスポンシブのサイトの作り方は、「横幅を指定すること」と「CSSで表示切り替えを行うデザイン」を行います。ここで詳しくは解説しませんが、具体的には下記の手順があります。
- ビューポート設定を行う。
- CSSのスタイルシートを表示切り替えパターンごとに設定する。
- メディアクエリを設定する
必ずしもレスポンシブサイトが良いわけではない
ここまでの話を見ていくと、レスポンシブサイトは、開発コストや運用コストが少なくて済みます。ただ、必ずしも全てのサイトをレスポンシブサイトにすればいいわけではありません。レスポンシブサイトには注意が必要です。
レスポンシブサイトにはデメリットがあります。そのデメリットをしっかり把握しておく必要があります。
レスポンシブサイトはデザイン上の制約がある
レスポンシブサイトはワンソースで作られているが故に、デザインを大きくPCとスマートフォンで変えたい場合、思うようにできないデザイン上の制約を受けてしまう場合があります。
ECサイトやポータルサイトはレスポンシブを選択しないサイトも
ECサイトやポータルサイト等、日々アクセスが多く、ユーザがお問い合わせを頻繁にするようなサイトでは、レスポンシブ開発をあえて選択しないこともあります。
レスポンシブサイトによるデザインの制約上で、問い合わせや売り上げが変わってしまうリスクがあるのです。
まとめ
- レスポンシブサイトは多くのサイトで用いられている開発手法
- 開発コストや運用コストが少なくて済むのが、レスポンシブサイト
- SEOで有利なのではなく、SEO設定ミスのリスクが少ないのがレスポンシブサイト
- どのサイトでもレスポンシブサイトが望まれるわけではない
- あえてレスポンシブサイトにしないスーモやYahoo!といったサイトもある。
