メインコンテンツへスキップ
プロジェクトリサーチ 14分で読める

【実践編②】自然言語だけで6体のエージェントがポートフォリオサイトを制作! Google Antigravityで始めるAIエージェント開発入門 第3回 

PlusWeb3 編集部
PlusWeb3 編集部 Web3・AI専門メディア

AIが(1体ではなく)複数になっても、人間の役割は変わらないのか──。前回の最後にそう問いかけた。

前回記事:

RELATED ARTICLE【実践編①】コードを一行も書かずにToDo管理アプリを作る Google Antigravityで始めるAIエージェント開発入門 第2回 プログラミング知識がなくても、AntigravityでToDo管理アプリは本当に…Read

結論を先に述べると、人間の役割は少し変わった。タスクを「どう切り分けるか」を設計する手間が、前回(第2回)より 増えた。とはいえ、その下準備さえ終えれば、5ページのポートフォリオサイトは約20分で形になる。送信したプロンプトは6回、修正コメントは0件。書いたコードは一行もない。

ひとつ意外だったのは、5体のAIがそれぞれ独立して作業したにもかかわらず、ヘッダーや配色、フォント、余白といったデザインの整合性が、おおむね保たれていたことだ。「並列で頼むと統合作業が大変になるのではないか」という事前の予想は、今回はあまり当てはまらなかった。

なお、本記事の作業はGoogleが新しく公開したAntigravity 2.0で行った。第2回まで使っていたAntigravity IDEからManager Viewが削除され、複数エージェントの並列管理機能がこの新アプリに移行したためだ。詳しい経緯は後述する。

土台作りの1体を含む計6体のAIに何をどう頼んだのか、順に見ていこう。

今回のゴール:架空デザイナーのポートフォリオサイトを並列で作る

題材として選んだのは、フリーランスのWebデザイナー「佐藤美咲」という架空の人物のポートフォリオサイトだ。誰もがイメージしやすい題材であり、5ページ(Top/About/Works/Blog/Contact)から成る構成は、複数のAIにタスクを分担させる検証として最適なボリュームである。

今回の制約は、第2回と同じだ。自然言語の指示だけで作ること、そしてコードは一切書かないこと。違いは、AIが1体から6体に増えることだけだ。

サイトのコンセプトは佐藤美咲のキャラクター設定書を起点に組み立てた。その主なプロフィールは次の通りである。

  • 名前:佐藤 美咲(さとう みさき)/32歳
  • 職業:フリーランスのWebデザイナー兼グラフィックデザイナー
  • 専門:コーポレートサイトのデザイン、書籍装丁、ブランディング
  • 雰囲気:洗練、ミニマル、温かみがあるが甘くない、知的な印象
  • 趣味:ジャズ喫茶めぐり、活版印刷ワークショップ

このペルソナを6体のAIに共有したうえで、ページ分担を組み立てていく。


【急展開】Manager Viewが消え、Antigravity 2.0へ

本題に入る前に、第2回からの状況変化に触れておく。

第2回の予告では「次回はManager Viewの出番である」と書いた。複数のAIエージェントを並列で動かす司令塔として、Antigravity IDEに搭載されていた機能だ。

しかし、その後Google I/O 2026でAntigravity 2.0が発表され、IDEのアップデートによりManager View機能はIDEから削除された。並列実行を担う機能は、すべて新しい独立アプリ「Antigravity 2.0」に移行した形だ。Antigravity IDEは引き続き利用できるが、複数エージェントを束ねる司令塔としての役割は終えた格好になる。筆者の手元のIDEからも、Manager Viewは確かに姿を消していた。

本記事は、この移行先となるAntigravity 2.0を使って、第2回の予告通り並列でポートフォリオサイトを構築するものだ。タイミング上、Antigravity 2.0の初実装レポートを兼ねた回となる。


Antigravity 2.0と「6つの会話」

Antigravity 2.0を起動すると、第2回までのIDEとはまったく異なる画面が現れる。

左サイドバーには「+ New Conversation」「Conversation History」「Scheduled Tasks」「Projects」が並ぶ。右上には「Open IDE」のボタン。エディタ画面(ファイルツリーやコードエディタ)はもう存在せず、エージェントとの対話に特化したインターフェースになっている。

最大の変化は、作業単位が「プロジェクト」と「会話」で構成されることだ。

  • プロジェクト:作業フォルダに紐づくワークスペース
  • 会話:プロジェクト配下で個別のエージェントタスクを進めるセッション

1つのプロジェクトには複数の会話を持たせられる。この「複数会話 = 複数の並列エージェント」という構造こそ、第2回までのIDE Manager Viewが担っていた役割の後継である。

筆者は「Portfolio」という名前のプロジェクトを作成し、ここに6つの会話を立てる設計にした。

会話担当
1体目サイト全体の土台(style.css、共通HTML、README.mdの作成)
2体目トップページ(index.html)
3体目About(about.html)
4体目Works(works.html)
5体目Blog(blog.html)
6体目Contact(contact.html)

ポイントは、1体目だけは先に単独で実行すること。残り5体は、1体目が作った共通CSSやヘッダーを参照する前提なので、土台が整ってから並列起動する形だ。

なお、今回はモデルにGemini 3.1 Pro(High)を使用した。Antigravity 2.0のデフォルトはGemini 3.5 Flashだが、第2回との連続性を持たせるためあえて変更している。


5体のAIが同時に動く

土台担当の1体目から始めよう。Portfolioプロジェクトの「+ New Conversation」をクリックし、用意しておいたプロンプトを貼り付けて送信する。

送信した瞬間、画面に思考プロセスが流れ始める。「Prioritizing Tool Usage」「Establishing Style Foundation」「Establishing Color Conventions」と、エージェントの内部議論が見出し付きで可視化されていく。

1分ほどで土台担当の作業が終わった。生成されたファイルは4つ──style.css、common-header.html、common-footer.html、README.md。デザインの共通ルールとなる「CSS変数」には深いオフホワイトの背景色とテラコッタのアクセントカラーが定義され、フォントは本文に Inter と Noto Sans JP、見出しに Playfair Display と Noto Serif JP が選ばれていた。筆者が「黒・白・グレースケール+くすみ系オレンジ」と指示しただけで、ここまで具体的な選定が出てきている。

土台ができたので、ここから5体の並列起動に移る。

「+ New Conversation」をクリックして、プロンプト2(トップページ担当)を貼り付け、送信。即座にもう一度「+ New Conversation」をクリックして、プロンプト3(About担当)を貼り付け、送信。前のエージェントの完了を待つ必要はない。残るプロンプト4~6(Works、Blog、Contact)も続けざまに投入する。

数十秒のあいだに、左サイドバーにはPortfolio配下に6つの会話が並んだ。

これがAntigravity 2.0における並列実行の絵だ。Manager Viewのようなダッシュボードは存在しないが、左サイドバーの会話リストがそのまま並列タスクの一覧として機能している

各会話を切り替えると、それぞれのエージェントが独立に動作している様子が見える。ある会話は「Exploring 1 folder」のフェーズに、別の会話は既にHTMLの構築に入っている──そんな状況が同時進行する。

完了する順番は、ページの複雑さで決まった。最も早く完了したのは56秒のAbout担当。最も時間がかかったのは1分のWorks担当だった。Worksは6〜9点のダミー実績に無料の写真素材サイト「Unsplash」の画像を組み込み、絞り込みフィルター用のJavaScriptを書き、さらにstyle.cssにギャラリー専用のCSSクラスを追記するところまでこなしていた(後述の数値表でWorksだけ「2 files changed」となっているのはそのためだ)。

すべてのエージェントが完了するまでにかかった時間は、(土台を除く)5体が並列で動いた約1分。土台担当の1分と合わせても、全体の作業時間は約2分に収まった。


整合性は、ほぼ崩れなかった

ここからは、生成されたサイトを実際に確認していく。

エクスプローラーでPortfolioフォルダを開くと、9つのファイルが揃っていた。

index.html をブラウザで開く。

オフホワイトの背景に、「Refined Minimalism with a Warm Touch」という英語のキャッチフレーズが大きなセリフ体で配置されている。佐藤美咲の人物像である「洗練、ミニマル、温かみ」をそのまま英訳した言葉だ。指示書に「ヒーローセクション」とだけ書いたところから、こちらのコンセプトにこれほど素直に合致する文言を出してきている。

次に、ページ上部のグローバルナビゲーションをクリックし、他のページに遷移してみる。

ここで気づく。5つのページが、同じデザイナーが手がけたものに近い質感で揃っている

  • ヘッダーの「MISAKI SATO」ロゴと5項目のグローバルナビゲーションは全ページでデザインが一貫
  • フォントは見出しのセリフ体(Playfair Display)、本文のサンセリフ体(Inter+Noto Sans JP)で統一
  • テラコッタのアクセントカラーが、各ページの差し色として一貫して使われている
    • トップページの「01・02・03」の数字
    • Aboutページの「ABOUT」「EXPERTISE」のセクション見出し
    • Worksページの「WORKS」エブロウとカテゴリラベル
    • Blogページの「DESIGN」「DIARY」「BRANDING」のタグ
    • Contactページの「CONTACT」エブロウ
  • 各ページの上下余白、コンテンツ幅、フォントサイズの階層も揃っている

5体のAIがそれぞれ独立して作業したことを思い出してほしい。彼らは互いの作業状況を直接知らないまま、1体目が先行して作成したstyle.css と README.md だけを共有資料として参照していた。それでも、ここまで足並みが揃った。

念のためレスポンシブ対応も確認した。ブラウザ幅を狭めても、各ページのレイアウトはきれいにモバイル表示に切り替わる。表示が崩れたページは見つからなかった。

事前に想定していた「並列で頼むと統合作業が大変になる」というシナリオは、今回の範囲では起きなかった。「土台を先に1体に作らせ、残りを並列に走らせる」というシンプルな段取りで、整合性のとれた成果物が出てきた格好だ。

ひとつだけ、Blogページの記事タイトルが趣深かった。

「余白がもたらす『間』のデザイン考」
「活版印刷ワークショップでの気付き」
「コーポレートアイデンティティと一貫性」

ペルソナ設定書に書いた「活版印刷ワークショップ」が、そのまま記事のテーマに織り込まれている。指示書のどこにも「このような記事を書くように」とは指定していない。


数値で振り返る

ここまでの作業を数値で整理しておく。

エージェント担当所要時間ファイル数追加行数
1体目土台(CSS/共通HTML/README)1m4+360
2体目トップページ1m1+316
3体目Aboutページ56s1+238
4体目Worksページ1m2+279
5体目Blogページ1m1+231
6体目Contactページ56s1+252
合計約6分(計算上)9ファイル+1,676行
  • 送信したプロンプト数:6回
  • 修正コメント:0件
  • 全体の作業時間:約20分(プロンプトを書く時間、エージェントの並走時間を含む)
  • 使用したAIモデル:Gemini 3.1 Pro(High)

逐次実行で計算上6分を要する処理を、土台フェーズ1分+並列フェーズ1分の計2分のエージェント計算時間に収めた格好だ。第2回の単一エージェントToDoアプリ(約15分/3ファイル/約400行)と比較すると、作業規模は3〜4倍、所要時間は同等ということになる。


IDE時代と比べて

第2回までと変わった点を簡単に整理しておく。

  • PlanningモードとFastモードの区別がなくなった:2.0ではモードを意識せず、エージェントが状況に応じて自動判断する仕様に変わった
  • Implementation Plan(実装計画書)が出てこない:第2回では計画書を提示してから実装に進む流れだったが、2.0は計画書ステップを挟まずに「考えて作る」を一気通貫で行う
  • Thinkingプロセスがリアルタイム可視化:「Prioritizing Tool Usage」のような見出し付きで、エージェントの内部議論が読める
  • 会話タイトルが自動命名される:「Building Misaki Sato Portfolio」のように、文脈を読んで会話の名前を自動でつける
  • Scheduled Tasks:本記事では使わなかったが、エージェントをcronで定期実行できる機能が追加されている

ファイルツリーやエクスプローラーは2.0に存在しないため、生成されたファイルを直接編集したいときは右上の「Open IDE」からAntigravity IDEを呼び出す形になる。コーディング作業=IDE、エージェント運用=2.0という棲み分けが、今後の標準形になりそうだ。


困った点も

今回の確認で気になった点を挙げておく。

一つ目 は、Manager Viewの突然の削除そのものだ。第2回時点で「次回はManager Viewの出番」と読者に予告した直後の機能削除は、執筆者としては対応を迫られた格好になる。Antigravityのようなプレビュー段階のツールを記事化するときは、機能仕様が短期間で変わる可能性を念頭に置いたほうがよい。

二つ目 は、Antigravity 2.0でフォルダを開いたときにプロジェクトが二重登録される現象に遭遇したことだ。同じPortfolioフォルダが左サイドバーに2行表示される状態になり、片方を削除する必要があった。リリース直後の挙動として、似たような小さなつまずきは今後も出てくると思われる。

三つ目 は、ファイルツリーが見えないことの作業感覚の違いだ。第2回までは生成されたファイルがエディタ上にリアルタイムで現れていったが、2.0ではエージェントが何をどこに作ったかを把握するには会話のサマリー文を読む必要がある。OSのエクスプローラーや「Open IDE」を併用するのが現実的だ。

それでも、複数AIを並列で動かすこと自体は想定よりもスムーズに進んだ。


次回予告

第3回では、Antigravity 2.0を使って5体のAIを並列に動かし、ポートフォリオサイトを構築する過程を見てきた。

次回は連載最終回。これまでの3回で見えたAntigravityの実力と限界を改めて整理する。何ができて、何が苦手で、他のAIコーディングツール(Cursor、Claude Codeなど)と比べてどう位置づけられるのか。コードが書けない読者がAntigravityを実用に組み込むなら、どう使うのが現実的か──シリーズを通じての答え合わせをする回となる。

Share this article コピーしました
WRITTEN BY

PlusWeb3 編集部

Web3・AI専門メディア

PlusWeb3 編集部は、ブロックチェーン・Web3・AIの最新動向をわかりやすくお届けする専門メディアチームです。業界経験豊富な編集者とリサーチャーが、信頼性の高い情報を厳選してお届けします。

コピーしました

Web3・AI・ディープテック領域のキャリアに興味がありますか?

業界特化メディアを運営する専門エージェントが、企業のカルチャー・技術スタック・選考ポイントまで踏まえてキャリアをご提案します。相談は完全無料です。