info@ryuichiroshimoda.com
Googleスプレッドシート✕GASを使って商品比較表ジェネレーターを作ってみた
約1,000種類のベビーカーデータベースから、3つの方法で比較表を作成できるWebツールを作ってみた。
目次
3つの比較方法
| 方法 | 説明 |
|---|---|
| 商品名で検索 | 商品名やブランド名を入力して候補を選択し、最大5商品の比較表を生成 |
| スペックで検索 | タイプ・重量・対象月齢などの条件でフィルタリングし、該当商品から選んで比較 |
| ライバルで比較 | 1商品を選ぶと、スペックが近い4商品を自動検出して比較表を生成 |
特徴
- インクリメンタル検索 — 入力中にリアルタイムで候補を表示
- スペックフィルター — タイプ・重量・月齢・走破性・操舵性など複数条件で絞り込み
- ライバル自動検出 — スペック類似度スコアに基づき競合商品を自動選出
- 32項目の詳細比較 — 重量、サイズ、リクライニング角度、走破性(星評価)、カラーバリアント等
- カラー重複排除 — 同一モデルのカラー違いを自動グループ化
アーキテクチャ
┌─────────────────────┐ API (JSON) ┌─────────────────────┐
│ Netlify Frontend │ ←────────────────→ │ GAS Backend │
│ (HTML/CSS/JS) │ │ (Sheets連携) │
└─────────────────────┘ └─────────────────────┘
↑スマホを横に向けてみて
APIアクション
| アクション | 説明 |
|---|---|
init | 初期化データ取得 |
search | 商品名・ブランド名でインクリメンタル検索 |
compare | 指定商品名の比較表HTML生成 |
filter | スペック条件による絞り込み検索 |
similar | 指定商品のライバル検出+比較表HTML生成 |
使い方
商品名で検索
- 「商品名で検索」タブを選択
- 検索ボックスに商品名またはブランド名を入力(例:「Cybex」「メリオ」)
- 表示された候補から商品を選択(最大5つ)
- 「比較表を生成」ボタンをクリック
スペックで検索
- 「スペックで検索」タブを選択
- タイプ・重量・月齢などの条件を設定
- 「この条件で絞り込む」ボタンをクリック
- 絞り込み結果から商品を選択(最大5つ)
- 「比較表を生成」ボタンをクリック
ライバルで比較
- 「ライバルで比較」タブを選択
- 比較の起点となる商品名を検索・選択
- 「比較表を作る」ボタンをクリック
- スペックが近い4商品が自動で選ばれ、計5商品の比較表が生成されます
他ジャンルへの応用例
1回あたり最低でも5分~10分かかっていた
ベストプランを絞り込むまでに1時間を要していた
毎日の業務が1分で終わる
AIを使った業務効率化やカスタマーサポートの自動化に使えそうだ。
例えば、保険の相談窓口、不動産の物件提案、士業の初期相談、美容・健康系のカウンセリング、ペット用品の選定など、専門家が対面で問診して最適解を提示するビジネスモデルを持つ業種すべてが対象になるだろう。
外部向けに限らず、内部システムとして社内の調査フローの効率化に使ってもいい。
ビジネス向け Google Workspaceを社内に導入していれば導入は簡単。
Google スプレッドシート側の作り込みだけはノウハウが必要になってくるが、そこは力になれると思う。
