生成AI（Claude Code）でBubbleからスクラッチ開発へ移行しました

結果（何を実現したか）

ノーコードツール Bubble で運用されていた業務システムを、**スクラッチ開発（クラウド環境）**へ移行しました。

• DB項目が500件以上あり、Bubbleのワークフロー変更のたびに修正コストが膨らむ状態を解消
• 既存データを外部移行し、データベース設計を再定義
• 画面・機能を再設計したうえで、実装まで一気通貫で移行
• クラウド環境へ移行することで、利用状況によっては 月額の運用費を大幅に圧縮できる見込み

※クライアント固有の情報は伏せて、プロセスのみを整理しています。

---

背景（なぜ移行が必要だったか）

Bubbleは高速に作れて便利な一方で、システムが大きくなると次のような課題が出ることがあります。

• データ項目が増え、構造が複雑化しやすい
• ワークフロー（処理）の変更が入るたびに、影響範囲が広く 修正が莫大になりやすい
• 月額費用が固定で発生し、利用頻度が低い社内システムだと割高に感じやすい

今回のケースでは特に「変更のたびに修正コストが跳ね上がる」点がボトルネックになっていました。

---

進め方（Claude Code をどう活用したか）

生成AI（Claude Code）を開発パートナーとして使い、設計〜実装を加速しました。

1) Bubble内で保持していたデータの外部移行

まずは既存データを外部に移し、移行後の設計・実装の土台を確保しました。

2) 既存データを元にデータベース設計を定義

「現状のデータ構造」を整理しつつ、今後の変更に耐える形に DB設計を再定義しました。

3) 既存画面を状態別にキャプチャして素材化

既存システムの画面を、

• 初期表示
• ボタン押下時
• 特定条件時

のように 状態ごとに名前を付けてPNG保存し、仕様の参照点を作りました。

4) キャプチャ画像から画面設計・機能設計を作成

撮影した画像を材料に、Claude Code に

• 画面設計
• 機能設計

の作成を指示しました。 このとき重要なのは、不明点を曖昧にせず質問させることです（ここを指示しておくと、手戻りが減ります）。

5) 設計から実装プランを作成

画面設計・機能設計をもとに、実装の順序・依存関係・リスクを洗い出した 実装プランを作成させました。

6) プランに沿って実装 → 動作確認 → 微調整

最後は細かい動作確認をしながら、必要な調整を積み重ねて完成度を上げました。

---

やってみて分かったこと（AIが得意／人が速い）

Claude Code は「設計のたたき台作成」「実装プラン作成」「実装の下書き」に非常に強く、開発のスピードが上がりました。

一方で、次のような領域は AIに細かく指示するより、人が直接HTML/CSSを触ったほうが速い印象もありました。

• 帳票（レポート）のテーブル調整
• UIの細かなこだわり（数px単位の調整など）
• パラメータ名の明らかな不一致など、局所的な修正

「AIで全部」ではなく、AIが加速できるところに寄せて、人が最後の品質を締めるのが現実的です。

---

これからの流れ（ノーコード→スクラッチ移行は現実的）

非エンジニアであっても、Claude Code の活用でアプリケーション構築は現実的になってきています。 ただし、基礎的な知識（データベース、HTTP、権限、画面/機能設計など）があるほど、効率と品質は大きく上がります。

また、Bubbleを含むノーコード／ローコードやWordPressなどでも、

• 仕様の限界
• 運用負荷
• 変更コスト

に限界を感じたタイミングで、スクラッチへ移行する選択肢が取りやすくなってきたと感じています。

---

費用感・ご相談

このような「既存システムの移行（ノーコード→スクラッチ）」は **5万円〜**ご相談可能です。

• 現状ヒアリング
• 移行方針の提案（どこまで移すか、段階移行の可否）
• 小さくPoC（試作）してから本移行

など、状況に合わせて進め方も設計します。

ご相談はお気軽にお問い合わせください。