PC用ページとスマホ用ページなど、横幅に応じた違うデザインを１つのhtmlで実現させちゃうレスポンシブデザイン。
最近多くのサイトで使われるようになってきました。

今回は、レスポンシブデザインにするメリット・デメリットは置いておいて、コーディングする際の自分なりのポイントを３つほどまとめてみました。

１．モバイルファースト
PC用ページより、スマホ用ページを念頭において作成
そもそもの構成段階やデザイン段階でも関係する点ですが、コーディング時にもスマホ用ページを基準にしてhtmlを書いていきます。なぜなら、webの性質上、横の要素の入れ替えはcssで簡単にできますが、縦の要素の入れ替えは困難だからです。

例えば、（図１）のように、左側にサブコンテンツがあり、右側にメインコンテンツがあるケースを考えます。
通常のコーディングでは、左から順に書いていきたいところです。しかし、このスマホデザイン（図２）では、メインコンテンツを先に、サブコンテンツを後に表示させるようになっています。この場合、ソース上では右側のメインコンテンツ部分を先に書いてあげる必要があります（図の番号順にコーディング）。

２．サイトの軽量化
レスポンシブデザインでは、１つのhtmlでPC用ページやスマホ用ページ、はてはタブレット用ページまでまかなっています。それは便利な反面、PC用画像・スマホ用画像などを設定することにより容量が大きくなり、スマホの回線では表示にかなり時間がかかってしまいます。ですので、サイトの軽量化に気を付けるのはとても良いことです。

なるべくCSSで表現
その方法の１つがなるべくCSSで表現することです。ボタンや背景・影などはCSSで書いちゃいましょう。
これには、軽量化以外にも利点があって、スマホで見た場合、画像で作られたボタンはぼやけてしまう可能性がありますが、CSSで表現するならぼやけることはありません。
最近はフラットデザインが主流ですのでこの点でもボタンはCSSで作成しやすいと言えます。

画像を軽量化
CSSで表現、とは言ってもどうしても画像で表現しないといけない部分はありますので、できるだけ軽い画像を使いましょう。
作成された画像を圧縮してサイズを減らすwebサービスで有名なのが、TinyPNGです。png形式のファイルとjpg形式のファイルを圧縮できます。５～７割ほど圧縮してくれて、手軽なwebサービスなので重宝しています。

３．JSの選定と作成
jQueryプラグインなどを使うときはレスポンシブ対応のものを選ぶ
例えばスライドショーを見せるような場合には、レスポンシブ対応のプラグインを用いる必要があります。スマホ・タブレットでは見せない、動かさない、というのなら別に関係ないですが、対応させたい場合は重要ですね。
他にもレイアウトを整えるために使ったプラグインや自作jsは、横幅が変わってもきちんと対応する必要があります。

南本貴之