{{date}} {{catName}} {{title}}

レスポンシブデザインという言葉が、WEB制作の現場ではすっかり定着しておりますが。この「レスポンシブ」という言葉は割とあいまいで、時折クライアント様、営業、デザイナー、HTMLコーダーの間で認識がずれてしまうことがあります。
これまでHTMLコーディングの際は、ケースバイケースでデザインを見ながら都度、デザイナーさんやディレクターに確認してましたが、打ち合わせの段階などで「レスポンシブ」という言葉を使うといろいろ説明が面倒になることもあったりします。

というわけで、一度自分の中の「レスポンシブコーディング」の定義をまとめてみたのですが、その結果5種類のタイプに分類されました。

1. 基本のデザイン（PCのみ）
2. スマートフォン対応
3. スマートフォン＆タブレット対応
4. レスポンシブ（PC＆スマートフォンデザイン）
5. レスポンシブ（全デバイス対応）

以下、詳細です。

１．基本のデザイン（PCのみ）

PC用に作成されたデザインを、そのままの幅でHTMLコーディングします。
これはレスポンシブではないので非レスポンシブと呼んでいます。

ブラウザの幅がコンテンツよりも狭くなった場合は、コンテンツは画面からはみ出して、横スクロールで表示できるようになります。
タブレットやスマートフォンでは、PCのデザインがそのまま縮小して表示されます。

２．スマートフォン対応

PCとタブレットは１の「基本のデザイン」と同じです。
スマートフォンのみ別のデザインを用意して、スマートフォンでの表示の際にデザインを切り替えます。
レスポンシブというよりは、スマートフォン対応といった方がふさわしいです。

このスマートフォン用のコンテンツはブラウザの幅に合わせて幅が変動します。画像は縮小され、テキストは改行位置がかわります。この変動するデザインはリキッドデザインと呼ばれています。

1つのページでデザインを切り替える方法と、2つページを用意して、表示するデバイスに合わせてページを切り替える方法の2種類あります。

当然、作業量も基本のデザインに比べて多くなるのですが、基本のデザインの作業量を１として考えると、スマートフォン対応は作業量が２になります。

３．スマートフォン＆タブレット対応

PC、タブレット、スマートフォン用の3種類のデザインを用意します。
PCは固定幅ですが、タブレットとスマートフォンはリキッドデザインのレスポンシブです。

スマートフォン対応の時と同じように、1つのページでデザインを切り替える方法と、表示するデバイスに合わせてページを振り分ける二通りの方法があります。

基本のデザインと比較した場合の作業量は3になります。

４．レスポンシブ（PC＆スマートフォンデザイン）

PCとスマートフォンの2種類のリキッドデザインを組み合わせたレスポンシブデザインです。

ブレークポイント（基本は640ピクセル）を境にして、ブラウザ幅がブレークポイントより大きければPC用、小さければスマート用にデザインが切り替わります。

こちらもデバイスによる振り分けは可能です。
作業量は３になります。

５．レスポンシブ（全デバイス対応）

４のタイプにタブレット用のデザインを加えたものです。
1つのページで全てのデバイスに対応するレスポンシブデザインです。
作業量は３

一般的なのは？

案件の中で比較的多いのは、２の「スマートフォン対応」か、４の「レスポンシブ（PC＆スマートフォン）」が多いと思います。
当然４の方が料金も高くなるので、予算に合わせてどちらか選ぶといった感じです。

あと、1つのページで対応するか、デバイスによってページを振り分けるかもポイントになりますが、弊社では1つのページで対応することが多いです。
更新など後々の事を考えると、1つのページで全デバイスに対応する方が管理しやすくなります。ただ、PC版とスマートフォン版で全く違う内容になるような場合は、ページを２つ作って対応した方がよいです。

ちなみに、このブログページは４を採用しています。デバイスによる振り分けは行わず、1つのページでPC、スマートフォン両方に対応しています。