UI設計書 | Notion

「KAIZEN | TECH Blog」のモック（トップ／記事一覧、記事詳細）に基づく画面設計。

1. 画面一覧

旧案の「記事一覧（/blogs）」は廃止し、トップページに統合した。トップページの最新記事セクションが、フィルタ・検索・ページネーションを備えた全記事一覧を兼ねる。

画面	パス	概要	モック
トップページ（記事一覧を兼ねる）	`/`	ヘッダー（キャッチコピー行を含む）＋（絞り込み時のみ）パンくず＋最新記事（フィルタ・検索・ページネーション）＋サイドバー	画像①（絞り込みなし）／画像③④（カテゴリ・月絞り込み時のパンくず・見出し切り替え）。ページネーション部は別途共有されたモック画面を参照
記事詳細	`/blogs/[id]`	パンくず＋記事本文＋サイドバー	画像②
このブログについて	`/about`	パンくず＋コンセプト文（新規。本文はmicroCMS管理）	なし（要デザイン）
プロフィール	`/profile`	パンくず＋タイトル＋メイン画像＋本文＋サイドバー	画像⑤（パンくず）／参考画像（別ブログの例。本文構成のみ）
プライバシーポリシー	`/privacy-policy`	パンくず＋タイトル＋本文（新規。フッターからのみ遷移）	なし（`/about`と同じ構成で作る）
免責事項	`/disclaimer`	パンくず＋タイトル＋本文（新規。フッターからのみ遷移）	なし（`/about`と同じ構成で作る）
404	（自動）	存在しないURL・記事IDの場合。見出し＋説明＋HOMEへのリンク（8.6参照）	なし

2. 画面遷移図

                ┌─────────────── ヘッダー（全ページ共通） ───────────────┐
                │ ロゴ → /   記事一覧 → /   このブログについて → /about    │
                │ プロフィール → /profile                                  │
                └────────────────────────────────────────────────────────┘

   [/ トップ（記事一覧を兼ねる）] ──カードクリック──▶ [/blogs/[id] 記事詳細]
       │
       ├─ カテゴリフィルタ／検索／ページネーション操作 ─▶ [/ 絞り込み・ページ切替後の状態（同一ページ内）]
       │
       └─ サイドバー ─ TOPICS / ARCHIVE ──▶ [/ 絞り込み済み（searchParams付き）]
                      └ 著者カード ──▶ [/profile プロフィール]
                      └ SNSアイコン ──▶ 外部SNS ↗（新規タブ）

                ┌─────────────── フッター（全ページ共通） ───────────────┐
                │ HOME → /   プライバシーポリシー → /privacy-policy       │
                │ 免責事項 → /disclaimer                                   │
                └────────────────────────────────────────────────────────┘

   [記事詳細] ─ パンくず HOME ──▶ [/]
   [404] ─ HOMEへ戻る ──▶ [/]

旧案では「もっと見る」ボタンで/から/blogs（全件一覧）へ遷移していたが、/自体がページネーション付きの全件一覧になったため、この遷移は廃止した
トップページをカテゴリ／月で絞り込むと、ヘッダー直下がパンくず（HOME＝/）に切り替わる。このパンくずのHOMEから、絞り込みなしの/へ戻れる（詳細は3.3・5.1参照）。専用URL（/categories/[slug]等）は作らず、引き続き/へのsearchParamsで表現する

3. 共通レイアウト

3.1 グリッド

項目	仕様（目安）
コンテンツ最大幅	約1200px、中央寄せ
2カラム	メイン約876px ／サイドバー約270px ／間隔約68px
ヘッダー高さ	約96px。下端に1pxの罫線
余白	左右のガター（モバイルは16px）

3.2 ヘッダー

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  ← 紺の上端ライン（全ページ共通）
 [m.] MARGIN │ 技術ブログ              記事一覧  このブログについて  プロフィール
                                        ▔▔▔▔▔  ← 現在ページに青い下線（ナビ行の下端）
 ────────────────────────────────────────────────────────────────
 つくって、試して、わかったこと。Web開発の学びをここに。        ← キャッチコピー行
────────────────────────────────────────────────────────────────────

ロゴ: 青い角丸の正方形に白い「m.」＋「MARGIN」（大文字・字間広め・太字）＋縦線＋「技術ブログ」（小さく・グレー）
ナビ: 「記事一覧」「このブログについて」「プロフィール」はすべて内部リンク（/系は「記事一覧」、/about、/profile）。モックの「プロフィール ↗」は外部リンク表記だったが、内部ページ化に伴い↗アイコンは外す
アクティブ表示: 現在のパスに対応する項目を青文字＋ナビ行の下端に太さ2px程度の青いアンダーライン（キャッチコピー行がヘッダー下部にあるため、下線はナビ行の下端に付ける）。/と/blogs/[id]はいずれも「記事一覧」をアクティブとする。現在のパスの判定にはClient ComponentのusePathnameが必要なため、リンク部分のみNavLinkとして切り出し、ヘッダー本体はServer Componentのままにする
ヘッダー最上部に紺色の細いライン（約5px）が付く。モック（トップページ）でも確認できたため、記事詳細だけでなく全ページ共通とする
キャッチコピー行: ロゴ・ナビの行の直下に、つくって、試して、わかったこと。Web開発の学びをここに。を1行で表示する。ページによる出し分けはなく、全ページ共通でヘッダーの一部として常時表示する（旧案では絞り込みなし時のトップページだけに出す案だったが、モックに合わせてヘッダー自体の一部に変更した）
キャッチコピー文言は変更頻度が低いため、shared/lib/constants.tsに定数として持つ（CATCH_COPY）

スマホ・タブレット（〜1023px）の表示: 2段構成