#316
UI設計パターン
#316りきっどれいあうと
リキッドレイアウト / フルイドレイアウト (Fluid Layout)
別名・表記:Fluid LayoutLiquid Layout流動レイアウト
UIXHERO Definition
「液体（Fluid）のように幅が変わるレイアウト」。画面幅を変えると、画像やテキストボックスがヌルヌルと伸縮する。
概要
固定幅（px指定）の「フィックスドレイアウト（Fixed Layout）」の対義語。 レスポンシブWebデザイン（RWD）は、「フルイドグリッド（Fluid Grid）」「フルイドイメージ（Fluid Image）」「メディアクエリ（Media Queries）」の3つの技術の組み合わせで定義される。
UXでの活用
- あらゆるデバイスへの対応: 特定のブレークポイントだけでなく、その間の半端なサイズの画面でも崩れずに表示できる。
- 没入感: 画面全体を有効に使うことで、特に画像や映像コンテンツのインパクトを高めることができる。
💡 使いどころ
どのような画面幅でも余白ができすぎたり、はみ出したりしないようにしたい時。レスポンシブデザインの基礎となる技術。
⚠️ 注意点・誤用
画面が広すぎると一行の文字数が長くなりすぎて読みづらくなる（可読性の低下）。最大幅（max-width）を設定して広がりすぎを防ぐ必要がある。
具体例
- 幅を `width: 100%` に設定し、親要素に合わせて常に全幅で表示する。
- カラム幅を `width: 33.33%` にして、画面幅に関係なく常に3列で表示する。
出典・参考文献:
- Ethan Marcotte: Fluid Grids
- MDN Web Docs: Layout guidelines
- Ethan Marcotte: Responsive Web Design