makoto-developer's テックブログ

私がClaudeで開発するときによく使っている指示集

#Claude

毎回私が指示した内容を1ヶ月記録していてうまくいっている指示の仕方を共有します。

1. アプリを作る時

新しいアプリを作る時は↓のような指示をしています。

❯ アプリを作ってもらいたいです。

  # アプリの説明
  - 英語のPDFと翻訳したPDFをマージするアプリ

  ## 利用ユーザ
  - macOSを使っているユーザ(Windowsやスマホアプリは想定しない)

  ## 仕様
  - 英語のPDFと翻訳したPDFを比較して、同じページをマージして新しいPDFファイルを作る
    - 左がオリジナル(英語)、右が翻訳(日本語)
  - `pdfs`ディレクトリにオリジナル、日本語版、マージ後のファイルをそれぞれ管理する
  - アプリを開くと翻訳したPDFの一覧(セット一覧画面と呼ぶことにする)が表示される
    - クリックするとマージ後のPDFが表示される
    - `新しいセット`ボタンをおすとオリジナルと翻訳後のPDFを選択する画面が表示
      - ２つをセットして`マージ`ボタンをおすと同じページどうして左右にマージ(左がオリジナル、右が翻訳後)
        - PDFの元の大きさは同じものと判断してOK(もし違っていたら上下中央揃えで表示)
      - 終わるまで「作業中」の表示(PDFの選択ができない、マージボタンも押せない)
      - 終わると通知(UIUXはあなたに任せる、提案して)
      - 終わったらセット一覧画面に遷移(作成したセットが表示される)

  ## 画面イメージ
  - セット一覧画面のイメージ ->#1を参照
  - セットを作る画面のイメージ -> #2を参照
  - マージしたPDFを閲覧する画面 -> #3を参照

  ## スタック(使う言語やフレームワーク、ライブラリを指定します)
  - rust
  - tauri
  - pnpm

  ## ルール
  - ポートは15032(.envなど設定で変更可能にして)
  - アプリの操作とパラメータなどがログで常に出力される。
    - `logs/`でログが出力される(アプリがうまく動かなかった時のデバックで使う)
  - miseで管理
    - miseでビルドタスク、Lintチェックタスク、など開発に必要なタスクを整理
  - gitignoreを作成
  - npmよりpnpmを使うこと(おそらく今回のアプリでnpmを使うことになるはず)
  - ライセンスは`CC BY-NC 4.0`
  - プログラミング言語は安定版で、可能な限り最新を利用(miseのコマンドで最新を検索)
  - ライブラリを最新を利用

  # 以下の流れに従って作業をすること(PO/Manager/Developer/QAエージェントを起動)
  (ルール -> 確認をしてから次のステップへ進むこと)
  1. 上記の仕様をあなたが理解して(不明点は私に質問すること)
  2. 画面構成、画面フローを整理(問題ないか確認)
  3. 設計を提案(技術選定)
  4. 仕様からテストコードを生成(今回はe2eを省略)
  5. 実装
  6. アプリを起動してフィードバックを受けて微修正

工夫したところ

  • 何があって、どいう操作ができるか、その操作をするとどういう結果になるかを記載する。
    具体的な動きを言葉で書かないと正確に作ってくれません。
  • ルールと書いて余計なことをさせないようにする。
    Claudeは書いてないことは自由に作ったり何かを始めてしまうので制限をかけて手戻りを減らす。
  • # 以下の流れに従って作業をすることを指示に含めることでワークフローを強制して、道を外さない(勝手に変なことを始めない)ようにする。
    この書き方はどのタスクでも通じる書き方です。私はスキル化しているので毎回わざわざ書かないですが、みなさんもし使ってなかったら使ってみてください。
    • 特に2. 画面構成、画面フローを整理はかなり効果的だと思っています。画面構成を文字で絵を書いてもらい、フィードバックを繰り返して思った通りに作るといい感じに仕上がります。

2. 画面のUIの構成を言葉で指示

❯ メニューバーで常駐するようにして

  メニューバー -> [アイコン][再生状態を表示(再生/停止)]

  メニュー
  1. [開始のアイコン] レコードを開始する or <停止のアイコン> レコードを停止
  2. [一時停止のアイコン] 一時停止する(レコードが開始されてない場合は非活性)
  3. [アイコン] このアプリについて -> #1の画像を参考にしてwindowを表示(cmd + wで閉じる)
  4. [アイコン] フィードバックを提出 -> githubのissueページでフィードバックissueを作るページへ遷移
  5. [アイコン] 終了する
  ⎿  [Image #2]

  #2は他のアプリのUI画像です。参考にして作って

工夫したところ

  • 画面構成も文字で説明すればある程度仕事してくれるようです(？) (※しばしば失敗するけど大抵はうまくいく)
    ↓のようにUIの構成を文字で指示しても期待通りに作ってくれるので試してみてください。 
                  [ヘッダー](左右中央揃え)
                           [更新ボタン][削除ボタン](右揃え)
[UIコンポーネント(1)][UIコンポーネント(2)]
[UIコンポーネント(3)][UIコンポーネント(4)]
[UIコンポーネント(5)][UIコンポーネント(6)]
  • 参考にしてと画像とか参考資料を見せることである程度構成を鑑みて作ってくれます。

3. Claudeが作業終了の報告する前にテストをさせる


# 報告前にもう一度全ての画面と全ての入力フォームなど全てのボタン、UIを操作して(1)エラーがないこと (2)指示した期待結果を満たすことを確認してから私に報告

工夫したところ

  • #キーワードでルール化させることができます。
  • 報告前にテストさせることで手戻りを減らす。全てをキーワードにすることで満遍なくテストしてくれる。なるべく具体的に指示するのが吉なようです。

(2026-02-02)一旦ここまで書き下したが、続きは暇な時に追記していく

記事一覧に戻る