投稿日
Antigravityを使ってコーディング（ほぼ）なしで目標設定アプリ作った
今年はWebアプリやWebサイトを10個作ってみるぞー！とやる気に満ちて新年を迎えましたよ。ということで、1つ目のアプリ。月間目標を決めたら、それを4つの段階に細分化して提案してくれるWebサイト『AI Phase Planner』を公開しました！
作ったもの
何かしら「やってみたいな〜」と思っても、何から始めればいいか、どう進めればいいかわからないこともありますよね。時間がかかりすぎてもモチベーションなくなっちゃうし…。ってことで、まずは「一ヶ月でやってみたいこと」を考えてもらい、それを入力すると4段階＝4週間の目標に分けて、一週間ですることを提案してくれるWebサイトです。
英語・日本語に対応してます。言語を切り替えてから目標を入力すると、入力した言語で提案してもらえます。
入力してボタンをクリックすると、4つの段階にわけて計画をたててくれます。現在の状況や目標達成の基準なんかを細かく入力すると、より精度を上げて計画してくれる…のかも？
使ったもの
Geminiは以前から有料プランで利用していますが、上記すべて無料プランが用意されているので、これからやってみようって人はひとまず無料でいけます。
あ、あとグラフィックツールとしてPhotoshopは多少使っていますね！
制作手順
Antigravityの指示出しがメインだったので、あまり制作らしい制作はしていないのですが、一応手順を。
アイデア出し
2026年の抱負ビンゴ作ってみた。1ビンゴはいけそうなのあるな🤗カレンダーのとこ貼っとこ！ pic.twitter.com/ZLh4O9CEvl
— Mana (@chibimana) January 2, 2026
新年の抱負を考えたタイミングで、「やってみたいって思ったものの、何からすればいいんだ？」と疑問に思ったのがきっかけだったので、そのアイデアをベースにGeminiと壁打ち。
複雑な機能だと時間がかかりそうなんで、とにかく機能を最小限に、シンプルにしようと決めていました。
ある程度内容がまとまったら、最近頻繁に利用しているAIエディターのAntigravityに移動。初手の指示をGeminiに聞いて、そのままコピペ＆実装。
土台の完成
コピペで概ね土台が完成しました。Geminiはやっぱりこんな配色なんだなw とふふふってきました。この段階ではあくまで形だけで、入力した内容を元にAIが提案…という機能はまだなし。
UIの変更
フォント変更や配色を変更。親しみやすい感じ、明るくてポジティブな印象にしたかったので、丸っこいフォントや、朝日をイメージした色合いにしました。
アイコンや背景画像も足してみたりしちゃったりして。アイコンはNano Banana製のものをPhotoshopで軽く加工しました。
API取得して実行
Gemini APIの取得もGeminiの指示に従うだけの簡単なお仕事。 .env ファイルにコピペしてなんやかんやですぐ動きました。すごい。
日本語化
ページ右上に言語スイッチャーをつけ、切り替えた言語での入出力をできるように指示。
言語スイッチャーを追加する。言語は英語と日本語。デフォルトでは英語。切り替えボタンは画面右上に配置。言語を切り替えた後は、表示された言語で出力もする。
これもすぐ実装されました。
Vercelで公開
このWebクリエイターボックスもVercelを使っているので、同じアカウントでサクサク設定。APIキーは公開前に、VercelのダッシュボードでEnvironment Variables（環境変数）という項目を開き、 .env ファイルに書いた Key と Value の内容を入力します。
そしてDeployして公開！一日15分ほど時間を作ってちまちま開発を続け、3週間で完成。がっつり時間を取れば一日で完成しますね。
AIを使わなかったところ
ここまでほぼAIでできましたが、逆にAIを使わなかったところは以下の3つ。
UIデザイン
フォントや配色、画像の配置は自分で考えています。「朝日をイメージした配色に変更」と指示しても、どうもGemini調の紫グラデーションを使いたがるんですよねw カラーコードはこちらで考え、Antigravityに渡しています。
そしてもっと楽しい雰囲気にしたくてイラストを使うことに。これもAIによる提案ではありません。使用している画像は手描きタッチにPhotoshopで加工しました。
余計な装飾の除去
リンクじゃないのにホバーで色が変わったり、アニメーションがついたりと、余計なお世話も多々あったので、そのへんのTailwind CSSのクラスを除去。数が少なかったので手作業でしました。こういった作業はTailwind CSSの知識がないと難しかったかも。
モデルのバージョン指定
使用するGemini APIは、やたら「gemini-1.5-flash」を使いたがっていましたが、それが原因でエラー多発。もう古いモデルだったみたいです。現行のモデル名「gemini-3-flash-preview」が正しいはずなのですが、Antigravityから指示される内容のものは数字が違ったり、「preview」とついてなかったり。何度エラーをコピペして修正指示を出しても直らない…。
ってことで、自分の目でコードを読んでみることに。すぐに「あらら、エラーの原因ここじゃん」って気づいて手打ち修正しました。コード読めないとやっぱり開発は難しいのかも…？
作ってみて思ったこと
思いついたことを形にできる！
これまでは何かしらの「こんなサービスあるといいな」と思っても、技術的に自分には不可能だと思っていました。でもAntigravityではそれをすぐに形にできる。すごい！
デザイン力が活かせる！
昨年いくつかの登壇でも話したのですが、AIで作ったサービスってどれも似たようなデザインになってしまうんですよね。デザイナーならそのデザインも自分で調整したり、一から提案もできて、稼働するだけでなく使いやすさ、使った楽しさまで考えたサービスを作れます。
でもやっぱり内容の理解が必要
今何をしているのか、どこをどう変更したら想定通りの実装ができるのかをわかっていないとうまく使いこなせないのかも。エラーが出たときも、古い書き方が原因のエラーの場合、AIでは回答にたどり着かないことも。プログラミングの基礎力、解決策の考え方はやっぱり必要。
簡単なものでも、公開できるまでを考えると意外とすることが多いんですよね。でもいきなりすべての機能を指示するとうまくいかないこともあります。最小単位の制作から、徐々にステップアップさせる形で開発すると、思い描いた形に仕上がりやすいようです。
いやー楽しかったー！もっといろいろ作るぞー！みなさんも「こんなこと挑戦したいな」と思ったら、『AI Phase Planner』で計画をたててみてくださいね！