編集グリッドの再設計 — 12カラムを捨てて7カラムにした理由

Webの多くのデザインシステムは12カラムを採用している。2、3、4、6で割り切れるので、要素を均等に並べやすい。その便利さが、どのサイトも似た見た目になる原因にもなっている。

本誌のリニューアルでは、紙の雑誌で使われてきた奇数カラムのグリッドを試した。

7カラムを試した理由

奇数カラムでは、要素を左右対称に並べにくい。そのぶん、本文を4カラム、余白と注記を3カラムといった非対称な構成が自然に生まれる。写真と本文の関係に緊張感が出るのが利点だった。

実装してみてわかった問題

7カラムは、3列のカード一覧を作るときに割り切れない。一覧ページだけ別のグリッドを使うと、ページ間で余白の幅が揃わなくなる。

最終的な構成

本誌では、CSS Gridで12カラムを定義したうえで、記事ページでは本文を7カラム分、目次と注記を3カラム分に配置した。残りの2カラムは左右の余白として使う。一覧は従来どおり4カラムずつの3列にした。

.article-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); } .article-body { grid-column: 4 / span 7; } 名前付きのグリッド線を使えば、数値ではなく「本文の開始位置」のような名前で配置を指定できる。グリッドの意図をコードに残せるので、後から入った開発者にも伝わりやすい。

グリッドは読む順序のためにある

トレーシングペーパーを重ねて修正を繰り返すうちに、グリッドは見た目を整える道具というより、読者の視線の順序を決める道具だと考えるようになった。どこから読み始め、どこで写真を見て、どこで本文に戻るか。その順序を先に決めてから、カラム数を選ぶほうがよい。