「今月なん本書いた？」をホームに出したら、書く動機が変わった — 月別投稿バッジをAgentと実装

ブログを2週間続けた頃、ふと「今月って何本書いたんだっけ？」と思った。管理画面を開いて数えればわかるけど、毎回それをやる気にはならない。

「ホームに出しておけば、数えなくても一目でわかるのに」——その一言を Agent に伝えたら、サイドバーにバッジが並ぶコンポーネントが30分で完成した。

BEFORE — 投稿数が見えないホーム画面

改善前のホーム画面には、KPI サマリー・最新記事・カテゴリ一覧があった。「どんな記事があるか」はわかるけれど、「いつ、どれくらい書いたか」は見えない。

月ごとのペースを把握するには管理画面に入る必要がある。書き続けるモチベーションに直結する「積み上げ」の可視化が抜けていた。

AFTER — バッジで月別の積み上げが見える

改善後は、ホーム画面に「2月 12本」「1月 8本」のようなバッジが並ぶ。サイドバー（デスクトップ）またはKPIセクション直下（モバイル）に表示され、ページを開いた瞬間にペースが把握できる。

データは既存の useClientPublicPosts() で取得済みの記事一覧を useMemo で月別に集計しているだけなので、追加の API 呼び出しは発生しない。

Agent との協働プロセス

実装は以下の4ステップで進めた。

1. コンポーネント設計 — Agent に「月別の投稿数をホームに表示したい。サイドバーにコンパクトなバッジで」と伝えた。MonthlySummaryBadges コンポーネントが提案され、surface editorial-border rounded-3xl p-5 のラッパーで既存のサイドバーカードと見た目を統一した
2. 月別集計ロジック — useMemo で posts を月ごとに Map で集計し、降順ソートで直近6か月分を表示する。既に全件取得済みのデータを使うため、追加クエリは不要
3. レスポンシブ配置 — デスクトップ（lg: 以上）ではサイドバーの「プロフィール」と「お問い合わせ」の間に hidden lg:block で表示。モバイルでは KPI セクション直下に lg:hidden で表示。同じコンポーネントを2か所に配置して、ブレークポイントで切り替える dual-instance パターン を採用した
4. テーマ対応 — バッジの枠線に var(--line)、アクセント文字に var(--accent) を使い、Light / Warm / Night どのテーマでも見た目が崩れないようにした

npm run build 成功、ローカルで3テーマすべての表示を確認して完了。

困った具体例

特に1番目の dual-instance パターンは、最初は「同じものを2回書くのはムダでは？」と思った。しかし Agent の説明を聞いて納得した。同じデータ・同じコンポーネントなので実装の重複は最小限で、レスポンシブの確実性が上がる。実際にこのパターンは、後から追加した SemanticSearch コンポーネントでもそのまま再利用できた。

結果

• 実装時間: Agent との協働で約30分
• 追加コンポーネント: MonthlySummaryBadges（約15行）
• 追加 API 呼び出し: なし（既存データを useMemo で集計）
• テーマ対応: CSS 変数のみ使用、ハードコード色なし
• レスポンシブ: dual-instance パターンで全画面幅に対応

小さな変更だが、ホームを開くたびに「今月もう○本書いた」と見えるのは、地味に効く。数字は行動のフィードバックになる。

次の1歩

• 月をクリックしたら、その月の記事一覧にフィルタされるリンクを追加する
• カテゴリ別の内訳をツールチップで表示する（集計データは既に取得済み）
• 連続投稿日数や週間ペースなど、別の「積み上げ指標」をバッジに追加する

まずは「見える化」ができた。ここから先は「見える → 動ける」の導線を強くしていきたい。