プロンプトの粒度でアプリはどう変わるか

前回の記事では、フォーマットの異なるPDF3枚をExcelにまとめるタスクで、プロンプトの粒度を4段階に変えて実験しました。どのレベルでもExcelは完成し、指示が短いほどClaude Codeが構成や設計を自律的に判断する傾向がみられました。

今回は「アプリを作る」という課題で同様の実験を行いました。お題は「サイトの滞在時間を記録するChrome拡張機能」です。プロンプトの粒度だけを変えて4回依頼し、それぞれの結果をご紹介します。なお、レベル②と①では最初、意図とは異なるアプリが完成しました。

※ Chrome拡張機能とは、Google Chromeに追加できる小さなプログラムです。ツールバーにアイコンが表示され、クリックするとポップアップが開きます。パスワードマネージャーや広告ブロッカーも拡張機能の一種です。

 

実験の設定

4回とも同じテーマ（サイト滞在時間トラッカー）を、プロンプトの粒度だけ変えて依頼しました。Claude Codeは毎回新規起動し、空のフォルダを作業ディレクトリとして渡しています。紹介する順は「丁寧→粗い」となります。

なお、Chrome拡張は通常、manifest.jsonやbackground.js、popup.htmlなど複数のファイルで構成されます。これらのファイルをClaude Codeがすべて自動で生成しています。

※ 実験環境：Claude Code（Sonnet 4.6）、Windows 11、Google Chrome

 

レベル④　丁寧：技術スタック・機能・UIをすべて指定

比較の基準として、技術構成から見た目まで細かく指定したプロンプトを使用しました。

 

→ 指定通りの棒グラフ拡張が5分3秒で完成。除外ドメイン設定ページも自動生成

 

「manifest v3、background service worker構成で、
ドメイン別の滞在時間を記録するChrome拡張を作って。

ポップアップに棒グラフ（Chart.js）で今日の上位10サイトを表示。
リセットボタン・除外ドメインリスト付き。
カラーは#4F46E5系でポップアップ幅は360px。」

▲ レベル④ のプロンプト入力画面

▲ レベル④ の出力結果（処理時間 5分3秒）

▲ レベル④ の完成した拡張（ポップアップ画面）

▲ レベル④ の除外ドメイン設定ページ

 

manifest v3のservice worker構成、Chart.jsの棒グラフ、#4F46E5系のカラー、360pxのポップアップ幅と、指定した内容がそのまま実装されています。除外ドメイン管理用のオプションページも生成されており、動作を確認することができました。

プロンプトで明示した項目はすべて反映されています。フォントサイズや余白など指定していない細部については、Claude Code側が判断して設定しています。

 

 

 

レベル③　普通：機能名だけ伝える

何を作りたいかだけを伝え、技術スタック・グラフの種類・デザインはすべてClaude Codeに委ねたパターンです。

 

→ ドーナツグラフ＋日付ナビ付きの拡張が2分27秒で完成。機能はレベル④と同水準

 

「サイトごとの滞在時間を記録して、ポップアップにグラフで表示するChrome拡張を作って。」

▲ レベル③ のプロンプト入力画面

▲ レベル③ の出力結果（処理時間 2分27秒）

▲ レベル③ の完成した拡張（ポップアップ画面）

▲ ◀▶ボタンで昨日のデータを確認できる日付ナビ（自律的に追加された機能）

 

グラフの種類はドーナツグラフが選択されています。プロンプトで指定したのは「滞在時間を記録してグラフ表示」の2点のみでしたが、上位サイトのランキングリスト、◀▶で過去のデータを確認できる日付ナビ、リセット機能が自動で追加されています。

レベル④よりプロンプトも処理時間も短く、実用的な機能を備えた拡張が完成しています。棒グラフを指定したレベル④に対し、レベル③はドーナツグラフと日付ナビが自動追加された構成となっています。グラフの種類やレイアウトなど、指定していない部分はClaude Codeが判断して設計しています。

 

 

 

レベル②　粗い：目的だけを一行で伝える

「何を作りたいか」のみを伝え、機能やフォーマットの判断はすべてClaude Code側に委ねたパターンです。

 

→ 最初はタイマーが完成。「滞在時間」の追加指示で滞在時間トラッカーに作り直し

 

「Chromeで時間を記録する拡張を作って。」

▲ レベル② のプロンプト入力画面

▲ レベル② の出力結果（処理時間 4分8秒）

▲ レベル② の完成した拡張（タイマー・停止中）

▲ タイマー計測中の様子（開始ボタンを押すと動作する）

 

「時間を記録する」を「作業時間のタイマー」と解釈し、作業名入力・一時停止・記録一覧を備えたタイマー拡張が完成しました。動作はしているものの、意図したサイト滞在時間トラッカーとは異なる結果となりました。

そこで「滞在時間」と追加で送信したところ、既存のコードをサイト滞在時間トラッカーに作り直しました。

 

▲ 「滞在時間」と追加送信 → 作り直しを開始

▲ 作り直し完了（処理時間 2分58秒）

▲ 作り直し後の拡張（滞在時間トラッカー）

完成した拡張には、今日・7日間・30日間・全期間の切り替え機能とサイト別の滞在時間バーグラフが実装されています。最初の指示から追加指示1回で、意図した動作を実現することができました。

 

 

 

レベル①　超粗い：一言から始めて、やり取りで完成させる

最後は、最初のプロンプトを一言のみにしたパターンです。やり取りを重ねながら完成に近づけていく流れをご紹介します。

 

→ 時計→滞在時間追加→バグ報告→自己修正の4回のやり取りで完成

 

「Chrome拡張作って」

▲ レベル① 最初のプロンプト「Chrome拡張作って」

▲ 「どんな機能のChrome拡張を作りますか？」と聞き返される → 「時間」と入力

「どんな機能のChrome拡張を作りますか？」と聞き返されました。情報が不足している場合、このように確認を返してくれます。そこで「時間」の2文字を送信しました。

▲ 「時間」を受け取り、46秒で時計拡張が完成

▲ 完成した拡張（時刻・日付・曜日をリアルタイム表示する時計）

 

「時間」を「時刻・日付・曜日をリアルタイムで表示する時計」として解釈し、46秒で完成しています。こちらも動作する拡張となっていますが、意図したサイト滞在時間トラッカーとは異なる結果となりました。

そこで「滞在時間」と追加で送信したところ、時計に現在ページの滞在時間表示を追加しました。

▲ 「滞在時間」と追加送信 → 既存の時計に滞在時間機能を追加

▲ 機能追加完了（処理時間 46秒）

▲ インストール後の確認 → 滞在時間が 0:00:00 のままカウントされない

 

時計と滞在時間の両表示が実装されましたが、滞在時間のカウントが0:00:00のまま動作しない状態となっていました。そこで「タイマーが動かない」と送信したところ、Claude Codeは原因を特定して修正を行いました。

▲ 「タイマーが動かない」送信後の修正処理（処理時間 44秒）

 

原因はMV3のService Workerがスリープして変数がリセットされる仕様でした。Chrome拡張のバックグラウンド処理は使われていない間に自動停止し、メモリ上のデータが消える仕様のため、滞在時間のカウントがリセットされていたものとなります。chrome.storage.sessionへの切り替えと、スリープ復帰時の追跡再開フォールバックが追加されています。

▲ 修正後の動作確認 → 滞在時間が正常にカウントされている（0:00:10）

▲ Chromeの拡張機能ページにはエラーログが残っている状態

 

タイマーは正常に動作するようになりましたが、Chromeの拡張機能ページにはエラーログが残っていました。主機能の動作には影響はありませんでした。

「Chrome拡張作って」→「時間」→「滞在時間」→「タイマーが動かない」の4回のやり取りで、動作する拡張機能が完成となりました。

レベル②・①に共通しているのは、指示が短いほど「意図とは別の解釈」につながりやすい点です。ただし、いずれも追加指示で方向を修正することができました。

 

 

 

まとめ

4段階の結果を整理します。

 

4回とも、最終的に動作するChrome拡張が完成しています。ただし今回は前回のExcel実験と異なる点があります。レベル②と①では、最初の指示が意図とは異なる解釈につながり、追加指示が必要となりました。

「時間を記録する」はタイマーと解釈され、「時間」は時計と解釈されました。「滞在時間」と明示することで、いずれも追加指示で意図した動作に修正することができています。

プロンプトが短いほど解釈の幅が広がるため、意図した結果を得るには追加のやり取りが発生する場合があることがわかりました。一方で、最終的に動作する拡張が完成する点は、どのレベルでも変わりません。

 

なぜ解釈がズレたか

前回のExcel実験では、どのレベルでも最初の指示から意図した結果が得られました。今回と異なるのは「タスクの明確さ」です。「PDFをExcelにまとめる」は変換対象が具体的ですが、「時間を記録する」は何を時間として記録するかに解釈の余地があります。

「サイトの滞在時間」という概念は、「時間」「時間を記録する」といった短い表現からは直接導き出しにくい言葉です。アプリ開発のような「何を作るか」に判断の余地があるタスクでは、指示が短くなるほどClaude Codeが補う解釈の幅も広がりやすいと考えられます。

 

おわりに

Chrome拡張のような複数ファイルで構成されるアプリでも、Claude Codeは短い指示からファイル構成・実装・動作確認まで一通り進めることができます。

意図した結果と異なった場合は追加で伝える、というやり取りを重ねながら完成に近づけていく方法が、実用上は取り組みやすいアプローチかと思います。まずは短い指示で試してみて、結果を見ながら補足していく進め方でも十分に活用できるツールです。