未ログイン状態で閲覧中
  • 投稿日:2026/04/22
「お手本」をAIに渡そう!Claude Codeでアプリを作るコツ

「お手本」をAIに渡そう!Claude Codeでアプリを作るコツ

  • 3
  • -
きちとも@ブログ

きちとも@ブログ

この記事は約5分で読めます
要約
Claude Codeに同じ指示を与えてるのに、なんだかそれぞれ違うことをしている…? その原因は、環境やAIの解釈の差にあります。 成功済みの「仕組み」や「スクショ」をお手本として渡すことで、進む道を教えてあげられます!

Claude Codeでアプリを作ってみたい、と思っている方は多いと思います。

すでに何らかのアプリを完成させた、という方も大勢いらっしゃいますよね。
私もその一人です。

「簡単な指示でアプリを作ってくれる」

これは確かに事実なのですが……皆さん、本当に「簡単に」作れましたか?

「いつも一瞬で作れるよ!」という方もいるかもしれません。

一方で、実際には何度もやり直しを命じ、ようやく出来上がったよという感じで、人知れず苦労している方も多いのではないでしょうか。

私も正直なところ、「意外と手間がかかるな」と感じていました。
「自分のプロンプトが悪いのかな?」と悩んだこともあります。

でも、実はプロンプトの良し悪しだけが問題ではありませんでした。

この記事では、複数人で同時に同じアプリを作ってみるという体験から気づいた、「アプリ作成で詰まる本当の理由」と、「迷走から抜け出すコツ」をお伝えします。

同じプロンプトでも、進む道はバラバラ

Nao@あなたの夢を叶えるFPさんの記事Canvaいらず?クロコちゃんで背景透過・文字消しアプリを作ってみた』を参考に、「背景透過アプリ」を作りました。

そのときに使った指示文は、たった1行のシンプルなものです。

「jpegやHEIC、pngの画像を受け取ったら、背景だけを透過PNGにするアプリ作れる?」

何度かエラーになったり、参考にしたアプリの画面のスクショを渡すなどのやり取りの末、以下のアプリが出来上がりました。

スクリーンショット 2026-04-20 16.21.39.png画像をドラッグ&ドロップすると↓

スクリーンショット 2026-04-20 16.21.59.png多少の修正はあったものの、時間的にはすぐに出来上がったので、このアプリの作成体験をオフ会で共有したいなと考えました。
30分~1時間くらいの時間があれば作れるだろう、と思ったのです。

ところが、実際に10人規模のオフ会で、全員のClaude Codeに同じ指示文を入力してもらったところ、意外な結果になりました。

短時間で完成したのは、私の周りではわずか1~2人。

他の方は、トークン(利用量)が上限に達してしまったり、いつまでもアプリが形にならないまま時間が過ぎていったり、という状況に陥ってしまったのです。

Claude Codeが裏で懸命に作業しているのは伝わるのですが、肝心のアプリがお目見えしないことには修正の指示も出せません。
結局、多くの方が未完成のまま、オフ会はタイムアップとなってしまいました。

「お手本」を渡したら、迷走が止まった

アプリを完成させられなかったことが心残りで、有志でオフ会の延長戦をすることにしました。

そこで、ひとつの方法を試してみたのです。

私がアプリを完成させた際、Codeに「このアプリはどう動いているのか、仕組みを説明して」と聞いておいたのですが、その「説明文」を未完成の方たちのCodeに読み込ませてみました。

【Codeに渡した設計図(指示と説明文)】

こういう構成の背景透過アプリを作りたい。

①画像をドロップ
②ブラウザがPythonに「この画像を処理して」と送る
③PythonのAIが背景を判別して削除
④透過PNGをブラウザに返す
⑤画面に結果が表示される

※Pythonをインストールしない場合はHTMLのみで構成しようとするようですが、Code曰く「Pythonを使う方が処理が早く、綺麗に仕上がる」とのこと。

これが、効果がありました。
それまで独自ルートで迷走していたCodeが、一度作業を止めて、私のアプリと同じ構成で作り直しを始めたのです。 

「お手本」となる設計図を渡したことで、AIが自分で正解のルートへと軌道修正できました。

背景透過ツールお手本.pngなぜ人によって動作が違うのか?

そもそも、なぜ同じプロンプトを使っているのに、人によって動作がバラバラになってしまうのでしょうか。
もちろんプロンプトの書き方も影響しますが、最大の理由はClaude Codeの仕組みそのものにあります。

Claude Codeは、実行するPCの環境やそのときのAIの解釈によって、ある人にはAという手法を、別の人にはBという手法を提案します。
だから同じプロンプトを渡しても、隣の人とはまったく違う迷路に入り込んでしまうことがあるのです。

「同じ指示文を渡したのに違う動作をする」という現象は、Claude Codeのこのような仕組みによって引き起こされていました。

Gemini_Generated_Image_hrdyv8hrdyv8hrdy.png現時点での、個人的な最適解

この経験から得た気づきは、「迷走してから正解を渡す」よりも「最初から渡しておく」ほうがはるかに効率的だということです。

オフ会の最初は「1行のシンプルなプロンプト」だけを共有したため、AIたちが各自バラバラの方向へ走り出してしまいました。

一方、「仕組み」の説明文を添えたときは、ほぼ全員が同じゴールに向かうことができました。

以上のことから、私がたどり着いた現時点でのベストな手順は、以下の3点をセットで渡すことです。

・シンプルなプロンプト

「何を作りたいか」という目的を伝える

・「仕組み」の説明文

成功済みのCodeに言語化させた「設計図」を渡す

・完成品のスクリーンショット

ゴールの視覚的なイメージを共有する

土台となるプロンプトはシンプルで構いません。
ただ、もし手元に「仕組みの解説」や「完成イメージ」があるなら、最初からCodeに見せてあげてください。
それだけで、Codeが迷う確率はぐっと下がります。

まとめ:詰まったら「お手本」を渡そう

「実績がある手順なのだから、自分も作れるはず」と思っても、なぜかうまくいかない。

その理由は、プロンプトの良し悪しや根気の問題ではなく、AIが迷いやすい仕組みそのものにあります。

AIは疲れません。
だからこそ、間違った方向に進んでいても、一生懸命に「迷走」し続けてしまいます。
でも、それに付き合う人間側は、へとへとになってしまいますよね。

背景透過ツールAIvs人間.png「なんだか時間がかかりすぎているな」と感じたら、一度立ち止まって「お手本(仕組みの説明)」を渡すという選択肢を思い出してみてくださいね。

この記事が、皆さんのアプリ作成をよりスムーズにするための、小さなヒントになれば嬉しいです。

背景透過ハイタッチ.png

 

thank youページ.png

ブックマークに追加した記事は、ブックマーク一覧ページで確認することができます。
あとから読み返したい時に便利です。

きちとも@ブログ

投稿者情報

きちとも@ブログ

パンダ会員

この記事に、いいねを送ろう! 参考になった記事に、
気軽にいいねを送れるようになりました!
この記事のレビュー(0

まだレビューはありません