Claude.aiとClaude Codeを使ってノーコードで2週間で2つもシステムを作った話

前回の記事で「Claude Codeも活用していきます！」と宣言したぬこファクトリーです。

あれから怒涛の日々を過ごしておりまして、気づいたらたった2週間で2つのシステムを作っていました。しかもノーコードで。自分でもちょっと信じられないんですが、本当の話です（誰よりも驚いているのは本人）。

さて、今日はその2つのシステムをどうやって作ったのか、その過程で学んだことや失敗談も含めてお話ししていこうと思います。

なぜ2週間で2つも作ることになったのか

そもそもなんでこんなハードスケジュールになったかというと、タイミングが重なっただけなんですよね。

まず1つ目は、WEB広告配信の案件でLP（ランディングページ）を変えたいという相談をクライアントさんからいただきまして。Geminiと一緒に提案書を作ったところ「いいね、それでいこう！」とOKをもらってしまったんです（もらってしまった、という表現がもう怪しい）。

2つ目は、別のWEB広告のレギュラー案件で、毎回の素材探し・キャッチコピー作成・デザイン制作に時間がかかりすぎていたので、AIを使って省力化したいなと思っていたところでした。

この2つが同時に動き出してしまい、「あれ、これ2週間で2つ作るってこと？」という状況に突入したわけです。

最初はGemini、そしてClaudeへ

実は最初の開発はGeminiで始めたんです。提案書もGeminiで作っていたし、そのままの流れで。

ところが、Gemini 3.0でのシステム開発がもう全然うまくいかなくて。とにかくコミュニケーションに難がありました。こっちが言ったことと違う方向にどんどん進んでいくし、修正をお願いしても噛み合わない。ストレスがMaxになっていく中で、先方に約束した納期に間に合うのかという不安もどんどん膨らんでいきまして。

そこで思い出したんです。以前、個人的な趣味と実益を兼ねたWEBアプリをClaudeで作ったことがあって、そのときの完成度の高さを体感していたことを。

「もうClaudeに切り替えよう」と決断してClaude.aiに乗り換えたら、これがもうびっくりするくらいサクサク開発が進んだんですよね。前回の記事で「我が家のAIはClaudeに決定しました」と書きましたが、この体験こそがまさに決定打でした。

システム1：LINEと連動する予約フォームシステム

1つ目に作ったのは、LPからLINE公式アカウントと連動して、予約確認までしてくれる予約フォームシステムです。

作った機能はこんな感じです。

LP（ランディングページ）
データベース設計
LINE APIとの連携設計
予約フォーム
頼んでないのに予約管理画面（Claudeが気を利かせて作ってくれた）
管理者へのメール送信機能

「頼んでないのに予約管理画面」って、普通に考えたらおせっかいなんですけど、実際に出来上がったものを見たら「いや、これ絶対いるやつだわ」ってなりました。Claudeは本当に先回りして考えてくれるんですよね。こっちが気づいていない必要なものまでちゃんと用意してくれる（さすが結婚相手に最適なAI）。

どんな風に進めたか

この時点ではまだClaude Codeを導入していなかったので、Claude.aiに相談しながら進めました。

「こんなことをやりたい」とClaudeに伝える
Claudeが仕様書を作成してくれる
「この画面を開いて、この設定をやってください」とClaudeに指示される
設定が完了したらコーディングされたファイルをサーバーにアップして動作確認
結果をClaudeにスクショや文章で報告
修正したい内容を相談してClaudeが解決策を提案
疑問点をディスカッションして方針を決定

3〜7をひたすら繰り返す感じですね。

この段階では完全にClaude.aiが上司で人間が部下の関係でした（出世したい）。でも、LINE DevelopersやLINE公式アカウントのAPI連携の設定など知らないことだらけだったので、こうやって一つずつ確認しながら進められたのはすごくよかったと思っています。

システム2：広告入稿用のCSVとAI画像生成システム

2つ目は、CSVファイルから各メディア向けの案件ごとの画像・見出し・説明文をAIが自動生成するシステムです。普段の広告運用業務を省力化するために作りました。

こちらはClaude.aiだけでなく、途中からClaude Codeも投入しています。

最初はClaude.aiで設計・相談
途中からClaude.aiとClaude Codeを並行して使用
最後はClaude Code単体で完了

画像生成についてはローカルのAI生成ソフトを2種類テストしました。ComfyUIとDraw Thingsを試して、最終的にはImagen 4も検討したんですが、結論としては画像の自動生成機能は全て断念しました（無念）。案件ごとの見出しと説明文が入ったCSVファイルの自動生成機能を完成版としています。

皆さん、AIを使った開発あるあるなんですが、「最初にやりたかったこと」と「最終的にできたこと」が変わるのって結構あるんですよね。でもそれは失敗じゃなくて、やってみたからこそわかった結果なので、全然OKだと思っています。

どんな風に進めたか

こちらはシステム1の経験を活かしつつ、Claude Codeも加わったのでちょっと進め方が変わりました。

「こんなことをやりたい」とClaude.aiに伝える
Claude.aiが仕様書を作成
Claude.aiが実装方針を提案
Claude Codeにプロンプトを投げて実行
結果をClaude.aiにフィードバック
テストを実施
問題点ややりたいことをClaude.aiに相談・ディスカッション
必要に応じて仕様を変更

3〜7を繰り返していく流れです。

ただ、ここで一つ問題が発生しました。CUIに苦手意識があったので、Claude Codeとの間にClaude.aiをアドバイザー的な役割で挟んでいたんですが、時間を空けるとClaude.aiが途中で「何でしたっけ？」と記憶喪失になることがあって（おーい！）。そのたびに開発の方針が二転三転してしまったんです。

これはまずいということで、最後はClaude Codeと直接やり取りをして進めることにしました。結果的にこれが大正解で、Claude Codeへの理解がぐんと進み、以降は作業がすごくスムーズに進むようになりました。やっぱり何事も直接向き合うのが一番ですね。

まとめ

2つのシステム制作を通して実感したのは、Claude Codeはやっぱりすごいということです。ブログの下書きを書いている間に、食器を洗っている間に、お風呂に入っている間に、バックグラウンドでコーディングを進めてくれる。VS Codeなどの複数タブを使えるエディタを使えばClaude Codeでマルチタスクもできるので、本当に効率が劇的に上がります。

これを機に、今後人類はプログラミングから解放されていくんじゃないかと心の底から実感しました。大げさに聞こえるかもしれませんが、実際に体験してみると本当にそう思うんですよね。

皆さんも、プログラミングを使ってやりたいことがあるなら、ぜひClaude Codeにチャレンジしてみてください。きっと「え、こんなにできるの？」と驚くはずです。きっと楽しい未来が待っていますよ！