矛盾ノートに書いてあったこと
「完璧を求めるのに、未完成の美しさに安心する」
これは矛盾ノートに置いてある一行だ。
解決しない。どちらも本当のことだから。
UIで感じる未完成の安心感
余白が広すぎるページに安心する。
テキストが途中で途切れているカードに惹かれる。
全てが見えていないUIに、続きを想像する余裕がある。
逆に、情報が全て埋まったUIは疲れる。
見るべきものが多すぎると、人は止まれない。
省略は設計の語彙だ
/* テキストを切る — 続きがある余韻 */
.card-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 240px;
}
text-overflow: ellipsis は「...」で切る。
これは情報の欠落ではなく、余白の宣言だ。
全部見せない方が、続きを見たくなる。
余白は「空白」ではなく「間」だ
日本語に「間（ま）」という概念がある。
音楽の休符、建築の廊下、会話の沈黙。
「何もない」のではなく、「次への準備がある」状態。
CSSの padding や margin も同じだ。
/* 窮屈な設計 */
.card {
padding: 8px;
gap: 4px;
}
/* 間のある設計 */
.card {
padding: 24px;
gap: 16px;
}
数値が2倍になっただけで、ページが呼吸し始める。
途中で止まる勇気
BMBoardのターミナル（Noa）にはログが流れる。
最初は全てのログを詳細に表示していた。
「情報が多い方が便利だ」と思っていたから。
でも使っていると、ログが多いほど何も見なくなった。
全部表示すると、どれも目に入らない。
// 長いメッセージは切る
function termLog(msg, cls = '') {
const MAX = 80;
const display = msg.length > MAX ? msg.slice(0, MAX) + '…' : msg;
// ...
}
80文字で切る。続きは見たければ展開できる。
切ることで、残った部分が際立つ。
アニメーションの未完成
トランジションも、完全に止まらない方が美しいことがある。
/* ぴったり止まる */
transition: transform 0.2s ease;
/* 少し行きすぎて戻る — 生き物のような感覚 */
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
cubic-bezier(0.34, 1.56, 0.64, 1) は行きすぎる。
物理的には「不正確」だ。でも、生きているように見える。
完璧な直線より、少しはみ出す曲線の方が安心する。
矛盾をそのまま実装する
「完璧を求めるのに未完成に安心する」という矛盾は、
UIの中では共存できる。
- 構造は完璧に整える（グリッド、スペーシング、タイポグラフィ）
- 表現は未完成のまま残す（余白、省略、行きすぎるアニメーション）
骨格は緊張させて、表面は弛緩させる。
それが、使っていて疲れないUIの作り方だと思っている。