観察ノートに書いてあったこと
ある日、窓越しに光が差し込んでいるのを見ていた。
・事実：格子状の線によって生成される、規則的な分割構造
・違和感：右下にかけて薄く影のような滲みがある非対称な領域
・視線：規則の乱れた部分に注意が引きつけられる
12分割のグリッドがあった。
でも右下だけ、光の滲みで均一性が崩れていた。
目はそこへ自動的に向かった。
規則だけでは目が止まらない
完璧なグリッドは美しい。でも、目が流れる。
規則的な構造の中に、ひとつだけ「ずれ」があると、
そこで目が止まる。
視線を制御するのは、整列ではなく逸脱だ。
CSSグリッドでの実装
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* 規則の中の逸脱 — 1つだけ大きい */
.grid-item:first-child {
grid-column: span 2;
}
span 2 はグリッドのルールを破る。
でも、破る要素が1つだけだから、他の規則性が際立つ。
逆に全部が span 2 なら、規則性は消える。
タイポグラフィの逸脱
/* 均一なサイズ — 目が止まらない */
p { font-size: 14px; }
h2 { font-size: 16px; }
h1 { font-size: 18px; }
/* ひとつだけ逸脱する — 目が止まる */
p { font-size: 14px; }
h2 { font-size: 16px; }
h1 { font-size: 40px; } /* 大きく飛ぶ */
フォントサイズのスケールが等間隔なとき、見出しが埋もれる。
ひとつだけ大きく飛ばすと、階層が一瞬で伝わる。
色の逸脱
:root {
--bg: #0c0c0c;
--surface: #141414;
--line: #2a2a2a;
--text: #e8e6e0;
/* すべてニュートラル */
}
/* ひとつだけ色を持つ */
.accent {
color: #5b8def;
}
BMBoardの配色はほぼモノクロだ。
ボタン、ライン、背景、テキスト。全部グレーか黒。
でも、選択中のオブジェクトだけ青になる。
その1色だけが感情を持つ。
他が無彩色だからこそ、青が「今ここにある」と告げる。
逸脱の量を設計する
逸脱は1つか2つでいい。
3つ以上の逸脱は、新しい規則を作り始める。
または、カオスになる。
規則 100% → 退屈
逸脱 10% → 緊張と興味
逸脱 50% → 不安定
逸脱 90% → 混乱
「右下だけ滲んでいた」光のように、
逸脱は少ないからこそ意味を持つ。
グリッドは逸脱のための土台だ
グリッドを作る理由は、整列のためだけではない。
逸脱を意味あるものにするために、
まず規則が必要だ。
規則なき逸脱はただのノイズ。
規則あっての逸脱が、視線を動かす。
自分がUIを設計するとき、
グリッドは最初に引くが最後まで守らない。
守らないために、引く。