この記事について
筋トレ活動を発信するために作ったブログ「マッスルブログ」の制作記録です。
Next.js × Tailwind CSS を使って、Vercelの公式テンプレートをベースにカスタマイズしました。
初心者がポートフォリオとしても使えるブログを作った過程や、GitHub Copilotを活用して開発効率を爆上げした話を紹介します！
作ったもの：マッスルブログ
- GitHub: https://github.com/saitojo1106/muscleclub_honmepage
- 使用テンプレ：Vercel公式のhttps://supabase.com/
- フロントエンド：Next.js, Tailwind CSS
- デプロイ：Vercel（Next.jsと相性バッチリ）
技術スタックと採用理由
| 技術 | 理由 |
|---|---|
| Next.js | ページを素早く表示できる(SSR対応),使いやすくてテンプレ豊富 |
| Tailwind | CSSを細かく書かずにデザインできる |
| Vercel | デプロイが早い,Next.jsとの相性◎ |
| Markdown | 記事投稿を楽にしたかったので採用（テンプレに元からある） |
| Github Copilot | コーディング速度と学習効率を爆上げしてくれるAIペアプロ |
Copilotが役に立ったポイント
- 今回の開発では、GitHub Copilotをがっつり活用しました。
特に以下の場面で「手が止まらない」感覚を得られたので、紹介しておきます。
1. Tailwindのクラス補完が神
- Tailwindは自由度が高い分、クラスを毎回思い出すのが地味に手間。
Copilotが文脈に合わせて適切なクラスを提案してくれるので、ほぼ手入力いらずでした。
<div className="bg-white rounded-xl shadow-md p-4">
<h2 className="text-xl font-bold mb-2">タイトル</h2>
<p className="text-gray-600">本文</p>
</div>
2. App Router周りの学習に最適
- Next.jsのApp Routerは新しくて難しいですが、Copilotの提案がちょうどよいお手本に。コードを参考にしながら仕組みを理解でき、自然とキャッチアップできました。
3. 認証・ミドルウェアの実装支援
- NextAuth.jsとミドルウェアを使って、管理者ページの保護などを行いましたが、
Copilotの提案でトークン管理・リダイレクト処理もスムーズに実装できました。
if (!token) {
return NextResponse.redirect('/admin/login');
}
4. 繰り返し処理やUIコンポーネントの雛形生成
- 「カードをリスト化する」「テーブルを作る」など、面倒な定型処理を瞬時に提案してくれるので、繰り返し作業に時間を取られず、UI/UX改善に集中できました。
カスタマイズしたポイント
1. デザイン面
- 部員紹介ページ（プロフィールカード）
- Instagramリンク付きで、専門種目と自己記録も一目で分かる！
<div className="flex gap-4 items-center mb-4">
<p className="text-gray-600 dark:text-gray-300">
<span className="font-bold">専門種目:</span> {member.speciality}
<Link href={member.instagram} target="_blank" rel="noopener noreferrer"
className="ml-2 inline-flex items-center text-pink-500 hover:text-pink-600"
>
<InstagramIcon /> <span className="ml-1 hidden sm:inline">@{member.instagram.split('/').pop()}</span>
</Link>
</p>
</div>
- イベントカレンダー（日本語対応）
- イベントがある日に色が付く＋詳細がポップアップ表示
- 次のイベントまでのカウントダウンも！
// カレンダーの日付ごとにイベントを表示
{hasEvents && (
<div>{event.title}</div>
)}
- 大会実績ページ
- 出場選手や順位が一覧表で見やすい
- 写真は大きくヒーロー風に!
<table>
<thead>
<tr><th>選手名</th><th>カテゴリー</th><th>順位</th></tr>
</thead>
<tbody>{/* 結果を表示 */}</tbody>
</table>
2. 管理機能の追加
- NextAuth.js による認証システム
- 管理者しか見れないページを設定
- トークン（JWT）でログイン管理
if (!token) {
return NextResponse.redirect('/admin/login');
}
- 簡易データベース（ローカルストレージ利用）
- 本格DBがまだいらない段階での軽量設計
- 新しい部員の追加や削除も可能！
localStorage.setItem("members", JSON.stringify(updatedMembers));
3. UI/UX改善
- ダークモード切り替え（システム連動 or 手動選択）
- SNSシェア機能(Twitter/Facebook/LINEボタン）
- レスポンシブ対応（スマホでもPCでも見やすい）
4. コンテンツ管理
- マークダウンベースでブログ管理
- タイトル・タグ・日付などの「メタ情報」も記述可能
- タグ表示・フィルター機能もあり！
- イベント管理：表示・参加者管理・カウントダウン付き！
苦労したポイント・学び
苦労したところ
- ReactとNext.jsのバージョンの相性問題（RC版は注意）
- NextAuth.jsでの認証の設計（セッションの扱い）
- ローカルDB→本格DB移行を検討中
- Git操作（ブランチ統合・競合解決）に苦戦
- .env.localの管理（開発/本番の分け方）
学びになったこと
- Next.js App RouterやServer Componentsの使い方
- JWT認証の流れ、ミドルウェアでのページ保護
- 再利用できるUIコンポーネント設計
- 無料サービス（Vercel, MongoDB, Cloudinaryなど）の活用
- CRUD機能と非同期処理の基本
- Tailwindでのレスポンシブなデザイン
- 実際の開発フローの体験（要件定義〜公開まで）
💡 今後の改善アイデア
- 認証機能の強化（ロール・外部ログイン対応）
- イベント機能の拡張（申込み・通知・Meet連携）
- コミュニティ機能（コメント・掲示板）
- データ分析機能（トレ記録・成長チャート・PDF出力）
最後に
Vercelのテンプレを活用すれば、初心者でもポートフォリオとして十分通用するブログが作れます。さらにGitHub Copilotを活用することで、実装スピードも学習効率も格段にアップしました！筋トレ × Web開発のように、「好きなこと × 技術」＝最高のモチベになるので、興味ある方はぜひチャレンジしてみてください！