Google Antigravityの「Artifact機能」が凄い！AIに"水槽風ポモドーロタイマー"を作らせてみた

こんにちは。DXソリューションズ営業本部の小原です。
この記事では実際にGoogle Antigravityにツールを作成してもらう検証を行い、その際に出力される「Artifact機能」を紹介します。

はじめに：Google Antigravityって何？

Google Antigravityは、Gemini 3をベースにしたAIエージェント特化型の開発環境（IDE） です。Visual Studio Codeをベースにしつつ、AIが「自律的にコードを書き、テストし、結果を報告する」というまさに次世代の開発体験を提供してくれます。
機能の詳細については別途記事にしておりますので、興味がありましたらこちらをご確認ください。

その中でも特に話題になっているのが、今回紹介する 「Artifact（アーティファクト）機能」 です。

Artifact機能とは？

従来のAIコーディングアシスタントは「コードを生成して終わり」でした。ところがAntigravityのArtifact機能は違います。AIが作業した証拠を成果物として可視化してくれます。

具体的には、以下のようなものが自動で生成されます。
・ 実装計画（Implementation Plan）→ コーディング前に「何をどう作るか」をドキュメント化
・ タスクリスト → 進捗をチェックリストで管理
・ ブラウザ録画・スクリーンショット → 動作確認の証拠をそのまま記録
・ ウォークスルー（Walkthrough）→ 完成後の振り返りレポート

これにより、「AIが勝手に何かやったけど、本当に大丈夫？」という不安が大幅に解消されます。Google ドキュメントのようにコメントでフィードバックを返せるのも嬉しいポイントです。

検証テーマ：「水槽風ポモドーロタイマー」を作ってみた

今回Antigravityに作ってもらったのは、見ていて癒やされる「水槽風ポモドーロタイマー」 です。

ポモドーロ・テクニック（25分作業→5分休憩のサイクル）は多くのエンジニアが活用していると思いますが、せっかくならタイマー画面自体が癒やしになったら最高ですよね？
画面全体を水槽に見立て、魚が泳ぎ、泡がブクブク昇る、そんなツールをAIに作ってもらいました。

実践プロセス

今回、実際にAntigravityに渡した指示はこちらです。

見ていて癒やされる「水槽風ポモドーロタイマー」を作ってください。

【要件】
HTML, CSS, JavaScriptで構成してください
一般的なポモドーロタイマーに必要な機能を備えてください
画面全体を水槽に見立て、時間が経過するにつれて水位が下がっていく、または泡がブクブクとあがる表現をする
作業中（25分）は魚が元気に泳ぎ、休憩中（5分）は魚が寝るなどの変化をつける
スタート/ストップボタンは「エサをやる」「電気を消す」などのメタファーにする

ブラウザで動作確認を行い、録画とスクリーンショットを提出してください。

ポイントは最後の一文で「録画とスクリーンショットを提出してください」と頼んでいる点です。
AntigravityのArtifact機能ではブラウザ録画・スクリーンショットが可能なので、検証として確認します。

Antigravityの挙動

プロンプトを送った瞬間、Antigravityは以下の流れで自律的に動き始めました。

・タスクリスト（task.md）を自動生成
・HTML・CSS・JSの3ファイルを自動生成
・ブラウザを自動で起動（完成したアプリをChromeで開く）
・各ボタンを自動でクリックしてテスト（作業モード、休憩モード、リセットを順番に検証）
・録画とスクリーンショットを自動取得
・ウォークスルーを生成（テスト結果を含むレポートを作成）

自分は一切手を動かしていません。 プロンプトを書いて送っただけです。
検証として指示した、ブラウザを自動で立ち上げてボタンを順番にクリックし、動作の様子を録画してくれた点はAntigravityの強みだと感じました。

ただ今回は簡単な構成だったためか、実装計画（Implementation Plan）のArtifactは出力されませんでした。
その代わり、想定していなかったテスト計画のArtifactが出力されて驚きました。

自動作成されたタスクリスト（task.md）


自動作成されたファイル


自動生成されたテスト計画


出力されたウォークスルー（テスト結果を含むレポート）


自動取得された録画とスクリーンショット

完成したタイマーの見た目と機能

出来上がったアプリは想像以上にクオリティが高かったです。
・画面全体は水槽イメージの青いグラデーション
・CSSアニメーション+JSで動的に泡が生成される
・魚（🐠🐟🐡🦑🐢）がそれぞれ独自の速度で動く
・休憩モードで魚が眠る（底に沈んで「zzz」マークが出る）
・水位が時間とともに下がり、残り時間が視覚的にわかる

ボタンは「エサをやる」や「水換え」といったプロンプトで指示した通りメタファーも組み込んでくれました。
UIもすりガラス風のデザインが採用されていて、モダンな雰囲気に見えます。

完成したタイマーを公開しますので、プロンプト1回でこういったものが自動で作られるのかと確認してみてください！
水槽風ポモドーロタイマー

考察

実際に生成されたコードを確認してみるとファイル構成をひとまとめにせず、index.html、style.css、script.jsの3ファイルに適切に分離していました。
また、魚の挙動をFishクラスで管理していたり、変数をうまく活用していてオブジェクト指向的にきれいにまとまっているように感じました。

気になった点としては、alert()を使った通知はもっとモダンにできるといった点や泡が水位を超えて浮いてしまったり魚のバウンド処理の不自然さなど水位が下がった際の挙動は調整の余地があるように感じました。
とはいえ、プロンプト1回で生成されたコードとしては十分すぎる品質でした。
もし、気になる場合は追加でプロンプトを出していけばどんどん改良してくれます。自分専用のツールを一般のユーザが自分たちで開発していける時代になったと実感しました。 

AWS Kiroとの違いは？

まとめ