グリッドレイアウト

解説

グリッドレイアウトは、紙面や画面を見えない格子で区切り、その線に揃えて要素を並べる手法です。列の幅と余白をあらかじめ決めておくため、ページや項目が増えても見た目が崩れにくくなります。揃っていること自体が、読み手にとって次にどこを見ればよいかの手がかりになります。

ヘルプセンターでは記事カードの並びに使われる

FAQやヘルプ記事の一覧は、同じ形のカードを等間隔に置く形が多く、グリッドはその土台になります。カードの高さや画像の比率をそろえておけば、記事の本数が増えても一覧の印象は変わりません。逆に、1件だけ説明文の長いカードが混ざると列の高さが崩れ、その行だけ間延びして見えます。

画面幅に応じて列数を切り替える

12列などの基準を決めたうえで、スマートフォンでは1列、タブレットでは2列というように折り返す設計が一般的です。問い合わせフォームでも、氏名と電話番号を横並びにするか縦に積むかを画面幅で切り替えます。入力欄の幅は、その項目にどれくらい書けばよいかの目安にもなります。郵便番号の欄まで全幅に広げると、かえって入力を迷わせる結果になりかねません。