整って見えるサイトと、そうでないサイトの差はセンスではありません。揃っている数値の数です。要素の左端が揃っている、要素同士の間隔が同じ値の繰り返しになっている、文字サイズの種類が限られている。この3つが揃うだけで、印象は大きく変わります。
逆に、雑然として見えるサイトを分解すると、余白が12px、15px、18px、20pxとばらついていたり、左端が数ピクセルずつずれていたりします。1つずつは気づかない差ですが、積み重なると「素人が作った感じ」として認識されます。
この記事では、グリッドの構成要素を整理し、実務で決める3つの数値、崩してよい場面と崩してはいけない場面、そして自社で点検する方法を扱います。
この記事でわかること
・グリッドを構成する4つの要素
・実務で決めるべき3つの数値
・余白を1つの基準値の倍数にする考え方
・グリッドを崩してよい場面と、いけない場面
・自社サイトを点検する方法
・制作を依頼するときに確認する項目
グリッドを構成する4つの要素
| 要素 | 内容 | 決めること |
|---|---|---|
| カラム | 縦に区切る列 | 何列に分けるか（12列がよく使われる） |
| ガター | カラムとカラムの間隔 | 何pxにするか |
| マージン | 画面の左右に取る余白 | 画面幅ごとに変えるか |
| ベースライン | 縦方向の間隔の基準 | 何pxの倍数で積むか |
4行目が最も効果があり、最も抜けやすい要素です。横方向を揃えているサイトは多いのですが、縦方向の間隔がばらついているサイトは非常に多くあります。見出しと本文の間、段落と段落の間、セクションとセクションの間。これらが基準値の倍数になっているかを確認してください。
横方向より、縦方向の間隔のほうがばらつきやすい。
見出しと本文、段落間、セクション間。この3つの間隔を先に統一する。
実務で決める3つの数値
細かく決めるほど守られなくなります。最初に決めるのは次の3つだけで十分です。
- 基準となる余白の値：8pxなど。すべての余白をこの倍数にする
- 本文の最大幅：広い画面で1行が長くなりすぎないようにする
- 文字サイズの段階：見出し2〜3種類と本文で、合計4〜5種類まで
1つ目が最も効きます。8pxを基準にするなら、余白は8、16、24、32、48、64のいずれかしか使わない。これだけで縦のリズムが揃い、整った印象になります。中途半端な値（13px、22px）が混ざると崩れます。
3つ目については、種類を増やすと情報の優先順位が伝わらなくなります。文字サイズの差で階層を示すのがグリッドの役割の1つなので、段階が多いと差が読み取れません。
余白の使い方でグループが決まる
余白は「空けるほど整う」ものではありません。近いものは近く、遠いものは遠く配置することで、何と何が関係しているかが伝わります。
| 関係 | 余白 | 例 |
|---|---|---|
| 見出しと、それに属する本文 | 狭く | 見出しの下は狭く、上は広く |
| 同じグループ内の項目 | 中くらい | サービス一覧の各項目の間 |
| 別のグループ | 広く | セクションとセクションの間 |
| ラベルと入力欄 | 狭く | どのラベルの欄か分かるように |
1行目は特に効果が大きい原則です。見出しの上下を同じ余白にすると、その見出しがどちらの文章に属するのか分かりにくくなります。上を広く、下を狭くしてください。余白そのものの考え方はWebデザインにおける余白の効果で詳しく扱っています。
崩してよい場面と、いけない場面
| 場面 | 崩す | 理由 |
|---|---|---|
| ファーストビューの主要な画像 | 崩してよい | 注目を集めるため、あえて幅いっぱいに置く |
| 強調したい1つの要素 | 崩してよい | 規則の中の例外が目立つ |
| 本文の領域 | 崩さない | 読みやすさが最優先 |
| 一覧・グリッド状の表示 | 崩さない | 比較のしやすさが失われる |
| フォーム | 崩さない | 入力の迷いにつながる |
| ナビゲーション | 崩さない | 位置の予測ができなくなる |
崩してよいのは意図があり、かつ1ページに1〜2か所までです。例外が増えると規則そのものが失われ、単に揃っていないサイトになります。
視線の流れを踏まえた配置についてはFの法則・Zの法則とは？視線誘導を意識したレイアウト設計を参照してください。グリッドは配置の枠組み、視線の法則は並べる順序の話です。
自社サイトを点検する方法
- スクリーンショットを撮る：主要ページを1枚ずつ
- 直線を引いてみる：要素の左端が揃っているか、画像編集ソフトや紙で確認する
- 余白を測る：見出しの上下、段落間、セクション間の値を書き出す
- 文字サイズの種類を数える：5種類を超えていないか
- ずれている箇所を一覧にする：修正の優先順位をつける
2番目は紙に印刷して定規を当てるだけでも分かります。数ピクセルのずれは画面上では気づきにくく、印刷すると見えることがあります。
3番目で書き出した値がばらついているなら、基準値を決めて統一するだけで印象が変わります。この作業は既存サイトでも実施できます。
点検はスクリーンショットに直線を引くだけでできる。
余白の値を書き出して、種類が5つを超えていたら統一の余地がある。
制作を依頼するときに確認する項目
- 余白の基準値：何pxの倍数で構成するか
- 文字サイズの一覧：何種類使うか
- 本文の最大幅：広い画面での上限
- 更新時のルール：自社で追記したときに崩れないか
- 規定の受け渡し：上記を文書で受け取れるか
5番目を必ず確認してください。規定が文書になっていないと、次に制作物を追加するときに再現できません。バナー、資料、別ページを別の担当者が作ると、そこから崩れ始めます。文書化の範囲はデザインシステムとは？導入するメリットと作り方の基本で扱っています。
他の要素との順序
デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。
よくある失敗
余白を感覚で決める
値がばらつき、雑然とした印象になります。基準値を1つ決めて、その倍数だけを使ってください。
文字サイズの種類を増やす
階層が伝わらなくなります。見出し2〜3種類と本文で足ります。
見出しの上下を同じ余白にする
どちらの文章に属する見出しか分かりにくくなります。上を広く、下を狭くしてください。
例外を増やす
規則が失われ、単に揃っていないサイトになります。崩すのは1ページに1〜2か所までです。
規定を文書化しない
次に制作物を追加するときに再現できません。基準値と文字サイズの一覧だけでも文書に残してください。
よくある質問
カラム数は何列にすべきですか
12列が広く使われるのは、2、3、4、6で割り切れて分割の自由度が高いためです。ただし列数そのものより、決めた列に沿って配置されているかのほうが印象を左右します。
基準となる余白は何pxがよいですか
8pxが使われることが多いのは、倍数が扱いやすいためです。4pxでも構いません。重要なのは値そのものではなく、1つに決めて守ることです。
既存サイトを直す場合、どこから手をつけますか
縦方向の余白からです。見出しと本文、段落間、セクション間の3か所を統一するだけで印象が変わります。横方向のずれは後からで構いません。
スマートフォンでもグリッドは必要ですか
必要です。1カラムになっても、左右のマージンと縦の間隔は揃える対象です。むしろ画面が狭いぶん、余白のばらつきが目立ちます。
ワイヤーフレームの段階で決めるべきですか
余白の基準値と本文の最大幅は、ワイヤーフレームの段階で決めておくと後の手戻りが減ります。構成の作り方はワイヤーフレームとは？作る目的と作成時に押さえるべきポイントを参照してください。
まとめ
整って見えるサイトと雑然としたサイトの差は、センスではなく揃っている数値の数です。要素の左端が揃っている、余白が同じ値の倍数になっている、文字サイズの種類が限られている。この3つで印象は大きく変わります。
実務で最初に決めるのは3つだけで足ります。基準となる余白の値、本文の最大幅、文字サイズの段階です。特に余白の基準値が効きます。8pxを基準にするなら8、16、24、32、48、64しか使わない。これだけで縦のリズムが揃います。
そして横方向より、縦方向の間隔のほうがばらつきやすいことを覚えておいてください。見出しと本文の間、段落と段落の間、セクションとセクションの間。既存サイトを直す場合も、まずこの3か所の統一から始めると効果が出ます。点検はスクリーンショットに直線を引き、余白の値を書き出すだけで実施できます。
当社ではデザイン制作において、規定の整備を含めたご相談を承っています。自社サイトの点検を進めたい場合は、資料をダウンロードのうえご活用ください。
