/blog のカレンダーに make-diary 自動生成バッジを追加した

きっかけ: /blog を見ていて目が滑った

/blog のカレンダーを開いて 6月の記事一覧をスクロールしたら、自分が手で書いた記事と /make-diary コマンドが吐き出した日記が同じ見た目で並んでいた。タイトルだけ見て区別がつかず、目当ての手書き記事を探すのに3回ほどクリックを往復した。

「これ make-diary で作ったやつだっけ?」と毎回開いて確認している自分に気づいた瞬間、UIに識別子が出ていないのが原因だと判断した。タグもカテゴリ（開発・個人・日記）もあるが、自動生成かどうかを示すものはどこにも露出していない。

まずスキーマから足すか、と思ったが調べてもらった

最初は is_auto_generated: true みたいなフラグを frontmatter に足して、既存の make-diary 製記事を全部マイグレーションすべきかと考えた。ただ、その前に「今のスキーマで識別できる手がかりが本当に無いのか」を Claude Code に調べさせた。

結果が拍子抜けだった。

• category: "diary" の記事が 195件、全部 make-diary 製
  • 内訳: 統合日記 174本 + 同日のカテゴリ別詳細記事 21本
• 手書きで書いた diary 記事は1本も混ざっていない

つまり識別子はすでにあって、UIに出していないだけだった。スキーマを増やすのは完全に過剰、と分かった。

A案 / B案を並べて、A案を選んだ

選択肢を Claude Code に並べさせた。

A案で十分だと即決した。理由は単純で、「make-diary 製 = category: "diary" 」という対応関係が既に1対1で成立しているため、新フィールドを足しても情報量が増えない。動いている識別を可視化するだけで要件を満たす。

実装はバッジ2箇所だけ

修正したのは2ファイル。

• apps/web/app/components/BlogCalendar.vue: カレンダーセルの記事リンクの隣に make-diary バッジを追加。さらに「開発日記」フィルタチップの右に凡例として小さな make-diary タグを置き、hover すると「make-diary コマンドで自動生成された記事」とツールチップが出る
• apps/web/app/components/ArticleTable.vue: リスト表示でもタイトル横に同じバッジを表示

バッジ表示の判定ロジックは article.category === 'diary' の1行だけ。スキーマも、データ生成スクリプトも、useBlogArticles.ts も触らずに済んだ。CSS で小さくグレーの角丸タグに見えるよう整え、本文タイトルを邪魔しない大きさに抑えた。

dev で確認

pnpm dev を立ち上げて /blog を開いた。6月のカレンダーセルに make-diary バッジが並び、手書きの記事だけバッジが付かずに残った。視線が自然に「バッジ無しの記事」だけに引き寄せられ、手書き記事をスクロールで拾うのが速くなった。ArticleTable 側も同じ見え方になっているのを確認した。

最初に感じた「目が滑る」感覚はバッジ追加後に消えた。手書き記事を探すクリックの往復が無くなった。

学び

• 新フィールドを足す前に、既存スキーマで識別できないか必ず確認する。今回は category: "diary" が既に1対1で対応していたので、フィールド追加は不要だった。データの実態を Claude Code に集計させて初めて分かった
• UI改善は「機能不足」よりも「既にある情報を見せていない」ことが多い。スキーマを増やす前に、「データはあるか / どこに出すか」を順に確認する癖をつける
• 「見づらい」は曖昧な感想で止めず、「目的の記事に辿り着くまでに3回クリックが要る」と動作レベルに落とすと、解決策（バッジで識別できれば0回になる）が即座に出てくる

次にやるなら

• バッジクリックで「自動生成記事だけを抽出」するフィルタ動作を入れる
• 統合日記とカテゴリ別詳細記事をバッジの色で分ける（今は1種類にまとめている）

ただし当面は今のシンプルな見せ方で十分使えているので、追加実装は積み残しにしておく。