常にレスポンシブなサイト
ページは、python3 scripts/check_responsive.py を通過して初めて完成とみなされます（水平スクロールなし、画面からはみ出す要素なし、タッチターゲットが十分な大きさであること）。 このチェックはCIでも実行されます。レスポンシブ対応を壊すPRはデプロイできません。
基準となるビューポート幅（すべてテストすること）
| 幅 | ケース |
|---|---|
| 320 px | 小型Android、iPhone SE（ズーム時） |
| 375 px | 標準的なiPhone（ターゲットその1：視聴者はTikTokから来る） |
| 414 px | 大型スマートフォン |
| 768 px | タブレット（縦向き） |
| 1024 px | タブレット（横向き）/ 小型ノートPC |
| 1440 px | デスクトップ |
スクリプトでテストされるサイズ: 320×640, 375×667, 414×896, 768×1024, 1024×600（低画面）, 1440×900。
CSSルール
- モバイルファースト: 基本スタイルは320px用、その後
@media (min-width: …)で拡大。ブレークポイント:600px,900px,1200px（それ以外のマジックナンバーは不可。コンポーネントでは@containerを使用可）。 - 固定幅は280pxを超えない（
min()/max-width: 100%なしの場合）:width: min(520px, 100%)。 - 可変タイポグラフィ には
clamp()を使用: 見出しはclamp(32px, 7vw, 72px)、本文テキストは 最低16px（モバイルでそれ以下にしないこと。そうしないとiOSの入力フィールドでズームが発生する）。 - 高さ:
min-height: 100svh（モバイルのアドレスバーの下に隠れる100vhは使用しない）。テキストブロックに固定のheightを指定しない。 - サイドマージン: モバイルでは16pxのガター（
space-4）＋ノッチ付き画面用にenv(safe-area-inset-left/right)（ビューポートには既にviewport-fit=coverが設定されている）。 - 長いテキスト: URL、コマンド、ファイル名には
overflow-wrap: anywhere。コードブロックは ブロック内でoverflow-x: auto、ページ全体には適用しない。 - グリッド: チュートリアルカードには
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr))。 - はみ出す装飾要素（
byte/sparkブロック、canvas）:position: fixedまたは親要素をoverflow: clipにし、サイズはmin(vw, px)で指定。 - タッチ: 独立したボタンとリンクは 44×44 px 以上（スクリプトの最低ブロックサイズは24px、WCAG 2.2）、2つのターゲット間の間隔は最低8px。ホバー (
:hover) のみで利用可能な情報は禁止。focus-visibleとタッチ状態を必ず用意すること。 - 動画とiframe（YouTube）:
aspect-ratio: 16 / 9; width: 100%; height: auto;— TikTok動画は9 / 16でmax-width: 360px。
画像
- HTMLには常に
widthとheightを指定（レイアウトシフト＝CLSを防止）し、CSSではmax-width: 100%; height: autoを設定。 - フォーマット: ロゴとアイコンはSVG、スクリーンショットはWebP/AVIF。
srcset+sizesを使用（例: 480w, 960w, 1600w）。 - スクロールせずに見える範囲より下の画像には
loading="lazy"とdecoding="async"を設定。メイン画像（LCP）には絶対に設定しない。メイン画像にはfetchpriority="high"を設定する。 - チュートリアルのサムネイル:
aspect-ratio: 16 / 9; object-fit: cover。
ビューポート（既に設定済み。削除しないこと）
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
禁止: maximum-scale=1, user-scalable=no（ズームをブロックし、アクセシビリティに悪影響）。
アニメーションとモバイルパフォーマンス
prefers-reduced-motionを尊重する（プロジェクトのルール）。- Canvas:
devicePixelRatioを2に制限し、600px未満では密度を下げる（app.jsで既に実施済み。この原則を維持すること）。 - モバイルでは重い
backdrop-filterを重ねない。
確認方法
# check-site コンテナを :8088 で起動している場合、または引数なし（ローカルサーバーが site/ 上で動作）
python3 scripts/check_responsive.py # site/ 内の全ページ
python3 scripts/check_responsive.py --shots /tmp/rs # + 幅ごとのPNGキャプチャ
スクリプトは以下の場合に失敗します: scrollWidth > 幅、表示されている要素が端からはみ出している、タッチターゲットが24px未満（文内のリンクは除外）、または本文テキストが16px未満。プッシュする前に320pxと375pxでのキャプチャを確認してください。