Architecture Decision Record
画面サイズ別レイアウトポリシー（モバイルファースト）
2段階ブレイクポイントによるモバイルファースト設計を標準とする。
採用
#design
#ux
#responsive
#tailwind
画面サイズ別レイアウトポリシー（モバイルファースト）
Decision
- モバイルファーストを基本方針とする。ベーススタイルはモバイル向けに書き、
md: 以上で拡張する。
- ブレイクポイントは Tailwind CSS v4 のデフォルト値を使用し、原則 2 段階で運用する。
| ティア | 幅 | Tailwind プレフィックス | 用途 |
|---|
| Mobile | < 768px | （なし＝ベース） | 単カラム・縦積みレイアウト |
| Desktop | >= 768px | md: | 横並び・拡張レイアウト |
sm: / lg: / xl: / 2xl: は必要が生じた場合にのみ例外的に使用する。使用時はコメントで理由を記載する。- コンテンツ幅の上限は
max-w-4xl（896px）を標準とし、全ページで統一する。
- 水平パディングは
px-6（24px）を基準とする。
ナビゲーション
| ティア | 挙動 |
|---|
| Mobile | ハンバーガートグルでナビゲーションを表示/非表示 |
| Desktop | 常時表示の水平ナビゲーション |
タイポグラフィスケール
見出しはモバイルをベースにし、md: で 1 段階拡大する。
| 要素 | Mobile（ベース） | Desktop（md:） |
|---|
| ページタイトル（h1） | text-3xl | md:text-4xl |
| セクション見出し（h2） | text-2xl | md:text-3xl |
| サブ見出し（h3） | text-xl | md:text-2xl |
| リスト見出し | text-lg | md:text-xl |
| 本文 | text-base | 変更なし |
レイアウトパターン
| パターン | Mobile | Desktop |
|---|
| カード一覧 | 1 列スタック | 1 列スタック（max-w-4xl 内で十分） |
| フィルタバー | 縦積み flex-col | 横並び md:flex-row |
| フッター | 縦積み中央揃え | 横並び md:flex-row md:justify-between |
| ヘッダー | 2段構成＋ハンバーガー | 2段構成＋水平ナビ |
Context
本サイトはコンテンツ中心のパーソナルサイト（ブログ・ツールカタログ・ADR・About）であり、レイアウトが複雑になりにくい。現在の実装でも md: のみが使われており、事実上 2 段階運用になっている。この暗黙のルールを明文化し、今後の実装で一貫性を保つ必要があった。
Rationale
- シンプルさの維持: コンテンツ主体のサイトでは 2 段階で十分。ブレイクポイントが増えるとメンテナンスコストが上がる。
- 既存実装との整合性: すでにコードベース全体で
md: のみが使われており、追加の移行作業が不要。
- Tailwind デフォルト踏襲: カスタムブレイクポイントを定義しないことで、ドキュメントとの乖離を防ぐ。
- モバイルファーストの妥当性: Google のモバイルファーストインデックスに対応し、モバイルユーザーの閲覧体験を最優先にする。
Consequences
- 新しいコンポーネントを作る際は、まずモバイル表示で完成させてから
md: で拡張する。
sm: / lg: 等を使う場合はPR内で理由を明示する。max-w-4xl を超えるコンテンツ幅が必要になった場合は、別途ADRで検討する。- タイポグラフィスケールの変更もADRで管理する。
hsb.horse