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

2025年の11月、夕方の山を見ていた。

歪なシルエットが夕日に照らされて、グラデーションが稜線の上に乗っていた。
写真を撮って、Obsidianに事実だけを書いた。

・事実：夕方の山に見える夕日のシルエットと光
・形：歪な山のシルエットを照らすグラデーション

感情は書かない。評価もしない。形と位置だけ。
これが自分の観察ノートのルールだ。

抽象化する

次の工程で、観察から概念を一つだけ抽出する。

「光は形の癖を暴き、輪郭を語らせる」

山のシルエットが美しかったのは、光が山の「歪み」を正直に照らしていたからだ。
整っていない形だから輪郭が際立つ。整っていたら何も語らない。

コードへの接続

UIを作るとき、これがそのまま設計の判断になる。

輪郭（border / shadow）は感情を持つ。

/* ハードエッジ — 明確、緊張、主張 */
box-shadow: 0 0 0 1px #000;

/* ソフトエッジ — 曖昧、柔らかさ、距離感 */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);

/* フェードアウトする輪郭 — 儚さ、消えていく感覚 */
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);

この3つは見た目の違いではなく、感情の違いだ。

ハードエッジは「今ここにある」という主張をする。
ソフトエッジは「うっすら存在する」という距離を生む。
フェードする輪郭は「消えかけている」という時間感覚を作る。

夕方の山と同じ構造

あの山が切なかったのは、光が弱まる時間帯に輪郭だけが残っていたからだ。
減衰する光 + 際立つシルエット = 切なさ。

UIでも同じことが起きる。

/* コンテンツが消えていくカード — 儚さの演出 */
.card-fading {
  opacity: 0.6;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
}

.card-fading:hover {
  opacity: 1;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}

ホバーで「戻ってくる」感覚。
減衰と復元の間に、UIが息をしているような時間感覚が生まれる。

Canvasでの応用

自分が作っているBMBoardというキャンバスツールでは、
選択中のオブジェクトに輪郭を表示する。

最初は 1px solid の明確な線にしていた。
でも、あの夕方の山のことを思い出した。

歪な輪郭が際立つのは、背景との緊張関係があるから。

選択枠を「ぼかし」ではなく「点線」にした理由はそこにある。

// BMBoard — 選択枠の描画
function selBox(x, y, w, h) {
  ctx.save();
  ctx.strokeStyle = '#5b8def';
  ctx.lineWidth = 1 / VIEW.scale;
  ctx.setLineDash([4 / VIEW.scale, 3 / VIEW.scale]);
  ctx.strokeRect(x - 0.5, y - 0.5, w + 1, h + 1);
  ctx.setLineDash([]);
  ctx.restore();
}

点線は「今選ばれている」という緊張を作る。
実線より柔らかいが、消えてもいない。

その状態は、夕日が山のシルエットを照らした瞬間に似ている。

観察がコードの根拠になる

ライブラリのドキュメントには「box-shadow はこう書く」と書いてある。
でも「なぜ4pxなのか、なぜこのopacityなのか」は書いていない。

その根拠を、自分は観察ノートから引っ張ってくる。

光が形の癖を暴くなら、UIの輪郭も対象の性質を正直に語るべきだ。
主張するものにはハードエッジを。
消えていくものにはソフトエッジを。
まだここにあるものには、点線を。

コードに書く数値の一つひとつに、観察から来た根拠がある。
それが自分のやり方だ。