より良いプロンプトの書き方

入力する内容は、得られる結果を左右する最大の要素です。このページでは、最初のプロンプトのための 1 つの公式、見た目を説明するためのいくつかのルール、コピーして使えるテンプレートを紹介します。一度上から下まで読んでください。その後は、末尾のチェックリストだけで十分です。

まだ何も作っていない場合は、先にクイックスタートを済ませてから戻ってきてください。

#ステップ 1 — 5 つの要素の公式で最初のプロンプトを書く

良い最初のプロンプトは、必ず同じ 5 つの質問に答えています。それぞれ 1〜2 文で十分です。

5 つの要素をまとめると、完全なプロンプトになります。

A one-page website for Maple Lane Bakery, for people checking the menu and hours on their phone.
Sections in order: hero with the bakery name and tagline, a menu with six items and prices,
opening hours, and a contact form that saves messages so I can read them later.
Warm and simple: cream background, one brown accent colour, large friendly headings.

書くときに意識したい 3 つのこと：

• 長さより具体性。 曖昧な 2 段落より、正確な 4 文のほうが効果的です。
• 技術ではなく結果を説明する。 「顧客が理容師、サービス、時間枠を選ぶ」のほうが、「React の日付ピッカーを使う」よりも良い指示です。どう作るかは MeDo が決めます。
• 実際の言葉を使う。 プロンプトに残したプレースホルダー（「近日公開」「Lorem ipsum」「$XX」）は、そのまま完成ページに載ります。実際の見出し、価格、住所を MeDo に渡してください。

すでに書いたブリーフがありますか？ 貼り付ける代わりに添付してください。プロンプトボックスで + → Upload（アップロード） をクリックします。MeDo は txt、doc、docx、pdf を読み取れ、最大 5 ファイル、各 20 MB まで対応します。サイトを作成するを参照してください。

#ステップ 2 — 一度で決まるように見た目を説明する

「モダン」や「クリーン」は、人によって意味が異なります。3 つのルールでこれを解消します。

ルール 1：形容詞ではなく、実在するものを挙げる。

• 「クリーンでミニマル」ではなく →「Apple の製品ページのように」
• 「温かく親しみやすい」ではなく →「無印良品の店舗のように。オフホワイト、木の色合い、小さなサンセリフのロゴ 1 つ」
• 「エレガント」ではなく →「古いホテルのマッチ箱のように。深緑の背景、小さな金文字、細い線」

参照は 1 つに絞ります。3 つのスタイルを混ぜると、中途半端なものが 3 つできあがります。

ルール 2：もっとも気になる 2〜3 点について、望まないことを伝える。

• 「純白の背景。クリーム色は不可。」
• 「丸みのあるサンセリフフォント。筆記体もイタリックも不可。」
• 「アクセントカラーは赤 1 色で、ボタンにのみ使用。」
• 「実際の人物の写真。ノート PC のストックフォトは不可。」

ルール 3：アニメーションは多くても 1 つ、平易な言葉で頼む。 「ページが読み込まれたら、タイトルが下からフェードインする。」多くのアニメーションを頼むと、洗練されるどころか騒がしいページになります。

#ステップ 3 — MeDo が構築する前にプランを確認する

最初のメッセージのあと、MeDo はすぐには構築しません。Requirements（要件）、Style（スタイル）、Backend（バックエンド） の 3 つのタブを持つ要件ドキュメントを書き、あなたを待ちます。

ここが、考えを変えるのにもっとも安上がりな瞬間です。

1. 3 つのタブをすべて読みます。ページ、各フォームの項目、アプリが保存する内容を確認します。
2. 違う点があれば、Edit（編集） をクリックしてテキストを直接変更するか、チャットで返信します（「ニュースレターのセクションを削除。Contact に地図を追加」）。
3. 下部の Out of scope（対象外） を確認します。MeDo が意図的に省いたものが列挙されているので、必要なものを戻せます。
4. ドキュメントが希望どおりになったら、Generate App（アプリを生成） をクリックします。

ここで 1 文を直すのは数秒で、費用もかかりません。完成したアプリで同じことを直すには、もう 1 メッセージと追加のクレジットが必要です。

#ステップ 4 — 構築後に変更を依頼する

アプリができたあとは、ルールが少し変わります。

• 場所を指定する。 「Services ページで、価格の列を右揃えにして」は、「揃えを直して」より効果的です。
• 1 メッセージに 1 つの変更。 明確な依頼 1 つはたいてい通ります。6 つの依頼を並べると、部分的にしか通らないことがよくあります。
• 指し示す。 見た目に関することは、Edit モードまたは Screenshot（スクリーンショット） ツールで正確な要素にマークを付けます。アプリを編集するを参照してください。
• MeDo の質問に答える。 依頼が曖昧な場合、MeDo は先に質問します。元のメッセージを再送するのではなく、質問に返答してください。

#コピーして調整できるテンプレート

角括弧の部分を置き換えてください。いずれも 5 つの要素の公式に従っています。

ビジネス向けウェブサイト

A [number]-page website for [business name], a [what the business does] in [city].
It is for [who visits] looking for [what they want], mostly on their phone.
Pages in order: [Home with a headline and one call to action], [Services with prices],
[About with a photo and a short story], [Contact with address, phone, a map, and a form].
The contact form saves messages so I can read them in the admin page.
Look: like [reference site or brand] — [background colour], [one accent colour], [font feel].

予約・注文アプリ

A booking app for [business], for customers who want to [book / order / reserve] without calling.
Customers choose [a service], [a person or item], and [a date and time], then enter their name and phone.
Bookings are saved; I sign in to an admin page to see them in a list and mark them done or cancelled.
Booked slots are greyed out so two people cannot take the same one.
Pages: Home, [Services], Book, Contact, Admin.
Look: [reference], [colours]. Mobile first.

社内ツールまたはダッシュボード

An internal tool for [team] to track [things — orders, leads, tickets].
Only signed-in team members can use it. Each [thing] has: [field 1], [field 2], [status: new / in progress / done].
Main page: a table of all [things] with search and a filter by status.
Detail page: edit any field, add notes, change status.
Dashboard page: counts by status and a chart of [things] created per week.
Look: plain and fast, like a spreadsheet — white background, small text, no decoration.

#よくある間違い

#送信前のチェックリスト

• プロンプトは、それが何で、誰のためで、どのページがあり、どんなデータを保持し、どんな見た目にするかを述べていますか？
• 形容詞だけでなく、実在する参照を挙げましたか？
• もっとも気になる点について、望まないことを伝えましたか？
• テキストは実際のもの（見出し、価格、住所）で、プレースホルダーではありませんか？
• 送信後：Generate App をクリックする前に要件ドキュメントを読みましたか？

それでも意図したものが得られませんか？完成したアプリを 1 メッセージずつ修正するのではなく、要件ドキュメントを直して再生成してください。