昔はパソコンでしか見られなかったWEBサイトですが、昨今はスマホに限らずテレビやゲーム機でもWEBサイトを見る機会が増えています。そのためあらゆる画面サイズの異なるデバイスでWEBサイトを正常に閲覧できる必要があります。

HTML5が出始めスマホサイトの需要が高まるころからレスポンシブサイトの需要が高まり始めました。HTML5初頭は多くのエンジニアさんたちが試行錯誤していました。僕もそのうちの1人でIE7がまだ稼働している時期でもありかなりしんどい時期でした。結局の所、IEのような柔軟性のないブラウザが消えてくれたおかげでスマホサイトも作りやすくなる結果になりました。

レスポンシブサイトとは

レスポンシブデザインを考えて作られたサイトです。簡単に言えば1ソースで様々なデバイスで見ても同じ情報を見せられるサイトです。スマホでも見れるサイトを作る手段としてスマホだけに特化されたWEBページにリダイレクトする手法があります。それは行わずに同じページの中でPCで見てもスマホで見てもゲーム機で見ても大丈夫なように作るのがレスポンシブサイトです。

レスポンシブの考え方

レスポンシブの考え方は非常に簡単です。ウィンドウサイズに沿ってHTMLタグのサイズが可変すれば良いのです。レスポンシブサイトの根本的な組み方は昔からあって特別に難しい技術ではありません。

最も重要なのは横幅のサイズを固定しないということ。例えばHTMLタグの<header>の横幅を100%のままにしておけばPCで見てもスマホで見ても正しく表示されます。つまり画面の横幅が狭くなっても大丈夫なようにデザインしてCSSを組むことがもっとも重要になります。
とはいえPCサイトでは横幅サイズを固定しなければならない場所は必ずあります。そこはメディアクエリで一定の画面幅になったらCSSで横100%に変えて可変させます。これをブレークさせるとか、可変させるタイミングをブレークポイントなど呼びます。

PCとスマホの画面の違いは横幅です。PCはだいたい1280pxですがスマホはだいたい320px（dpiの関係で実質640px）になります。縦幅に関しては気にする必要がありません。なぜならWEBサイトとは今も昔も縦長だからです。横幅を制御できるようになることがレスポンシブサイトを極める極意になります。

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

レスポンシブサイトではCSSで各要素を可変させます。つまりHTMLタグは固定のままなのが最大のデメリットです。トップページの特集スライダーがあったとしてPCとスマホで機能を変えたいと思っても無理です。見た目を多少変えることができますがCSSでできることだけです。

他にもHTMLタグは書いた順に画面に表示されますが、この順番を変えることも難しいです。今はCSSプロパティのdisplay:flexがあるので工夫次第で柔軟に対応できますが、要素の並び替えをあえて変えることはあまりないと思います。

とはいえ、今はJavaScriptやPHPでデバイスごとに判断して部分的にHTMLやスクリプトを変えることができるので工夫すれば自由にレスポンシブデザインすることが可能です。そのかわりノウハウが必要ですし組み方次第では描画速度を犠牲にしてしまいます。この辺りはWordPressでサイトを作っていると非常に便利に作れてありがたいなと思っています。

画像がネック

画面サイズが違うことから画像の扱いが非常に難しいです。ひとつのバナーがあったとして、PCでは文字が読めるけどスマホで見ると小さすぎて読めない…といった事がよくあります。そんな時はPCとスマホで別画像を準備したくなるのですが…できません。実際はできますが2枚画像を読み込んでCSSで切り替えるので2枚分の通信量がかかったり、無理やり2枚投稿できるようにしてもメンテナンス性が下がってしまいます。

今は大体のサイトが1枚の画像で済むように作っているのが主流だと思います。そういったことも含めてレスポンシブデザインを考えなければなりません。今は画像は飾り扱いにしてテキストタグでカバーするのがメジャーだと思います。

レスポンシブデザインを行う上で気にかける事

僕がレスポンシブサイトを作る際に気にかけている点をご紹介します。これ以外にもWEBサイトによっては色々気にしなければならない点が出てくると思いますが、下記を参考にしてレスポンシブデザインを考えてみてはいかがでしょうか。

ある程度のレスポンシブサイトを作るとだいたいのパターンができてくると思います。過去に組んだコーディングは流用できるので作れば作るほど効率よく最適なWEBサイトを作れるようになっていくでしょう。