グリッド

定義

グリッドは、画面という空きスペースをあらかじめ均等なマス目に区切っておき、そのマスに合わせて 要素を並べていく配置の枠組みです。いちばん大事な値は、いくつの列（columns）に分けるかと、 マスとマスのあいだの間隔（gap）をどれくらいにするかの2つです。実際に線を引くわけではありませんが、 すべての要素が同じマスのルールに従うので、画面全体に目に見えない秩序が生まれます。方眼紙の上に 絵を描くのに似ていて、いちど枠を決めておけば「どこに置こうか」と毎回悩む必要がなくなり、画面どうしの 一貫性も自然に保たれます。

なぜ重要か

グリッドがないと、要素の位置を毎回カンで決めることになり、ページが増えるほど少しずつズレて まとまりが崩れていきます。共通のマスのルールを決めておけば、見出し・本文・画像・ボタンが同じ列の ラインを共有するので、別々の画面でも同じ製品から生まれたように感じられます。グリッドは レスポンシブ設計の骨格でもあります。画面が狭くなったときに列の数を減らすルールさえ決めておけば、 要素が自然に下へ再配置され、モバイルでも崩れないレイアウトが手に入ります。Webで12列グリッドが 事実上の標準のように使われるのも、この点に理由があります。12は2・3・4・6できれいに割り切れるので、 2段・3段・4段の配置を1つの枠の中ですべてこなせるのです。最初は12列が多すぎるように見えるかも しれませんが、慣れてしまえばほとんどの画面をこの1つの枠で説明でき、かえって判断がシンプルになります。

よくある間違い

• グリッドを決めておきながら、一部の要素だけマスを無視して好きな位置に置いてしまうことです。 1つがルールを外れた瞬間に、見えなかったグリッドが急に目立ちはじめ、せっかく作った秩序が かえってちぐはぐに見えてしまいます。
• マスとマスの間隔（gap）を要素ごとにバラバラに与えてしまうことです。gapが一定でないと、 同じグリッドの上にあってもマスの大きさが違って見え、整列がズレたような印象を与えます。
• デスクトップの列数をそのままモバイルに押し込んでしまうことです。狭い画面で列を減らさないと、 それぞれのマスが窮屈になりすぎて、内容がつぶれて読みにくくなります。

実務のヒント

• まずは列数とgapという2つの値を決め、個々の要素については「その中で何マス分を占めるか」だけを 決めましょう。位置を毎回ゼロから考えなくてよくなり、作業スピードが大きく上がります。
• レスポンシブとは「何列から何列へ減らすか」をあらかじめ決めておく作業です。たとえば広い画面の 3列をモバイルで1列に折りたたむルールが1つあれば、たいていのリストはきれいに再配置されます。
• グリッドは整列や余白と一心同体で動きます。マスが要素の基準線を作り、マスの間隔が余白の スケールとぴったり噛み合ったとき、画面はいちばん整って見えます。

関連概念