マルチデバイス対応の基礎知識
03 レスポンシブの画面設計

PC 向けのWebサイトの画面構成を考える際には、レイアウトを先に決めてその中にコンテンツ部品を並べ ていくような形で考えていることが多いかもしれません。しかしレスポンシブ・ウェブデザインの場合は「レイアウト」からではなく「コンテンツ」から画面を設計することが重要となります。
先にコンテンツから設計する手法は「コンテンツファース卜」と呼ばれています。具体的には、

• ①画面に必要なコンテンツ部品（コンポーネン卜）の洗い出しをする
• ②情報の重要度を考慮してコンポーネン卜を縦列に並べる
• ③コンポーネント同士を必要に応じてグルーピングして最後にレイアウトに展開する

といった手順で画面構成を検討していくことになります。
ここで重要なことは、手順②で検討したコンテンツの並び順が基本的にマークアップの記述順となり、またスマートフォンでの表示順にもなるということです。
また、レスポンシブでは同じHTML構造を使って全ての環境向けのレイアウトを実現しますので、原則として②で決定したコンポーネント順序をcssで並べ替えて作れる範囲のレイアウトにしておくことがポイントとなります。

③でレイアウトに展開する際に検討しなければならないのが「ブレイクポイント」です。レスポンシブ・ウェブブデザインでは、ある一定の画面サイズを基準とてcssでレイアウトを切り替えるように作ります。このレイアウトが切り替わる画面サイズの基準点をブレイクポイン卜と呼んでいます。
ブレイクポイン卜を設定するサイズをいくつにするのか、いくつブレイクポイントを用意するのか、といったことはレイアウトパターンの数とも連動することになるため、やみくもに増やすことはあまりお勧めできません。

• スマー卜フォン向けとPC向けの2つのレイアウトパターンを用意してその境目にブレイクポイントを1つ設定
• スマー卜フォン向け・小型タブレッ卜向けPC向けの3つのレイアウトパターンを用意してその境目にブレイクポイン卜を2つ設定

のどちらかをベースとして、あとはコンポーネント単位で必要があれば微調整する形が良いと思われます。

ブレイクポイン卜を設定する具体的な数値（画面サイズ）や数に業界全体で統一されたものなどは特にありません。デバイスの種類が少なかった頃にはiPhone、iPadなどの代表的なデバイスのサイズを基準にスマホ用、タブレッ卜用、PC用といった感じでデバイスを切り分けるイメージのブレイクポイントを設定することも多かったのですが、現在ではデバイスの種類も増え、サイズによってデバイスを単純に切り分けることはできなくなっています。従って主なデバイスのサイズは意識しつつも、基本的にはウィンドウサイズに対するコンテンツの見せ方によってブレイクポイントを設定することが多くなってきています。
なおブレイクポイントを決める際には、

①最小ブレイクポイントの場所

②最大ブレイクポイントの場所

③中間ブレイクポイントの場所

といった順に考えると初心者でも比較的スムーズに決定できるかと思います。

①最小ブレイクポイント

最小ブレイクポイントは、「スマートフォン向けレイアウトとそれ以外とを切り分ける」ための重要なブレイクポイン卜です。基本的にこのブレイクポイントを境に小さい画面ではシングルカラム、大きい画面ではマルチカラムがレイアウトのベースとなります。比較的よく見られるのは480px、640px、768pxといった数値です。

②最大ブレイクポイント

レスポンシブ・ウェブデザインではコンテンツの横幅は原則として可変ですが、一定サイズ以上はPC専用サイトと同様にコンテンツ幅を固定とする場合が多くなります。その場合、最大ブレイクポイントは「それ以上は横幅固定レイアウトに変更する」ためのブレイクポイントとなり、基本的にPCレイアウトにおけるコンテンツ固定幅と同じとなります。比較的よく見られる数値は960px、978px、1024pxといった数値です。

③中間ブレイクポイント

500～800px前後の中間サイズ付近は、コンテンツやレイアウトによって「スマホ向けレイアウトでは間延びしすぎる」「PC向けレイアウトで、は窮屈過ぎる」といった不具合が出やすいサイズとなります。従って最小と最大のブレイクポイン卜が離れすぎている場合には1～2箇所中間ブレイクポイントを追加した方が良いと思われます。

レスポンシブサイトの画面設計を検討する際に最も注意する必要があるのは、スマー卜フォン向けもPC向けも「同じHTMLを使う」という点です。コンテンツの位置調整はcssのみで行いますので、cssの技術的制約を超えた配置変更は原則としてできません。
仮に同一HTMLでの実装が物理的に不可能だった場合、どうしてもそれを実現したいならスマホ用・PC用でそれぞれ別々のコードを両方記述しておくことになり、コードを二重管理しなければならなくなります。そのような実装は無駄も多く、なにより「二重メンテが不要で管理運用がしやすいというレスポンシブの大きなメリッ卜を無くしてしまうことにつながってしまいますので、やむを得ない場合を除いて原則として避けるようにするべきです。
実際にコードを書く人と画面設計をする人が同一人物であれば、何が可能で何が不可能なのかは大体判別がつくでしょうが、画面設計をする人にコーディングの知識が無い場合はそれができないため、問題の多い画面設計をしてしまう可能性が高くなります。
実際のコードをイメージできない人が画面設計の担当であった場合には、次のような方法で比較的簡単に問題の有無を見分けることができます。

左の例のように連番を繋いだ線がスムーズに一筆書きで流れるような状態であれば、cssでのレイアウト上、技術的な制約はほぼ無いと考えて大丈夫です。逆に右の例のように繋いだ線が上下方向に行ったり来たりしたり、線がクロスするように複雑な流れになっている場合は、本当にそれがcssだけで、実現可能なのか必ず、事前に確認する必要があると考えてください。

またこちらの例のように各ブロックの流れに問題はなくても、レイアウトによってグルーピング、が変わってしまうような設計は同一HTMLでのレイアウトができないため、避けるべき典型的な例となります。

以上のことは実際のコーディング作業以前の話ではありますが、レスポンシブでつくるメリットを最大限に活かしながら効率よく制作していくための重要なポイン卜となっていますので、実際にコーディングする人だけでなく、ディレクターやデザイナーなどのプロジェクトに関わる全員が理解をしておくことが望ましいと言えます。