ノーコードツール(コードを書かずにアプリを作れる仕組み)でアプリ作りに挑戦したものの、「ちょっと複雑な計算をしたい」「他のサービスとデータを連携させたい」というところで手詰まりになりました。
そこで試したのが、AIとの対話でプログラムを書いてくれる「Claude Code」との組み合わせです。
この記事では、実際にその壁を越えるまでの流れを紹介します。
ノーコードの便利さと限界
Bubble・Glide・Adalo・kintoneといったノーコードツールは、ボタンやテキスト欄をパズルのように配置していくだけで、見た目のあるアプリが数時間で完成するのが魅力です。
ただし、あらかじめ用意された部品の範囲でしかアプリを作れないという制約もあり、少し複雑な料金計算のロジックや、外部サービスとのデータ連携になると、標準機能だけでは対応しきれませんでした。
最初の1週間、正直かなり戸惑った
Claude Codeを触り始めた最初の1週間は、正直に言うとかなり戸惑いました。
「ターミナル」という黒い画面自体を開いたことがなく、日本語で指示を出せば動くと聞いていたものの、最初は指示の粒度が分からず、一度に欲張った依頼をしては意図と違う結果が返ってくる、を繰り返していました。
転機になったのは、「一度に一つのことだけ頼む」というシンプルなルールに切り替えたことです。それだけで、やり取りが驚くほどスムーズになりました。
「家の骨組み」と「特注の配線」という役割分担
ここで役立ったのがClaude Codeです。
日本語で「こういう処理をしたい」と伝えるだけで、必要なコードを書き、実行し、動作確認までしてくれます。
ノーコードツールが「家の骨組みと内装」を担当し、Claude Codeが「特注の配線や設備」を担当する、というイメージで役割を分けると、ノーコードだけでは実現できなかった要望まで形にできるようになりました。
まず紙に書き出したこと
作り始める前に、「誰が」「何のために」「どんな操作をして」使うアプリなのかを箇条書きで3〜5行にまとめました。
ここが曖昧なまま作り始めると後で手戻りが増えると聞いていたので、最初に少し時間をかけたのが結果的に近道になりました。
「足りない部分」をリストアップする
ノーコードツールで画面を組み立てていく中で、「この計算だけは複雑すぎて標準機能でできない」という箇所が必ず出てきます。
それをメモしておき、まとめてClaude Codeに相談する、という進め方にしました。
実際にClaude Codeに頼んだこと
ターミナルを開き、「〇〇の条件で計算し、結果をこの形式で返す仕組みを作って」と伝えると、Claude Codeが手順とファイル名を順番に示しながら作業を進めてくれました。
「サンプルの数字を入れて試してみて」と頼むと、実際に動かした結果を見せてくれ、意図と違えば「〇〇のケースだとおかしい、直して」と伝えるだけで修正が進みました。
つなぎ込みで一番つまずいた部分
ノーコードツール側の「API連携」「Webhook」といった外部連携の設定画面は、最初は用語からして分かりませんでした。
分からない設定項目が出てきたら、その画面のスクリーンショットをClaude Codeに見せながら「この設定欄には何を入れればいい?」と聞くのが一番早い解決法でした。
一人で抱え込まず、今何につまずいているかをそのままAIに説明する姿勢が、遠回りに見えて実は一番の近道だったと思います。
実際に組んでみた例(1)家計管理サポートツール
副業で家計管理のサポートをしている知人の例ですが、「顧客ごとに支出データを入力すると、自動で費目別の割合と改善アドバイスの文章まで表示される」というツールを、Glideで入力画面と結果表示画面を作り、「入力された支出データから費目別の割合を計算し、割合が高い費目に応じたアドバイス文を組み立てる仕組みを作って」とClaude Codeに依頼して数回のやり取りで完成させたそうです。
見た目や入力画面はノーコードに任せ、頭を使う計算部分だけをClaude Codeに任せる役割分担が、双方の得意分野を活かせると感じました。
実際に組んでみた例(2)在庫管理の簡易ツール
もう一つ、自分自身が作った例として、小さな雑貨のネット販売をしている知人向けに、在庫数が一定数を下回ったら自動で通知が届く仕組みを作ったことがあります。
ノーコードツールのスプレッドシート連携機能だけでは「一定数を下回ったら通知」という条件分岐がうまく組めず、Claude Codeに「このスプレッドシートの在庫列を毎日チェックして、指定した数を下回った商品名だけをメールで送る仕組みを作って」と依頼しました。
想定外だったのは、商品によって「危険水準」の数字が違う点で、これも「商品ごとに個別の閾値を設定できるようにしてほしい」と追加で伝えるだけで対応してもらえ、最終的に半日程度で実用レベルのものが完成しました。
外注と比べてどうだったか
エンジニアに外注すれば数万円〜数十万円、打ち合わせも含め数週間〜数か月かかるところを、ツールの月額料金だけで、修正も自分の都合で即座にできました。
もちろん大規模で複雑なシステムや高いセキュリティ要件が求められる開発は専門のエンジニアに任せた方が安心ですが、個人の副業レベルや社内の小さな業務改善であれば、自作で十分にまかなえると実感しています。
データの扱いで気をつけていること
顧客の支出データや在庫情報など、多少なりとも個人情報や取引情報に近いデータを扱う場面では、Claude Codeに渡す情報の範囲にも注意を払っています。
実データをそのまま貼り付けるのではなく、まずは仮のダミーデータで動作確認をしてから、本番のデータに切り替えるという手順を徹底するようにしてから、余計な不安を感じずに開発を進められるようになりました。
公開してからも改善は続く
公開した後も、それで終わりではありません。
実際に使ってみると想定していなかった操作に気づくことがよくあります。
身近な人に使ってもらってフィードバックを集め、気になった点をまとめてClaude Codeに「この部分を改善して」と依頼する。この繰り返しで、少しずつ完成度を上げています。
Claude Codeとノーコードの学習コストの比較
振り返ってみると、ノーコードツールの操作を覚えるのに数日、Claude Codeとの基本的なやり取りに慣れるのにも1〜2週間程度かかりました。ただしノーコードは「画面の見た目」の学習が中心なのに対し、Claude Codeは「伝え方」の学習が中心という違いがあり、後者の方が一度コツをつかむと応用が利きやすいと感じています。
両方を並行して学ぶよりも、まずノーコードで簡単なアプリを1つ完成させてから、足りない部分をClaude Codeで補うという順番の方が、挫折しにくかったです。
実際にかかっている月額費用の内訳
現在の運用でかかっている費用は、ノーコードツールの利用料とClaude Codeの利用料を合わせても、以前検討していたエンジニア外注の見積もりの数分の一程度に収まっています。
特にClaude Codeは、複数のアプリ開発に使い回せるため、1つのアプリだけを外注するより長期的なコストパフォーマンスが高いと感じています。
これから挑戦してみたいこと
今後は、複数のノーコードアプリで共通して使える「部品」のようなコードをClaude Codeにまとめて作ってもらい、次に新しいアプリを作るときの土台として使い回せるようにしたいと考えています。
一度作った資産を次の開発に活かせるようになれば、さらに開発スピードを上げられるはずです。
バックアップ体制について
自作したアプリが増えてくると、「もし設定を間違えて壊してしまったら」という不安も出てきます。
対策として、Claude Codeに変更を依頼する前には、必ず現在の状態を控えておく、あるいは変更履歴を残せる仕組みを使うようにしています。
実際に一度、依頼した変更が意図と違う形で反映されてしまったことがありましたが、直前の状態に戻す手段を用意しておいたおかげで、大きな手戻りにならずに済みました。
非エンジニアだからこそ意識していること
プログラミングの専門教育を受けていない立場だからこそ、「分からないことを分からないまま進めない」ことを徹底しています。
動いているように見えても、なぜ動いているのかを一言で説明できない状態のまま次の機能に進むと、後で大きなトラブルにつながりやすいと感じているためです。
理解が追いつかない部分があれば、その都度Claude Codeに「今の処理を、専門用語を使わずに説明して」と頼み、自分の言葉で説明できるようになってから次に進むようにしています。
これから挑戦する人へ
ノーコードとClaude Codeの組み合わせは、専門知識がなくても「作りたいものを形にする」ハードルを大きく下げてくれます。
最初の一歩は、壮大なアイデアでなくてよく、身の回りの小さな不便を解消する程度のアプリで十分だと伝えたいです。
まとめ
- ノーコードツールは画面作りが得意、Claude Codeは細かいロジック作りが得意
- 組み合わせることで、ノーコード単体の限界を個人の手で押し広げられる
- まずは完成イメージを書き出し、小さな機能から試すのがコツ
- 個人情報に近いデータを扱う際は、ダミーデータでの動作確認を挟むと安心
- つまずいたら、その画面や文言をそのままClaude Codeに見せて相談する
次の一歩として、まずは自分が欲しいと思っている簡単なアプリのイメージを紙に書き出すことから始めてみてください。
もっと詳しく知りたい方へ: Claude Codeを図解でやさしく解説した電子書籍『漫画でわかるClaude Code — AIと一緒にコードが書ける!初心者のための最強ツール入門』をKindleで販売中です。Amazonで「漫画でわかるClaude Code」と検索してみてください。
コメント