はじめに
「ワインと日本酒を一緒に管理できるアプリが欲しい」——そんな個人的なわがままから始めたアプリが、2週間で本番稼働まで辿り着きました。
Cellar Note は、自宅セラーのワイン・日本酒を一元管理できるスマホアプリです。無料で50本まで使え、それ以上はPro（¥400/月）に移行するFreemiumモデルで現在公開中です。
この記事では、AIコーディングツール「Claude Code」を使った開発の進め方と、実際につまずいたポイントと解決策を中心に書きます。「プログラミングに詳しくないけど個人開発に興味がある」という方にも届くように書きました。
作ったもの
Cellar Note
🔗 https://cellar-note-public.vercel.app
↓ランディングページ
🔗 https://cellar-note-public.vercel.app/about.html
なぜ作ったか
既存のワイン管理アプリ（Vivinoなど）や日本酒アプリ（さけのわなど）はたくさんあります。でもワインと日本酒を同時に管理できるアプリは見当たりませんでした。どちらも飲む自分には不便で、「なければ作ろう」と思ったのが出発点です。また、ワインセラーや冷蔵庫に入ってるお酒は、置いている位置や中身がすぐ分からなくなってしまう悩みは誰しもが持っているものと思っていますが、このアプリで解決できます。
主な機能
物理セラーの配置管理
棚の「上から何段目、左から何列目」という位置を画面上のグリッドで管理できます。「あのワイン、どこに入れたっけ？」が解消されます。
AIラベル解析（Googleの生成AI「Gemini」を使用）
ボトルのラベルを写真に撮るだけで、銘柄名・産地・品種・ヴィンテージを自動入力します。手打ちの手間がほぼなくなります。
テイスティングノート
甘味・酸味・渋み・余韻・ボディを1〜5で評価すると、レーダーチャートでリアルタイムに可視化されます。
Memories / Analysis
飲んだ記録の一覧、国別・品種別の好みランキング、コスパ分析（評価÷価格）などを自動で集計します。
PDF出力（Pro限定）
ボトルの情報とレーダーチャートをA4でまとめて印刷できます。持ち歩き用やギフト記録に。飲んだ記録は紙でも取っておきたいという個人的な趣味です。
シェア機能
SNS機能は不要と思っていますが、気軽に飲んだ記録をシェアできるのは嬉しいと思ったので、ボタンひとつでシェアできるようにしています。
ソムリエ一言（Pro限定）
AIがそのワイン・日本酒の豆知識とテイスティングコメントを生成します。
技術スタック
※ここは読み飛ばしてOKです。エンジニアの方向けの情報です。
| 役割 | 技術 |
|---|---|
| アプリの画面 | Next.js 16 / TypeScript / Tailwind CSS |
| データの保存・ログイン | Supabase（データベース + 認証 + 画像保存） |
| 公開・ホスティング | Vercel |
| 決済 | Stripe（月額サブスクリプション） |
| AI機能 | Google Gemini API |
| PDF生成 | @react-pdf/renderer |
| 開発支援 | Claude Code |
Claude Codeとは？
Claude Code はAnthropicが提供するAIコーディングツールです。ターミナル（黒い画面）上で動き、「こういう機能を作って」と指示するとコードを書いてくれます。
ただし、ボタンを押せば自動でアプリが完成するような魔法のツールではありません。「何を作るか」を考えて「どう作るか」を言語化する作業は、人間がやる必要があります。 Claude Codeはその「実装」の部分を大幅に加速してくれるパートナーです。
Claude Codeで「これはすごい」と感じた場面
複雑なサービス連携を一発で書いてくれる
たとえば「Stripe（決済サービス）で支払いが完了したら、データベースのユーザー情報を有料プランに更新する」という処理があります。
これは、
- Stripeから「支払い完了」の通知を受け取る
- 通知が本物かどうか署名を検証する
- ユーザーのステータスを更新する
- セキュリティ設定（RLS）を回避して書き込む
という4ステップが絡む処理で、慣れていないと丸1日かかることもあります。
「Stripe Webhookを受け取ってSupabaseのis_premiumをtrueに更新したい。Service Role Keyを使ってRLSをバイパスして」と伝えると、**動くコードが数分で返ってきます。**ここまで細かい指示をしなくても、「ユーザーが購入ボタンを押したら支払い画面に遷移して、有料会員として使えるような機能を実装したい」レベルでも十分です。
レーダーチャート付きのPDF生成なども同様で、「こういうものが欲しい」という言葉から動くコードに変換してくれる体験は、何度やっても新鮮でした。
エラー解決が爆速
- データベースのアクセスエラー：エラーメッセージをそのまま貼ると、「このテーブルにセキュリティポリシーが設定されていない」など原因をすぐに特定してくれる
- デプロイ時のビルドエラー：エラーログを貼ると、問題のある箇所を一括で修正してくれる
自分でドキュメントを調べながらデバッグしていた頃と比べると、エラー解決の時間が体感で5分の1くらいになりました。
苦労した点と解決策（重要です！）
1. Claude Codeへの指示の出し方
問題： Windows環境でターミナルに長い指示文を貼り付けると、途中で文字が切れて指示が不完全になる問題が発生しました。
「このコンポーネントを修正して。条件は①②③…」と詳細な指示を出したつもりが、Claude Codeには途中までしか届いていない——ということが何度か起きました。
解決：instruction.md パターンの発見
手順
1. やってほしいことを instruction.md というファイルに書いて保存する
2. ターミナルに「instruction.mdの内容を読んで実行してください」とだけ入力する
3. git push（変更をサーバーに反映する操作）まで instruction.md に書いておく
Claude Codeは**「ファイルを読む」操作が得意**です。複雑な指示ほど、直接入力より「ファイル経由」で渡す方が確実に伝わります。
この発見以降、大きな機能追加は必ずこのパターンを使うようになりました。口頭の指示より、書いた文書の方が伝わる、ということを意識するだけで意図が伝わりやすくなります。
2. PDF出力の空白ページ問題
問題： PDF生成ライブラリ（@react-pdf/renderer）でPDFを生成すると、意図しない空白ページが混入する問題が起きました。
1ページに5本のボトルカードを並べる仕様なのですが、カードの中のテキストが少し長いだけでページが自動で追加されてしまうのです。
原因と解決：
原因：カード内のコンテンツがページの高さ上限を超えていた
解決：
① カードの高さを 144pt（約5cm）に固定
② 各カードに「はみ出た分は切る」設定を追加
③ 5本ずつのグループに手動で分割してページを管理
学び： Claude Codeも万能ではありません。特定のライブラリ特有の動きは、自分でドキュメントを調べる必要があります。Claude Codeは「原因がわかってから修正する」のは得意ですが、「なぜこうなるのかを調査する」部分は人間が担当した方がうまくいきます。
3. AIのモデル名は常に最新を確認する
地味ですが痛かったミスです。Gemini APIのモデル名が古い指定になっていたため、APIが「そんなモデルは存在しない」と404エラーを返し続けました。
❌ 間違い：gemini-2.5-flash-preview-05-20
✅ 正しい：gemini-2.5-flash
Claude Codeが提案するコードには、学習時点の古い情報が含まれることがあります。外部サービスのAPI名・モデル名・バージョンは、必ず公式ドキュメントで最新を確認することをおすすめします。
開発フローでやってよかったこと
HANDOVER.md（引き継ぎメモ）の管理
Claude Codeはチャットを閉じると記憶がリセットされます。新しいチャットを開くたびに「このプロジェクトはこういうものです」と説明し直す必要があります。
これが地味に面倒なので、HANDOVER.md というファイルにプロジェクトの全体情報をまとめました。
HANDOVER.md に書いていること
- アプリの目的・機能一覧
- 使っているサービスとその設定情報
- 各画面の実装状況
- よくあるエラーと解決策
- 今後やりたいこと
新しいチャットの冒頭で「HANDOVER.mdを読んでください」と伝えるだけで、前回の続きからスムーズに再開できます。記憶を持たないAIとうまく付き合うには、人間側がメモをしっかり管理することが大事です。
「何を作るか」を先に詰める
Claude Codeに渡す前に、まず作りたい機能の仕様を言葉で詰めます。
曖昧な指示：「セラー画面を作って」
→ 意図と違うものが出てきて修正に時間がかかる
具体的な指示：「セラー画面はラックをグリッドで表示し、
各スロットはボトルカード（写真・銘柄・品種・価格）か
空きスロット（点線の枠）で表示する。
右下に＋ボタンを配置する。」
→ ほぼ意図どおりのものが出てくる
「何を作るか」を自分の言葉で説明できるくらい整理してから渡すのが、Claude Codeを使いこなすコツだと感じています。これはエンジニアでなくても同じです。
まとめ
2週間(時間としては10時間くらい)で、ログイン・データベース・決済・AI機能・PDF出力まで揃えた本格的なWebアプリを作ることができました。
自分のプログラミングスキルが高いわけではなく、Claude Codeという「プログラマ」が超優秀だったからです。
ただ、Claude Codeは完璧ではありません。ライブラリ固有の挙動、最新APIの仕様、「なぜこのエラーが出るのか」の調査——こういう部分は人間が考える必要があります。
でも、「作りたいものをちゃんと説明できる」なら、実装の大部分はClaude Codeに任せられる時代になっています。 個人開発のハードルは確実に下がっています。
ぜひ触ってみてください 👇
🔗 Cellar Note https://cellar-note-public.vercel.app
技術的な質問や感想はコメントで気軽にどうぞ。