GUIDE
作り方ガイド
やることは、要件定義書を Claude Code に渡して「作って」と頼むだけです。デザインにこだわりたい人は、その前に ChatGPT で画面イメージを作って、一緒に渡します。このページでは、はじめての人がつまずきやすいところも含めて説明します。
- 1要件定義書をダウンロード
- 2ChatGPT で画面イメージを作る任意
- 3Claude Code に渡して「作って」と頼む
- 4動かして確かめる・直す
0準備するもの
| Claude の有料プラン | Claude Code は Pro・Max・Team・Enterprise のいずれかで使えます。無料プランでは使えません。 |
|---|---|
| Claude のデスクトップアプリ | claude.ai/download から入れます（Mac・Windows）。アプリの 「Code」タブが Claude Code です。黒い画面（ターミナル）を使わずに進められるので、はじめての人にはこちらをおすすめします。 |
| ChatGPT（任意） | 画面イメージを作るときだけ使います。 |
ターミナルで使いたい人へ
Mac はターミナル、Windows は PowerShell で次を実行すると入ります。
curl -fsSL https://claude.ai/install.sh | bash
irm https://claude.ai/install.ps1 | iex
使うときは、アプリのフォルダに移動してから claude と打ちます。
1要件定義書を保存する
パソコンにアプリ用のフォルダを1つ作ります（例：書類フォルダの中に tenken-app）。各アプリのページの保存ボタンを押すと 要件定義書.md という名前で保存されるので、そのフォルダに入れます。
ここの要件定義書は、Claude Code に渡して作ってもらう前提で書かれています。作る順番や決まりごとは中に書いてあるので、こちらから細かく指示しなくても大丈夫です。
2ChatGPT で画面イメージを作るデザインにこだわりたい人
Claude Code は、画像を見せると、その見た目に合わせて作ってくれます。「どんな雰囲気にしたいか」を言葉だけで伝えるより、1枚の絵で見せたほうが、思いどおりに仕上がります。
- ChatGPT に 要件定義書を添付 して、次の文を送ります。雰囲気のところは、好きな言葉に書きかえてください。
添付の要件定義書は、これから作るアプリのものです。 このアプリのいちばん大事な画面を、デザイン画像にしてください。 実際のアプリのように、文字やボタンまで入れてください。 雰囲気：（例：やさしい／高級感／ポップ／シンプル など、好きな言葉で）
- 気に入るまで「もっと明るく」「ボタンを大きく」「色を青系に」のように直してもらいます。
- できた画像を保存します。一覧画面・詳細画面など、ほかの画面も欲しければ、同じように作ってもらえます。
3Claude Code に渡して「作って」と頼む
- Claude のデスクトップアプリを開き、上の 「Code」 タブを押します。
- 「Select folder」 から、要件定義書を入れたフォルダを選びます。
- 画面イメージがある人は、入力欄に画像をドラッグして貼りつけます。
- 次の文を送ります（画像がない人は、2行目を消して送ります）。
@要件定義書.md をもとに、このアプリを作ってください。 デザインは添付の画像に合わせてください。
あとは待つだけです。作り終わるまで、しばらくかかります。途中で「許可しますか」と聞かれたら、内容を見て許可してください。
4動かして確かめる・直す
できたら、ブラウザで実際に触ります。
アプリを起動して、ブラウザで開けるようにしてください。
直してほしいところは、どの画面で・何をしたら・どうなって・どうしたいか を伝えます。画面のスクリーンショットを貼りつけると、もっと早く伝わります。
（画面名）で（操作）をすると（今の動き）になります。 （こうなってほしい動き）にしてください。
赤い文字のエラーが出たら、そのまま貼りつけます。
このエラーを直してください。 （ここにエラーの文をそのまま貼る）
5途中で止まったら必要なときだけ
要件定義書が長いアプリは、一度で作りきれないことがあります。そのときは新しい会話で、こう送れば続きから作ってくれます。
@要件定義書.md の続きを作ってください。 まず、どこまでできているかを確かめてから進めてください。
それでも止まりやすいときは、要件定義書に書かれた順番（Phase や Session）どおりに、1つずつ頼むと確実です。各アプリのページの「1段階ずつ頼みたいとき」に、その文を用意しています。
6自分用に変える・公開する必要な人だけ
ここの要件定義書は、記事の中で触ってもらうデモとして書かれています。自社で使うなら、まずこう聞いてみてください。
この要件定義書は、記事に埋め込むデモ用に書かれています。 自分の会社で実際に使えるように変えたいです。外したほうがいいところと、残したほうがいいところを教えてください。
インターネットに公開したいときは、こう聞けば手順を案内してくれます。
このアプリをインターネットに公開したいです。 無料でできる方法を、1手順ずつ案内してください。
実際のお客さまの名前や連絡先など、本物のデータを入れる場合は、ログインの仕組みやデータの守り方を必ず確認してください。デモのまま公開すると、誰でも中身を見られる状態になります。
?うまくいかないとき
昨日の続きをしたい
デスクトップアプリでは、画面の横に前の会話が並んでいます。ターミナルでは claude -c で直前の会話を続けられ、/resume で前の会話を選べます。新しい会話で始めるときは、「途中で止まったら」の文を送ります。
直したら、別のところが動かなくなった
さっきの変更のあと、（画面名）の（機能）が動かなくなりました。変更前に戻してから、別のやり方で直してください。
要件定義書と違うものができた
（画面名）が、要件定義書に書かれている内容と違います。要件定義書どおりに直してください。
「上限に達した」と出た
Claude には、一定時間に使える量の上限があります。時間をおいてから、「途中で止まったら」の文で再開してください。
Claude の説明が難しくて分からない
今の説明を、専門用語を使わずに言い直してください。