Day 21 - 12/21
Brew Bloom - コーヒーで育てる、あなたの木
JavaScriptTailwindCSS
Claude
概要
☕🌳 Brew Bloom
コーヒーを淹れるたびに、あなただけのコーヒーの木が育つアプリ
毎日のコーヒー習慣を「木を育てる」体験に変えるWebアプリです。
主な機能
- 12段階の成長システム - 種まき→発芽→成長→開花→結実まで細かく変化
- 1タップ記録 - 大きなボタンでコーヒーを簡単に記録
- 収穫ループ - 60杯で収穫、何度でも新しい木を育てられる
- 時間帯で変わる背景 - 朝昼夕夜で空の色が自動変化
- プログレスバー - 次の成長段階まであと何杯かが一目瞭然
こだわりポイント
- Material Design 3ベースのモダンUI
- SVGで描画されたコーヒーの木
- LocalStorageでデータ永続化
- インポート/エクスポート機能でバックアップ可能
リンク
制作時間
1時間
学んだこと・振り返り
学んだこと
1. AIはアイデア出しに強い
「植物×コーヒー」というキーワードから3つのアイデアを提案してもらい、その場で比較検討できたのは効率的でした。
2. ビジュアルの品質向上は難しい
SVGで木を描くという選択自体は良かったのですが、「もっとリアルに」「もっとかっこよく」という曖昧な要求に対する改善は何度やっても満足いく結果になりませんでした。
3. 制約を外すと迷う
最初は「JavaScript 100行以内」という制約がありましたが、外したことでかえって方向性が定まりにくくなった部分もありました。
4. シンプルな機能でもUIが命
「コーヒーを記録するだけ」というシンプルな機能だからこそ、UIの美しさや押したくなるボタンのデザインが重要だと改めて感じました。
次回への改善点
- イラストやアイコンは外部素材を活用する
- AIには構造やロジックを任せ、ビジュアルは別のアプローチを検討する
初回プロンプト（計画）
# 25日間AIチャレンジ - Day 14のアイデア相談
## 制約条件
- **制作時間**: 4時間
- **必須要素**: テキスト処理
- **ストレージ**: LocalStorageのみ
- **推奨機能**: インポート機能
- **UI要件**: シンプルなUI
- **制限**: JavaScript 100行以内
## こだわりポイント（特に重視）
- 📱 **レスポンシブ**: PC・タブレット・スマホ対応
- 💡 **革新性**: 新しさ、独創性、ユニークさ
- 🎨 **デザイン・UI/UX**: 見た目の美しさ、使いやすさ、直感的な操作
### 📐 採用デザインガイドライン
**Material Design**
- **特徴**: Google開発。カードベース、大胆な色使い、影とアニメーションが特徴的
- **デザイン要素**: 明確な階層構造、リアルな動き、カラフルで大胆
- **参考サイト**: [Material Design公式](https://m3.material.io/)、[Gmail](https://mail.google.com/)、[Google Drive](https://drive.google.com/)
**このガイドラインの雰囲気やデザインパターンを踏襲したWebアプリを提案してください。**
## 選択したキーワード
1. 植物
2. コーヒー
## お願い
上記の制約条件と選択したキーワードを考慮して、4時間で作れる具体的なWebアプリのアイデアを3つ提案してください。
各アイデアには以下を含めてください：
1. **アプリ名**（キャッチーな名前）
2. **何を解決するアプリか**（1行で）
3. **主な機能**（3つ程度）
4. **なぜこの時間で完成できるか**（簡潔に）
できるだけクリエイティブで、キーワードを意外な形で組み合わせたアイデアを期待しています。
チャレンジ生成ツールで作成した最初の計画です
メインAIツールの評価
Claude
⭐⭐⭐
良かった点
・アイデア出しの段階では複数の案を比較しやすく提示してくれた ・12段階の成長システムなど、細かい仕様の詰めを一緒に進められた ・Material Designに沿ったUI設計の提案が的確だった ・コードの生成速度が速く、全体の構造を素早く作れた
改善してほしい点
・SVGで木をリアルに描画する部分のクオリティに限界があった ・「幹が見えない」などのビジュアルバグの修正に何度も手こずった ・デザインの細かいニュアンス（もっとかっこよく、など）の反映が難しい ・キャッシュの問題など、デバッグ環境に起因する問題の切り分けが曖昧
総合コメント
企画・設計フェーズでは非常に頼りになるパートナーでした。アイデアの壁打ちや仕様の整理はスムーズに進みました。一方で、ビジュアルデザイン（特にSVGイラスト）の品質向上には限界を感じました。「業界最高のUI/UX」を目指すには、AIだけでなく専門のデザイナーの力も必要だと実感しました。
公開日: 2025/12/20