amazon-landing-page

Amazon 商品ランディングページビルダー

$ARGUMENTS の Amazon 商品のプレミアムなランディングページを作成します。

要件

• Chrome MCP が必須です。 すぐに動作を確認してください。利用できない場合は、有効にするようユーザーに伝えてください。
• ランディングページは Tailwind CDN を使用した単一の HTML ファイルにします（ビルド手順は不要です）。
• すべての商品データは実際の Amazon ページから抽出してください。データを捏造したり、作り上げたりしてはいけません。

作業手順

フェーズ 1：セットアップ

1. 現在のディレクトリに amazon-landing-page-[product-name] というプロジェクトフォルダーを作成します。
2. その中に images/ サブフォルダーを作成します。

フェーズ 2：Chrome MCP を使った商品データの抽出

1. Chrome MCP で Amazon の商品 URL を開きます。
2. ページが読み込まれるまで 3 秒待ちます。
3. JavaScript の実行を使って、以下を抽出します。

// Product basics
{
  title: document.getElementById('productTitle')?.textContent?.trim(),
  price: document.querySelector('.a-price .a-offscreen')?.textContent?.trim(),
  rating: document.querySelector('#acrPopover')?.title || document.querySelector('.a-icon-alt')?.textContent,
  reviewCount: document.querySelector('#acrCustomerReviewText')?.textContent?.trim(),
  brand: document.querySelector('#bylineInfo')?.textContent?.trim(),
  badges: document.querySelector('#acBadge_feature_div')?.textContent?.trim() // Amazon's Choice, Best Seller, etc.
}

// Feature bullets
Array.from(document.querySelectorAll('#feature-bullets .a-list-item'))
  .map(el => el.textContent?.trim())
  .filter(t => t && t.length > 10)

// High-res image URLs
Array.from(document.querySelectorAll('#altImages .a-button-thumbnail img'))
  .map(img => img.src.replace(/\._.*_\./, '._SL1500_.'))
  .filter(s => s.includes('images/I/'))

4. レビューセクションまでスクロールし、実際のレビューを抽出します。

// Only 4-5 star verified reviews
Array.from(document.querySelectorAll('[data-hook="review"]')).map(r => ({
  stars: parseFloat(r.querySelector('[data-hook="review-star-rating"] .a-icon-alt')?.textContent || '0'),
  body: r.querySelector('[data-hook="review-body"] span')?.textContent?.trim(),
  author: r.querySelector('.a-profile-name')?.textContent?.trim(),
  date: r.querySelector('[data-hook="review-date"]')?.textContent?.trim(),
  verified: !!r.querySelector('[data-hook="avp-badge"]')
})).filter(r => r.stars >= 4 && r.body && r.body.length > 20 && r.verified)

フェーズ 3：画像のダウンロード

curl を使って商品画像をすべてダウンロードします。

curl -sL "[image-url]" -o images/product-1.jpg

フェーズ 4：ランディングページの作成

以下のセクションを指定の順序で含む index.html を作成します。

1. 固定ナビゲーションバー

   • 左側にブランド名
   • 中央にセクションリンク（Features、Reviews、FAQ。モバイルでは非表示）
   • 右側に「Amazon で購入 - $[price]」CTA ボタン
   • グラスモーフィズム背景（backdrop-blur）

2. ヒーローセクション

   • 左側：サムネイル付き商品画像ギャラリー（クリックするとメイン画像が切り替わる）
   • 右側：バッジ（該当する場合は Amazon's Choice / ベストセラー）、商品タイトル（目を引く見出しに書き換え）、短い説明、レビュー件数へのリンク付き星評価、「FREE Prime Delivery」と表示した価格、安心を示すバッジ（30 日間返品、Amazon から発送、1 年保証）、パルスアニメーション付き CTA ボタン
   • 左右の両側がページ読み込み時に左／右からアニメーション表示される

3. ソーシャルプルーフバー

   • 顧客数、平均評価、主要な仕様をアニメーション付きカウンターで表示
   • カウンターはスクロールして表示範囲に入るとアニメーションする

4. 特長セクション（id="features"）

   • 3 列グリッドに特長カードを 6 枚配置
   • 各カードにアイコン、タイトル、説明を含めます（Amazon の箇条書きから抽出し、簡潔に書き換える）
   • スクロールに合わせて順番に表示するアニメーション

5. 同梱品セクション

   • 左側：商品画像
   • 右側：同梱品を緑色のチェックマーク付きリストで表示
   • スクロール時に項目を 1 つずつアニメーション表示する

6. 画像ギャラリー

   • ホバー時のズーム効果付き 2～3 列グリッド
   • 商品画像をすべて表示

7. メールアドレス登録セクション

   • 「VIP リストに登録」メッセージ
   • メールアドレス入力欄と「VIP リストに登録」ボタン
   • 送信時：Google スプレッドシートに保存（設定済みの場合）し、Amazon へのリンク付き成功メッセージを表示
   • Google フォーム連携用のセットアップコメントをコードに含めます。

     const GOOGLE_FORM_URL = ''; // Seller fills this in
     const EMAIL_FIELD_ID = ''; // Seller fills this in
     

8. 実際のレビューセクション（id="reviews"）

   • Amazon から抽出したレビューのみを使用します。レビューを捏造してはいけません。
   • 4～5 つ星の認証済みレビューのみを表示
   • 投稿者名、星評価、日付、「認証済み」バッジを表示
   • 「Amazon でレビューをすべて読む」へのリンクを設置

9. FAQ セクション（id="faq"）

   • アコーディオンで開閉する関連性の高い質問を 5 件
   • 商品の種類と特長に基づいて FAQ を作成
   • よくある質問の例：バッテリー駆動時間、互換性、保証、サイズ／重量、セットアップ

10. 最後の CTA セクション

    • 見出し、補足文、大きな CTA ボタンを含むグラデーションカード

11. フッター

    • 免責事項：「独立した商品ページです。[Brand] は登録商標です。購入商品は Amazon.com から発送されます。」

12. モバイル固定バー（スクロール後、モバイルでのみ表示）

    • 価格と「Amazon で購入」ボタンを画面下部に固定

デザインシステム

重要：汎用的なダークテーマは使用しないでください。ブランドと製品に合わせたデザインにしてください。

色やスタイルを決める前に、以下を確認してください。

• ブランド公式サイトとパッケージの配色
• 製品カテゴリー（テクノロジー＝洗練されたミニマルなデザイン、ベビー用品＝柔らかく温かみのあるデザイン、アウトドア用品＝自然を感じさせる無骨なデザイン、美容製品＝上品で清潔感のあるデザイン）
• 製品画像の基調色

このブランドと製品にふさわしいと感じられるカラーパレットを作成してください。ランディングページは汎用テンプレートのようではなく、ブランド自身が作ったように見える必要があります。

Base design principles:
- Typography: Inter (Google Fonts) or a font that matches the brand feel
- Border radius: rounded-2xl (cards), rounded-full (buttons, badges)
- Animations: scroll reveal (fade up), stagger delays, counter animation, pulse CTA glow
- CTA button: use a color that contrasts well and stands out
- Stars: amber-400 (#fbbf24)

技術要件

• ビルド工程不要の単一 HTML ファイル
• <script src="https://cdn.tailwindcss.com"> を使用した Tailwind CDN
• ブランドカラー用のカスタム Tailwind 設定
• CSS アニメーションはすべて <style> タグ内に記述
• JavaScript はすべて末尾の <script> タグ内に記述
• レスポンシブ対応：モバイルファーストで、すべての画面サイズで動作
• Amazon へのリンクにはすべて target="_blank" を使用
• JavaScript によるサムネイル切り替え機能付きの画像ギャラリー

フェーズ 5：開いて確認する

1. ブラウザーで HTML ファイルを自動的に開きます：open index.html
2. ページの準備ができたことをユーザーに伝え、含まれている内容を列挙します
3. メールアドレス収集のための Google フォームの設定について、以下を案内します。
   • 「メールアドレスを収集するには、メールアドレス入力欄を 1 つだけ設けた無料の Google フォームを作成してください」
   • 「フォームの action URL とフィールドの entry ID を取得してください」
   • 「HTML 内の GOOGLE_FORM_URL と EMAIL_FIELD_ID 変数に貼り付けてください」

重要なルール

• レビューを捏造したり、作り上げたりしないでください。Amazon ページから取得したレビューのみを使用してください。
• 星 4～5 の認証済みレビューがない場合は、レビューセクションを完全に省略し、その旨をユーザーに伝えてください。
• 製品データ（タイトル、価格、特徴、画像）はすべて実際の Amazon ページから取得してください。
• ヒーローの見出しには、製品タイトルをそのまま使うのではなく、書き換えた魅力的なタイトルを使用してください。
• FAQ の回答は、製品の特徴に基づいた、役立つ正確な内容にしてください。
• ランディングページはテンプレートのようではなく、高級感のあるプロフェッショナルなデザインにしてください。