blob: a85ae2256ed8ad3641b45bc69d7de64d2e8b77d3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
フロントエンド
==============
ページ責務
----------
.. 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 に置きます。アイコンのみのボタンには必ずアクセシブルな名前を付けます。
アクセシビリティ
----------------
カスタム操作にはキーボードフォーカスを残します。アイコンボタンやリンクには読み上げ可能な名前を付けます。ライトテーマとダークテーマの両方で十分なコントラストを保ち、フォームは空・読み込み・成功・エラー状態を扱います。
|
