ティファールのリコール対象判定サイトをClaude Codeで作ってみた

Last updated at 2025-09-18Posted at 2025-09-18

2025年9月16日（火）、ティファールの電気ケトルがリコール対象になったとのこと。

もちろんティファールの電気ケトル全てが対象になったわけではないのですが、
約418万台無償交換ということで結構な騒ぎになっているようです。

我が家にもティファールの電気ケトルがある。
対象かどうかを下記ページで調べた結果、

対象製品だと分かりました。

用意されている判定ページに型番等を入力すれば、すぐに結果が分かる。
あとは問い合わせして解決です。

けれども僕は色々あって自分で判定サイトを作ることにしました。
（経緯を話せば長くなるし面白くないので省略）

Claude Codeで作ってみた

今まで生成AIでのコーディングは、もっぱらCursorのAIチャットに頼っていました。
しかし「新規作成時はClaude Codeの方が効率的だ」ということに最近気づいたこともあり、今回はClaude Codeに作ってもらうことに。

とはいえ、使用するテキストエディタはCursorです。細かい調整はCursorのAIチャットに頼りますし、なんならCursorのAIチャットの裏側でClaudeが動いていたりします。
とにかく自分ではほとんど何もやっていない。

何の変哲もないサイトなので、Claude Codeを使い慣れている人からすれば「へー」で終わりかも知れませんが、あまり使ってこなかった僕としては、たった30分でこのサイトができてしまうことに驚きました。

しかも30分の内訳は、

という感じ。

Claude Code自体は5分しか働いていません。

自分ではほとんど何もやっていないとはいえ、生成AIを動かすのは僕という人間なので、僕が行ったことをざっくりと紹介していきます。

ティファール公式サイトの記事に「対象製品一覧表」が掲載されていました。
こちらを使います。

この表を丸々コピーして、新規スプレッドシートにペースト。
そのスプレッドシートをcsv形式でダウンロードすれば、「対象製品一覧表」のcsvファイルが完成です。

今回作りたいものは、「限られた数のデータから特定のルールに沿って検索する機能」だけなので、今回は静的サイトとして作ることにしました。

新規でリポジトリを立ち上げ、HTMLの雛形を用意する。
作成したcsvファイルをリポジトリに格納する。
あとはClaudeにプロンプトを投げるだけ。

Claudeにどんなプログラムを組んでほしいのか？
ティファール公式サイトの記事の「対象製品の確認方法」を丸々Claudeに伝えました。

電気ケトル本体の底面には、扇形や長方形のラベルが貼られております。ラベルの青枠内が製品品番、赤枠内が4桁の番号です。
お手持ちの製品の製品品番と４桁の番号が共に、下記の「対象製品一覧表」と合致する場合が対象製品となります。

今回のティファールの件を知っている人はご存知かもですが、製品の「4桁の番号」というものに関するルールが若干ややこしい。

「4桁の番号」は、その製品の製造時期を示しています。4桁のうち左側の２桁が製造された週、右側の２桁が製造された年を表します。「4221～2522」の場合、2021年の42週目～22年の25週目に製造された製品です。

これもClaudeに丸々教えます。

他には「プログラムはJavaScriptで組んでほしい」という要望や「対象製品一覧表のデータはcsvファイルとして格納している」という状況をClaudeに伝えました。
伝えたいことは予めどこかにメモしておき、それら全てを1つのプロンプトにしてClaudeに送りました。

5分程度で土台が仕上がりました。

Claude Codeが仕上げた時点で8割が完成。

あとはogpやfaviconを反映したり、htmlに直書きされていたスタイリングをcssファイルに分けたりという感じ。
CursorのAiチャットに指示を送りながら進めました。

Cloudflare Pagesを使いました。
初めてでしたが、ChatGPTに案内してもらいながら無事に公開できました。

「対象製品一覧表」のcsvファイルは、jsファイルの中でproductDataという変数として使われています。全てClaude Codeが判断と実装をしてくれました。