ノートに書いてあったこと
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の輪郭も対象の性質を正直に語るべきだ。
主張するものにはハードエッジを。
消えていくものにはソフトエッジを。
まだここにあるものには、点線を。
コードに書く数値の一つひとつに、観察から来た根拠がある。
それが自分のやり方だ。