非エンジニアがGoogle Antigravity無料枠で一日一言日記アプリ作ってみた
はじめに
三日坊主な自分が、興味はあるけどできないことーー日記。
自分を振り返る、モチベーションを上げる、気持ちを整理する、そのために日記は有効だが、なんせ続かない。
逃げ場がなければ続くだろうと買った装丁の美しいノートはインテリアとして横たわっている。達成感が無いのだ。
いや続かないくせに一丁前に達成感だけ求めるなと言われればぐうの音も出ないが、やはり「今日ちょっと進んだかも？」が可視化されて欲しいのである。
というわけで、そろそろ自分と向き合った方がいい自分自身を助けるためにも、なんとか続きそうな日記アプリを作ってみよう。
Geminiで定義書を作らせる
私は、何事においても小さな成功体験の積み重ねが重要だと考えている。
そこで、ほんの一言でも残せばええやん、というゆるいコンセプトのアプリを作りたい。
ここに、モチベーションを上げるために「終わりが見える」「成果が可視化される」という要素を追加してみよう。
例えば10日間、1ヶ月、1年・・・と期間を好きな長さで区切れるようにして、日記を更新した分だけ枯れ木に花が咲いていく、みたいな。
そんなわけで、こんなのあったらいいのにな〜の諸々をGeminiくんに伝えて、バイブコーディング用に定義書を作ってとお願いしてみる。
投げたプロンプト
vibe coding のために機能定義書を作成する必要があります。私は非エンジニアのため、開発に際し必要なドキュメントが他にあれば教えてください。
アプリケーション：一日ひとこと日記
機能概要：一日一言ずつの簡易的な日記アプリで、一定期間を定め、その間に更新した分だけ指定したキャラクターが成長するようにします（ex.木や花、動物など）
機能詳細：
・ユーザーは、日記の設定として一定の期間を設定します。1週間、1ヶ月、1年、もしくはフリー（10日間、など）。
・ユーザーは、日記の設定時に成長させたいキャタクターを選びます。
・ユーザーのトップページには、ユーザーが設定した日記タイトルと、当日の一言日記をつけるフォーム、キャラクターを選択した場合はそのキャラクターとカレンダー、選択しなかった場合はカレンダーのみが表示されます。
・ユーザーは、カレンダーから任意の日付を選んで過去・未来日の日記を編集することができます。
・ユーザーは、記入済みの日記を編集することができます。
・日記の最大記入文字数は100文字です。
・ユーザーが設定した日記期間に対する日記の更新度合いによって、ユーザーがはじめに選択したキャラクターが成長します。例えば10日間日記で桜の木を選んだ場合、初めは枝には何もついていない状態から始まり、7日間更新できた場合は7割程度、10日間全て更新した場合は満開の桜になります。
追加で言語化できなかった脳内イメージをMacのフリーボードで雑にメモしたものを投げ、
UIの要望を伝えるやり取りをした結果がこちら。
アプリケーション仕様書として、1.コンセプト、2.ユーザー体験（UX）、3.機能要件詳細、4.画面構成（UI定義）、5.データモデル定義（内部構造）をまとめて出力してくれた。
Google Antigravityに投げてみる
Google Antigravityの導入はこちらの動画を参考にさせていただいた。
この画面で先ほど出力してもらったアプリケーション定義書とUI雑メモを投げて、「Webアプリケーションを以下の定義書に従って作成してください。」とだけ指示。
結果
その結果出来上がったのがこちら。
なんかそれっぽい。
キャラクターが表示されるエリア、カレンダー、日記入力フォームが用意されている。
日記の更新はもちろん、カレンダー上で更新日にはマークが付くようにしてくれているし、更新した分だけキャラクターの周りに花が咲く。かわいい。
ただしこのキャラクターについては細かい指示ができていないので全く思い描いていたのとは違う。誰だお前は。かわいいけど。
また、提示した定義書に対する漏れがいくつかある。
過去・未来日日記の閲覧や編集ができない。
日記の期間については、設定自体はできるが実際に日記を触るとその期間外まで編集できてしまう。このままでは、ゴールと成果の見える化がイマイチ達成できない。
ちなみに、初期設定画面で違うキャラクターを選んでも同じキャラクターが出てきた。うーん。
定義した中でできたこと・できなかったことをまとめるとこんな感じ。
| 機能 | 結果 | 備考 |
|---|---|---|
| 日記入力機能 | ○ | ちゃんと動いた |
| カレンダーマーク | ○ | いい感じ |
| キャラクター | △ | 更新に応じて変化はするけど想像通りではない |
| 期間設定 | × | 設定の画面はあるが反映されない |
| 過去・未来日の編集 | × | できていない |
半々である。要改良。作ってから、削除機能や進捗の見える化などこういう機能もあった方が良さそうだなと思い始めた。
振り返り
良くも悪くも一発で全部作れてしまった。テコ入れするタイミングが無かったので、いきなり完成形を見せられている。
ゼロからアイデアも補完しながらやってほしい時はこれでもいいけど、自分の頭の中にやりたいことがある時は困る。
ただこれはAntigravityに慣れていないだけなので、指示出しの仕方やテコ入れに慣れれば大した問題ではなさそう。定義書の指示をもっと細かく言語化すべきだったかもしれない。
ただし、今回定義書を投げて出力するまでかなり時間がかかっている。いくつかモデルを試したが、フリーズしてしまうので最終的にGemini 3 Flash の Fastモードを利用した。無課金の限界である。
このモデルと重さでやり取りを続けて修正するのは現実的ではないと判断し、一旦ここは撤退。いつか課金した時に真の実力を見せてくれ。
次はClaude Codeに手を出してみる
一発で全部作れちゃうのは便利だけど、自分の頭の中のイメージを形にするには、やっぱり何回か「ここ変えて！」って会話が必要なんだなと再確認。
会話しながら少しずつ育てていく方が、少なくとも自分には合ってそう。
次は同じ定義書を元にClaude codeやGeminiの力を借りながら、自分の思い描いている通りのものをVSCodeで作れるかトライしたいと思います。では。
Discussion