2026年2月、デザイナーのViktor Oddy（@viktoroddy）がXに投稿した一つのツイートが大きな反響を呼んだ。「AntiGravity × Gemini 3.1 Proはランディングページのデザインが本当にすごい」という一言とともに、彼が実際に使ったプロンプトを全文公開したのだ。そのツイートは1.5万回以上表示され、472件のブックマークを集めた。
なぜそれほど注目されたのか。答えは単純で、そのプロンプトを使えば、デザインの専門知識もコーディングの経験もない人でも、プロのデザイナーが作ったような洗練されたウェブサイトのヒーローセクションを数分で生成できるからだ。
この記事では、Viktor Oddyのプロンプトが何を意味しているのかを一つひとつ丁寧に解説しながら、Google AntiGravityの基本的な使い方から実際にランディングページを作るまでの流れを初心者向けに説明する。
Google AntiGravityとは何か
まず、Google AntiGravityについて知っておく必要がある。
Google AntiGravityは、Googleが開発した「エージェントファースト」の開発プラットフォームだ。簡単に言うと、「AIが自分の代わりにコードを書いてくれるIDE（統合開発環境）」である。従来のコーディングアシスタントが「コードの一行を補完する」程度の補助にとどまっていたのに対し、AntiGravityは「ウェブサイト全体を設計・構築する」レベルの作業を自律的にこなす。
重要なのは、個人用Gmailアカウントがあれば無料で使えるという点だ。Mac、Windows、Linuxに対応しており、特別なプログラミング知識がなくても、日本語や英語で「こんなサイトを作りたい」と伝えるだけで、AIが実際に動くウェブページを生成してくれる。
2026年2月20日には、最新モデルであるGemini 3.1 ProがAntiGravityに統合された。このモデルは複雑な問題解決に特化した高度な推論能力を持ち、特にランディングページのような視覚的に複雑なUIの生成において、以前のモデルを大きく上回る品質を発揮する。Viktor Oddyのツイートはまさにこのタイミングで投稿されたものだ。
まずAntiGravityをインストールする
記事の内容を実際に試すには、まずAntiGravityをインストールする必要がある。手順は以下のとおりだ。
ステップ1：ダウンロード
antigravity.google にアクセスし、「Download」ボタンをクリックする。MacはApple Silicon版とIntel版の2種類があるので、自分のMacの種類に合ったものを選ぶ。Windowsの場合は自動的に適切なバージョンが選択される。
ステップ2：インストールと初回起動
ダウンロードしたインストーラーを起動し、画面の指示に従ってインストールを完了させる。起動すると、セットアップ画面が表示される。
ステップ3：Googleアカウントでログイン
個人用のGmailアカウントでログインする。ここで注意したいのは、個人用Gmailアカウントが必要という点だ。Google WorkspaceなどのビジネスアカウントではなくGmail（@gmail.com）のアドレスを使う。
ステップ4：エージェントの設定
初回起動時に、AIエージェントの自律性レベルを設定する画面が表示される。初心者には「レビュー主導の開発（Review-Driven Development）」モードがおすすめだ。このモードでは、AIが重要な操作を行う前に必ず確認を求めてくるため、何が起きているかを把握しながら作業を進められる。
エージェントモードの選び方：
- セキュアモード ― AIの動作を最も制限する。セキュリティを最優先したい人向け
- レビュー主導（おすすめ） ― 重要操作前に確認を求める。初心者・学習中の人向け
- フルオート ― AIが全て自律的に実行。経験者・スピード重視の人向け
Viktor Oddyのプロンプトを読み解く
ここからが本題だ。Viktor Oddyが公開したプロンプトは、一見すると英語の技術用語が並んでいて難しそうに見える。しかし、構造を理解すれば、誰でも同じように使えるようになる。
プロンプトは大きく6つのセクションに分かれている。それぞれが「ウェブページのどの部分をどう作るか」を指定している。
セクション1：全体レイアウト（Overall Layout）
Full-width section with background: #000000 (pure black)
Overflow hidden
Background video playing behind all contentこれは「ページ全体の基本設定」だ。背景色を純粋な黒（#000000）に設定し、背景に動画を流すよう指示している。Overflow hiddenは「はみ出した部分を隠す」という意味で、デザインが崩れないようにするための設定だ。
初心者向けポイント： #000000のような「#」で始まる6桁の文字列は「カラーコード」と呼ばれる色の指定方法だ。黒は#000000、白は#ffffff、赤は#ff0000という具合に、どんな色でも6桁で表現できる。
セクション2：背景動画（Background Video）
Autoplay, loop, muted, playsInline
Scaled to 120% of the container
Horizontally centered, focal point anchored to the bottom背景動画の細かい動作を指定している。「自動再生・ループ・ミュート・インライン再生」という4つの設定は、現代のウェブブラウザでスムーズに動画を表示するための標準的な組み合わせだ。120%に拡大してセンタリングすることで、動画が画面全体を美しく覆うようになる。
セクション3：ぼかし背景要素（Blurred Background Element）
Size: 801px wide × 384px tall, fully rounded (pill shape)
Color: pure black #000000
Blur: 77.5pxこれは少し高度な概念だ。テキストの後ろに「ぼかした黒いカプセル形の要素」を置くことで、背景動画の上でもテキストが読みやすくなる。デザインの世界では「可読性の確保」と呼ばれるテクニックだ。
z-indexについて： プロンプトにはz-indexという言葉が何度か登場する。これは「レイヤーの重なり順」を指定するものだ。数字が大きいほど手前に表示される。
レイヤーの重なり順（z-index）：
- 背景動画（z-index: 0） ― 一番奥に配置される
- ぼかし要素（z-index: 1） ― 動画の上に重なる
- テキスト・UI（z-index: 2） ― 一番手前に表示される
セクション4：ナビゲーションバー（Navbar）
Max width: 1440px, centered horizontally
Horizontal padding: 120px, vertical padding: 16px, height: 102px
Left side: Logo + nav links with 80px gap
Right side: Two buttons with 12px gapページ上部のナビゲーションバーの設計だ。最大幅を1440pxに設定することで、大きなモニターでも横に広がりすぎないようにしている。左側にロゴとナビリンク、右側にボタンを配置するという典型的なSaaSサービスのレイアウトだ。
フォントには「Manrope」を指定している。これはGoogle Fontsで無料で使えるモダンなサンセリフフォントで、テック系のウェブサイトで広く使われている。
セクション5：ヒーローコンテンツ（Hero Content）
Line 1: "Automate repetitive." — font Inter, medium weight, 76px
Line 2: "Focus on growth." — font Instrument Serif, italic, 76px
Subtitle: 18px, color #f6f7f9, opacity 90%ページの中心に表示されるメインコンテンツだ。注目すべきは、1行目と2行目で異なるフォントを使っている点だ。1行目は「Inter」というサンセリフフォント（角ばった現代的な書体）、2行目は「Instrument Serif」というセリフフォント（細い飾りのついた書体）を使うことで、コントラストが生まれ、視覚的なリズムが出る。
これはプロのデザイナーがよく使うテクニックで、「タイポグラフィのコントラスト」と呼ばれる。
セクション6：ダッシュボード画像（Dashboard Image）
Outer container: 1163px wide, 24px border-radius
backdrop-blur 10px, background rgba(255,255,255,0.05)ページ下部に表示される製品のスクリーンショットやダッシュボード画像の枠組みだ。rgba(255,255,255,0.05)は「ほぼ透明な白」を意味し、backdrop-blurと組み合わせることで「グラスモーフィズム」と呼ばれる磨りガラスのような効果を生み出す。2024〜2026年のウェブデザインで非常に人気のあるスタイルだ。
実際にAntiGravityで試してみる
プロンプトの意味が理解できたところで、実際に使ってみよう。
ステップ1：新しいプロジェクトを作成する
AntiGravityを起動したら、新しいフォルダを作成してプロジェクトを開く。エディタ画面が表示されたら、右側のチャット欄（エージェントパネル）にプロンプトを入力する。
ステップ2：プロンプトを自分用にカスタマイズする
Viktor Oddyのプロンプトをそのまま使うのも良いが、自分のプロジェクトに合わせて変更するとより効果的だ。変更すべき主なポイントは以下のとおりだ。
カスタマイズできる7つのポイント：
- ロゴ名 ― 元は「LOGOIPSUM」→ 自分のブランド名に変更
- ナビリンク ― 元は「Home / Services / Reviews / Contact us」→ 自分のページ構成に合わせる
- 見出し1行目 ― 元は「Automate repetitive.」→ 自分のキャッチコピーに変更
- 見出し2行目 ― 元は「Focus on growth.」→ 自分のサブキャッチに変更
- サブタイトル ― 元はAIプラットフォームの説明文 → 自分のサービス説明に変更
- CTAボタン ― 元は「Get Started Free / Watch 2min Demo」→ 自分のアクションに変更
- メインカラー ― 元は #7b39fc（紫）→ 自分のブランドカラーに変更
ステップ3：Gemini 3.1 Proを選択する
エージェントパネルの上部にモデル選択メニューがある。ここで「Gemini 3.1 Pro」を選択することが重要だ。Viktor Oddyが「めちゃくちゃ良い」と言ったのはこのモデルを使ったときの話なので、他のモデルでは結果が異なる可能性がある。
ステップ4：プロンプトを送信して待つ
プロンプトを入力したら送信する。AntiGravityのエージェントが自動的にHTMLとCSSを生成し、ブラウザプレビューで結果を表示してくれる。通常1〜3分程度で完成する。
ステップ5：修正を指示する
生成されたデザインが気に入らない部分があれば、チャットで追加指示を出せる。たとえば「ボタンの色をもう少し明るくして」「見出しのフォントサイズを少し小さくして」といった自然な言葉で修正を依頼できる。
プロンプトをさらに活用するコツ
Viktor Oddyのプロンプトから学べる最も重要なことは、「具体的であればあるほど良い結果が出る」という点だ。
多くの初心者は「かっこいいランディングページを作って」といった漠然としたプロンプトを使いがちだ。しかし、AIは具体的な数値や色コード、フォント名などを指定するほど、意図に近い結果を生成できる。
以下は、漠然としたプロンプトと具体的なプロンプトの違いだ。
漠然としたプロンプト vs 具体的なプロンプト：
- 背景色 ― 「暗い背景にして」→
background: #0a0a0a - フォント ― 「モダンなフォントで」→
font-family: Inter, 700, 72px - ボタン ― 「目立つボタンを作って」→
background: #7b39fc, padding: 24px/14px, border-radius: 10px - レイアウト ― 「中央揃えで」→
flex column, centered, max-width 871px, margin-top 162px
最初は難しく感じるかもしれないが、Viktor Oddyのプロンプトをテンプレートとして使い、数値や色だけを変えていくところから始めると良い。慣れてきたら、少しずつ自分のアイデアを加えていけばいい。
まとめ
Google AntiGravity × Gemini 3.1 Proの組み合わせは、ウェブデザインの民主化を大きく前進させた。Viktor Oddyが公開したプロンプトは、その可能性を示す一つの事例に過ぎない。
重要なのは、プロンプトの「書き方」よりも「考え方」だ。ページを構成する要素（レイアウト、動画、テキスト、ボタン）を一つひとつ分解し、それぞれに具体的な仕様を与えていく。この思考プロセスは、AIを使ったデザインだけでなく、あらゆるクリエイティブな作業に応用できる。
AntiGravityは現在も急速に進化しており、今後さらに使いやすくなっていくことが予想される。今のうちに基本的な使い方を身につけておくことは、デザインやウェブ制作に関わるすべての人にとって大きなアドバンテージになるだろう。
