ノートに書いてあったこと
概念ノートに一行だけ書いてある。
「緊張は境界の厚み」
説明はない。理由もない。
浮かんだ瞬間に書いて、そのままにしてある。
展開する
境界が薄いとき、内と外は曖昧に溶け合う。
境界が厚いとき、内と外は明確に分断される。
緊張は、その分断の感覚から生まれる。
自然の中では稜線がそれだ。
山と空の境界が鋭いとき、景色は緊張を持つ。
霧の中で稜線が消えるとき、景色は柔らかく弛緩する。
UIに置き換える
border-radius は単なる角丸の設定ではない。
境界の硬さを決める値だ。
/* 境界が鋭い — 緊張、主張、決定 */
border-radius: 0;
/* 境界が少し丸い — 親しみ、中立、汎用 */
border-radius: 4px;
/* 境界が大きく丸い — 柔らかさ、カジュアル、包容 */
border-radius: 16px;
/* 完全な円 — 緊張ゼロ、浮遊感、アイコン的 */
border-radius: 50%;
border-radius: 0 のボタンは押しにくい。
でも、押したとき「決定した」感がある。
border-radius: 50% のボタンは押しやすい。
でも、押しても「何かが始まった」感が薄い。
緊張と親しみは、数値で設計できる。
境界の厚みとは何か
border-radius だけではない。
/* 境界の存在を主張する */
border: 1px solid #000;
outline: 2px solid #5b8def;
/* 境界を溶かす */
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
/* 境界を消す */
border: none;
background: transparent;
実線と透明の間に、UIの性格の全てが入っている。
実装での判断
BMBoardで各パネルやボタンを設計するとき、
最初に決めるのは「このUIに緊張感が必要か」だ。
操作系のボタン（描画ツール、書き出し）は角が立つ方がいい。
「今から何かをする」という緊張が必要だからだ。
/* ツールボタン — 緊張あり */
.tool-btn {
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
通知やログは角が丸い方がいい。
「情報が流れている」という柔らかさが必要だからだ。
/* ログ表示 — 緊張なし */
.log-entry {
border-radius: 8px;
border: none;
background: rgba(255, 255, 255, 0.04);
}
緊張を設計する
border-radius: 4px と border-radius: 6px の差を
「なんとなく」で決めている人は多いと思う。
でも、それは緊張の量を無意識に調整している。
概念ノートに書いた一行は、そのことを思い出させてくれる。
緊張は境界の厚み。
境界を鋭くするか、溶かすか。
それがUIに性格を与える。