これまでの記事にてレスポンシブwebデザインは、PCから閲覧された時はPC向けのレイアウトへ、iPad等のタブレットからはタブレット向けへ、スマートフォンからはスマートフォン向けへ変化すると説明して来ました。

レスポンシブwebデザインには、変化のしかたにも複数のパターンがあります。
コンテンツの内容により、どのように変化させるか、最適なレイアウトを考える必要があります。

そこで今回は、レスポンシブwebデザインのレイアウト、5つの変化例を紹介したいと思います。

レスポンシブWebデザイン5つの変化

① 可変を前提に！一般的なレスポンシブ

PC向けには任意のレイアウトを、タブレット向けには横幅を小さく変形、スマートフォン向けには1カラム、と言った風にデバイスの幅に合わせ画面の横幅を変更し、カラムを並び替えるレイアウトです。
固定サイズと可変を組み合わせる、もっともシンプルな方法です。

② カラムを落として変形

PCでは2カラムから3カラムで制作しておき、ウィンドウ幅が小さくなると3カラムから2カラムへ、
2カラムから1カラムへと変化します。
任意のウィンドウ幅になると順番にカラムを落としていくレイアウトです。
タブレット、スマートフォンでは1カラムで表示します。

③ デバイス毎にレイアウト変更

スマートフォン向けには1カラムのレイアウトですが、ウィンドウの幅が大きくなるにつれ、レイアウトが変化していくレイアウトです。
PC向け、タブレット向け、スマートフォン向けと、まったく違うレイアウトになり、情報量の多いサイトで良く見られます。

④ 1カラムベース

こちらのレイアウトはシングルページのサイトによく見られます。
1カラムだけで制作されており、画面の幅に応じてウィンドウ全体の幅が変化します。
コンテンツのレイアウトが変わることはなく、幅が小さくなると、画像、テキストが小さくなり、画面外へはみ出るテキストは改行されます。

⑤ 画面外領域を使用

スマートフォン向けアプリや、Webアプリによく使用されています。
画面外の領域を使いコンテンツを表示し、JavaScriptや、タッチデバイスでのスライド操作等で表示します。
JavaScriptが使えない環境や、タッチタッチデバイスではない環境への対応が必要です。