👋 はじめに
こんにちは。
最近、地元で個人経営の素敵な飲食店が増えてきたんです🍽️
美味しい料理を提供しているのに、ホームページがないお店がほとんどで...。
「何か自分にできることはないかな」と考えていたのがきっかけで、このプロジェクトを始めました。
今回は、プログラミング経験がない飲食店オーナーさんでも簡単に更新できる、完全無料（月額0円）💰で運用できるWebサイトを作りました。
実際に使ってもらえるように、実用性を重視して開発しています✨
🌐 デモサイト
実際に動いているサイトをご覧ください。
メニュー管理、お知らせ、イベント情報など、飲食店に必要な機能を一通り実装しています。
コストについて
基本的に完全無料で運用できますが、アクセス数が大幅に増えた場合（月10,000リクエスト超過）は、microCMSやVercelの有料プランへの移行が必要になる可能性があります。
✨ 完成したもの
飲食店に必要な機能をひととおり揃えたWebサイトです：
- 🍕 メニュー管理：料理・ドリンク・デザートの一覧表示、画像付き
- 📢 お知らせ機能：新メニューやキャンペーン情報の発信
- 🎉 イベント情報：期間限定のイベントやフェア情報
- 📍 アクセス情報：営業時間、地図、SNSリンク
管理画面は日本語で、難しいコードを書く必要は一切ありません。
🤔 なぜこの技術スタックを選んだか
microCMS
- 日本語UIで初心者でも使いやすい（これが最大のポイント）
- GUIでコンテンツを管理できるので、プログラミング知識不要
- 無料プランで月10,000リクエストまで利用可能
- APIの設定がシンプルで、管理画面が直感的
- 日本の企業なので、ドキュメントもサポートも日本語
- メニュー追加、お知らせ投稿がブラウザ上で完結
Next.js 15 + TypeScript
- SSG（静的生成）でホスティングが無料になる
- ISRで更新も自動反映
- SEO対策が標準で強力
- 高速で快適なユーザー体験
shadcn/ui + Tailwind CSS
- モダンで洗練されたデザインがすぐ作れる
- レスポンシブデザインが簡単
- カスタマイズ性が高い
Vercel
- Next.jsとの相性が抜群
- 無料プランで十分（個人サイトなら問題なし）
- デプロイが超簡単（GitHubと連携するだけ）
全部合わせても月額0円で運用できるのが、このスタックの最大の魅力です。
無料枠の目安
- microCMS: 月10,000リクエスト（約333件/日）
- Vercel: 月100GBデータ転送、実行時間100GB時間/月
万が一アクセスが急増した場合は、その時点で有料プランを検討すればOK。最初は完全無料で始められます。
💡 実装のポイント
1️⃣ 管理画面の使いやすさを最優先
microCMSの管理画面で、画像をドラッグ&ドロップでアップロードして、テキストを入力するだけ。これだけでWebサイトに反映されます。
コードを一切書かずに更新可能 🎨 なのが最大のメリットです。
- 🍽️ メニューの追加：料理名、価格、画像をフォームに入力するだけ
- 📝 お知らせの投稿：タイトルと本文を入力して「公開」ボタンをクリック
- 🎪 イベント情報：期間設定も含めてGUIで完結
プログラミング未経験のオーナーさんでも、WordやExcelが使えれば問題なく更新できるレベルを目指しました💪
実際の管理画面はこんな感じです：
- ✅ 直感的な日本語UI
- 👀 リアルタイムプレビュー機能
- 📷 画像の自動リサイズ・最適化
- 🕒 下書き保存・予約投稿にも対応
2️⃣ デザインは「温かみ」を重視 🧡
飲食店のサイトなので、温かみのあるオレンジ系のカラーパレットを採用しました。
primary: {
500: "#f06418", // メインカラー 🍊
600: "#e14a0e",
// ...
}
shadcn/uiをベースに、グラスモーフィズムやグラデーション効果を組み合わせて、親しみやすい雰囲気に仕上げています。
3️⃣ モバイルファースト 📱
飲食店を探す人の多くはスマホからアクセスします。そのため、モバイルでの見やすさを最優先に設計しました。
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* メニューカード */}
</div>
Tailwindのレスポンシブクラスで、画面サイズに応じて自動的にレイアウトが切り替わります。
4️⃣ パフォーマンス重視 ⚡
export const revalidate = 60; // ISRで60秒ごとに再生成
静的生成（SSG）+ ISR（Incremental Static Regeneration）の組み合わせで、高速かつリアルタイムに近い更新を実現しています。
😅 苦労したポイント
デザインの汎用性 🎨
「AIっぽくない、人が作った感じのあるデザイン」を目指すのが意外と難しかったです。
最初はシンプルすぎて味気なかったので、shadcn/uiを導入してデザインを全面的に作り直しました。
ホバーアニメーションやグラデーション効果を細かく調整して、「温かみ」と「プロフェッショナル」のバランスを取るのに時間がかかりました。
開発効率化にClaude Codeを活用 🤖
今回の開発では、AnthropicのClaude Codeを使って開発を進めました。
特にshadcn/uiの導入やコンポーネントの実装、型定義の整備など、繰り返しの作業や定型的なコードの生成で大きく効率化できました。
Claude Codeとの対話を通じて、より良い設計やベストプラクティスを学びながら開発できたのも良かったです✨
型安全性 🛡️
microCMSのレスポンスをTypeScriptで厳密に型定義して、エラーを未然に防ぐ工夫をしています：
export interface Menu {
id: string;
name: string;
price: number;
category?: {
id: string;
name: string;
};
// ...
}
エディタの補完が効くので、開発効率が大幅に向上しました。
🔧 技術スタック
- フロントエンド: Next.js 15, React 19, TypeScript
- CMS: microCMS
- スタイリング: Tailwind CSS, shadcn/ui
- デプロイ: Vercel
- 開発支援: Claude Code
- その他: ISR, SSG, lucide-react
🚀 これから実装したい機能
- 📅 予約システム連携：TableCheckやRettyなどの予約サービスとの連携
- 🌏 多言語対応：観光地の飲食店向けに、英語・中国語対応
- 🌙 ダークモード：夜の雰囲気に合わせたカラーテーマ
- ⭐ 口コミ表示：Googleレビューの埋め込み
🎬 最後に
「地元の飲食店に貢献したい」という想いから始めたこのプロジェクト。技術的な学びもたくさんありましたが、何より「誰かの役に立つものを作る」という原点に立ち返ることができました。
個人開発は自分のペースで進められるのが良いですね😊
デザインに凝りすぎて時間がかかったり、細かい部分で悩んだりもしましたが、それも含めて楽しかったです。
もし同じように「地元に貢献したい」と考えている方がいたら、ぜひ参考にしていただけると嬉しいです🙌
ここまで読んでいただき、ありがとうございました！✨
参考リンク