- 投稿日：2026/04/05
- 更新日：2026/04/06
先日、価格.comに関する公式セミナーに登壇しました。セミナーでは商品比較やショップ選びの方法を紹介していたのですが、その直後に価格.comを開いてみると、見慣れていたはずの画面が変わっていることに気づきました。
価格ドットコムのUI 変更後の課題
変更前はショップ一覧に「サイト掲載年数」や「アクセスランキング」が表示されており、一目でショップの信頼性をざっくり判断できました。
変更後は、ショップ名を一つひとつクリックして口コミや評価を確認しなければならない仕様に。商品を決めても、どこで買うかの判断に時間がかかるようになってしまいました。
セミナーで「ここを見ればショップの信頼性がわかりますよ」と説明したばかりなのに、その情報が画面から消えている。参加者が実際に使おうとしたとき、教えた通りにできない ── これはまずいと感じました。
ネットでの買い物に慣れていない人が、評判のよくないショップで悲しい思いをすることを避けたい。セミナーで伝えたかった「安心なお店の見分け方」を、UIが変わっても実現できるツールを作ろう。それが今回の出発点でした。
Claude Code にまず相談してみた
最初から完璧な設計を考える必要はありません。「こんなことできる？」と聞くところから始めました。
Claude はすぐに「作れます」と答えてくれたうえで、こちらに質問を返してきました。
「パソコン操作に慣れていない人が問題なくやれる方法」「両方バランスよく」と答えると、Claude はシンプルなWebアプリと5項目のスコアリングを提案してきました。
作ったもの：安心ショップチェッカー
チェッカーが見せてくれること
・ショップ名と価格
・安心 / まあまあ安心 / 少し注意 / 要注意 のバッジ
・リピート希望率・感想件数（安心ポイント）
・良い口コミ（「安心できた」「梱包が丁寧」など）
・気になる口コミ（「壊れていた」「返品に関する問題」など）
・支払い方法（クレジットカード・代金引換など）
・100点満点のスコアと内訳
開発の実際：対話しながら育てた全記録
ここからが本題です。このアプリは一発で完成したわけではありません。Claude と対話しながら、少しずつ機能を追加・修正していきました。その流れを時系列でお見せします。
Phase 1：骨格を作る
Claude はまず計画（プラン）を提示してくれました。技術スタック（Node.js + Express + Puppeteer）、ファイル構成、スコアリングのロジックなどが含まれています。
ここで私から、「スコアリングに口コミレビューも評価対象にいれたい。不安を感じたり、不具合があったかどうかの情報を拾いたい」とリクエストを送りました。
プランを承認すると、Claude がコードを書き始めます。server.js（バックエンド）、index.html（フロントエンド）、known-shops.json（大手ショップリスト）の3ファイルが一気に生成されました。
Phase 2：実際のデータで検証 → 修正のループ
最初のバージョンを価格.comの実際のURLで試すと、いくつか問題が見つかりました。
見つかった問題
・ショップ一覧が取得できない（HTMLのセレクタが実際のページと不一致）
・価格が「価格不明」になる
・口コミページのURLが二重になる（https://kakaku.comhttps://kakaku.com/...）
Claude は実際のページのHTML構造を Puppeteer で調べ直し、正しいセレクタ（.p-priceList_list > li や .p-priceList_price）を特定。口コミページも /shopreview/ショップID/ という正しいURLパターンに修正しました。
ここで学んだこと
Webスクレイピングは「一発で動く」ことはほぼありません。実データで試す → 壊れたところを直すのループが必須です。Claude はエラーを見せるだけで原因を特定し修正してくれるので、このループが非常に速く回ります。
Phase 3：機能追加の対話
動くようになったら、次は機能追加。ここでも「対話」がポイントでした。
（ここまる）
評価とは別に、選択できる決済方法についても表示して。URLの後ろにつく?以降は無視して調べてください。
（クロちゃん）
2つの改善ですね。URLクリーニングと決済方法表示を実装します。
最初、Claude は各ショップの個別ページを1件ずつ訪問して決済情報を取得する方式で実装しました。しかし、実際のデータと表示が食い違っていることに気づきました。
（ここまる）
（価格.comのスクリーンショットを添付して）商品ページのショップ一覧に「クレカ」「代引」「振込」のラベルが表示されています。この情報から拾うことはできる？
（クロちゃん）
商品ページの payLabel から直接取得する方式に変更します。個別ページへの遷移が不要になり、速度も大幅に改善されます。
スクリーンショットが最強のコミュニケーション
「ここの情報を使いたい」とスクリーンショットを見せるだけで、Claude はHTML構造を調べ直して最適な取得方法に切り替えてくれました。言葉で説明しにくいことは、画面を見せるのが一番です。
Phase 4：「他の人にも使ってもらいたい」〜公開と環境差異との戦い
ローカルで動いたら、他の人にも使ってもらいたくなります。
（クロちゃん）
他の人も使えるようにするにはRender（無料プランあり）がおすすめです。GitHubにpushするだけで自動デプロイされます。
Claude は Dockerfile、render.yaml、.gitignore を作成し、GitHubリポジトリの作成からpushまで自動で行ってくれました。しかし、ここからが本番環境ならではの問題の連続でした。
問題 1
Browser was not found
DockerイメージにChromeが見つからない。Puppeteer公式イメージから node:20-slim + apt-get install chromium に変更して解決。
問題 2
Navigation timeout 30000ms
Render無料プランの低リソースでページ読み込みが間に合わない。タイムアウト延長だけでなく、画像・CSS・フォントのブロックと、waitUntilを domcontentloaded に変更して根本的に高速化。
問題 3
Runtime.callFunctionOn timed out
Puppeteerとブラウザ間の通信がタイムアウト。protocolTimeout: 180秒の追加と、--single-process --no-zygote オプションでメモリ使用量を削減。
本番環境の落とし穴
ローカルで完璧に動いていても、本番環境（特に無料プラン）では全く別の問題が出ます。今回はエラーメッセージをそのまま Claude に伝えるだけで、原因特定→修正→push→再デプロイまでやってくれました。「何が起きているか」を伝えれば、「どう直すか」は Claude が考えてくれます。
Phase 5：ユーザー体験の磨き込み
機能が動くようになったら、最後は体験の改善です。
ここでも実データとの不一致が見つかりました。コジマネットでは「代金引換」が使えるのに、「商品によってはご利用いただけない場合があります」というテキストに「いただけ」が含まれるため、使えないと誤判定されていたのです。
「実際のデータと表示が違っている」とスクリーンショット付きで伝えると、Claude はテキスト解析のロジックを修正し、「いただけません」（明確に不可）と「いただけない場合があります」（条件付きで利用可）を区別するようにしました。
開発の全体像：何回やり取りしたか
すべてのコードは Claude が生成し、私がやったのは「こうしたい」「ここがおかしい」と伝えることだけでした。
Claude への伝え方：実践で学んだコツ
コツ 1：目的から始める
「ネットでの買い物に慣れていない人が悲しい思いをするのを避けたい」── 技術ではなく誰のために何を解決するかから始めると、Claude が適切な技術を選んでくれます。
コツ 2：一度に全部を求めない
最初のリクエストでは「URLを貼ると安心度がわかるアプリ」だけ。決済方法や起動画面は後から追加しました。動くものを先に作り、そこから育てるのが最速です。
コツ 3：スクリーンショットを活用する
「実際のデータと表示が違う」「ここの情報を使いたい」── 言葉で説明しにくいことは画面を見せるだけで伝わります。Claude はスクリーンショットからHTML構造を調べ直してくれます。
コツ 4：エラーはそのまま貼る
Browser was not found at the configured path や Navigation timeout of 60000 ms exceeded のようなエラーメッセージをそのまま貼り付けるだけで、Claude が原因を特定して修正してくれます。自分で調べる必要はありません。
コツ 5：「他の人にも使えるようにするには？」
ローカルで動いたら、この一言を言うだけ。Claude がデプロイ先の選定、Docker設定、GitHub連携まですべてやってくれます。
「何を作ればいいかわからない」人へ
ネタの見つけ方は「日常のプチストレス」を探すことから
今回の安心ショップチェッカーも、「価格.comが使いにくくなった」というプチストレスから生まれました。
毎日使うサービスのUI変更、繰り返している手作業、調べるのが面倒な情報整理 ── 自分が「ちょっと不便だな」と感じていることこそ、最高のアプリネタです。
完成度は問いません。自分が使えればOK。まずは「自分専用ツール」から始めましょう。
「不便」を感じたら、AIに相談すればいい時代です
プログラミング知識ゼロでも、対話しながらWebアプリが完成します。完璧を目指さず、動くものを作って少しずつ育てるのが、Claude Code での開発スタイルです。
ぜひ、あなたのプチストレスを解消するツールを Claude Code で作ってみてください。
