【完全再現】Google WhiskとAIエディタで「Apple風サイト」をCSSゼロで作る方法

1. 「Antigravity」のような未来は、今すぐ実装できる

こんにちは、AIアーキテクトのOKIHIROです。上記の動画、ご覧になりましたか？「Google Antigravity」というAI IDEを使って、Apple製品ページのようなリッチなサイトを爆速で作る様子は衝撃的ですよね。

動画内の「Antigravity」は、AIエージェントが開発を主導する未来のコンセプトツールですが、実は今現在利用可能なツールを組み合わせることで、このワークフローはほぼ完全に再現可能です。

本記事では、Google Labsの生成AIツールと、現代の最強AIエディタ「Cursor」を使い、動画と同じクオリティのサイトを実装する手順を解説します。

2. 必要なツールと準備

今回の開発フローは「素材生成」と「実装」の2段階に分かれます。以下のツールを使用します。

• Google Labs (Whisk & Flow): 画像と動画の生成に使用します。Googleアカウントがあれば無料で試せます（※地域制限がある場合はVPN等が必要な場合があります）。
• Cursor (または Windsurf): 動画の「Antigravity」の役割を果たすAIエディタです。今回はClaude Sonnet 4.5やGemini 3 Proをモデルとして使用します。
• Python (FFmpeg): 生成した動画をWeb用の連番画像に変換するために使用します。

3. 実装ステップ解説

Step 1: Whiskで「製品」と「分解図」を作る

まず、サイトの主役となる製品画像を作ります。動画では「Whisk」というツールを使っています。これは「被写体(Subject)」「背景(Scene)」「スタイル(Style)」の画像を別々にアップロードしてブレンドできる強力なツールです。

labs.google/fx/tools/whisk にアクセスし、以下の手順で画像を生成します。

1. 完成形の画像: 黒背景にかっこいいヘッドホンの画像を生成し、保存します（Frame A）。
2. 分解図の画像: 同じヘッドホンの画像を「Subject」に入れたまま、プロンプトで「exploded view, floating components（分解図、浮遊する部品）」と指示し、分解された状態の画像を生成します（Frame B）。

ポイントは、Whiskの「画像参照機能」を使うことで、同じ製品の形状を保ったままバリエーションを作れる点です。

Step 2: Flowで「モーフィング動画」を作る

次に、Frame A（完成形）からFrame B（分解図）へ滑らかに変形する動画を作ります。これには動画生成ツール「Flow (Google VideoFX)」を使います。

Flowの「Frames to Video」機能（または動画生成時の補間機能）を使い、開始フレームに「完成形」、終了フレームに「分解図」を指定します。プロンプトには「Smoothly transition from product to exploded view（製品から分解図へスムーズに移行）」と入力します。

これで、ヘッドホンが空中で分解していく数秒間のMP4動画が手に入ります。これが今回のアニメーションの「種」になります。

Step 3: Pythonで「連番画像」に変換する

ここが技術的な重要ポイントです。Webサイトでスクロールに合わせて動画を再生する場合、MP4をそのまま使うと動作が重くなったり、スマホでカクついたりします。

Appleのサイトのように滑らかに動かすには、動画を1コマずつの画像（JPEG/WebP）に分解し、パラパラ漫画のように表示するのが鉄則です。

以下のPythonスクリプトを使って、MP4を連番画像に変換しましょう。

import cv2
import os

# 設定
video_path = 'video.mp4'  # Flowで生成した動画ファイル名
output_folder = 'sequence'  # 保存先フォルダ

# フォルダ作成
os.makedirs(output_folder, exist_ok=True)

# 動画読み込み
cap = cv2.VideoCapture(video_path)
count = 0

while cap.isOpened():
    ret, frame = cap.read()
    if not ret:
        break
    # 3桁の連番ファイル名で保存 (例: frame_001.jpg)
    file_name = os.path.join(output_folder, f"frame_{count:03d}.jpg")
    cv2.imwrite(file_name, frame)
    count += 1

cap.release()
print(f"完了: {count}枚の画像を抽出しました。")

このスクリプトを実行すると、sequenceフォルダに数百枚の画像が生成されます。これをWebプロジェクトのpublicフォルダに入れます。

Step 4: AIエディタ(Cursor)で実装する

いよいよコーディングです。動画の「Antigravity」のように、私たちもAIに指示出しするだけで実装します。Cursorの「Composer (Ctrl+I)」を開き、以下のプロンプトを入力してください。

【Cursorへの指示プロンプト例】

Next.jsとTailwind CSSを使って、スクロールアニメーションのランディングページを作ってください。

要件:
1. ヒーローセクションでは、スクロールに応じて `/public/sequence/` フォルダ内の連番画像（frame_000.jpg 〜 frame_XXX.jpg）を再生してください。
2. 画像描画にはHTML5 Canvasを使用し、パフォーマンスを最適化してください。
3. スクロール位置に基づき、画像のインデックスを計算して描画を更新する `useScrollSequence` フックを作成してください。
4. デザインはApple風のダークモードで、高級感のあるタイポグラフィにしてください。

これだけで、AIが以下の複雑な処理を自動で書いてくれます。

• 画像のプリロード処理（カクつき防止）
• スクロール量（0〜100%）を画像フレーム番号にマッピングする計算
• Canvasへの高FPS描画ロジック

4. 応用と注意点

この手法を本番環境で使う場合の注意点がいくつかあります。

• 画像の軽量化: 連番画像は容量が大きくなりがちです。JPEGの圧縮率を調整するか、WebP形式に変換して、1枚あたり20KB〜50KB程度に抑えましょう。
• ローディング画面: 画像の読み込みに時間がかかるため、サイトを開いた直後に「Loading...」といった表示を入れる実装もAIに追加指示すると良いでしょう。

5. まとめ

動画で見た「未来の開発」は、ツールを選べば今日から実践できます。Google Whiskで素材を作り、Pythonで最適化し、AIエディタで組み立てる。

このフローを一度体験すると、もう手書きでCSSアニメーションを書く時代には戻れません。ぜひ、あなたの手で「Antigravity」な開発体験を味わってみてください。