非エンジニアがAIと5日で、
MTG価格比較サイトを
ゼロから構築した話

作ったのは、商品リンクを並べただけのページではない

公開時点で掲載したのは、発売済み135件、発売予定・予約受付中15件、合計150商品の未開封商品である。商品検索、セット別ページ、商品詳細、価格履歴、値下がりランキング、新着・発売予定、購入ガイドまで、一つのWebサービスとして動く範囲を作った。

さらに、楽天市場・Yahoo!ショッピングのAPIから日次で価格を取得し、商品条件を照合し、履歴を保存し、ページを再生成する仕組みも実装した。Amazonや駿河屋を含む販売先への導線、アフィリエイト表記、プライバシーポリシー、価格データの説明、Search Console、Google Analytics、sitemap、robots.txt、自動テスト、セキュリティ監査まで含んでいる。

ここだけ見ると、AIに指示を出したら短時間でサイトが完成したように見える。しかし、実際に時間を使ったのは、画面を作ることより、何を同じ商品として扱うか、どの価格を信用するか、取得できないときに何を表示するかを決める仕事だった。

サイト制作と同時に、広告媒体としての前提から学んだ

私はECサイトの運営経験はあったが、自分のサイトから楽天市場、Yahoo!ショッピング、Amazonなどへ送客し、成果報酬を得る仕組みを本格的に運営した経験はなかった。そのため、開発と並行して、Amazonアソシエイト、楽天アフィリエイト、バリューコマース、Yahoo!ショッピング、駿河屋の導線や規約を確認した。

価格情報をAPIで取得することと、ユーザーを販売ページへ送るアフィリエイトリンクは役割が異なる。広告であることを明示し、免責事項を整え、報酬の高低で商品順位を変えず、商品照合を通過した価格を基準に表示する方針をサイト上へ置いた。

バリューコマースは最初の申請で登録を見送られた。そこで運営情報、記事、商品ページ、表示内容を整え、再申請した結果、後日承認された。外部審査を通過したことは、単にページが表示されるだけでなく、広告媒体として最低限運用できる状態へ近づいた一つの確認になった。

価格を取る前に、「何を同じ商品とみなすか」を定義する

MTGの未開封商品は、名前が似ていても中身が異なる。日本語版と英語版、プレイ・ブースターとコレクター・ブースター、BOXと単品パック、1BOXと複数BOX、BundleとGift Bundle、統率者デッキの単品とセット、通常版と限定版、予約商品と発売済み商品が混在する。

商品名の部分一致だけで最安価格を選べば、安い単品パックがBOX価格として混ざる。日本語版を探しているのに英語版が混ざる。複数BOXセットを1BOXと誤認する。見た目の最安価格は作れても、比較としては壊れてしまう。

バックエンドで重要だったのは、大量のデータを取ることではなく、条件を確認できたデータだけを使うことだった。価格を取得できない場合は「現在、比較できる価格がありません」「販売ページで最新情報をご確認ください」と表示し、分からないものを分かったように見せない設計にした。

AIが作った最初の画面を、そのまま完成形にはしなかった

フロントエンドの実装は主にCodexへ任せた。一方で、ユーザーが最初に知りたい情報、商品名を知らない人の探し方、セットから探す導線、商品種別から探す導線、絞り込み項目の順番、価格の意味、モバイルでの情報量は自分で確認した。

検索画面では、商品名、セット名、セットコード、商品タイプ、言語、発売・在庫状況、現在価格、スタンダード対象セット、並び順で絞り込める。現在価格が送料込みやポイント込みではなく、商品本体価格であることも、検索画面とトップページの両方で説明した。

画像の高さ、タイトルの改行、情報の優先順位、ボタン文言、余白、商品カードの情報量は何度も修正した。AIはコードを速く書けるが、画面を見たときの違和感や、ユーザーが誤解しそうな箇所まで自動で正しく判断するわけではない。人間が設計し、AIが実装し、人間が実画面を監査する役割分担が必要だった。

一度作るより、毎日壊れずに更新し続ける方が難しい

価格比較サイトは、静的HTMLを一度公開して終わりにはできない。価格と在庫は変わるため、楽天市場とYahoo!ショッピングのAPIから候補商品を取得し、照合し、在庫のある価格を履歴として保存し、公開ページを再生成する日次処理を作った。

商品詳細には、現在の最安価格、計測期間の最安・最高、30日最安、30日中央値、前週比、販売先別の価格推移、価格確認日、計測期間を表示する。30日分のデータがない商品は、30日分を推測せず「計測期間」の数字として扱う。

API失敗、候補商品なし、誤照合、価格情報が空といった状態も想定した。古い情報や推測値を無理に表示するより、確認中であることを正直に見せる方が、購入判断を支えるサービスとして重要である。

発売前から発売後まで、同じ商品ページが育つ設計にした

発売予定・予約商品は、販売先にまだ商品が登録されていないことがある。その場合は存在しない価格を作らず、価格情報なし、履歴なし、販売ページで要確認という状態を表示する。販売情報を取得できるようになれば、同じページへ履歴が追加される。

また、正確な商品名を覚えていなくても探せるよう、セット単位のページも生成した。セット名、セットコード、日本語名、英語名、発売日、掲載商品数、商品種別、言語、確認済み価格帯をまとめ、基本となるBOX商品が先に見えるよう並び順も調整した。

検索流入を増やすためではなく、購入前の迷いを解くページを作った

価格一覧だけでは、初心者が商品の違いを判断できない。そこで、ブースターBOX、コレクター・ブースターBOX、統率者デッキ、Bundle、スターターキット、Gift Bundleの違いに加え、スリーブ、デッキケース、保管用品、プレイマット、カードローダー、ダイスやカウンターの選び方をまとめた。

AIが最初に生成した記事には、内容の薄さ、不自然な構成、架空の仕様、曖昧な説明、検索意図とのずれがあった。商品画像にも店舗独自の販促文言が混ざることがあり、購入用画像と説明用画像を分ける方針へ変えた。記事数を増やすのではなく、ユーザーが商品を選ぶ前に困ることを解決する役割を持たせた。

SEOは記事だけではなく、商品ページ、セットページ、内部リンク、ページタイトル、meta description、見出し、商品名とセット名の統一、重複削除、sitemap、robots.txtまで全体で確認した。Search ConsoleとGoogle Analyticsも、タグを置くだけでなくデータ送信まで確認した。

セキュリティでは、APIキー、トークン、秘密情報、個人情報、意図しない外部通信、第三者スクリプト、XSS、インジェクション、オープンリダイレクト、入力検証、依存関係、GitHub Actions、デプロイ設定、HTTPヘッダー、CSP、エラー時の情報露出を監査した。Codexが実装し、ChatGPTが監査し、Codexが修正し、テスト後に再監査する循環で進めた。

AIを一つの魔法ではなく、小さな開発チームとして使った

今回の開発では、自分がプロダクトオーナー兼PM兼UX担当、ChatGPTが設計・監査担当、Codexが実装担当になった。役割を分けることで、作ったAI自身の自己評価だけに依存せず、実装と評価を往復できた。

開発途中では、指示していない情報の追加、同じ内容の重複表示、表示条件の勝手な変更も起きた。そこで、サイトの目的、価格の定義、禁止事項、デザイン、編集可能範囲、テスト方法、完了条件をプロジェクト内の指示ファイルへ外部化した。判断基準をコードと同じ場所へ残してから、出力はかなり安定した。

外注費を置き換えたのではなく、作れなかったものを作れるようにした

今回の範囲には、要件定義、UI・UX、フロントエンド、API連携、商品照合、価格履歴、日次バッチ、データ設計、SEO、コンテンツ、品質保証、セキュリティ、公開基盤、外部サービス登録が含まれる。

今回の実装範囲をAIに監査させ、一般的な制作会社・開発会社へ依頼した場合の工程と人員を分解して判定させたところ、通常は300万〜500万円程度の開発規模になるという評価だった。正式な見積もりではないが、要件定義、UI・UX、API連携、商品照合、価格履歴、日次更新、SEO、セキュリティ、公開基盤まで含めれば、現実的な水準だと考えている。

重要なのは、AIでその金額を節約したという話だけではない。以前なら、技術的な壁を前に着手できなかったアイデアを、自分の時間とAI利用料で、実際に動くサービスとして世に出せたことにある。開発の経済性とは、同じものを安く作るだけでなく、そもそも作れなかったものを試せるようになる変化でもある。

誰でも同じものを5日で作れるわけではない

ChatGPTやCodexを契約すれば、誰でも同じサイトを5日で作れるとは思わない。AIが高速化するのは実装であり、何を作るか、誰の何を解決するか、何を表示してはいけないか、データが正しいか、ユーザーが誤解しないか、どの指摘を採用するか、公開してよいかは人間が決める必要がある。

今回も、タイトル位置、画像高、情報の優先順位、重複表示、一覧の密度、価格の説明、検索項目の順序、指示外の表示条件を何度も修正した。問題が起きるたびに、違和感を見つけ、ChatGPTと原因を整理し、Codexへ修正を依頼し、テストし、画面を確認するループを回した。

収益がどこまで出るかは、まだ分からない。それでも、マーケティング、EC、UX、データ設計、API連携、自動化、SEO、セキュリティ、品質管理、AIエージェント管理、プロジェクトマネジメントを、実際に触れる一つの成果物として残せた。文章で経験を列挙するより、動くサイトそのものが強いポートフォリオになる。

今後は、まず日次更新を続け、検索クエリ、表示回数、クリック率、流入ページ、送客、更新処理、商品照合を観測する。完成直後に機能を増やし続けるのではなく、実データを見てから次の判断をする予定である。