グリッドレイアウト

解説

グリッドレイアウトは、画面や紙面を列（カラム）と余白（ガター）で区切った見えない格子を基準にして、要素の位置と幅をそろえて配置する手法です。列の幅と余白をあらかじめ決めておくため、ページや項目が増えても見た目が崩れにくくなります。さらに、要素がそろっていること自体が、読み手にとって次にどこを見ればよいかの手がかりになります。なお、Web制作では、グリッドを実装するためのCSSの仕様「CSS Grid Layout」を指して、この語を使う場合もあります。

仕組み

グリッドは、主に次の3つの要素で構成されます。

• 列（カラム）：コンテンツや部品を配置する縦の区画
• ガター：列と列の間の余白
• マージン：画面の左右の端に設ける、コンテンツを置かない余白

グリッドレイアウトでは、パソコン画面で12列などの基準を決めたうえで、画面幅が狭くなるにつれて列数を減らして折り返す設計が一般的です。たとえば、記事カードの一覧を、タブレットでは2列、スマートフォンでは1列に切り替えます。

実務での使われ方

ヘルプセンターでは、グリッドレイアウトが記事カードの並びに使われます。FAQやヘルプ記事の一覧は、同じ形のカードを等間隔に置く形が多く、グリッドはその土台になります。カードの高さや画像の比率をそろえておけば、記事の本数が増えても一覧の印象は変わりません。また、問い合わせフォームでも、氏名と電話番号を横に並べるか縦に積むかを、画面幅に応じて切り替えます。

注意点

グリッドの形をそろえても、中身の量がばらつくと一覧は崩れて見えます。たとえば、1件だけ説明文の長いカードが混ざると、列の高さがそろわず、その行だけ間延びして見えます。

また、フォームの入力欄の幅は、その項目にどれくらい書けばよいかの目安にもなります。そのため、郵便番号の欄までグリッドの全幅に広げると、かえって利用者を迷わせる結果になりかねません。