矛盾ノートに書いてあったこと

「完璧を求めるのに、未完成の美しさに安心する」

これは矛盾ノートに置いてある一行だ。
解決しない。どちらも本当のことだから。

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の作り方だと思っている。