ベビーカー比較表ジェネレーター

約1,000種類のベビーカーデータベースから、3つの方法で比較表を作成できるWebツールを作ってみた。

3つの比較方法

方法	説明
商品名で検索	商品名やブランド名を入力して候補を選択し、最大5商品の比較表を生成
スペックで検索	タイプ・重量・対象月齢などの条件でフィルタリングし、該当商品から選んで比較
ライバルで比較	1商品を選ぶと、スペックが近い4商品を自動検出して比較表を生成

特徴

• インクリメンタル検索 — 入力中にリアルタイムで候補を表示
• スペックフィルター — タイプ・重量・月齢・走破性・操舵性など複数条件で絞り込み
• ライバル自動検出 — スペック類似度スコアに基づき競合商品を自動選出
• 32項目の詳細比較 — 重量、サイズ、リクライニング角度、走破性(星評価)、カラーバリアント等
• カラー重複排除 — 同一モデルのカラー違いを自動グループ化
• コピー保護 — 比較表HTMLに隠し帰属リンクを埋め込み、無断転載を抑止

アーキテクチャ

┌─────────────────────┐     API (JSON)     ┌─────────────────────┐
│   Netlify Frontend  │ ←────────────────→ │   GAS Backend       │
│   (HTML/CSS/JS)     │                    │   (Sheets連携)       │
└─────────────────────┘                    └─────────────────────┘

APIアクション

アクション	説明
init	初期化データ取得
search	商品名・ブランド名でインクリメンタル検索
compare	指定商品名の比較表HTML生成
filter	スペック条件による絞り込み検索
similar	指定商品のライバル検出＋比較表HTML生成

使い方

商品名で検索

1. 「商品名で検索」タブを選択
2. 検索ボックスに商品名またはブランド名を入力（例：「Cybex」「メリオ」）
3. 表示された候補から商品を選択（最大5つ）
4. 「比較表を生成」ボタンをクリック

スペックで検索

1. 「スペックで検索」タブを選択
2. タイプ・重量・月齢などの条件を設定
3. 「この条件で絞り込む」ボタンをクリック
4. 絞り込み結果から商品を選択（最大5つ）
5. 「比較表を生成」ボタンをクリック

ライバルで比較

1. 「ライバルで比較」タブを選択
2. 比較の起点となる商品名を検索・選択
3. 「比較表を作る」ボタンをクリック
4. スペックが近い4商品が自動で選ばれ、計5商品の比較表が生成されます