【ITニュース解説】ZenFlow — Fully Vibe-Coded by Someone Who Knows Nothing About Web Dev

ZenFlowは、Web開発の知識がほとんどない人物が作成した、ミニマルなデイリープランナーアプリだ。ブラウザとmacOSデスクトップアプリとして動作し、日々のタスク管理や集中を支援する機能を提供する。開発者は、Web開発の経験がないにもかかわらず、独学とAIツールを活用してこのアプリを完成させた。

ZenFlowの主な機能は、今日のタスク、カレンダー、習慣トラッカー、集中モード（ポモドーロタイマー）、ジャーナルの5つのページで構成されている。今日のページでは、その日の予定やタスクを整理し、カレンダーページでは、予定を俯瞰的に確認できる。習慣トラッカーでは、日々のルーチンを記録し、継続状況を把握できる。集中モードでは、ポモドーロテクニックを利用して、タイマーとアンビエントサウンドで集中力を高められる。ジャーナルページでは、日々の思考やアイデアを記録し、後で振り返ることができる。

アンビエントサウンド機能も特徴的だ。雨、森、海、カフェ、ブラウンノイズなどの環境音を選択でき、音量も調整可能だ。これにより、ユーザーはリラックスした環境で作業や計画に取り組むことができる。

デスクトップアプリ版では、Tauriというフレームワークを使用することで、ネイティブ通知やスケジュールされたリマインダー機能が利用可能になる。これにより、タスクや予定を逃すことなく、効率的に時間管理を行うことができる。

データ保存に関しては、ローカルファーストのアプローチを採用している。デスクトップアプリではTauri Storeを使用し、WebアプリではlocalStorageを使用する。これにより、オフライン環境でもデータにアクセスでき、プライバシーも保護される。

ZenFlowのUIデザインは、ミニマルで洗練された印象を与える。Next.js、React、TypeScript、Tailwind CSS、Lucide iconsなどの技術が使用されている。これらの技術は、Web開発の初心者にとっては難しいかもしれないが、開発者は試行錯誤を繰り返しながら、このアプリを完成させた。

開発者は、Web開発の知識がほとんどない状態で、どのようにしてZenFlowを開発したのだろうか。彼は、Next.js、React、Tailwind CSSなどのフレームワークやライブラリを試し、コピー＆ペースト、調整、祈りというプロセスを繰り返しながら、各ページを作成した。アンビエントサウンドは、MP3ファイルをフォルダに配置し、コンテキストを設定することで簡単に実装した。ポモドーロタイマーは、タイマー、通知プラグイン、ベルの音を組み合わせることで実現した。ローカルストレージに関しては、複数のプラグインを試行錯誤し、フォールバックロジックを追加することで、最終的に動作するようにした。

ZenFlowの開発には、AIツールが大きく貢献している。GitHub Copilotは、コードの自動補完を支援し、ChatGPT 5は、アーキテクチャの設計、デバッグ、ドキュメント作成を支援した。Claude 4は、ブレインストーミング、計画立案、コンテンツの作成を支援した。UIデザインは、Google Stitchを使用して検討および改善された。開発者は、これらのAIツールなしでは、ZenFlowは存在しなかっただろうと述べている。

ZenFlowは、Web開発の知識がない人でも、AIツールを活用することで、実用的なアプリを開発できることを示している。このアプリは、日々のタスク管理、集中力向上、習慣形成、思考の整理など、さまざまな目的で利用できる。開発者の経験は、システムエンジニアを目指す初心者にとって、大きな励みになるだろう。