レスポンシブデザインとアクセシビリティ

---

レスポンシブデザイン

ブレークポイントの参考値

ブレークポイント	範囲	レイアウトアプローチ
モバイル	0〜767px	シングルカラム、大きなタッチターゲット
タブレット	768〜1023px	ツーカラム、フレキシブルグリッド
デスクトップ	1024px以上	マルチカラム、ホバー状態、密度の高いレイアウト

---

モバイルの考慮事項

タッチターゲット、シングルカラムレイアウト、親指に優しい配置は小さな画面で重要だ。

このカードグリッドのモバイル版（0〜767px）をデザインする:
- シングルカラムレイアウト、フル幅のカード
- タッチターゲットの最小高さ 44px
- すべての要素に 16px の水平パディング
- ナビゲーションはボトムタブバーに折りたたむ
- iOSでのズームを防ぐためにテキストサイズ最小 16px

---

タブレットの考慮事項

タブレットはモバイルとデスクトップの中間に位置する。両方の向きに適応できるフレキシブルな2カラムレイアウトを使用する。

タブレット版（768〜1023px）をデザインする:
- 16px ギャップの2カラムカードグリッド
- ナビゲーションはサイドレール（デフォルトは折りたたみ、アイコンのみ）
- タッチターゲットは引き続き最小 44px
- コンテンツ幅は 720px でキャップし、中央寄せ
- レスポンシブ画像はコンテナ幅に合わせてスケール

---

デスクトップの考慮事項

デスクトップではホバー状態、密度の高い情報、キーボードナビゲーションのサポートが可能だ。

デスクトップ版（1024px以上）をデザインする:
- 24px ギャップの3カラムカードグリッド
- 固定サイドバーナビゲーション（幅 240px）
- すべてのインタラクティブ要素にホバー状態
- Tab ナビゲーション時にキーボードフォーカスリングを表示
- アイコンのみのボタンにはホバー時にツールチップ
- コンテンツエリアの最大幅 1280px、中央寄せ

---

レスポンシブプロンプトテンプレート

完全なカバレッジのために、1つのプロンプトに3つすべてのブレークポイントを含める。

ブログ一覧ページのレスポンシブカードグリッドを作成する:

モバイル（0〜767px）: シングルカラム、フル幅カード、44px タッチターゲット、
16px 水平パディング、画像・タイトル・抜粋の縦積みレイアウト。

タブレット（768〜1023px）: 2カラムグリッド、カード間 16px ギャップ、
各カード内で画像は左・テキストは右。

デスクトップ（1024px以上）: 3カラムグリッド、24px ギャップ、ホバー時のシャドウ効果
（ミディアムからラージへ、200ms トランジション）、キーボードナビゲーション時のフォーカスリング。

Tailwind CSS を使用: grid-cols-1 md:grid-cols-2 lg:grid-cols-3

---

アクセシビリティ

WCAGコントラスト要件

WCAG（ウェブコンテンツアクセシビリティガイドライン）は、視力の弱いユーザーがテキストを読めるよう、最低限のコントラスト比を定義している。

レベル	コントラスト比	対象
AA（最低限）	4.5:1	通常テキスト（18px未満または14px未満の太字）
AA（大きいテキスト）	3:1	大きいテキスト（18px以上または14px以上の太字）
AAA（強化）	7:1	通常テキスト、最高レベルのアクセシビリティ

全体的に WCAG AA 準拠を確保する:
- 白背景のボディテキスト（#1F2937）— コントラスト比 16:1 ✅
- 白背景のセカンダリテキスト（#6B7280）— コントラスト比 4.6:1 ✅
- 白テキストのプライマリボタン（#2563EB）— コントラスト比 5.9:1 ✅
- 4.5:1 を下回る組み合わせがあれば警告する

---

アクセシビリティチェックリスト

色とコントラスト

• 通常テキストのコントラスト比 4.5:1 を維持する
• 大きいテキスト（18px以上）のコントラスト比 3:1 を維持する
• 情報伝達に色だけに頼らない — アイコンやラベルも追加する

色だけに頼らずフォームのエラー状態をデザインする:
- 無効な入力フィールドの周囲に赤いボーダー（#DC2626）
- エラーメッセージの左に警告アイコン（⚠）
- フィールド下に説明的なエラーテキスト（「メールアドレスに@が必要です」）
- 入力要素に aria-invalid="true"

---

インタラクティブ要素

• キーボードナビゲーション時にフォーカスリングを表示する
• タッチターゲットは最低 44×44px
• セマンティックなHTML要素を使用する（divではなくbutton）

すべてのインタラクティブ要素がアクセシビリティ基準を満たすようにする:
- フォーカスリング: 2px solid #3B82F6、2px オフセット、すべてのフォーカス可能な要素で表示
- ボタンの最低高さ: 44px
- アイコンのみのボタンには aria-label を含める
- フォーム入力には関連するlabel要素（プレースホルダーテキストだけではなく）

---

セマンティックな色の使い方

色は、他の方法（テキスト、アイコン、形状）でも伝えられる意味を補強するために使用する。これにより、色覚障害のあるユーザーもインターフェースを理解できる。

状態	色	併用するもの
エラー	赤	エラーアイコン＋説明メッセージ
成功	緑	チェックマークアイコン＋確認テキスト
警告	黄	警告アイコン＋説明テキスト
無効	グレー	透明度50%＋cursor: not-allowed

色だけに頼らない状態インジケーターをデザインする:
成功: 緑（#10B981）ボーダー ＋ ✓ チェックマークアイコン ＋ 「保存しました」テキスト
エラー: 赤（#EF4444）ボーダー ＋ ⚠ アイコン ＋ 具体的なエラーメッセージ
警告: 黄（#F59E0B）ボーダー ＋ ! アイコン ＋ 警告の説明
無効: gray-300 背景 ＋ 透明度40% ＋ not-allowed カーソル

---

レスポンシブとアクセシビリティを組み合わせたプロンプト

両方の要件を1つのプロンプトにまとめる:

WCAG AA 準拠のレスポンシブお問い合わせフォームをデザインする:

レイアウト:
- モバイル: シングルカラム、フル幅入力フィールド、入力高さ 44px
- デスクトップ: 名前＋メールフィールドは2カラム、メッセージフィールドはシングルカラム

アクセシビリティ:
- 各入力フィールドには上部に可視ラベル（プレースホルダーだけではなく）
- エラー状態は赤いボーダー＋アイコン＋テキストメッセージ（色だけに頼らない）
- フォーカスリング: すべてのインタラクティブ要素に 2px solid #3B82F6
- 送信ボタン: 高さ 44px、十分なカラーコントラスト（#2563EB上の白テキスト、比率 5.9:1）

色:
- ラベルテキスト: #374151（gray-700）、白背景でコントラスト 10:1 ✅
- 入力ボーダー: 通常時 #D1D5DB、フォーカス時 #3B82F6
- エラー: #DC2626 ボーダー、#DC2626 アイコンとメッセージテキスト、⚠ アイコン含む

---

ブレークポイント戦略まとめ

モバイル（0〜640px）: シングルカラム、大きなタッチターゲット（44px以上）、シンプルなナビゲーション、テキスト最小 16px

タブレット（641〜1024px）: 2カラムレイアウト、中程度のタッチターゲット、アダプティブナビゲーション

デスクトップ（1025px以上）: マルチカラムレイアウト、ホバー状態、詳細なインタラクション、キーボードナビゲーション

---

このページの外部仕様・背景情報は、参考文献を参照してください。[1][2]

参考文献

1. W3C Web Accessibility Initiative, WCAG 2 Overview
2. MDN Web Docs, Learn web development