Webサイトのスマホ対応は今や必須となってきた。
スマホ対応の仕方についてはいくつかやり方があるが主流なのはレスポンシブWebデザインだろう。
本記事ではレスポンシブとは何なのかをWebのことがわからない人向けに解説する。
まずレスポンシブについて解説する前に、そもそもWebサイトはどうやって表示されるのかを説明する。
あなたも聞いたことがあるかもしれないが、Webサイトは主に２種類のファイルから構成される。
HTMLとCSSだ。
HTMLはマークアップ言語といわれ、Webサイトのコンテンツがこのファイルの中に書かれている。
HTMLファイルの中身は下図のようなものだ。こんなものがあるんだぐらいの理解で構わない。
これをWebブラウザで表示すると、下図のようになる。
つまりHTMLファイルというのはデザインされていない情報の羅列である。
CSSファイルというのはデザイン専用のファイルだ。
CSSファイルに意図したデザインになるよう記述し、HTMLファイルからcssファイルを読み込む設定をすると上図は下図のようになる。
HTMLファイルはWebサイトに表示させる情報を書き込むもの、CSSファイルはその情報をどうレイアウトするかを指定するものである。
もう少し説明すると、HTMLファイルにはid(アイディー)やclass(クラス)というものがいたるところに設定されている。
例えば<div id=”top”>*****</div>というような記述がHTMLファイルにあるとする。このid=”top”に囲われた部分（「*****」の部分）のレイアウトを指定する場合は、CSSファイルでtopに対してレイアウトを指定する記述をする。
そうすることで、HTMLファイルの情報は綺麗にデザインされるという仕組みになっている。
スマホ対応する場合は、大きく２つの方法がある。
・HTMLは共通でCSSだけPCとスマホで切り替える（レスポンシブWebデザイン）
・HTMLもCSSもすべて切り替える（URL切り替え：スマホ版のURLを新規につくる）
それぞれ説明しよう。
モニター幅に応じて読む込むCSSを切り替えることで中身は同じだがレイアウトを変える手法である。デバイスの画面幅によって細かくデザインを変えていくこともできる。もちろんタブレット表示の最適化も可能だし、iPhone6＋のように大きな画面サイズの場合にデザインを切り替えることもできる。
また、HTMLが共通なので、管理が楽だ。一箇所を修正するのにわざわざPCとスマホそれぞれを修正する必要はない。
ただ、高解像度の画像を多用するなど容量の重たいWebサイトの場合、レスポンシブWebデザインだとPCでは問題がなくてもスマホで表示速度が落ちることはある。
レスポンシブWebデザインと違い、そもそも読み込むHTMLファイルが異なる。HTMLごと切り替えるので、デザインに制約はない。PCとスマホのHTMLが共通だとどうしても、スマホ対応する際のことを考えてHTMLを作成していく必要があるので、制約はでるが、そういった制約がないので自由なデザインが可能になる。
また、一箇所を修正するのにわざわざPCとスマホどちらも修正する必要があるので手間がかかる。
表示速度については、スマホ用に画像サイズを調整したものを読み込むことができるので、全体のファイルサイズを小さくして読み込み速度を早くすることができる。
奇抜なデザインや見せ方を根本的に変えるようなことがなければレスポンシブWebデザインで画面幅に応じて柔軟に形を変えるものが良いだろう。
それぞれに特徴があるが、デバイスが多様化していく中でレスポンシブWebデザインのように、画面幅に応じてデザインを切り替えるという考え方はもっていた方がよいだろう。
