Day 3 - 12/3
集中力サポートアプリ 5min Focus Picks
JavaScriptTailwindCSS
ClaudeGenSpark
概要
概要
「集中できない…」と感じたときに、今の気分からちょうどいい5分タスクをひとつだけ提示してくれる、集中力サポートアプリです。
主な機能
- 📃 5分タスクリスト: 「メール整理」「机の上を片付ける」「1ページだけ読む」などの5分タスクを管理・検索できます
- 🔮 気分予測: 「眠い」「ソワソワ」「イライラ」などの気分を選ぶと、その気分に合ったタスクをランダムで1つ提案
- 🧮 達成グラフ: 完了したタスクをチェックすると、可愛いドットグラフで今日の達成数を可視化
特徴
- Apple風デザイン: 余白たっぷり、アニメーション豊かなミニマルUI
- 完全オフライン動作: データはブラウザに保存され、サーバー不要
- アクセシビリティ対応: キーボード操作・スクリーンリーダー対応済み
- 日次リセット: 毎日0時に達成数とチェックがリセットされ、新鮮な気持ちでスタート
リンク
制作時間
0.5時間
学んだこと・振り返り
学んだこと
- UIアニメーションの重要性: 予測カードのフェードイン＋スライド、ドットグラフのscaleアニメーションなど、細かなモーションが「使っていて楽しい」体験を生み出すことを実感しました
- 気分とタスクのマッピング: キーワードベースのマッチングというシンプルな仕組みでも、ユーザーに「ちょうどいい提案」を届けられることが分かりました
- localStorage活用: サーバー不要でもタスク管理アプリが成立することを確認。日次リセット機能の実装方法も参考になりました
今後の展開アイデア
- PWA化してスマホのホーム画面から起動できるようにする
- 完了履歴を記録して、週次・月次のサマリーを表示
- 気分タグをユーザーが編集できるカスタマイズ機能
初回プロンプト（計画）
## 制約条件
- **制作時間**: 5分
- **必須要素**: 時間を扱う
- **ストレージ**: LocalStorageのみ
- **制限**: 外部ライブラリ1つまで
## こだわりポイント（特に重視）
- ♿ **アクセシビリティ**: 誰でも使える、ユニバーサルデザイン
- 💡 **革新性**: 新しさ、独創性、ユニークさ
- 🎨 **デザイン・UI/UX**: 見た目の美しさ、使いやすさ、直感的な操作
### 📐 採用デザインガイドライン
**Ant Design**
- **特徴**: Alibaba開発。管理画面・エンタープライズ向け、統一感のあるコンポーネント
- **デザイン要素**: 豊富なコンポーネント、ビジネス向け、React対応
- **参考サイト**: [Ant Design公式](https://ant.design/)、[Ant Design Pro](https://pro.ant.design/)、[Alibaba Cloud](https://www.alibabacloud.com/)
**このガイドラインの雰囲気やデザインパターンを踏襲したWebアプリを提案してください。**
## 選択したキーワード
1. 続かない
2. 整理する
3. 集中できない
## お願い
上記の制約条件と選択したキーワードを考慮して、5分で作れる具体的なWebアプリのアイデアを3つ提案してください。
各アイデアには以下を含めてください：
1. **アプリ名**（キャッチーな名前）
2. **何を解決するアプリか**（1行で）
3. **主な機能**（3つ程度）
4. **なぜこの時間で完成できるか**（簡潔に）
できるだけクリエイティブで、キーワードを意外な形で組み合わせたアイデアを期待しています。
チャレンジ生成ツールで作成した最初の計画です
メインAIツールの評価
Claude
⭐⭐⭐⭐⭐
良かった点
要件を正確に理解し、気分予測アルゴリズムやドットグラフのアニメーションなど、細かい仕様まで一度で実装してくれました。Apple風デザインの解釈も的確で、余白・トランジション・ガラス風エフェクトなど、指示していない部分まで丁寧に作り込んでくれました。
改善してほしい点
特にありませんでした。localStorage対応、アクセシビリティ、エラーハンドリングまで考慮されており、期待以上の完成度でした。
総合コメント
「5分で完成できる」というコンセプト通り、短時間で高品質なアプリを作成できました。気分からタスクを予測する機能は、キーワードマッチングというシンプルな実装ながら実用性が高く、ドットグラフのscaleアニメーションも心地よい体験を生み出しています。コード品質も高く、すぐにでも実用できるレベルです。
公開日: 2025/12/2