グリッドシステム

ねらい

なぜグリッドに乗せると「整って見える」のか。その正体を、グリッドという考え方が何を乗り越えて生まれたかから理解する。カラム・モジュール・ベースラインという三つの層を分けて、丸暗記でなく理由ごと身につける。

なぜ升目に乗せると整うのか

きれいに整って見えるレイアウトには、たいてい目に見えない格子（こうし＝升目状の線）が隠れている。要素の左端・上端・幅が、共通の見えない線にぴたりと揃っている。人の脳は、その一致を「秩序がある」と読む。これは準備編でやったゲシュタルト（近くにあるもの・揃っているものを脳が勝手に「仲間」とまとめる働き）の帰結だ。同じ線に乗ったものを、脳は「関係がある」とひとまとめにする。

逆に「なんとなく散らかって見える」とき、原因はほぼ一つ。要素がどれも共通の線に乗らず、それぞれ宙に浮いている。ほんのわずか（コンマ数パーセント）ずつズレた余白や幅が、無数の小さな不一致になって「落ち着かなさ」を生む。グリッドとは、この「なんとなく」を一気にまとめて消す道具だ。位置を「気分」でなく「何列目か」で決めさせる。

グリッドは三つの層でできている

「グリッド」と一語で呼ぶが、中身は三つの違う格子が重なっている。混ぜて考えると設計できない。三つは横並びではなく、下の層が上の層を支える積み木のような関係として読むとよい。下の段がないと上の段が乗らない。

• カラムグリッド（縦の列） ―― ページ幅を等しい幅の列に割り、列と列のすき間（ガター／溝）で区切る。文章や写真の横幅と、どこから始めるかを、この列の単位で決める。Webでよく聞く「12カラム」はこれ。
• モジュールグリッド（升目） ―― 縦の列だけでは要素の横の位置しか決まらない。写真や図のかたまりの上端や高さまで揃えるには、横方向にも線を引いて、縦×横の二次元の升目（モジュール）にする必要がある。これを体系化したのが Müller-Brockmann だ。
• ベースライングリッド（横の罫） ―― ベースライン＝文字が立つ底の線のこと。本文の行送りを一定にすると、その底の線が等間隔の水平な罫（けい＝横線）になる。これがベースライングリッドだ。複数の列があっても各行の底が同じ罫に乗り、縦方向にリズムが生まれる。

ここで行送りを正しく押さえる。行送りとは「行と行のすき間」のことではない。ある行の文字の底（ベースライン）から、次の行の文字の底までの距離のことだ。すき間ではなく、底から底までの一定の刻み。だからこの刻みを一定にすると、底の線がきれいに等間隔でならぶ ―― それがベースライングリッドだ。（CSSの line-height がこれに近い役目をする。深追いはしない。）

そして、この一定の間隔（＝行送り一つぶん）を「ものさしの1目盛り」として使う。見出しの大きさも、要素どうしの余白も、その目盛りの2倍・3倍…という整数倍で決める。すると本文だけでなくページ全体が同じ刻みでそろい、縦のリズムが一本につながる。

設計の順序は「マージン（外周の余白）→ カラム数とガター → モジュールの行 → ベースライン」。これは暗記する手順ではなく、前が決まらないと次を決められない依存関係だ。

• マージンが最初 ―― 外周の余白を引いて初めて「使える紙面（版面）」の大きさが決まる。版面が決まらなければ、列を何本・どの幅で引けるか決められない。
• カラムとガターが次 ―― 列の骨格が決まって初めて、横の行をどこで割るか（モジュール）を乗せられる。
• ベースラインが最後 ―― 列と升目という面の骨格が決まって初めて、その中を流れる行の刻みを合わせられる。

つまり先に枠と列を決め、中身は後から升目に従わせる。「足してから整える」でなく「枠に従わせる」。これがグリッドの思考の順番だ。

版面を割る、という問いの系譜

ここで言う版面（はんづら）＝外側の余白を除いた、実際に文字や写真を置ける“紙の中身の面積”のこと。グリッドは突然の発明ではない。「版面をどう割るか」という問いは、印刷より前からあった。各時代は、前の時代が抱えていた限界を一つずつ乗り越えてきた。各項の冒頭に、その時代が何への反作用で前を超えたかを太字でひと言だけ立てておく。固有名詞や年号は、その目印として読み流してよい。

①写本・活版（中世〜15世紀）― まだ勘だけで、理論として書き出されていなかった段階。 写本（手で書き写した本）の二段組（1ページを縦2本の列に割って文章を流す組み方）や、グーテンベルクの42行聖書の二段組のように、初期の活版印刷（金属の文字を並べて刷る、グーテンベルクの方式）もすでに「列」と「行送り」の格子の上にあった。ただし、職人の経験と勘によるもので、理論として書き出されてはいなかった。

②版面比例の理論化（〜20世紀半ば）― ここで職人の勘を超えた。 中世写本に隠れていた美しいページ分割は、後に Van de Graaf がマージン比 約1/9・2/9という幾何学のカノン（美しい紙面を図と比で定めた作図のきまり）として定式化し、Jan Tschichold がそれを「調和あるページ」の理論として広めた。「マージン比 約1/9」とは、たとえば紙の横幅を9等分したとき、内側（のど側）の余白を1つ分・外側を2つ分とる、というような“余白の取り方の決まり”のことだ。比そのものは、必ず「何を何等分したうちの何分か」が分かって初めて意味を持つ。

なお、この割り付け法は俗に「Villard de Honnecourt の作図」と呼ばれる。だが正確には二段に分けて読む必要がある。線を等分する幾何の図そのものは、今に残るヴィラールのスケッチ帳（羊皮紙＝動物の皮で作った紙。もとは50葉超で、現存は33枚）にある。しかし、その等分作図を“版面の割り付け”に当てはめた図（俗称 Villard Diagram）は帳面に無い。「ヴィラールが版面の割り付けを考えた」というのは、後の人 ―― 具体的には Tschichold が1953年に、自分の結論の確証としてヴィラールの等分作図を持ち出した ―― が当てはめた話で、本人がそう残した確かな証拠はない。引用元としては慎重に扱うべき例（典拠主義の作法）。Tschichold がこの版面比例（黄金のカノン）を命名・再構成したのは、戦後の1953年だ。

③機能主義の頂点 ―― スイス様式（1950年代）― ここでグリッドは個人の趣味や作家性を超えた。（→ 様式編・III章）。ここでグリッドは思想になる。戦争の時代の、主観的で感情過多な表現への反発から、デザイナーは「芸術家でなく客観的な伝え手」を名乗った。誰が作っても同じように正確に伝わる、中立で再現できるシステム。その骨格がモジュールグリッドだった。Müller-Brockmann の『Grid Systems』がこの方法論の聖典になる。

④プログラムとしての設計（1964）― 固定の升目の硬さを超えた。 Karl Gerstner は『Designing Programmes』で、デザイナーが決めるのは個々のレイアウトではなく、レイアウトを生み出すプログラム（完成した一枚ではなく、どんな中身も受け止める規則）だ ―― という発想を示した。彼の有名な格子は、一つの幅の中に1〜6カラムを同時に成り立たせる**動く格子（mobile grid）**だった。これは半世紀後のCSSグリッドやデザインシステムの考え方を先取りしている。

⑤Web ―― 系譜の継承（2008〜）― 紙の系譜を画面に移し、ついにCSS本体で升目を持った。 960.gs（2008頃。12・16・24カラム版を提供）は「列を割り切れる数で組む」という選択肢を示した。そして Bootstrap（2011。940px・12カラム）がその12カラムを採用して広く普及したことで、12カラムが事実上の共通語として定着した。これらはスイスのカラムグリッドを画面に移したものだ。なぜ12かというと、12は 2・3・4・6 で割り切れ、列の組み合わせが効くから。そして 2017年初め、CSS Grid Layout が主要ブラウザ（Firefox 52・Chrome 57・Safari 10.1）にわずか約一ヶ月のあいだ相次いで載った。それまでは升目を直接引く道具が無く、本来は画像のまわりに文字を回り込ませるための古い指定 float（float）などで“升目のフリ”をしてしのいでいた。CSS Grid はその回避策（回り道）を超えて、Webはついに二次元の升目をCSS本体で手にした。Gerstner の「mobile grid」が、fr 単位や repeat()・minmax() という形でほぼそのまま実装されたと言える。

なぜ今も効くのか

グリッドは「整って見せる飾り」ではなく、判断の数を減らす道具だ。位置を「何列目・何モジュール目」で言えるようになると、(1)一枚の中でズレない、(2)案件をまたいで同じ品質を再現できる、(3)客に「ここは2カラム分」と理屈で説明できる。序論で言った「恣意性を殺す」が、レイアウトで具体化した形がグリッドだと考えてよい。

見分け方・直し方

Webで「整って見えない」とき、まず疑うのはこの二つ ―― 要素がカラムの線に乗っていない（左端がバラバラ）か、縦のリズムが崩れている（ベースラインが揃っていない）か。要素を共通の列・升目に乗せ直すと、たいてい直る。逆に、複数の要素の左端や幅が同じ線で揃っていたら、その背後には必ずグリッドが効いている。

練習・チェック

手元のサイトのスクリーンショットを一枚開く。

1. 複数の要素（見出し・本文・画像など）の左端が同じ縦線に乗っているかを、指でなぞって確かめる。
2. 本文の各行が等間隔の横線に乗っているかを、同じく上から下へなぞって確かめる。
3. 乗っていなければ、それがどちらの層の崩れかを言ってみる ―― 左端がバラバラならカラムグリッド、行の間隔がまちまちならベースライングリッド。

最後に、ズレている要素の正しい位置を「何カラム目・何モジュール目」で言えるか試す。言えるようになれば、その要素はもうグリッドに乗っている。