ChatGPT・Claude・GeminiでBento GridのアニメーションWebページを作るためのプロンプトテンプレとハマりどころ回避

Apple公式サイトみたいな「スクロールすると動き出す」ページを作りたい。でもゼロからフロントエンドをかじるのは避けたい？ それなら「3つのチャットモデルでコーディング＋Midjourneyで画像生成」のコンボを推します。効率が異常に高いです。

この一連の流れで、ページの構造・アニメーション・素材まで一気に片付きます

ChatGPTは骨組み担当

HTML5＋Tailwindを書くのが最速で、Bento Grid、黒背景＋ハイライト色#2657FD、特大の数字見出しといった“必須要件”を一度に整えるのに向いています。

そのままコピペできるプロンプト：単一のHTMLファイルを出力し、TailwindCSSのCDNと必要なJSを使用する。Bento Gridレイアウト、黒背景、#2657FDのハイライト、中国語の大見出し＋英語の小さな文字をアクセントとして配置。データの小さな図形プレースホルダーを含める。内容の要点を省略しない。

Claudeはアニメーションを滑らかに仕上げる担当

Framer MotionをCDNで書くと「動くけどガタつく」になりがちですが、Claudeはスクロールトリガー、入場アニメーション、リズムのカーブを見栄えよく調整するのが得意です（境界条件も補ってくれがち）。

Geminiは抜け漏れチェック担当

ブラウザエラー、スタイルの上書き、コンポーネントのズレに遭遇したら、Geminiに「段落ごとに説明＋問題の特定＋置き換えコード提示」で修正させると、コンソールを眺めて固まる時間を減らせます。

Midjourneyはメインビジュアル担当

「リアクターコア／銀河の爆発／エネルギー放出」みたいなメインビジュアル（素材にある極彩の発光＋ダーク背景）はMidjourneyに任せるのが最適で、生成した画像をChatGPTに戻してレスポンシブ対応させます。

よくある小さな愚痴2つ

• モデルが出してくるCDNリンクがたまに期限切れで動かないことがあります。人生を疑わず、公式の最新に差し替えればOKです。
• アニメーションを盛りすぎないこと。Bento Gridは抑制が効いているほど上質で、やりすぎると年会のPPTっぽくなります。

「モデルの選び方／プロンプトの組み方／アカウントとツールを一気に揃える方法」でまだ詰まっているなら、Titikeyを覗いてみてもいいと思います。私自身も遠回りを減らすのによく使っています。