モバイルファーストのレスポンシブデザインをClaudeと作る

モバイルファーストのレスポンシブデザインは「なんとなく作れる」から「きちんと設計する」へのステップが難しいですよね。Claude Codeを使えば、ブレイクポイント設計からタッチ対応まで、会話しながら体系的に進められます。

ブレイクポイントをClaudeと設計する

まずはプロジェクトの要件をClaudeに伝えて、ブレイクポイントの骨格を作りましょう。次のように入力してみてください。

モバイルファーストのCSSブレイクポイントを設計してください。
対象デバイス: スマートフォン・タブレット・デスクトップ
フレームワーク: なし（素のCSS）
カスタムプロパティ（CSS変数）を使って管理しやすい形にしてください。

するとClaudeは以下のようなベーススタイルを提案してくれます。

/* ブレイクポイント変数（メディアクエリ内では変数が使えないためコメントで管理） */
/* sm: 640px / md: 768px / lg: 1024px / xl: 1280px */

/* モバイルファースト：まずモバイル向けに書く */
.card {
  padding: 1rem;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .card {
    padding: 1.5rem;
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .card {
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

max-width ではなく min-width で積み上げていくのがモバイルファーストの基本です。Claudeはこの方針を踏まえた上でコードを生成してくれるので、後から「なぜこの書き方なの？」と聞けばすぐ解説してもらえます。

タッチUIの実装をサポートしてもらう

スマートフォン向けには、タップターゲットのサイズやスワイプ操作の考慮が必要です。Claudeに具体的な場面を伝えましょう。

スマートフォン向けのナビゲーションメニューを作りたいです。
要件：
- タップターゲットは最低44×44px（Apple HIG準拠）
- ハンバーガーメニューをタップで開閉
- touchstart を使ったスワイプで閉じる動作も欲しい
JavaScriptとCSSをセットで書いてください。

このように「なぜその仕様にするか」の背景（Apple HIGなど）も伝えると、Claudeはガイドライン準拠のコードを出力し、コメントで理由まで補足してくれます。実装後に「pointer-events の扱いを改善して」と追加指示するだけで、反復的にブラッシュアップできます。

Tip

タッチ操作の検証は実機が一番です。Claudeに「Chrome DevToolsのタッチエミュレーションで確認すべきポイントを教えて」と聞くと、チェックリスト形式で教えてもらえます。

パフォーマンス最適化もClaudeに相談する

レスポンシブ画像やCSSの肥大化はモバイルのパフォーマンスに直結します。コードを貼り付けて次のように聞いてみましょう。

以下のCSSをレビューして、モバイルでの描画パフォーマンスを
改善できる箇所を指摘してください。
特に will-change・contain・font-display の観点でお願いします。

（自分のCSSをここに貼る）

ClaudeはCSSの問題箇所を特定し、contain: layoutの追加や不要な再描画を防ぐ修正案を提示してくれます。「なぜそのプロパティが効くのか」も一緒に説明してくれるため、レビューを受けながら知識も身につけられます。

Claude Codeは「設計→実装→検証」の全フェーズで壁打ち相手になれます。まずは今のプロジェクトのCSSをそのまま貼り、「モバイルファーストに直すには何から始めればいいか」と聞くところから始めてみましょう。