GoogleのAntigravityとStitchを利用して、爆速で静的ページを作ってみた！
はじめに
ご覧いただき、ありがとうございます！株式会社divxでエンジニアをしているフーと申します。
この記事では、Googleの製品（AntigravityとStitch）を利用して、爆速で静的なサイトを作った事例をご紹介します。
現在はVS Codeを利用されている方が多いと思いますが、他にも便利なツールが登場しています。そこでこれを機に、GoogleのAntigravityとStitchを利用して、静的サイト構築に挑戦してみました。経験したことを元に記事にしたので、皆さんのお役に立てればいいと思います。
Googleの製品（AntigravityとStitch）を使用するきっかけ
現在、私が携わっている仕事は、主にCDNやFirewallなどのクラウドサービス関連が中心です。
今回これらの製品を使用することになった背景には、業務上の課題がありました。顧客ごとにクラウドサービスの設定が異なるため、それらを検証するには、まず自分用の検証サイトを用意する必要があったのです。
しかし、手元に適切なテスト用サイトを持っていなかったため、これを機にAIの力を借りて静的なサイトを構築することにしました。 あわせて、サイト完成までにどのくらいの時間がかかるのか、その生産性も試してみたいと考えました。
具体的に検証したかった項目は、主に以下の点です。
画像のキャッシュ挙動の確認
Firewallの機能テスト
ツール紹介
本編に入る前に、今回使用した「Antigravity」と「Stitch」について簡単にご紹介します。
Antigravityとは
一言でいうと、「人間が『これ作って』と頼むだけで、AIが自分で考えてアプリを作ってくれる、次世代のプログラミングツール」です。
これまでのAIツールは「言葉の予測入力」のようなサポート役でしたが、Antigravityは「頼れる部下」のように動くのが特徴です。
詳細は以下リンクをご確認ください。
https://antigravity.google/
Stitchとは
Google Labs（Googleの実験的なプロジェクト部門）が開発した、Webサイトやアプリの「デザイン」と「コード」をAIで一瞬にして生成してくれるツールです。
一言でいうと、「言葉や手描きのメモを、実際に動く画面デザインに変えてくれる魔法のようなツール」です。
詳細は以下リンクをご確認ください。
https://developers.googleblog.com/stitch-a-new-way-to-design-uis/
〜フロー〜
1. Stitchでデザイン（画面）を決める
デザインにかかる時間を短縮したかったため、今回はStitchを活用しました。 最初はプロンプトに「IT会社のLanding Pageを作ってください。」と入力。すると、すぐにIT企業らしいデザインが出来上がりました。
生成された内容は英語だったため、続けて日本語にするよう指示を出しました。 その結果、英語版と日本語版の両方が生成されたので、画面上で見比べながら、よりイメージに近いデザインを採用しました。
【補足】既存サイトの修正も可能です
ちなみに、既存サイトのデザインに不満がある場合、そのスクリーンショットを貼り付けて変更したい点を指示すれば、AIが意図を汲んで修正してくれます。
こちらは以前、私が簡易的に作成したものです。 Stitchに「良い感じに直して」と指示を出した結果、以下のように修正されました。
自分のサイトや参考サイトのデザインをブラッシュアップしたい場合、この機能を利用して様々なアイデアをもらうのも良い方法だと思います。
2.Antigravityで微調整
ソースコードはStitchで生成された時点でほぼ完成していましたが、デザイン通りに表示されるかを確認するため、Antigravityを使用して、検証しました。
Antigravityの操作画面イメージは以下の通りです。
AIに「確認のため、ブラウザを開いてください」と指示し、Antigravity内蔵のブラウザを起動させて、以下画像通りにちゃんとデザイン通りに表示されることを確認できました。
また、せっかくメンテナンスページを作成したので、トップページ（ホームページ）からメンテナンスページへ遷移するように指示も出しました。 その後、正しく動作するか検証するため、Antigravity内蔵のブラウザをまた起動させて、確認しました。
実際にトップメニュー（ソリューション、アプローチ、インテリジェンス、採用情報）のいずれかをクリックすると、メンテナンスページへ正しく遷移することを確認できました。
【補足】タスクの順番確認が可能です
また、指示に対してどのようなタスク（処理）が行われたかが、以下の画像のようにタスクとして表示されます。 具体的に何が実行されたかを簡単に追跡できるため、作業内容の整理にも役立ち、非常に便利だと感じました。
結果：実体験としての感想
Googleの製品（AntigravityとStitch）を使ってみて、スムーズかつ爆速（わずか20分以内）で静的なページを作ることができました。
おかげで、見栄えの良いサイトを使って、CDNの挙動（画像のキャッシュなど）やFirewallの機能テストを即座に行うことができました。 顧客の環境に合わせて検証用のサイトを素早く用意し、問題の再現確認がスムーズに行える点が大きなメリットだと感じています。
おわりに
AI時代である現在、便利なツールが次々と登場しています。その中で、どれが最も生産性を高められるのか、実際に手を動かして試してみることが重要だと思います。
AIの進化に不安を感じる方もいるかもしれませんが、変化を恐れずに積極的に挑戦し、様々なAIツールを使いこなして、共に生産性を上げていきましょう！
