Day 4 - 12/4
FlowSnap - 集中の瞬間を捉える
JavaScriptTailwindCSS
Claude
概要
「集中できた瞬間」をワンタップでスナップし、自分だけの集中タイムラインを作るポジティブ記録ツールです。
解決する課題
- 続かない → 小さな成功を積み上げる仕組み
- 整理する → 時間軸で集中パターンを可視化
- 集中できない → ゴールデンアワー発見で最適時間を把握
主な機能
- 🫧 ワンタップスナップ - 「Snap!」ボタンで現在時刻を即座に記録
- 🏷️ 感情タグ - 🔥集中 / ✨ひらめき / 🎯達成 から選択
- 📅 フロータイムライン - 今日のスナップをタグ別カラーで時系列表示
- 🏆 ゴールデンアワー - 最も集中しやすい時間帯を自動検出
- 🔥 連続記録ストリーク - 継続日数を表示してモチベーションUP
- 🎊 紙吹雪演出 - 保存時のお祝いアニメーション
アクセシビリティ対応
- ARIA属性によるスクリーンリーダー対応
- キーボードナビゲーション
- フォーカス可視化
リンク
制作時間
0.5時間
学んだこと・振り返り
学んだこと
制約が創造性を生む
5分という厳しい制約があったからこそ、本当に必要な機能だけに絞り込めた。「引き算のデザイン」の重要性を実感。
ポジティブな記録の力
「できなかった」を記録するのではなく「できた瞬間」を積み上げる設計にしたことで、使い続けたくなるアプリになった。
小さな演出が体験を変える
紙吹雪アニメーションやストリーク表示など、機能としては小さいが、ユーザー体験を大きく向上させる要素の重要性を学んだ。
初回プロンプト（計画）
## 制約条件
- **制作時間**: 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
⭐⭐⭐⭐⭐
良かった点
アイデア提案から実装まで一気通貫で対応してくれた。3つのキーワードを組み合わせたハイブリッドアイデアの提案が秀逸。5分という制約を意識した現実的な機能選定と、アクセシビリティへの配慮も素晴らしい。
改善してほしい点
特になし。強いて言えば、LocalStorageの制限について最初に説明があるとより親切だった。
総合コメント
5分制作チャレンジに最適なスコープでアイデアを提案し、Ant Design風のUIを短時間で実装できた。改善提案も的確で、紙吹雪やストリーク機能など「あると嬉しい」機能を効率よく追加できた。
公開日: 2025/12/3