Design responsive avec Claude Code

レスポンシブデザインをClaude Codeで実装する

レスポンシブデザインはWebサイトの必須要件ですが、ブレークポイント設計やレイアウト切り替えには多くの考慮が必要です。Claude Codeなら「モバイル対応にして」と伝えるだけで適切な実装を生成できます。

モバイルファーストのレイアウト

> モバイルファーストでレスポンシブなダッシュボードレイアウトを作って。
> サイドバー、ヘッダー、メインコンテンツの3カラム構成にして。

export function DashboardLayout({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="min-h-screen bg-gray-50">
      {/* モバイルオーバーレイ */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* サイドバー */}
      <aside
        className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r transform transition-transform duration-200 lg:translate-x-0 lg:static lg:z-auto ${
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <nav className="p-4 space-y-2">
          <a href="#" className="block px-3 py-2 rounded-lg hover:bg-gray-100">
            ダッシュボード
          </a>
          <a href="#" className="block px-3 py-2 rounded-lg hover:bg-gray-100">
            ユーザー管理
          </a>
          <a href="#" className="block px-3 py-2 rounded-lg hover:bg-gray-100">
            設定
          </a>
        </nav>
      </aside>

      {/* メインエリア */}
      <div className="lg:ml-0 flex flex-col min-h-screen lg:flex-row">
        <div className="flex-1">
          {/* ヘッダー */}
          <header className="sticky top-0 bg-white border-b px-4 py-3 flex items-center gap-4">
            <button
              onClick={() => setSidebarOpen(true)}
              className="lg:hidden p-2 rounded-lg hover:bg-gray-100"
            >
              <span className="sr-only">メニューを開く</span>
              ☰
            </button>
            <h1 className="text-lg font-semibold">ダッシュボード</h1>
          </header>

          {/* コンテンツ */}
          <main className="p-4 md:p-6 lg:p-8">{children}</main>
        </div>
      </div>
    </div>
  );
}

レスポンシブグリッド

カード型のコンテンツを画面幅に応じて最適にレイアウトします。

export function ResponsiveGrid({ items }: { items: CardItem[] }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
      {items.map((item) => (
        <article
          key={item.id}
          className="bg-white rounded-lg shadow-sm border overflow-hidden hover:shadow-md transition-shadow"
        >
          <img
            src={item.image}
            alt={item.title}
            className="w-full h-40 sm:h-48 object-cover"
            loading="lazy"
          />
          <div className="p-4">
            <h3 className="font-semibold text-base md:text-lg line-clamp-2">
              {item.title}
            </h3>
            <p className="text-sm text-gray-600 mt-2 line-clamp-3">
              {item.description}
            </p>
          </div>
        </article>
      ))}
    </div>
  );
}

コンテナクエリの活用

CSS Container Queriesを使えば、親要素のサイズに応じたレスポンシブ対応が可能です。

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* コンテナが400px以上なら横並び */
@container card (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

/* コンテナが600px以上ならさらにリッチに */
@container card (min-width: 600px) {
  .card {
    grid-template-columns: 250px 1fr auto;
  }
}

レスポンシブタイポグラフィ

clamp()を使った流動的なフォントサイズの設定です。

:root {
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --font-size-xl: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --font-size-2xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --font-size-3xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
p { font-size: var(--font-size-base); }

レスポンシブテーブル

モバイルでもテーブルデータを見やすくする方法です。

export function ResponsiveTable({ data, columns }: TableProps) {
  return (
    <>
      {/* デスクトップ表示 */}
      <div className="hidden md:block overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="border-b">
              {columns.map((col) => (
                <th key={col.key} className="px-4 py-3 text-left text-sm font-medium">
                  {col.label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {data.map((row, i) => (
              <tr key={i} className="border-b hover:bg-gray-50">
                {columns.map((col) => (
                  <td key={col.key} className="px-4 py-3 text-sm">
                    {row[col.key]}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* モバイル：カード表示 */}
      <div className="md:hidden space-y-4">
        {data.map((row, i) => (
          <div key={i} className="bg-white border rounded-lg p-4 space-y-2">
            {columns.map((col) => (
              <div key={col.key} className="flex justify-between">
                <span className="text-sm text-gray-500">{col.label}</span>
                <span className="text-sm font-medium">{row[col.key]}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
    </>
  );
}

ダークモードとの組み合わせはダークモード実装を、デザインシステム全体の設計はデザインシステム構築をご覧ください。

Summary

Claude Codeを使えば、モバイルファーストのレイアウト設計、コンテナクエリの活用、レスポンシブテーブルまで、レスポンシブデザインの複雑な実装を効率的に完了できます。「この画面をモバイル対応にして」と依頼するだけです。

詳しくはClaude Code公式ドキュメントを参照してください。