ベストケース#

#はじめに

MeDo Moment へようこそ —— MeDo を最大限に活用するためのクイックガイドです。 初めての方には、ここが最適な出発点です。既に MeDo に慣れている方は、フィードバックをお寄せください。皆さまのご提案が MeDo の改善につながります。それでは、MeDo の旅を始めましょう。

#1. チャットモード

メリット： 非技術系ユーザーに最適 —— 素早くシンプルに結果を生成できます。

デメリット： 洗練された仕上がりに至るまでに、複数回のイテレーションが必要になる場合があります。

対話を通じてアイデアを磨けます。例：「テック製品ローンチ用の H5 招待ページを、イベントの主要情報をすべて含めて作ってください。」

プロンプトを整えると、MeDo は概要を詳細なアプリケーション要件に展開してくれます。例：

テック製品ローンチ向けの H5 招待ページをデザインしてください。全体はモダンかつテック感のあるトーンで、以下の情報を必ず含めます：
- 製品名
- 開催日時
- 会場
- 製品の主要機能・ハイライト
- 申し込み方法と締切

ページレイアウト、推奨カラーパレット、インタラクション、コンテンツモジュールを網羅した完全な H5 設計プランを納品してください。
- ページレイアウト：明快で簡潔に。トップは製品のコアバリューを強調し、訪問者が意義をすぐに掴めるようにする。
- カラーパレット：ブルー×ホワイト基調のテック配色でモダンな美意識を演出。
- インタラクション：タッチ／スワイプとクリック操作でエンゲージメントを高める。
- コンテンツモジュール：
1. カバー：製品名、日時、会場、テック調背景。
2. 製品概要：機能とハイライトを画像／テキスト／動画のミックスで。
3. 申し込み：申し込み導線と締切。
4. インタラクションセクション：Q&A、投票などの参加型要素。
5. クロージング：感謝メッセージ、企業連絡先、次回イベント予告。

モジュール詳細：
- **カバー**
- 要素：製品名、日時、会場、テック調背景アニメーション（例：パーティクル）。
- インタラクション：控えめな背景アニメーションを自動再生。タップ／クリックで次セクションへ。
- **製品概要**
- 要素：高解像度製品画像、コア機能、デモ動画。
- インタラクション：画像スワイプ、Play タップでデモ再生。
- **申し込み**
- 要素：「今すぐ申し込み」CTA、締切リマインダー、参加者向け案内。
- インタラクション：「申し込み」をタップでフォームを開く。送信で確定。カウントダウンで緊迫感を演出。
- **インタラクション**
- 要素：製品関連の短い Q&A、機能プリファレンス投票。
- インタラクション：回答を送信できる（正答は事後に表示）、投票結果はリアルタイム表示。
- **クロージング**
- 要素：感謝メッセージ、企業ロゴ、連絡先（電話／メール／サイト）、次回イベント予告。
- インタラクション：ロゴタップで公式サイトへ、「もっと見る」タップで今後のイベント一覧へ。

#2. アドバンストモード：フル機能アプリケーション

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

デメリット： 技術的な知識と、明確なプロダクト仕様が必要です。

#例 1

（技術スタック） React 19 + TypeScript + Vite + TailwindCSS + shadcn/ui を使い、MeDo という AI コードエディタのフロントエンド Demo を生成してください。デフォルトはダークテーマ、ワンクリックでライトモードに切替可能。 （プロダクトデザイン & UI） レイアウト：

• 上部固定ナビゲーション：左に MeDo ロゴ、中央にタブ（Demo、Template、Community）、右にテーマ切替とプロフィールメニュー。
• 左サイドの折りたたみ可能なサイドバー、4 つのアイコンショートカット：① 新規 Demo ② マイ Demo ③ お気に入り ④ 設定。
• メインエリア：2 カラム —— 左は Monaco 風コードエディタ（70%）、行番号／シンタックスハイライト／Copy／全画面ボタン付き。右はライブプレビュー iframe（30%）、Refresh／Export 付き。
• 下部にフローティングの全幅入力欄：「1 文で Demo を生成」。Enter でローディングアニメーション、約 10 秒後に生成コードがエディタに反映され、プレビューが自動更新される。
• すべてのボタンは hover 時に控えめなスケールアニメーション（Framer Motion）。サイドバーの開閉もスムーズにアニメーションする。

#生成結果

#例 2

（技術スタック） React 19 + TypeScript + Vite + TailwindCSS 3 + Zustand を使い、モバイル向け H5 のサブスク管理 Demo を生成してください。デフォルトはダーク、ワンクリックでライトに切替可能。 （プロダクトデザイン & UI） 構成：

• 3 層ナビ：① 上部固定のサーチバー + グローバル「サブスク追加」ボタン。② メインエリアを 3 タブ（サブスク／統計／設定）に分割。③ 下部の角丸 TabBar はスクロールに応じて隠れる／現れる。
• サブスクページ：ウォーターフォールカードで、サービスロゴ、名称、月額／年額、次回請求日、残日数を表示。カードは左スワイプで削除、右スワイプで編集、タップで詳細（請求履歴チャート + 変更ボタン）。
• 統計ページ：Recharts で月次／年次の棒グラフ、および合計のドーナツチャート。期間セレクタあり。
• 設定ページ：通貨セレクタ、期限前通知トグル、CSV エクスポート。
• すべてのインタラクション（スケール／フェード、スワイプ、タブ切替、チャート遷移）はなめらかで洗練されているべき。

#3. ページの見た目を思い通りに仕上げる

#形容詞ではなく、具体的なものを指さす

友達に「モダンな感じの Web サイトが欲しい」と言っても、たぶん相手はピンと来ません。でも「Apple の iPhone 製品ページみたいな感じ」と言えば、その場でイメージが浮かびます。

MeDo も同じです。形容詞ではなく、具体的なものを指さしてください：

• 「シンプルで洗練されて」→ 「Apple の製品ページみたいに」
• 「あたたかくて親しみやすく」→ 「無印良品の店内みたいに —— オフホワイト、木目、小さなサンセリフのロゴが 1 つ」
• 「上品な感じ」→ 「古いホテルのマッチ箱みたいに —— 深緑の背景、小さな金色の文字、細い罫線」

参照するものは 1 つに絞ってください。1 つのプロンプトに 3 つの雰囲気を混ぜると、融合ではなく、3 つの中途半端な結果になりがちです。

#ページをセクションに分けて、名前をつける

どんなセクションが欲しいかを伝えないと、MeDo は自分で推測するしかありません —— いらないセクションが増えたり、欲しかったセクションが抜け落ちたりします。欲しい構成を順に並べて、普通の言葉で名前をつけてください：

1. カバー —— 大きな見出し、キャッチコピー、ボタンひとつ
2. About us —— 短い紹介文と写真 1 枚
3. サービス —— 3 つのサービス、それぞれ価格つき
4. チーム —— 4 人分の写真と名前
5. お問い合わせ —— 住所、電話、メール、フォーム

このくらい素朴な番号付きリストでも、結果は大きく変わります。

#「欲しいもの」だけでなく「欲しくないもの」も伝える

「欲しいもの」だけを書くと、それ以外のすべては MeDo の推測にゆだねられます。「これはやめてほしい」を 1 行足すほうが、追加の説明を長々書くより効きます：

• 「白い背景 —— ただしクリーム色や生成りではなく、まっさらな白」
• 「丸みのあるサンセリフ体で、筆記体や斜体は使わない」
• 「アクセントカラーは 1 色だけ —— 赤 —— ボタンにのみ使い、本文には使わない」
• 「写真は実在する人の顔で。デスクにノート PC を置いたようなストック写真は使わない」

すべての細部にこれをやる必要はありません —— いちばん気になる 2〜3 点だけ書けば十分です。

#アニメーションはひとつだけ、普段の言葉で

ページに「動き」を出したいなら、大事な動作を ひとつ 選んでください —— 一度にたくさん頼まないこと。友達に説明するくらいの言い方で書きます：

• 「ページを開いた瞬間、タイトルが下からゆっくりフェードインする」
• 「マウスをカードに乗せると、少しだけ大きくなる」
• 「写真は指で左右にドラッグすると切り替わる」

一度に多くのアニメーションを頼むと、ページはむしろ落ち着かなくなります。よく選んだ動きが 1 つあれば十分です。

「Coming soon」「Lorem ipsum」「¥XX」などのプレースホルダを残しておくと、ほぼ確実に最終ページにそのまま出てきます。

#最後に「誰のためのページか」を一文書く

プロンプトの末尾に、このページを実際に開く人を一文で書き添えてください。MeDo にとってそれが狙いを絞る手がかりになります：

• 「結婚式の準備をしているカップルが、スマホでカメラマンを探している場面」
• 「近所の店主が、電話をかける前に価格を確認したい場面」
• 「カフェの前を通りかかった人が、入るかどうか決めようとしている場面」

人物と場面が具体的であるほど、生成結果もその方向に絞り込まれていきます。

#送信前にざっと確認

• 具体的な参照物（実在するブランド、製品、画像）を指さしたか。形容詞だけになっていないか。
• 欲しいセクションを、普通の言葉で番号付きで並べたか。
• いちばん気になる 2〜3 点について「これは違う」を書いたか。
• アニメーションを頼むなら、ひとつだけ選んで普段の言葉で書いたか。
• 見出し、ボタン、価格、住所などの文字は、プレースホルダではなく本物を書いたか。
• 「誰のためのページか」を一文で書いたか。

プロンプトに 10 分余分にかけるほうが、生成を丸ごとやり直すよりずっと早く済みます。参考にしたいサイトのスクリーンショットがある場合は、そこから見えるものを言葉で書き出すほうが、画像だけ添付するより結果が安定します。

#ユーザーガイド

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

初日から UI にこだわり過ぎる、というのは多くの人が陥る誤りです。プロダクトは問題を解決するために存在します —— ユーザーはまず解決策を気にし、見た目はその次です。

構築順序：UX → 機能 → データベース → UI

1. ユーザー体験（UX）： コードを書く前に、ユーザージャーニーを描く。どんな画面が要るか？ 価値が届くもっとも単純で直感的な流れは何か？ 使い方が分からないと、良い解でも失敗する。
2. 機能： ユーザーフローが決まったら、各ステップが確実に動き、かつユーザーが「主導している」と感じられる機能を実装する。
3. データベース（DB）： 機能が定まったらデータモデルを設計する。何を保存し、どう守るかが明確になる。スキーマ設計時はセキュリティのベストプラクティスに従う。
4. UI： プロダクトがエンドツーエンドで通ったら、色、タイポグラフィ、余白、微妙なアニメーションを整える。UI 変更が既に検証したフローを壊したり、主要アクションを覆い隠したりしないよう気を配る。

#正確なプロンプト：具体的かつ計測可能に

AI は明示的な指示で最良を発揮します。クライアントに「もう少し美しくしてください」と言われたとします。「美しく」とは？ どこを？ 誰に向けて？

プロンプトの黄金律：

「5 歳の子どもに頼んだら、この人は何をすべきか分かるか？」

答えが No なら、単純化して詳細を足してください。

ページの見た目や雰囲気そのものが仕上がりの要になる場合 —— ブランドサイト、ポートフォリオ、ローンチページなど —— には、セクション 3 で見た目の伝え方を紹介しています。

#最初の一投が肝心

最初のプロンプトはプロジェクトの方向を決めます —— プロダクトの土台だと思って取り組んでください。「レシピアプリを作って」だけでは足りません。

最初のプロンプトを書く前に、次のような問いに答えておきましょう：

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

これらの答えを書き留めてください。急がないこと —— 最初のプロンプトは数時間かけて磨く価値があり、その投資は必ず返ってきます。

他の AI（GPT、Claude、文心一言など）を使って、プロンプトを磨きつつ一貫性をテストするのも有効です。競合サイトの分析も同じ流れで：URL を AI に渡して構造・色・フォントを説明させ、その分析を MeDo 向けの詳細な設計プロンプトに変換してください。

さらに質問があれば、MeDo Assistant を追加して 1 対 1 で相談できます。 お読みいただきありがとうございました！