レスポンシブ＆アクセシビリティ は何をしますか？
緊急関連ページは、どんなデバイスでも、どんな状況下でも、誰にでも使えなければなりません。わかりやすさは、技巧に勝ります。
ブレークポイント
Tailwind デフォルト: sm 640、md 768、lg 1024、xl 1280、2xl 1536。モバイルファーストで設計し、各範囲で意図的に設定。
- 320–639: シングルカラム、フラットなスマートフォン表示、水平スクロールスナップギャラリー、全幅の積み重ねCTA、開示パネル内のメニュー。
- 640–1023: コンテンツが許せば2カラムグリッド。3D傾斜や固定表示はなし。
- ≥ 1024: 非対称12カラムレイアウト、2.5Dスマートフォン表示、ポインター傾斜、オプションで固定表示のストーリーテリング。
テスト幅: 320、375、414、768、1024、1280、1440、1920。どの幅でもページの水平スクロールは禁止（スマートフォンの横向きや大きすぎるテキストに注意。
bodyではなくセクションにoverflow-x: clipを使用）。
ランドマークと構造
<a href="#main" class="skip-link">メインコンテンツへスキップ</a>を最初のフォーカス可能要素とする。<header>（ナビ）、<main id="main">、各セクションは<section aria-labelledby="…-heading">、<footer>。h1は厳密に1つ（ヒーローの見出し）。各セクションはh2で開始。サブ項目はh3。レベルを飛ばさない。- セクションの
idはナビゲーションアンカーと一致:about、features（カテゴリ＋ショーケース）、how-it-works、register、faq。 - アンカーターゲットは固定ナビゲーションの分だけオフセット:
scroll-margin-top: var(--nav-h)。
ナビゲーション
- デスクトップ: インラインリンク＋情報提供型CTA（例：「機能を探す」）— ダウンロード/インストールCTAはなし。CLAUDE.md「Scope: showcase, not install funnel」を参照。
- モバイル:
<button aria-expanded aria-controls="mobile-menu">でパネルを開閉。開いたら最初のリンクにフォーカス。Escキーで閉じてボタンにフォーカスを戻す。リンクをクリックするとメニューが閉じる。ボディのスクロールロックはオプションだが、確実に解除すること。ハンバーガーボタンにはアクセシブル名「メニューを開く」/「メニューを閉じる」を設定。 - 現在のセクション表示（オプション）は
aria-current="true"を使用し、色だけで判断させない。
キーボードとフォーカス
- インタラクティブ要素はすべて、視覚的な順序でTabキーで到達可能。正の
tabindexは禁止。 - すべてのコントロールに可視フォーカスリング:
outline: 2px solid var(--color-accent); outline-offset: 3px;— 暗い背景と明るい背景の両方に対して3:1以上のコントラストを確保（赤いボタンでは明るいリングを使用）。 - 水平ギャラリー: コンテナに
tabindex="0"、role="region"＋aria-labelを設定し、矢印キーでネイティブスクロール。 - 無効/利用不可のコントロール（例：欠落している連絡先/法的リンク）: 説明テキスト付きで
<span aria-disabled="true">または<button disabled>としてレンダリング。フォーカス可能な偽のリンクにしてはならない。
FAQ アコーディオン
- ネイティブの
<details><summary>を優先。またはbutton[aria-expanded][aria-controls]＋ region を使用。サマリーテキストはh3相当の中にプレーンテキストとして質問を入れる。 - コンテンツはDOM内に存在する（検索可能、JavaScriptなしでも動作）。
タッチとポインター
- タッチターゲット ≥ 44×44px（ボタン、メニュー項目、FAQトグル）。
- 隣接するターゲット間の間隔 ≥ 8px。
- ホバー時のみのエフェクトで情報を隠さない。
色とテキスト
- 本文テキストのコントラスト ≥ 4.5:1、大きいテキスト ≥ 3:1、UI境界 ≥ 3:1。
- ステータス（保留中/進行中/解除済み）には常にテキストラベル＋アイコンを使用し、色だけで判断させない。
- テキストは200%まで拡大しても欠落しない。固定高さのテキストコンテナは禁止。
- 本文の行長 ≤ 約70文字。
画像とメディア
- 意味のあるスクリーンショット: 実際の
alt属性（app-screenshot-showcase を参照）。装飾的なもの: 純粋に装飾的なSVGにはalt=""＋aria-hidden。 - プレースホルダーは自身を明示: 「スクリーンショットプレースホルダー: 登録画面」。
- テキストに付随するアイコン:
aria-hidden="true"。
モーション
prefers-reduced-motionを尊重（lightweight-motion を参照）。アニメーションのみで表示されるコンテンツは禁止。- 説明用のアニメーションコンポーネント（追跡、連携など）には、それがイラストであることを示す可視テキストを含める。
aria-liveは使用しない（ライブデータではないため）。
緊急情報
- 免責事項は、ヒーローCTAの近く、FAQ（「SOSは緊急ホットラインの代わりになりますか？」）、最終CTAの近く、フッターに表示。平易な言葉、読みやすいコントラスト、小さすぎるテキスト（14px以上）に隠さない。
レビューチェックリスト
- axe / Lighthouse a11y ≥ 95、重大な違反はゼロ
- キーボードのみ: スキップリンク、メニュー開閉/Esc、すべてのアンカー、FAQ、ギャラリー
- スクリーンリーダースポットチェック（VoiceOver/NVDA）: 見出しリストに一貫性がある
- 320px: オーバーフローなし、見出しが収まる、CTAが目立つ
- 200%ズームで機能する
- モーション抑制の確認
- モバイル横向き（例: 740×360）で使用可能