目標
- モバイルファーストデザインの基本を理解する。
- Tailwind CSSを使ってレスポンシブデザインを実装する。
- ブログをモバイルデバイスに最適化する。
1. モバイルファーストデザインとは？
モバイルファーストは、最初にモバイル向けのデザインを考え、その後デスクトップに拡張するアプローチです。現代のウェブではモバイルユーザーが多いため重要です。Next.jsとTailwind CSSを使えば、簡単に実装できます。この記事では、ブログをモバイル向けに最適化します。
2. Tailwind CSSの確認
既にTailwind CSSがインストールされていることを前提に進めます。
手順：
未インストールの場合は以下を実行：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.jsの確認：
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
3. モバイルファーストデザインの実装
ブログのレイアウトをモバイル優先で調整します。
app/layout.tsxの編集：
import '../globals.css';
import Link from 'next/link';
export const metadata = {
title: 'Next.js 2025ブログ',
description: '2025年の最新技術で作られたブログサイト',
};
export default function RootLayout({ children }) {
return (
<html lang="ja">
<body className="font-sans antialiased">
<header className="bg-blue-800 text-white p-4">
<nav className="max-w-4xl mx-auto flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
<Link href="/" className="text-xl font-bold">ホーム</Link>
<div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<Link href="/about" className="hover:underline">About</Link>
<Link href="/add-post" className="hover:underline">投稿追加</Link>
</div>
</nav>
</header>
<main>{children}</main>
<footer className="bg-gray-200 p-4 text-center text-gray-600">
© 2025 Next.js学習シリーズ
</footer>
</body>
</html>
);
}
app/page.tsxの編集：
import { supabase } from '../lib/supabase';
export default async function Home() {
const { data: posts } = await supabase
.from('posts')
.select('*')
.order('created_at', { ascending: false });
return (
<div className="min-h-screen bg-gray-100 py-6 px-4 sm:px-6">
<h1 className="text-2xl sm:text-4xl font-bold text-blue-600 mb-6 text-center">データベースからの投稿</h1>
<ul className="space-y-4 max-w-2xl mx-auto">
{posts?.map((post) => (
<li key={post.id} className="bg-white p-4 rounded shadow">
<a href={`/posts/${post.id}`} className="text-lg sm:text-xl font-semibold text-blue-500 hover:underline">
{post.title}
</a>
<p className="text-gray-600 text-sm sm:text-base mt-2">{post.content}</p>
</li>
))}
</ul>
</div>
);
}
app/posts/[id]/page.tsxの編集：
import { supabase } from '../../../lib/supabase';
export default async function Post({ params }: { params: { id: string } }) {
const { data: post } = await supabase
.from('posts')
.select('*')
.eq('id', params.id)
.single();
if (!post) return <div className="text-center p-6">投稿が見つかりません</div>;
return (
<div className="max-w-2xl mx-auto p-4 sm:p-6">
<h1 className="text-xl sm:text-3xl font-bold text-blue-600 mb-4">{post.title}</h1>
<p className="text-gray-600 text-sm sm:text-base">{post.content}</p>
</div>
);
}
4. モバイルでの確認
デザインがモバイルで自然に動作するかテストします。
手順：
-
npm run devで起動。 - ブラウザのDevToolsでモバイルビュー（例：iPhoneサイズ）を確認。
- 以下をチェック：
- ナビゲーションが縦に並ぶ（モバイル）→横に並ぶ（デスクトップ）。
- テキストサイズが小さすぎず、読みやすい。
- 余白（padding/margin）が適切。
実践：モバイル最適化ブログ
- レイアウト：モバイルでナビゲーションが折り畳まれ、コンテンツが読みやすい。
- レスポンシブ：画面サイズに応じて自然に調整。
確認：
-
http://localhost:3000をスマホで開き、操作性を確認。 - Lighthouseの「Mobile」スコアで80以上を目指す。
まとめ
- Tailwind CSSでモバイルファーストデザインを簡単に実装しました。
- ブログがあらゆるデバイスで快適に使えるようになりました。
この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！あなたのNext.jsプロジェクトでもモバイルファーストを試してみてください！