概要
- webサイト制作におけるレイアウト手法を、改めてまとめる。
- リキッド、フレキシブル、レスポンシブ、、、、用語がごっちゃになるため整理。
- 目標：このサイトは「○○レイアウト」と瞬時に言えるようにしたい。
5種類のレイアウト
1) 固定
1-1) 固定レイアウト（ヤフートップ系）
- 対象を横幅で固定するレイアウト。pxで指定する。
- メリット＋デメリット
- メリット：デザインがそのまま反映できるため、最もかんたん。
- デメリット：あとで大型ディスプレイが出たときに対応できず、窮屈に見えたりする。
- 例：ヤフートップ
2) 可変
- ウィンドウ横幅に合わせて、コンテンツが伸縮するレイアウト。%で指定する。
2-1) リキッドレイアウト（△）
- 横幅を%で指定するレイアウト。（Liquid：液状の、滑らかな、、、）
- すべて%指定の場合と、一部だけ%指定する場合がある。
- メリット＋デメリット
- メリット：画面幅が狭くなっても、コンテンツが画面をはみ出さない。
- デメリット：画面幅がとても狭い・広い場合は、可読性が悪くなる。
2-2) フレキシブルレイアウト（amazon系）
- min-widthとmax-widthを使い、上のリキッドのデメリット（画面幅がとても狭い・広い場合の可読性）に対応。
- すべて%指定の場合と、一部だけ%指定する場合がある。
- メリット＋デメリット
- メリット：リキッドの改良版。画面幅がとても狭い・広いに対応。
- デメリット：古いブラウザ（IE6など）ではmin-width、max-widthに対応しておらず、スクリプトなどで個別に対応する必要性あり。
- 例：amazon
2-3) 可変グリッドレイアウト（pinterest系）
- カード型にグリッド状で配置し、幅が変更されるとカードを再配置するレイアウト。
- メリット＋デメリット
- メリット：ブラウザに合わせて固定の要素を再配置するので、ブロック毎に情報がきちんんと伝えられる。
- デメリット：まずグリッドでデザインした後の制作のため、制作ステップが多くなる。
- 例：pinterest
2-4) レスポンシブレイアウト（マクドナルド系）
- PCやスマホなどのデバイス毎にデザインするのではなく、ディスプレイの幅に応じてデザインを最適化していく手法。CSS3のMedia Queriesを利用する。
- メリット＋デメリット
- メリット：
- 1つのソースで色んなデバイスに対応できるので、メンテナンスがかんたん。
- 今後他のデバイスが増えても、それに簡単に対応できる。
- デメリット：Media Queries、レイアウトや画像の柔軟な対応、コンテンツの表示非表示対応など、ある程度の知識が必要。
- メリット：
- 例：マクドナルド、haptic design
サイトとレイアウト一覧（※間違ってる可能性あり）
・MA：1-1)固定レイアウト
・大阪工業技術専門学校：2-3)可変グリッドレイアウト
・starbucks：2-4) レスポンシブデザイン
・無印良品：2-4) レスポンシブデザイン
見分け方（※間違ってる可能性あり）
- まず、グリッドかフリーか
- グリッドの場合
- if (横幅が固定) → 1-1) 固定レイアウト
- else (可変)
- if (カード状) → 2-3) 可変グリッドレイアウト
- else (カード状じゃない)
- if (ディスプレイ幅を狭くしたときにガラッと配置が変わる) → 2-4) レスポンシブデザイン
- else (配置変わらない)
- if (狭くしたときにある一定のところで縮小が止まる) → 2-2) フレキシブルレイアウト
- else (縮小し続ける) → 2-1) リキッドレイアウト
結論
・最小コスト → 1-1)固定レイアウト（現状の業務・PC）
・多様なデバイス幅に対応させたいなら → 2-2) フレキシブルレイアウト（SPは業務こっちでやってもいい。）
・デバイス横断に対応させたい＆知識など色々あるなら → 2-4)レスポンシブデザイン