vibecoding-animated-websites

Vibecoding によるアニメーション Web サイト

このスキルを使う場面

• ユーザーから「vibecode」や「アニメーション Web サイト」の構築を依頼された場合。
• ハイエンド、ラグジュアリー、または純粋に美しさを重視した Web 体験をユーザーが求めている場合。
• Web デザインに関して、ユーザーが「Antigravity」、「Google Whisk」、「Google Flow」に言及した場合。

ワークフロー

• ステップ 1：リサーチとムードボードの作成
  • 事業内容、目指す美的スタイル、具体的な色が提示されていない場合は、ユーザーに尋ねるか、指定します。
  • 参考画像（ハイエンドな Web サイトのスクリーンショットを 3～5 枚）を入手します。
• ステップ 2：プロジェクトのセットアップとカスタムルール
  • セマンティックな HTML5、8px グリッド、prefers-reduced-motion、CSS 変数による色を使ってプロジェクトを初期化します。
• ステップ 3：初期ビルド
  • ユーザー固有の詳細を反映して、初期ビルド用プロンプトを実行します。
• ステップ 4：ヒーローアセットの作成
  • 「開始状態」の画像を生成します。
  • 「終了状態」の画像を生成します（同じ被写体で、カオスまたは躍動感のある状態）。
• ステップ 5：アニメーションの生成
  • 2 つの状態間のトランジションアニメーションを作成します。
• ステップ 6：アセットの変換
  • 動画を画像シーケンスに変換します。
• ステップ 7：実装
  • 画像シーケンスを使って、スクロール制御アニメーションを実装します。
• ステップ 8：仕上げ
  • ダーク／ライトモードの切り替えを追加します。
  • 機能、推薦の声、タイポグラフィを仕上げます。

手順

1. リサーチと入力情報

重要：以下の情報がユーザーから提供されていない場合は、作業を進める前に必ず尋ねてください。

1. 事業名／事業の種類
2. 希望する美的スタイル（例：ラグジュアリー、ミニマリスト、サイバーパンク）
3. カラーパレット

アクション：「雰囲気」を決める参考として、参考画像を調べるか、「luxury website design trends」を検索します。

2. カスタムルール（すべてのプロンプトに適用）

以下のルールをすべての生成ステップに適用します。

1. セマンティック HTML5：<header>、<main>、<section>、<article>、<footer>を使います。
2. 8px グリッド：すべてのマージン／パディングを 8px の倍数にします（例：16px、32px、64px）。
3. アクセシビリティ：
   • @media (prefers-reduced-motion: reduce)に対応します。
   • テキストには十分なコントラストを確保します。
4. テーマ設定：すべての色に CSS 変数（--color-bg、--color-text、--color-accent）を使います。

3. プロンプトとテンプレート

初期ビルド用プロンプト

最初のコード生成には、以下のテンプレートを使います。

Create a landing page for [Business Name]. [Aesthetic] aesthetic.
Colors: [Specific Colors].
Rules: Semantic HTML, 8px grid, CSS vars.
Sections:
- Hero (Headline + CTA)
- Features (Craftsmanship/Details)
- Testimonials
- Final CTA
Typography: [Elegant/Bold/Modern]

ヒーロー画像の生成（Google Whisk／画像生成ツール）

状態 1（静的）：

[Product/Object] wrapped/still, [Background Color] background, studio lighting, high definition, [Aesthetic] style.

状態 2（動的）：

[Product/Object] exploding/unwrapping/in-motion, particles flying, [Background Color] background, dramatic, chaotic, beautiful.

アニメーション用プロンプト（Google Flow／動画生成ツール）

Smooth, cinematic transition showing [Product] changing from [State 1] to [State 2].

4. 実装の詳細

• 画像シーケンス：スクロール効果に大容量の動画ファイルを使わないでください。JPEG のシーケンスを<canvas>に読み込むか、スクロール位置に応じて<img>の src を切り替えます。
• ダーク／ライトモード：
  • 切り替えボタンを追加します。
  • JS を使って、<body>にdark-modeクラスを切り替えます。
  • クラスに応じて CSS 変数を更新します。

5. 最終調整

• アニメーションがせわしなく感じられる場合は、速度を落とします。
• 文字の階層（H1、H2、本文）を明確にします。
• 推薦の声セクションに「ソーシャルプルーフ」の要素を追加します。