背景

• SSR / SSG / ISRやキャッシュの技術、より良いディレクトリ構成の検証、各設計のアウトプットも兼ねて個人の技術学習のアウトプットを残す場として、機能する技術ブログを構築する。
• デザインは「KAIZEN | TECH BLOG」というモックとして作成済みで、本ドキュメントはこのモックを実装するための設計をまとめたもの。

目的

• モックで示されたデザイン・機能をNext.js（App Router）+ microCMSで実装する。

機能要件

共通レイアウト

• ヘッダー: ロゴ（MARGIN / 技術ブログ）、ナビゲーション（記事一覧・このブログについて・プロフィール。いずれも内部リンク）、キャッチコピー（つくって、試して、わかったこと。Web開発の学びをここに。）。キャッチコピーはページによらず全ページ共通でヘッダーの一部として常時表示する
• フッター: リンク行（HOME・プライバシーポリシー・免責事項）とコピーライト（© 2026 KAIZEN.）のみのシンプルな構成。紺の全幅帯に白文字で中央寄せ。ロゴとページ先頭へ戻るリンクは持たない（ロゴはヘッダー、ページ先頭へ戻る操作は右下固定のボタンが担う。詳細は04_ui_design.md参照）

トップページ（/）… 記事一覧を兼ねる

旧案にあった「記事一覧ページ（/blogs）」は廃止し、トップページに統合する。トップページの「最新記事セクション」が全記事のページネーション一覧を兼ねるため、別ページへの遷移なしに全件へアクセスできる（詳細は04_ui_design.md参照）。

• ヘッダー直下のパンくず: カテゴリ・月の絞り込み時のみHOME > カテゴリ名またはHOME > YYYY年M月を表示する（絞り込みなし時は非表示）。旧案にあった大見出し「技術と、日々の余白。」は廃止した（詳細は04_ui_design.md参照）
• 最新記事セクション
  • 見出し: 絞り込みなし時は見出しテキストを表示しない。カテゴリ・月で絞り込んだときのみ「◯◯」の記事一覧 / ◯年◯月の記事一覧を表示する
  • カテゴリ絞り込み: 一覧上部のタブは持たず、サイドバーの「カテゴリー」一覧から行う（月の絞り込みと同じ構造）
  • 記事カード一覧（下記「記事カード」参照）。フィルタ・検索後の該当記事を対象に、ページ単位で表示する
  • 件数表示（「◯件中 ◯〜◯件を表示」）
  • 表示件数セレクト（10 / 20 / 30件など。既定10件）
  • ページネーション（前へ・ページ番号・次へ）
• サイドバー
  • 記事検索ボックス
  • 著者情報カード（アバター、名前、肩書き、自己紹介、内部プロフィールページ/profileへのリンク）
  • カテゴリ一覧（「カテゴリー」、カテゴリごとの記事数）
  • アーカイブ（年月ごとの記事数）
  • 一言メッセージ枠（引用的なコピー）

記事カード

• サムネイル（大きな装飾文字＋小さなキャプション文字、記事ごとに配色バリエーション）
• 投稿日、「新着」バッジ（新着記事のみ）
• タイトル（要約文は表示しない。タイトルで内容が伝わるため。要約はmicroCMSに残し、検索結果・SNSカード用の説明文にのみ使う）
• カテゴリタグ（複数可）

記事詳細ページ（/blogs/[id]）