Next.js 14 App Router×Tailwind CSSで作るレスポンシブUI入門
はじめに：モダンWeb開発におけるNext.js 14 × Tailwind CSSの魅力
Next.js 14のApp Routerは、Reactサーバーコンポーネントやレイアウト機能が強化され、ページごとに柔軟なUI設計が可能になりました。一方、Tailwind CSSはユーティリティクラスによる直感的なスタイリングとレスポンシブ対応が得意です。本記事では、この2つを組み合わせ、モバイルからデスクトップまで快適に動作するレスポンシブUIを実装する方法をご紹介します。
1. プロジェクトの初期セットアップ
npx create-next-app@latest my-app --experimental-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.jsでは、App Routerのapp/フォルダを含めてスキャン対象を設定します：
// tailwind.config.js
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: { extend: {} },
plugins: [],
};
globals.cssにTailwindの基本スタイルを読み込みましょう：
@tailwind base;
@tailwind components;
@tailwind utilities;
2. ディレクトリ構成例
my-app/
├── app/
│ ├── layout.tsx // 共通レイアウト
│ ├── page.tsx // ホームページ
│ └── dashboard/
│ ├── page.tsx
│ └── settings/page.tsx
├── components/
│ ├── Header.tsx
│ └── Footer.tsx
├── styles/
│ └── globals.css
├── tailwind.config.js
└── package.json
App Routerのlayout.tsxに、全ページ共通の<Header />や<Footer />を配置します。
3. レスポンシブデザインの基本パターン
3-1. コンテナ幅の調整
<div className="max-w-screen-lg mx-auto px-4">
{/* 画面幅に合わせて最大幅と左右余白を調整 */}
</div>
3-2. グリッドレイアウト
<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
{items.map(item => (
<Card key={item.id} item={item} />
))}
</div>
md:以上で2カラム、lg:以上で3カラムに切り替わります。
3-3. フレックスと折返し
<nav className="flex flex-wrap justify-center space-x-4">
<a className="text-blue-600 hover:underline" href="/">Home</a>
{/* ... */}
</nav>
- 小画面では折返し、余白は
space-x-4で均一に。
4. App Routerならではのレイアウト切り替え
Next.js 14の<Layout>はフォルダ毎にネスト可能。たとえば/dashboard配下だけサイドバー付きにするには：
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
return (
<div className="flex min-h-screen">
<Sidebar className="w-64 hidden lg:block" />
<main className="flex-1 p-6">{children}</main>
</div>
)
}
hidden lg:blockで、デスクトップではサイドバー表示、モバイルでは非表示に。
5. 画像とメディアのレスポンシブ制御
Next.jsのnext/imageを活用すると、簡単に最適化＆レスポンシブ対応できます：
import Image from "next/image"
<Image
src="/hero.jpg"
alt="Hero background"
width={1200}
height={600}
className="w-full h-auto"
/>
className="w-full h-auto"で、コンテナ幅に合わせて拡大縮小します。
6. アクセシビリティ評価
- キーボード操作：
focus:outline-none focus:ring-2を用いて、どの要素にフォーカスしているか可視化。 - コントラスト：テキスト色と背景色の比率がWCAG AA基準を満たすか確認。
- ARIA属性：レスポンシブメニューやモーダルには
role="dialog"やaria-expandedを適切に付与し、スクリーンリーダー対応を担保。
7. 対象読者と効果
- フロントエンドエンジニア：Next.js 14とTailwindで即効性のあるレスポンシブUIを学びたい方
- UI/UXデザイナー：コードベースでの実装例を把握し、デザイン連携をスムーズにしたい方
- 小規模チーム〜スタートアップ：少人数で高速にプロトタイプを作成し、即座にUXを検証したい方
本ガイドを実践すれば、画面幅やデバイスをまたいだUI一貫性が実現でき、開発工数を大幅に削減できます。
まとめ
- Next.js 14 App Routerでレイアウトをフォルダ単位にネスト管理
- Tailwind CSSのユーティリティでレスポンシブクラスを直感的に適用
- 画像・ナビゲーション・グリッドなど共通パターンを再利用可能コンポーネント化
- アクセシビリティ配慮を忘れずに、全ユーザーに優しいUIを提供
Next.js と Tailwind の組み合わせを極め、モバイルファーストで美しく使いやすいレスポンシブWebを実現しましょう！