動かなくなったWebサービスを、Claudeと3時間で自作再構築した夜の話

2026年5月8日 2026年5月16日

Trash-B合同会社

仙台のスモールビジネス経営者の方へ。「AIで業務改善」が、どこまで現実的か。先日、私が体験したリアルな話を共有します。

ある夜、いつも使っていたサービスが、突然動かなくなった

QRコードに画像を埋め込めるWebサービス（onqnu.github.io/qrcode-app-frontend）を、業務でちょこちょこ使っていました。チラシや名刺に「ただの黒い四角」を載せるより、自社ロゴや写真と一体化したQRの方が、お客様の目に留まる。重宝していたツールです。

ところが先日、開いてみたら動かない。いつ復活するかも分からない。

「困ったな」と思った瞬間に、ふと頭をよぎったのが、「これ、自分で作れるんじゃないか？」でした。

エンジニアではない私の手元にあるのは、AIアシスタントの「Claude」だけ。とはいえ、普段から仕事の壁打ち相手にしているパートナーです。

夜、画面を開いて、こう打ち込みました。
「こういうサービスがあって、動かなくなった。同じ機能を自作したい。何から決める？」

ここから、Claudeとの対話が始まります。

工程をざっくり書くと、こんな感じでした。

使った道具は、Next.jsとTypeScriptという、Webアプリ制作の定番ツール。私は触ったこともありませんが、Claudeが「ここはこう書きます」「ここはこの理由でこう設計します」と一つずつ説明してくれるので、判断だけ私がする、という形で進みました。

合計、おおよそ3〜4時間。夜またぎで完成しました。

実は途中で、一度大きく作り直しています。

最初Claudeが組んでくれたのは、「QRの中央に小さくロゴが入る」よくあるタイプ。でも私が欲しかったのは、画像全体にQRが溶け込むような、もっとデザイン性の高いものでした。

「イメージと違う。こういう感じにしたい」と伝えると、Claudeは設計から組み直し。今度は、画像の上にQRのドットを半透明で重ね、画像が透けて見えるハイブリッド型に。

ここで一つ、地味だけど大事な工夫があります。QRには「位置検出パターン」と呼ばれる、左上・右上・左下の3つの角にある四角い目印があるのですが、ここだけは半透明にせず、白背景＋不透明でくっきり描く設計にしました。読み取り精度を絶対に落とさないためです。

「デザイン性」と「ちゃんと読み取れる」を両立する。こういう細部を、Claudeとの対話で詰めていけたのは、正直、想像以上の体験でした。

完成したのがこちらです。
https://qr-image-app.pages.dev/

URLを入れて、お好みで画像をアップロードするだけで、画像と一体化したQRが生成されます（画像なしでも普通のQRとして使えます）。無料で、誰でも使えます。

「動かなくなって困った」が、その夜のうちに「自社で持ってる」に変わった。これが、率直な感想です。

今回お伝えしたかったのは、技術自慢ではありません。

「自分の業務に必要な小さなツールを、AIと対話するだけで、自分の会社で持てる時代になった」ということです。

外注すれば数十万円、納期は数週間。それが、3時間と数百円の電気代で、自分の手元に来る。これは、宮城・仙台のスモールビジネスにとって、とても大きな話だと思っています。

「うちでもこういうのできる？」「業務のこの部分、AIで自動化できない？」——そんな素朴な疑問でかまいません。初回相談は無料で承っています。お気軽にお声がけください。

合同会社Trash-B　濱木