移行中の知識
ガター
Gutter
定義
ガター（gutter）とは、grid内で隣接するcolumnやrow、moduleの間に設ける反復した間隔です。外周のmarginや、content内部の一般的なpaddingとは位置と役割が異なります。print、graphic、Webで実装方法は違っても、grid anatomy上の「内部の間隔」という名前として使われます。responsive layoutではcolumn数やcard幅が変わるため、gutterも固定値そのものではなく、隣接contentを区別しつつ利用可能幅を圧迫しない関係として見ます。
関連
対比すると分かりやすい概念
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
magazine spread
multi-column editorial
見るポイント
column widthだけでなくcolumn間の空間をgutterとして見て、本文やimageが隣のcolumnとどの距離関係を持つかを確認する。
responsive web layout
スマホとPCでcard gridの間隔を調整する
見るポイント
PCの3〜4列ではcard間の分離と全体のリズムが分かるgutterを保ち、狭幅で1〜2列へ変わる時はcardの最小幅やouter marginを圧迫していないかを見る。desktop値をそのまま残すことも、viewport比率で機械的に縮小することも前提にしない。
注意
誤解しやすい点
- gutter、margin、padding、gapを文脈に関係なく完全な同義語として扱う。
- gutterを常に固定pxの値として扱い、formatやbreakpointとの関係を見ない。
- mobileでは狭いからgutterを限界まで削ればよい、PCでは広いから比例して増やせばよいと考える。
- 空いている場所をすべてgutterと呼ぶ。
関連
関連する概念
出典