ベストケース#

#はじめに

MeDo Moment へようこそ。MeDo を最大限に活用するためのクイックガイドです。 初めて利用する方は、ここから始めるのが最適です。すでに MeDo に慣れている方からのフィードバックも歓迎します。皆さんの提案が改善につながります。それでは、MeDo の旅を始めましょう。

#1. チャットモード

メリット： 非エンジニアのユーザーに最適で、結果をすばやく簡単に生成できます。

デメリット： 仕上がりを磨き込むには、複数回の反復が必要になる場合があります。

会話形式のやり取りを通じて、アイデアを具体化できます。例：「テクノロジー製品発表会向けに、必要なイベント情報をすべて含む H5 招待ページを作成してください。」

プロンプトを調整すると、MeDo は概要を詳細なアプリ要件へ展開できます。例：

テクノロジー製品発表会向けの H5 招待ページを設計してください。デザインはモダンでテクニカルな印象にし、次の情報を必ず含めてください。
- 製品名
- イベント日時
- イベント会場
- 製品の主な機能またはハイライト
- 登録方法と締切

ページレイアウト、推奨カラーパレット、インタラクション、コンテンツモジュールを含む、完全な H5 ページ設計案を作成してください。
- ページレイアウト：わかりやすく簡潔な構成にします。ホームページでは製品の中核的な価値を強調し、訪問者が意義をすばやく理解できるようにします。
- カラーパレット：テクノロジー感のある青と白の配色を取り入れ、モダンな美しさを表現します。
- インタラクション：タッチ/スワイプやクリック操作を追加し、エンゲージメントを高めます。
- コンテンツモジュール：
1. カバー：製品名、日時、会場、テクノロジー風の背景。
2. 製品概要：詳細な機能とハイライト。画像、テキスト、動画を組み合わせます。
3. 登録：登録入口、登録方法、締切。
4. インタラクティブセクション：Q&A、投票、その他の参加型アクティビティ。
5. クロージング：感謝メッセージ、会社の連絡先、今後のイベント予告。

モジュール詳細：
- **カバー**
- 要素：製品名、日時、会場、アニメーション付きのテクノロジー風背景（例：パーティクルアニメーション）。
- インタラクション：控えめな背景アニメーションを自動再生し、タップ/クリックで次のセクションへ進みます。
- **製品概要**
- 要素：高解像度の製品画像、主要機能、デモ動画。
- インタラクション：画像をスワイプで閲覧し、再生をタップしてデモを表示します。
- **登録**
- 要素：「今すぐ登録」CTA、締切リマインダー、参加者向け案内。
- インタラクション：登録をタップして登録フォームを開きます。送信後に登録完了を確認します。カウントダウンを追加して緊迫感を演出します。
- **インタラクション**
- 要素：短い製品関連 Q&A と機能の好みに関する投票。
- インタラクション：ユーザーは回答を送信でき、後で正解を表示します。投票も可能で、リアルタイム結果を表示します。
- **クロージング**
- 要素：感謝メッセージ、会社ロゴ、連絡先情報（電話、メール、Web サイト）、今後のイベント予告。
- インタラクション：会社ロゴをタップして公式 Web サイトを開き、「さらにイベントを見る」をタップして今後の活動を表示します。

#2. 上級モード：総合アプリケーション

メリット： 技術スタック、UI、インタラクションパターンまで指定でき、完全にコントロールできます。

デメリット： 技術的な知識と明確な製品仕様が必要です。

#例 1

（技術スタック） React 19 + TypeScript + Vite + TailwindCSS + shadcn/ui を使い、MeDo という AI コードエディターのフロントエンド Demo を生成してください。既定はダークテーマで、ワンクリックでライトモードに切り替えられるようにします。 （プロダクト設計 & UI） レイアウト：

• 上部固定ナビゲーションバー：左に MeDo ロゴ、中央にタブ（Demo、Template、Community）、右にテーマ切り替えとプロフィールメニューを配置します。
• 左側に折りたたみ可能なサイドバーを置き、4 つのアイコンショートカットを含めます：① 新規 Demo ② マイ Demo ③ お気に入り ④ 設定。
• メイン領域は 2 カラム構成。左：Monaco 風コードエディター（70%）で、行番号、シンタックスハイライト、コピー、全画面ボタンを備えます。右：ライブプレビュー iframe（30%）で、更新とエクスポート操作を備えます。
• 下部に全幅のフローティング入力欄を配置します：「1 文で Demo を生成」。Enter を押すとローディングアニメーションが始まり、約 10 秒後に生成コードがエディターへ挿入され、プレビューが自動更新されます。
• すべてのボタンに控えめなホバー時の拡大アニメーション（Framer Motion）を使い、サイドバーの折りたたみ/展開は滑らかにアニメーションさせます。

#生成結果

#例 2

（技術スタック） React 19 + TypeScript + Vite + TailwindCSS 3 + Zustand を使い、モバイル H5 のサブスクリプション管理 Demo を生成してください。既定はダークテーマで、ワンクリックのライトモードを用意します。 （プロダクト設計 & UI） 構成：

• 3 層ナビゲーション：① 上部固定検索バー + グローバルな「サブスクリプション追加」ボタン；② メイン領域はサブスクリプション、統計、設定の 3 タブ；③ 下部の角丸 TabBar はスクロールに応じて表示/非表示にします。
• サブスクリプションページ：ウォーターフォール形式のカードで、サービスロゴ、名称、月額/年額料金、次回請求日、残り日数を表示します。カードは左スワイプで削除、右スワイプで編集、タップで詳細表示（請求履歴グラフ + 変更ボタン）に対応します。
• 統計ページ：Recharts を使って月次/年次の棒グラフと合計のドーナツチャートを表示し、期間選択に対応します。
• 設定ページ：通貨セレクター、期限前通知トグル、CSV エクスポートを用意します。
• すべてのインタラクション（拡大/フェード、スワイプ、タブ切り替え、チャート遷移）は滑らかで洗練されたものにします。

#ユーザーガイド

#まず価値を作る：見た目より体験を優先する

よくある失敗は、初日から UI にこだわりすぎることです。プロダクトは問題を解決するために存在します。ユーザーがまず求めるのは解決策であり、見た目はその次です。

次の優先順位で作りましょう：UX → 機能 → データベース → UI

1. ユーザー体験（UX）： コードを書く前に、ユーザージャーニーを整理します。どの画面が必要か。価値を届けるために最もシンプルで直感的な流れは何か。優れた解決策でも、ユーザーが使い方を理解できなければ失敗します。
2. 機能： ユーザーフローが定まったら、各ステップが確実に動き、ユーザーが操作をコントロールできていると感じられる機能を実装します。
3. データベース（DB）： 機能が明確になったら、データモデルを設計します。何を保存し、どう保護すべきかがはっきりします。スキーマ設計ではセキュリティのベストプラクティスに従ってください。
4. ユーザーインターフェース（UI）： プロダクトがエンドツーエンドで動作してから、色、タイポグラフィ、余白、控えめなアニメーションなどの見た目を磨きます。UI の変更が検証済みのフローを壊したり、重要な操作を見えにくくしたりしないようにしてください。

#正確なプロンプトを書く：具体的で測定可能にする

AI は明確な指示があるほど力を発揮します。クライアントが「この設計図をもっと美しくして」と言ったと想像してください。「もっと美しく」とは何を意味するのでしょうか。どの部分を、どの対象者に向けて変えるのでしょうか。

プロンプトの黄金律：

「5 歳の子どもに頼んでも、何をすればよいか理解できるだろうか？」

答えが「いいえ」なら、より簡潔にし、詳細を追加しましょう。

#最初の入力が重要

最初のプロンプトはプロジェクトの方向性を決めます。プロダクトの土台として扱いましょう。「レシピアプリを作って」のような曖昧な指示だけでは不十分です。

最初のプロンプトを書く前に、次のような問いに答えてください。

• アプリにホームページはありますか？
• ログインと登録のフローはありますか？
• ダッシュボードはありますか？何を表示しますか？
• ユーザーは自分のコンテンツ（例：食材やレシピ）を追加できますか？
• アプリは収益化しますか？どの決済プロバイダーを使いますか？
• 主なビジュアルトーンはどのようなものにしますか？

これらの答えを書き出しましょう。急がないでください。最初のプロンプトの調整には数時間かかることもありますが、その努力は成果につながります。

他の AI（例：GPT、Claude、ERNIE Bot）も使ってプロンプトを反復し、一貫性を確認しましょう。競合サイトを分析する場合は、URL を AI に渡して構造、色、フォントを説明してもらい、その分析を MeDo 向けの詳細なデザインプロンプトに変換します。

まだ質問がある場合は、MeDo Assistant を追加して 1 対 1 のサポートを受けてください。 お読みいただき、ありがとうございます。