mobile-responsive

モバイル対応

このスキルが扱う Web UI のすべての部分は、（1）320px から大画面のデスクトップまで完璧に動作し、（2）横方向にはみ出さず、（3）意図を持ってデザインされているように見え、（4）プロジェクトのほかの部分と、過去・将来の両方で視覚的に一貫している必要があります。

モバイルファーストで作業してください。プレフィックスのない基本スタイルを最小画面向けにし、そこから段階的に複雑さを加えます。デスクトップ向けに作ってから縮小する方法は避けてください。

ステップ 0：まずプロジェクトの規約を把握する（省略しないでください）

UI の新規作成や変更を行う前に、既存のコードを読んで、新しい作業が周囲となじむようにしてください。独創的でも孤立したものより、美しく一貫していることが大切です。

1. 同じディレクトリ／機能にある関連コンポーネントを探します。 そのうち 2、3 個を読んでください。
2. 既存の規約を洗い出します。
   • スタイルシステム（Tailwind、CSS Modules、styled-components、プレーン CSS、Bootstrap など）。既存のものに合わせ、別のスタイルシステムを導入しないでください。
   • 実際に使われている間隔のスケール（例：4 / 8 / 16 / 24 / 32 のみ、または Tailwind の gap-2 gap-4 gap-6）。同じ値を再利用します。
   • 文字サイズのスケール（見出しと本文に使われている具体的なサイズ／太さ）。
   • 既存のブレークポイント（sm md lg、または独自の値）。同じセットを使い、新しいブレークポイントを作らないでください。
   • 色／間隔のデザイントークンやテーマ変数。トークンを使い、トークンと重複する値をハードコードした hex／px で指定しないでください。
   • 周囲のセクションで使われているコンテナ／最大幅と水平方向のパディングのパターン。
   • コンポーネント構造の規約（props／variants／slots の命名方法）。
3. 規約に合わせます。 新しいカードも、既存のカードと同じリリースで追加されたように感じられる必要があります。まだ規約がない場合は、整った規約を確立し（references/design-consistency.md を参照）、将来のコンポーネントが踏襲できるパターンとして一貫して適用してください。

tailwind.config、テーマファイル、またはデザイントークンファイルが存在する場合は、読んでください。間隔、ブレークポイント、色の正となる情報源です。

ステップ 1：モバイルファーストで構築・修正する

1. ブレークポイントのプレフィックスやメディアクエリを使わず、最小画面向けの基本スタイルを書きます。
2. min-width のブレークポイントのみを使い、大画面向けの動作を上乗せします（Tailwind の sm: md: lg: は min-width です。CSS では @media (min-width: ...) を使います）。
3. 間隔、サイズ、ブレークポイントの値にはすべて、ステップ 0 で確認した規約を使います。

ステップ 2：はみ出しを確実に防ぐ（必須要件）

モバイルでの横スクロールは不具合であり、絶対に許容されません。原因の段階で防いでください。よくある原因と対処方法は次のとおりです。

• 固定幅は w-full max-w-[Npx]（Tailwind）または width:100%; max-width:Npx にします。
• 縮小できない Flex の子要素には min-w-0 を付けます（省略記号で表示するテキストには truncate も付けます）。
• 幅の広いメディア： すべての img/video/iframe/svg に max-w-full h-auto を付けます。
• 改行されない長い文字列／URLには break-words ／ overflow-wrap: anywhere を指定します。
• 固定幅のテーブル： テーブルではなくページ全体がスクロールしないよう、overflow-x-auto で囲みます。
• 負のマージン／100vw： 100vw にはスクロールバーの幅も含まれてはみ出すため、w-full を優先します。
• 端からはみ出す絶対配置／移動した要素： サイズを指定した親要素に overflow-hidden を付けて切り取ります。

構築後、下記のデバイスマトリクスにあるすべての幅で横スクロールが発生しないことを、目視または scripts/check-overflow.js で確認してください。詳しくは references/overflow-prevention.md を参照してください。

ステップ 3：機能するだけでなく、美しく仕上げる

レスポンシブ対応とは、単に画面を詰め込むことではありません。どのサイズでも整ったレイアウトを目指します。

• 縮小するだけでなく、並べ替えましょう。 複数列のグリッドは、モバイルでは列数を減らすか、1列に積み重ねます（grid-cols-1 sm:grid-cols-2 lg:grid-cols-3）。窮屈な列のままにはしません。
• 流動的な文字サイズ。 見出しには clamp() やレスポンシブユーティリティを使ってサイズを調整し、小さな画面で見出しが大きくなりすぎないようにします（text-2xl md:text-4xl）。
• 余白を確保しましょう。 レスポンシブな左右のパディング（px-4 md:px-8）を追加して、コンテンツが画面の端に接しないようにします。モバイルでは間隔を小さくします（gap-4 md:gap-8）。
• インタラクティブ要素のタッチ領域は約 44px 以上にします（min-h-11、適切なパディング）。
• 読みやすい幅を保ちましょう。 本文の行の長さに上限を設けます（max-w-prose / 約 65ch）。
• 非表示にするか、変形させましょう。 デスクトップのナビゲーションは md 未満でトグル式にします。ごちゃごちゃした状態で折り返すだけにしてはいけません。
• 順序も重要です。 order-* / flex-col-reverse を使い、最も重要な要素（通常は見出しまたは主要な CTA）がモバイルで先に表示されるようにします。

ステップ 4：あらゆるデバイス幅で確認する

1 種類のスマートフォンの幅で問題なく表示できるだけでは、「モバイル対応」とは言えません。次の幅で確認します。

幅	対象
320px	最小サイズのスマートフォン、負荷テスト
375px	標準的なスマートフォン
414px	大型スマートフォン
768px	タブレットの縦向き
1024px	タブレットの横向き／小型ノート PC
1280px	デスクトップ
1440px+	大型デスクトップ

各幅で、横スクロールがないこと、コンテンツが切れたり重なったりしていないこと、文字が読みやすいこと、コントロールをタップできること、隣接するセクションとの配置が崩れていないことを確認します。その後、変更した内容と理由を 1、2 文で説明します。無関係なコードには手を加えないでください。

ルール

• モバイルファースト、min-width のみ。 実際にデスクトップ専用の動作が必要な場合を除き、max-width クエリは避けます。
• 既存のシステムに合わせます。 新しい CSS フレームワークや別の間隔／文字サイズのスケールを追加してはいけません。トークンや規約を再利用します（ステップ 0）。
• 相対単位を使います。 固定の px よりも rem / % / fr / vw / minmax / clamp を優先します。内容が変動するコンテナに固定ピクセルの高さを設定してはいけません。
• オーバーフローは一切許容しません。 横スクロールは、発生源を特定して修正すべき不具合として扱います。
• 最初から美しく。 手早い修正で見た目が悪くなる場合は、少し手間をかけて意図の感じられる修正を行います。
• 対象範囲を守ります。 ユーザーから依頼されていないコンポーネントのスタイルは変更しません。ただし、新しいコンポーネントが既存のものと一貫していることは確認します。

参考ファイル（必要に応じて参照）

• references/breakpoints.md：ブレークポイントの値、デバイス幅の一覧、コンテナクエリ、流動的な文字サイズ。
• references/overflow-prevention.md：オーバーフローの原因、対処法、デバッグ手法。
• references/design-consistency.md：プロジェクトのデザイン言語を抽出して合わせる方法、およびデザイン言語がない場合にトークンシステムを構築する方法。
• references/frameworks.md：スタックごとの構文（Tailwind、プレーン CSS、CSS Modules、styled-components、Bootstrap、Flutter web）。

簡単な例

変更前（固定幅、デスクトップ専用、スマートフォンではオーバーフローします）：

<div className="flex w-[960px] gap-8 p-10">
  <img src="/hero.png" width="600" />
  <div>
    <h1 className="text-5xl">Welcome</h1>
    <p>Some long description...</p>
  </div>
</div>

変更後（流動的で、モバイルでは縦に積み重なり、オーバーフローせず、適切にサイズが変わり、プロジェクトの間隔の基準を再利用します）：

<div className="flex flex-col md:flex-row w-full max-w-[960px] gap-4 md:gap-8 px-4 py-6 md:p-10">
  <img src="/hero.png" className="w-full md:max-w-[600px] h-auto rounded-lg" />
  <div className="min-w-0">
    <h1 className="text-3xl md:text-5xl">Welcome</h1>
    <p className="max-w-prose break-words">Some long description...</p>
  </div>
</div>