プロンプトガイド

おそらくあなたはすでに、enter.converge.aiの核心的な魔法がプロンプトにあることを発見しているでしょう。これは、AIとコミュニケーション、コラボレーション、そして創造するために使用する言語です。

プロンプトが優れているほど、結果はより印象的になります。

EnterEnterを、優秀で非常に速いジュニア開発者...ただし読心術が苦手な人、と考えてください。あなたが求めるものは何でも構築できますが、あなたの意図を推測することはできません。あなたの仕事は、完璧なビジネス要件定義書(BRD)のように、明確な指示を提供することです。

このガイドでは、効果的なプロンプティングの技術と科学を順を追って説明し、初心者からプロへと導きます。

---

パート1: 核となる原則 — 堅固な基盤を構築する

何かを構築する前に、これら3つの黄金律を記憶してください。

ルール1: 明確性が最優先(曖昧さを排除する)

曖昧さは最大の敵です。指示はピクセル単位で正確でなければなりません。

悪いプロンプト 👎:

「サイトの料金プランが必要です。」

良いプロンプト 👍:

「以下の機能を持つインタラクティブな料金セクションコンポーネントを作成してください:- 月額/年額の切り替えができる3つの料金プラン(Starter、Professional、Enterprise) - Framer Motionを使用したマウスの動きに反応するアニメーション星空背景 - 年額請求に切り替える際の紙吹雪アニメーション - @number -flow/reactを使用したスムーズな価格トランジション - デスクトップで持ち上がる「Most Popular」バッジ付きのProfessionalカード - アニメーションするスライディングピル効果付きの月額/年額トグル - スクロール時の段階的カードアニメーションを持つレスポンシブレイアウト - セマンティックデザイントークンを使用したモダンなブルーカラースキーム」

https://9564a74b85ba4b6b877a95dcf70a26a8.prod.enterapp.pro

プロのヒント: プロンプトは、Create、Generate、Refactor、Write、Design、またはList

ルール2: 文脈が次に重要(「理由」を提供する)

Enterは、あなたのプロジェクトが何であるか、誰のためのものか、目標が何かを知りません。「何を」の背後にある「なぜ」を提供する必要があります。

悪いプロンプト 👎:

「ランディングページを作成してください。」

Good Prompt 👍:

"私は新しいAIカラーパレットジェネレーター「Chroma」のランディングページを構築しています。このデザインは、デザイナーの観客を感動させるために、未来的で芸術的、そしてプレミアムな感じでなければなりません。微妙なアニメーショングラデーション背景を持つ「グラスモーフィズム」ヒーローセクションが欲しいです。退屈な「機能」リストの代わりに、ユーザーがサンプルカラーパレットがモックUIカードに動的に適用されるのを見ることができるインタラクティブなセクションが欲しいです。これがメインのセールスポイントです。"

https://a9e8f5c49fbf4b2ca5a7ed6db9253f69.prod.enterapp.pro

ルール3: 一貫性を強制する(「箱」を定義する)

AIにはデフォルトのセンスがありません。ルールがなければ、それは乱雑なアーティストになります。AIが遊ぶための「箱」、つまりあなたのデザインシステムを定義しなければなりません。これが洗練されたプロフェッショナルなアプリの秘訣です。

Bad Practice 👎:

"青いCTAボタンを作って。"

"価格カードを作成して、'Pro'プランを強調して。"

Good Practice 👍:

"このアプリはハイエンドな金融分析ツールなので、テーマは「ダークモード第一」で、プロフェッショナルで、Bloomberg TerminalやLinearのようにデータ密度が高くなければなりません。これらのルールを強制してください: テーマ: ダークモードのみ。背景: '#111111'。メインカード/モジュール背景: '#1A1A1A'。タイポグラフィ: すべてのテキストに'Inter'を使用。すべての数字と金融データには'SF Mono'を使用。アクセントカラー: 単一の鮮やかなアクセント: '#00F5D4' (明るいティール)。これはプライマリCTAとアクティブなデータポイントにのみ使用。スタイル: border-radiusなし; すべての要素は鋭い90度の角を持つ必要があります。シャドウではなく'#333333'の1pxボーダーを使用してコンポーネントを定義。"

https://41849c3aa6604b49a9b8a9a6e6cb5df4.prod.enterapp.pro

---

パート2: enter.converge.aiプレイブック — レゴのように構築する

これはページだけでなく、アプリケーション全体を構築するための最も重要な戦略です。

戦略1: モジュール式に構築する、モノリシックではなく(レゴメソッド)

これが初心者の最大の間違いです。Enterに複雑なアプリケーション全体を一度に生成させようとしないでください。

プロフェッショナルなアプローチは、一度に1つの完全な画面またはユーザーフローを構築することです。

Bad Prompt 👎:

"Airbnbのようなアプリを作って。"

Good Prompt 👍:

"私たちのAirbnbクローン「Roam」の完全なユーザー予約フローを構築しましょう。画面ごとに進めます。画面1から始めます: リスティング詳細ページ。この画面には、フォトグリッド(Airbnbのように、1つのメイン画像と4つの小さな画像)、右側に予約/一泊あたりの価格モジュールを持つ「スティッキー」サイドバー、左側にメインコンテンツカラムが必要です。"

"OK、素晴らしい。次に、画面2を作成してください: 「確認と支払い」ページ。ユーザーが画面1から「予約する」をクリックすると、ここに到着します。このページには、予約概要、価格内訳、そしてクレジットカード入力用のシンプルで高度に安全なフォームが必要です。デザインはコンバージョンを最大化するために極めてクリーンで信頼できるものでなければなりません。"

https://26985927857e4d70be5075c634aae015.prod.enterapp.pro

戦略2: 例を提供する(Few-Shotプロンプティング)

希望するデザインパターンが説明しにくい場合は、ただ伝えるだけでなく、見せてください。Enterに希望するビジュアルパターンを教えるために、ミニ入力/出力例を提供してください。

Bad Prompt 👎:

"チームメンバーのリストを表示する必要があります。"

Good Prompt 👍:

"「チーム紹介」ページを作成する必要があります。人物のリストはありますが、特定のビジュアルパターンを適用したいと思います。以下が私のパターンです: 入力パターン: [Name], [Role], [Short Bio], [Image URL] 出力パターン(ビジュアルレイアウト): カードを作成します。[Image URL]は3:4のアスペクト比で、デフォルトでグレースケールフィルターを適用します。インタラクション: ホバー時に、画像がフルカラーに移行し、わずかにズームイン(scale 1.05)します。画像の下に、[Name]を大文字の'Inter'フォント(tracking-wide)で表示します。名前の下に、[Role]をセリフフォント、イタリック、ライトグレーで表示します。* では、この正確なビジュアル出力パターンを以下のデータに適用してください: [3人のチームメンバーのデータ...]。次に、すべての4つのカードをレスポンシブな3カラムグリッドでレンダリングします。"

https://203ec90377454c449b382cba0dd6dc99.prod.enterapp.pro

---

パート3: 高度なテクニック — AIをあなたのパートナーにする

基本をマスターしたら、これらのテクニックを使ってワークフローを向上させましょう。

テクニック1: AIにあなたに質問をさせる

複雑なアプリ画面のために十分な詳細を提供したかどうか確信が持てない場合は、立場を逆転させてEnterに要件を生成させます。

Bad Prompt 👎:

"ユーザープロフィールページが欲しいです。"

Good Prompt 👍:

"ユーザー向けの完全な「アカウント設定」エリアをデザインしたいです。これは複数のタブを持つ複雑なページになります。構築を始める前に、必要なセクション、データ、ユーザーアクション(アカウント削除のための「危険ゾーン」など)について、完璧なデザインを作成できるように、5つの重要な質問をしてください。"

テクニック2: アートディレクターのように話す

Enterは専門用語を理解します。業界のキーワードを使用して、複雑な美的感覚を迅速に定義しましょう。

Bad Prompt 👎:

"写真を見せるためのウェブサイトを作ってください。"

Good Prompt👍

"高級ファッションフォトグラファーのためのホームページを構築してください。美的感覚は「エディトリアル」と「ミニマリスト」である必要があります。フルスクリーンで非対称な「ブロークングリッド」レイアウトが必要で、'Awwwards'または'Vogue'にインスパイアされたものにしてください。グリッドはインタラクティブである必要があります: ユーザーのマウスが画像の上にホバーすると、わずかに拡大(例: scale: 1.05)し、グレースケールからフルカラーに移行する必要があります。タイポグラフィは太字でエレガントなSerifフォント('Playfair Display'など)である必要があり、一部の見出しは画像に重なる必要があります。ナビゲーションは小さくミニマルなsans-serifで、左上隅に固定される必要があります。"

https://d38e2d22eb6b4173b8adfefb7a02816a.prod.enterapp.pro

テクニック3: デバッグの方法(問題が発生したとき)

Enterが行き詰まったり、アプリでビジュアルのミスをしたりしたときは、単に「修正して」と言うのではなく、シニア開発者のように導いてください。

スクリーンショットを提供する 🌟: これが最速の方法です。壊れたセクションとエラーメッセージのスクリーンショットをアップロードします。

"このモバイルスクリーンショットでわかるように、カードがコンテナからはみ出しています。600px未満の画面では、単一カラムのflexレイアウトである必要があります。メディアクエリを確認してください。"

理由を尋ねる 🌟:

"このレイアウトシフトの根本原因は何ですか?簡単な言葉で説明してください。"

ピボット 🌟:

"このCSS Gridのアプローチはうまくいっていないようです。まったく異なる方法を試しましょう。このセクション全体をFlexboxを使用するようにリファクタリングしてください。"

---

結論：あなたの旅は始まったばかり

プロンプティングは芸術であり、スキルでもあります。学ぶ最良の方法は試行、エラー、そして反復です。

実験を恐れないでください。指示が明確であればあるほど、コンテキストが豊富であればあるほど、そしてアプリ画面がよりモジュール化されていればいるほど、結果はより素晴らしいものになります。

さあ、enter.converge.aiにアクセスして、最初のプロンプトを試してみましょう!

---

付録：enter.converge.aiプロンプティングチートシート

プロンプトでこれらのキーワードを使用してみてください。これらはEnterがあなたの意図を正確に理解するのに役立ちます。