Miro Prototypes は、製品チームが初期のアイデアをインタラクティブなプロトタイプに素早く変換する手助けをします。これにより、コンセプトからデザインやコードの前に明確な方向性に進むことができます。
このガイドでは、成功するチームがAIを活用したプロトタイピングでどのように考え、作業するのかを示します。コンテキストを考慮した計画、意図的な生成、チームでの反復、重要なことのテストを行います。
ステップ 1：コンテキストを考える
最高のAIプロンプトは、実際の作業から始まります。チームの考えを反映する付箋、製品要件文書、ユーザーフロー、スクリーンショット、その他のアーティファクトを選んで、キャンバスを基盤として使用します。
チームの進めたところから始める
キャンバスのコンテンツを選択して、あなたのアイデアを定義しましょう。AI はこのコンテキストを使って構造と論理を形作ります。あなたはこのプロンプトを使って始めることができますが、特定の選択に合わせてコンテンツを調整するだけです。n。
プロンプトの例:
「選択したPRDとオポチュニティマップに基づいて、5つの画面を持つモバイルプロトタイプを作成してください。」
既存製品を反復する
製品のスクリーンショットをドロップします。Miro AI はそれを編集可能なモックアップに変換しますので、ゼロから始めることなく変更と改善を行うことができます。
💡 スクリーンショットを選択し、画像をプロトタイプに変換をコンテキストメニューから選択してください。プロンプトは必要ありません。
また、AIチャットで次のイテレーションのコンテキストとして、スクリーンショットや選択されたプロトタイプを使用することもできます。。
プロンプト例:
「選択したスクリーンショットは、株価指数とその今日の価格動向のリストです。画面のバージョンでは、現在のリストの下に、最大の暗号通貨の類似した価格動向のリストを追加してください。現在の画面デザインの他の部分は、そのまま変わらないようにしてください。新しいリストセグメントのためにフッターを拡張することを忘れないでください。また、全体の画面のテキスト出力を英語に変更してください。」
スクリーンショットから作成および修正されたプロトタイプ
さらに進む
- 手順のマッピング: 付箋やダイアグラムでおおまかに旅程をスケッチし、必要な画面数を決めます（例: サインアップ → ダッシュボード → チェックアウト）。
- 雰囲気やテーマを設定する: AIが望む見た目とトーンになるよう、参考となるスクリーンショットやスタイルガイドを追加します。
- 詳細なプロンプトはより良い結果を提供します: プロンプトが詳細であればあるほど、生成されるプロトタイプは希望に近いものになります。異なる要素のカラーに特定の16進コードを指定することもできます。
プロンプトの例:
「選択されたPRDと機会マッピング演習に基づいて、5画面のモバイルプロトタイプを作成してください。デザインのスタイリングとテーマは、選択されたスクリーンショットと完全に一致する必要があります。」
ステップ 2: 配置前に一時停止
最初のプロンプトでビジュアルを完璧にするのは難しいため、何度か編集と反復を行う準備をしておくと良いでしょう。大きなプロンプトは必要ありませんが、Miro AIはプロンプトにできるだけ近い画面を生成します。構造、色、視覚的階層などが重要な場合、それらについて具体的にするのが助けになります。
ステップごとに反復
ステージングエリアは、あなたの実験場です。機能するものは残し、うまくいかないものは再生成しましょう。フレームを選択し、Miro AIを使って配置前に変更を加えます。
例:
「このレイアウトを簡素化し、主要なアクションを目立たせる。」
方向性を比較
- バージョンを切り替える: イテレーションをクリックして、最適な方向を選択します。
- 並べて比較: バージョンをコピーして、隣に貼り付けて視覚的に比較できます。
さらに進む
- ループで作業: 生成 → 改良 → 共有。最初から完璧さを求めないでください。
- コンテキストのメモを追加: 配置する前に、テストや検証内容をキャプチャするために付箋を作成します。
✏️ アイデアをチームに持ち込む前にAIを使って自由に繰り返し試行錯誤してください。キャンバスに適用をクリックすると、皆で視認・編集できるようになります。
ステップ 3： チームで繰り返す
プロトタイプをボードに出したら、AIや手動で一緒にコンセプトを見直し、洗練し、進化させて、何がうまくいくのか、なぜなのかを確認します。
一緒に確認
- 画面を接続して、論理的なギャップや次のステップを明らかにしましょう。
- プロトタイプ フォーマットとフォーカスモードを使用して、ボード全体からの注意をそらさずにプロトタイプだけを共有しましょう。他の人がボードを開くときに、自動で開くようにフォーマットをピン留めしておきましょう。
- プレビューモードに切り替えて、全員が同じフローを追いながら、全体のコンテキストをすぐに参照できるようにしましょう。
画面に直接コメントを入れたり、スタンプで反応したり、うまくいっていること（うまくいっていないこと）を記録しましょう。注釈は、チーム全体の認識を揃えるのに役立ちます。
必要に応じて手作業で編集
すべての変更に新しいプロンプトが必要なわけではありません。自分で微調整したほうが早くて明確な場合もあります。プロトタイピングライブラリを活用して、コンポーネントを入れ替えたり、スペースを調整したり、テキストをリライトしたりしましょう。
チームの誰でもコントロールを取り、編集を行い、アイデアを前進させることができます。
さらに進む
- 目的を持ってスタイルを決める — プロンプトにブランドカラーを含めるか、製品のスクリーンショットをアップロードしてAIに自動的にスタイルを適用させましょう。これにより、プロトタイプが本物らしく見えるのに役立ちます。
プロンプトの例：
「ブランドのガイドラインを使用:プライマリーアクションには#0052CCを使用」
💡 画面を選択し、画像からスタイルをインポート してコンテキストメニューから行います。画像テーマを適用します。
- 非同期フィードバックのためにTalktrackを追加する: あなたの考えを説明し、会議なしでフィードバックを得るためにクイックウォークスルーを記録する（または会議の事前作業として）。
- コメントで決定事項を記録する: 重要なフィードバックや次のステップをボード上で直接要約し、Slackやメールスレッドで情報が失われないようにします。
ステップ 4：テストと改良
チェックを実行し、インサイトを収集し、学んだことを適用します。
あなたのAI サイドキックに相談する
デザインや開発に進む前に、AI サイドキックとチームのクイックレビューでコンセプトを検証しましょう。UX リサーチャーやコンテンツデザイナーのサイドキックを呼び込み、別の視点で迅速なレビューを実施します。これを簡易なユーザーテストとして扱います。
UX リサーチャー サイドキックのためのプロンプト例:
「選択されたプロトタイプを分析し、最も重要な使いやすさの問題点5つとそれを解決するための明確な推奨事項の報告書を作成してください。
その5つの推奨事項を、各推奨事項1つずつの箇条書きで上部に要約として記載してください。」
学んだことを適用する
レイアウトを改善し、コピーを引き締め、摩擦点を修正して、ストーリーがスムーズになるまで調整してください。イテレーションにはデザインプロトタイプサイドキックを使ってみてください。
プロンプト例:
「選択されたレポートの主要な推奨事項を実装した、新しいバージョンのプロトタイプを作成してください。」
フローを活用して作業をつなげる
AIフローを使用して繰り返し作業を自動化し、プロセスを合理化し、Miroキャンバス上で直接生産性を向上させましょう。チームのアイデアをインタラクティブなビジュアルに変え、翻訳バリエーションのようにテスト、共有、比較することができます。
試してみてください プロトタイプのローカライズテンプレートでご自身でテストできます。
ステップ 5： 共有と反復
ロジックが確実なときに引き継ぎを行う
デザイナーがデザインツールに移行したり、開発者が開発（またはコードを書き始める）に取りかかる前に、Miro Prototypes を活用して方向性を確定させましょう。これにより、コストのかかる作業のやり直しが防止され、詳細設計に多くの時間を投入する前に、全員が解決策に同意していることを確認できます。
💡 プロトタイプ フォーマットとフォーカスモードを使用して、ボード全体の煩わしさなくプロトタイプのみを共有できます。
要点
プロトタイピングは、ピクセル完璧な最終デザインを作ることではありません。使いやすい製品へと進化させることです。Miro Prototypes はチームがアイデアをより早く確認し、すばやく調整し、一緒に正しいものを構築する手助けをします。
アイデアを早く視覚化することで、合意形成が素早く進み、適切なソリューションを構築できます。