学習編で見た Planモード（作る前に計画）と /goal（完了条件で自走）を、同じ題材で実際に試します。題材はストップウォッチWebアプリ。同じものを2つのやり方で作り、違いを体感します。

この記事の流れ：①Planモードで「計画→レビュー→承認→動作確認」、②/goal で「完了条件を渡して自走→ブラウザ確認」、③発展として「/goal 用のプロンプトを整える仕組み」を考える。ブラウザでHTMLを開くだけで動く単一ファイルのアプリを作ります。
操作はすべて Claude Desktop アプリで行います。 この記事の手順は、アプリを開いて上部の「Code」タブから進めます。ターミナル（黒い画面）は使いません。「プロンプト例」は Code タブのチャット欄にそのまま入力してください。

このシリーズ（Claude Code を学ぶ）

  1. 基礎 ― 全体像と拡張機能の地図
  2. Skills（学習編）― 繰り返す手順を覚えさせる
  3. Skills（実践編）― 作って、つまずいて、直す
  4. Subagents（学習編）― 作業を別の文脈に切り出す
  5. Subagents（実践編）― 温泉宿を調べて比較する
  6. Hooks（学習編）― 特定のタイミングで自動実行する
  7. Hooks（実践編）― 編集したら自動でチェックを走らせる
  8. MCP（学習編）― 外部サービスへの接続口
  9. MCP（実践編）― Google ドライブ連携でつまずいた話
  10. Plugin（学習編）― 作った部品をひとつの箱にまとめる
  11. Plugin（実践編）― 便利設定を箱に詰めて配る
  12. Marketplace（学習編）― 箱を並べて配る
  13. Marketplace（実践編）― お店に公開し、取り込む
  14. 番外編 ― 拡張機能の選び方チートシート
  15. 拡張編① Agent Teams（学習編）― 複数のAIをチームで動かす
  16. 拡張編② Agent Teams（実践編）― 3人チームで多角的にレビューする
  17. 「これ実行していい？」が毎回つらい ― 権限モードと許可のバイパス
  18. マネジメント層のためのデスクトップアプリ入門 ― 非エンジニアのClaude Code
  19. API活用をスキル化する（学習編）― 反復作業を手順書にして再現する
  20. API活用をスキル化する（実践編）― タスク登録の流れを丸ごと再現する
  21. AIに動画をつくらせる（学習編）― スキルパックと外部APIの仕組み
  22. AIに動画をつくらせる（実践編）― スキルパックで動画を1本つくる
  23. Planモードと /goal（学習編）― 先に計画・完了条件で自走
  24. Planモードと /goal（実践編）― ストップウォッチで試す（この記事）
  25. ルーチン（学習編）― 定期的な確認作業をAIに任せる
  26. ルーチン（実践編）― 朝の確認作業を自動化する

準備

Claude Desktop の Code タブで、この課題用の空フォルダを1つ開いておきます。完成した HTML ファイルをダブルクリックで開けるブラウザがあれば、それで動作確認できます。

その1 ― Planモードで作る

ステップ1：Planモードに入る

チャット欄の左下にある許可モードの切り替えから、Planモードに変更します。

ステップ2：設計を依頼する

Planモードのまま、次のように依頼します。

プロンプト例 ストップウォッチのWebアプリを作りたいです。
【要件】
・HTML / CSS / JavaScript を使った単一ファイル構成
・時間表示は「分:秒.ミリ秒」
・Start / Stop / Reset の3つのボタン
・ブラウザでHTMLを開くだけで動く（サーバー不要）
まず実装計画を提示してください。ファイル構成・動かし方を、非エンジニアにも分かるように説明してください。

AIは「ファイル構成」「画面の作り」「処理の考え方」「実装ステップ」を整理した計画書を返します。この時点ではまだファイルは作られません。

ステップ3：計画をレビューする

観点確認すること
ファイル数単一ファイル（index.html）になっているか
表示形式「分:秒.ミリ秒」になっているか
ボタンStart / Stop / Reset の3つがあるか
余計な機能頼んでいない機能（ラップ等）が勝手に足されていないか

もしズレがあれば、承認せずに直してもらいます。

プロンプト例 計画に「ラップ機能」が含まれていますが、今回は最小機能で十分です。ラップ機能なしの計画に直してください。
ここがPlanモードの一番おいしいところ。 実装が始まる前にズレを直せるので、手戻りのコストがほぼゼロになります。

ステップ4：承認して実装させる

計画に納得したら承認します。Planモードから通常モードに戻り、AIが計画どおりに index.html を作成します。

ステップ5：ブラウザで動作確認

できた index.html をダブルクリックで開き、Start でカウント開始、Stop で停止、Reset で 00:00.00 に戻ることを確認します。うまく動かなければ、そのまま状況を伝えれば原因を調べて直してくれます。

プロンプト例 ブラウザで開きましたが、Startを押しても時間が進みません。原因を調べて修正してください。

その2 ― /goal で自走させる

今度は事前レビューをせず、完了条件を明確に渡して、完成まで一気に走らせます。先ほどのPlanモードの成果物と混ざらないよう、別の空フォルダで進めるのがおすすめです。

プロンプト例 /goal ストップウォッチWebアプリ（index.html単一ファイル）を完成させてください。完了条件は次のすべてを満たすこと：(1)ブラウザでindex.htmlを開くだけで動く (2)Start/Stop/Resetが正しく動く (3)「分:秒.ミリ秒」形式で表示される (4)Lapボタンで現在のタイムを記録し画面下部に時間順で一覧表示する (5)Resetでラップ記録もクリアされる。各条件を満たしているか、自分でindex.htmlを開いて検証してください。
/goal は"確定"させてから実行。 /goal と入力したら、表示される候補をクリックして青字（コマンドとして認識された状態）にしてから続けて条件を書きます。また、/goal は信頼済みのフォルダでしか使えません。フォルダを信頼するダイアログが出ない・エラーが出る場合は、フォルダを作り直すか、Claude 上で「設定ファイルを調べて直して」と相談してください。

実行すると、経過時間や作業を繰り返した回数（ターン数）が表示され、AIが自動で作業を始めます。追加の指示を打たなくても、評価役（達成度をチェックする役）が完了条件を満たすまで作業を繰り返し続けます。終わったら index.html をブラウザで開き、条件をすべて満たしているか確認します。

完了条件の書き方が成否の8割。 「いい感じにして」のような曖昧な条件は評価役が判定できず、ゴールが永遠に解除されません。「ボタンが3つある」「◯◯形式で表示される」のようにチェックリスト形式で書くと安定します。ターンが長引くときは、いったん止めて条件を整理し直しましょう。

発展 ― /goal 用のプロンプトを整える仕組み

/goal は便利ですが、「良い完了条件を自分で書く」のは最初は難しいものです。そこで、自分のやりたいことを /goal 向けのプロンプトに変換する仕組みを用意しておくと、以後ずっと楽になります。

たとえば、まず Claude Code の仕様に詳しい案内役（Claude Code Guide）に「/goal にはどんな指示が良いか」を調べてもらいます。その結果をもとに、今度はあえて Planモードで計画を練りながら、「話した内容を /goal 用のプロンプトに整形してくれるスキル」を作る——といった発展が考えられます。完成したら実際に使ってみて、気づいた点をフィードバックして育てていきましょう。

◀ 学習編に戻る

Planモードと /goal の考え方・使い分けをおさらいしたい方はこちら。

Planモードと /goal（学習編）― 先に計画・完了条件で自走

まとめ

  • Planモード：計画→レビュー→承認→実装→確認。実装前にズレを直せる。
  • /goal：完了条件をチェックリスト形式で渡し、達成まで自走させる。
  • /goal は候補をクリックして青字に確定させ、信頼済みフォルダで実行する。
  • 曖昧な完了条件は失敗のもと。客観的に判定できる条件を書く。
  • 発展として、やりたいことを /goal 用に整形するスキルを作ると継続的に使える。