フロントエンド
==============

ページ責務
----------

.. list-table::
   :header-rows: 1
   :widths: 22 34 44

   * - ルート
     - 主なファイル
     - 責務
   * - ``/``
     - ``src/app/(main)/(home)/page.tsx``
     - Hero、最新記事、Newsletter CTA を含むホーム。
   * - ``/posts``
     - ``src/app/(main)/(home)/posts/page.tsx``
     - 公開済み記事のページ付き一覧。
   * - ``/posts/[slug]``
     - ``src/app/(main)/(home)/posts/[slug]/page.tsx``
     - 記事詳細、リッチテキスト、メタデータ、共有、コメント。
   * - ``/tags``
     - ``src/app/(main)/(home)/tags/page.tsx``
     - タグ一覧と記事数。
   * - ``/tags/[tag]``
     - ``src/app/(main)/(home)/tags/[...slug]/page.tsx``
     - タグで絞り込んだ記事一覧。
   * - ``/login``
     - ``src/app/(main)/(auth)/login/page.tsx``
     - OAuth ログイン入口。

UI 原則
-------

* 読みやすさを優先し、タイポグラフィ、行幅、コントラストを調整する。
* 記事、タグ、検索、テーマ切替、アカウント操作にすぐアクセスできるようにする。
* 点線ボーダー、角マーカー、控えめなモーションという既存の視覚言語を保つ。
* モバイルとデスクトップで同じ情報階層を維持する。

コンポーネント規約
------------------

新しいコンポーネントを作る前に ``src/components/ui`` と既存ページの実装を確認します。共通コンポーネントは正規化された props を受け取り、データ取得は Server Component または ``src/lib`` helper に置きます。アイコンのみのボタンには必ずアクセシブルな名前を付けます。

アクセシビリティ
----------------

カスタム操作にはキーボードフォーカスを残します。アイコンボタンやリンクには読み上げ可能な名前を付けます。ライトテーマとダークテーマの両方で十分なコントラストを保ち、フォームは空・読み込み・成功・エラー状態を扱います。