Miro Prototypes

実施可能なユーザー: Miro Prototypes アドオンを持つ全てのメンバー
対象プラン: Starter、Business、Enterprise
対象プラットフォーム: ブラウザー、デスクトップ

Miro Prototypesを使用すると、Miroキャンバス上で直接ユーザーインターフェイスを作成できます。

この記事では、Miro Prototypingの機能を使用する方法を説明します。Miro Prototypesに関する一般情報は、Miro Prototypes 概要をご覧ください。 

プロトタイプを使って、シングルおよびマルチスクリーンフローを生成したり、デザインを洗練しスタイルを適用したり、プロトタイプのインタラクティブなシミュレーションをプレビューすることができます。

✏️ プロトタイプの操作はサイドキックに移行しました。現在ベータ版で、一部のユーザーはすでにAI生成プロトタイプのための新しいサイドキック入力を利用できます。あなたの体験がドキュメントと一致しない場合は、サイドキック (ベータ版) を使用してプロトタイプを作成するを参照してください。出力を改善し繰り返す手順はまだ適用可能です。

デザインを構築する際、プロトタイプの各要素を生成する具体的なプロンプトを複数使用します。プロンプトを改善して、ゼロから開始することを避けることもできます。

詳しい情報: FAQをご覧ください。

Miro AIでプロトタイプを作成する

このセクションでは、Miro AI を使ったプロトタイピングの始め方について説明します。手動での始め方については、プロトタイピング ライブラリをご覧ください。

ゼロから始める

1. Miroのキャンバスで、作成バーの上にあるSidekicksをクリックします。
   すると Sidekick パネルが開きます。
2. サイドキックライブラリをクリックします。
   サイドキックライブラリでプロトタイプにアクセス 
3. 形式 > プロトタイプをクリックします。
4. テキストプロンプトまたはスクリーンショットで始めるかを指定します。
5. デバイスタイプを指定します。
6. 単一画面または複数画面のプロトタイプを指定します。
7. 画面の指示に従ってメッセージを書き込むかスクリーンショットをアップロードしてください。提案タグを使用して、メッセージを始めることもできます。
8. メッセージを完成させ、送信矢印をクリックするか、キーボードのENTERを押してください。
   Miro AIがキャンバス上でドラフトプロトタイプを生成します。
9. （任意）生成を停止するには、プロトタイプ上で停止をクリックしてください。
10. （任意）プロトタイプを反復したい場合は、プロトタイプパネルで引き続き指示を行ってください。
    各反復はドラフトプロトタイプのバージョンを作成します。
11. お使いのドラフトプロトタイプで、以下のいずれかを選択してください：
    • キャンバスに適用
      プロトタイプがキャンバス上で編集可能になります。
    • すべて破棄
      ドラフトがキャンバスから削除されます。プロンプトを改善して、手順7～9を繰り返すことができます。

サイドキックでプロトタイプを作成する（ベータ版）

一部のユーザーはすでにプロトタイピングのための更新されたサイドキック入力を利用可能です。このセクションでは、サイドキックを使ってプロトタイピングを始める方法を説明します。手動での開始方法については、プロトタイピングライブラリを参照してください。

✏️ プロトタイプ用のサイドキックの更新は現在ベータ版で公開中です。もしこのセクションのドキュメントと一致しない場合、Miro AIでプロトタイプを作成を参照してください。

以下の手順を実施してください。

1. Miroのキャンバス上で、作成バーの上にあるサイドキックをクリックします。
   サイドキックのパネルが開きます。

2. プロンプトボックスでプロトタイプを作成をクリックします。
   サイドキックがプロトタイプ作成のお手伝いをします。
   サイドキックパネルでプロトタイプを開始します。

   💡 また、サイドキックパネルを開いてすぐにプロンプトを始めることも可能です。プロトタイプを作成したいことを明示的に示してください。例：「チェックアウトフローのプロトタイプを作成。」

   💡 また、Creationバーのツール、メディア、およびインテグレーション (+)からプロトタイプフォーマットにアクセスすることも可能です。

3. サイドキックが生成するプロトタイプを説明するプロンプトを書いてください。
4. 上矢印をクリックするか、キーボードでENTERを押します。
5. （任意）生成を停止するには、プロトタイプ上で停止をクリックします。
6. （任意）プロトタイプを繰り返し作成するには、プロトタイプパネルでプロンプトを続けてください。
   各反復は、ドラフトプロトタイプのバージョンを作成します。
7. ドラフトプロトタイプで、次のいずれかを選択してください：
   • キャンバスに適用
     プロトタイプがキャンバスで編集可能になります。
   • すべて破棄
     ドラフトがキャンバスから削除されます。プロンプトを改善して、ステップ3から6を繰り返すことができます。

💡 小規模から始めて、具体的に指示を出します。一度に生成する画面数が少ないほど、正確な結果が短時間で得られます。各画面の主要な要素（ボタンやセクション、アクションなど）を明確に示してください。

💡 いくつかのプロトタイプドラフトをキャンバスに適用しましょう。これにより、デザインの選択肢を比較し、最良のオプションをさらに改善できます。

💡 プロトタイプの生成には、プロンプトの複雑さやコンテンツサイズによって1～3分かかることがあります。時間がかかる場合は、プロンプトを簡素化するか、生成する画面数を減らしてください。

キャンバスをプロンプトとして使用する

キャンバス上のコンテンツを選択してプロンプトに使用します。例えば、ドキュメントや付箋にデザインブリーフがある場合です。プロトタイプはコンテンツをコンテキストとして使用して、プロトタイプを作成できます。 

以下の手順に従ってください。

1. キャンバス上のコンテンツを選択します。例えば、ドキュメントや付箋などです。複数のオブジェクトを選択することも可能です。
2. Miroのキャンバスで、作成バーの上でSidekicksをクリックします。
   Sidekickパネルが開きます。
   注：もし最新版の…
3. サイドキック ライブラリをクリックします
   サイドキック ライブラリでプロトタイプにアクセス 
4. フォーマット > プロトタイプをクリックします。
5. テキスト プロンプトを選択します。
6. デバイスタイプを指定し、次にシングルまたはマルチスクリーンを指定します。
   レスポンスボックスには、ステップ 1 で選択したオブジェクトの数が表示されます。
7. 画面上の指示に従って、プロトタイプを生成します。
   Miroが指定した仕様と選択したキャンバスコンテンツからプロトタイプを生成します。

💡 Miro AI に特定のキャンバスオブジェクトを使用するよう指示することができます。たとえば、プロンプトに「キャンバスのスクリーンショットをプロトタイプ作成のガイドとして使用してください」と指定することができます。キャンバス上に多くの類似オブジェクトがある場合は、Miro AIに対して使用するオブジェクトを明確に説明してください。

プロトタイプの反復

最初のドラフトが完璧な結果でない可能性があります。キャンバスにドラフトを適用する前に、プロトタイプを反復し、複数のバージョンを作成し続けることができます。

1. Miro AI を使ってプロトタイプを作成する。 キャンバスには適用しないでください。
   プロトタイプパネルの次のステップは次に何をしますか？
2. プロトタイプを編集を選択します。 
3. マルチスクリーンフローの場合、繰り返したいスクリーンを選択します。
4. 応答ボックスに、希望する変更内容を記載します。
5. 上矢印をクリックするか、キーボードのEnterを押します。
   Miro がプロトタイプの新しいバージョンを生成します。

✏️ 編集は一度に1画面のみ可能です。

💡 キャンバスのコンテキストを使用します。 文書、図表、付箋、またはその他のボード コンテンツを選択して Miro AI を促します。

スクリーンショットを視覚的なコンテキストとして反復する

プロトタイプをキャンバスに適用する前に、スクリーンショットや既にキャンバス上の別のプロトタイプを使用してドラフトを反復することができます。

1. プロトタイプを作成します。Miro AIを使用して、キャンバスには適用しないでください。
   次のステップはプロトタイプパネルの次に何をしますか？です。
2. プロトタイプを編集をクリックします。
3. 複数画面のフローの場合は、繰り返し処理を行いたい画面を選択します。
4. ボード上のスクリーンショットを選択します。
5. 選択したスクリーンショットに基づいて、変更したい内容を応答ボックスに記述します。
6. 上矢印をクリックするか、キーボードのEnterキーを押します。
   Miroがプロトタイプの新しいバージョンを生成します。 

💡 既存のプロトタイプ画面をボード上で視覚的なコンテキストとして使用できます。プロトタイプを作成してボードに適用します。画面を選択してください。

スクリーンショットからプロトタイプスタイルを適用する

プロトタイプを既存のウェブサイトや製品に合わせたい場合、スクリーンショットからスタイルを抽出し、それを画面に適用することができます。

1. プロトタイプを作成する。
2. プロトタイプの画面を選択します。
   コンテキストメニューが表示されます。
3. Miro AI アイコンをコンテキストメニューでクリックします。
4. 画像からスタイルをインポートを選択します。
   スタイルをインポートしてプロトタイプに適用
5. スタイルをインポートしたい画像ファイルを選択します。
6. スタイルがプロトタイプに適用されます。

💡 スタイルの適用は最初または最後に行いましょう。 プロトタイプのすべての要素がテーマに合うようにするには、デザインの早い段階か最終段階でテーマを適用してください。

編集可能なプロトタイプにスクリーンショットを変換する

デザインや競合のUIのスクリーンショットを、編集可能なプロトタイプに変換できます。

1. スクリーンショットを Miro ボードに追加します。
2. 画像をクリックするとコンテキストメニューが開きます。
3. Miro AI アイコンを選択し、画像をプロトタイプに変換を選びます。
4. デバイスタイプを選択します（モバイル、タブレット、デスクトップ）。
5. AI がそれを編集可能なプロトタイプとして再構築します—テキスト、ボタン、レイアウト、その他の要素を含めて。
6. 必要に応じてこのバージョンを変更、追加、または編集することができます。

💡 スクリーンショットを編集可能なモックアップに変換し、Miro AIにさらに編集を促しましょう。また、スクリーンショットをプロンプトのコンテキストとして使用してプロトタイプを生成することもできます。複数のスクリーンショットを使用する際は、すべてのスクリーンショットを選択し、画像としてコピーしてください。それから、プロンプトのコンテキストとして画像を利用します。

プロトタイプバージョンを選択

各リファインメントでプロトタイプのバージョンが作成されます。プロトタイプを精査する際、バージョンセレクタはプロトタイプのドラフトの上に表示されます。

矢印をクリックしてバージョン間を切り替えます。バージョンを選択したら、キャンバスに追加 をクリックします。選択したバージョンがキャンバスに適用されます。

キャンバスに追加するプロトタイプの改良版やバージョンを選択します。

💡 キャンバスに追加をクリックする前に、任意のバージョンの画面を選択してキャンバスにコピー貼り付けすることができます。これにより、破棄する可能性のあるバージョンの画面を保存できるようにします。

⚠️ キャンバスに追加をクリックすると、他のすべてのバージョンを取得することはできません。

プロトタイプをプレビュー

1. プロトタイプ画面を選択します。
   コンテキストメニューが表示されます。
2. コンテキストメニューからプレビューをクリックします。
   プレビューが読み込まれます。

💡 完全なインタラクティブプロトタイプのプレビューを得るには、画面間をコネクタラインでつなぎます。

プロトタイプをインタラクティブにするためにコネクタラインを追加する

Miro プロトタイプでオブジェクト間の接続を追加または変更するには:

1. プロトタイプの要素（ボタンなど）をクリックします。
2. リンク先の画面にコネクタラインアイコンをドラッグします。
3. プレビューモードで、要素をクリックするとリンク先の画面に移動します。

コネクター線を非表示にする

コネクターが多いプロトタイプの場合、コネクターを非表示にしてプロトタイプの閲覧を簡素化できます。

キャンバスモードでプロトタイプを選択します。コンテキストメニューの三点リーダーをクリックします。その後、コネクターを非表示にするを選択します。

フォーカスモードでは、画面左上で非表示 | 表示コネクターボタンをクリックします。

フォーカスモードでコネクターを非表示または表示します。

同じ手順でコネクターを表示します。

💡 コネクターを非表示または表示するにはショートカットキーを使用します。キーボードでShift + Eを押します。キャンバスモードでは、ショートカットキーを使用するためにプロトタイプを選択してください。

フォーカスモード

Miro Prototypes にはフォーカスモードが含まれています。フォーカスモードに入ることで、他のボードコンテンツを見えない状態でプロトタイプの作業を行え、気を散らさずに作業をすることが可能です。

フォーカスモードに入るには、Miro Prototype を選択してください。コンテキストメニューでフォーカスモードをクリックします。

フォーカスモードは、気が散らない Miro Prototypes の体験を可能にします。

プロトタイプのエクスポート

プロトタイプを SVG としてエクスポートすることができます。また、Miro Model Context Protocol (MCP) サーバーを使用して、AI エディターへコードベースをエクスポートすることができます。チームはこのエクスポートを利用して、動作するコードを生成し、開発を加速させることが可能です。

SVG へのエクスポート

1. ボードバーで、縦の三点リーダーをクリックします。
2. ボード > エクスポート > 画像としてエクスポート をクリックします。
   選択ウィンドウと画像としてエクスポートモーダルが開きます。
3. 選択ウィンドウを調整し、プロトタイプをカバーするようにします。
4. 画像としてエクスポートモーダルで、ベクター - SVG を選択します。
5. エクスポートをクリックします。 

💡 プロトタイプ内の画面を選択し、コンテキストメニューから縦三点リーダーをクリックして、画像としてエクスポートをクリックすることで、単一の画面をSVG形式としてエクスポートできます。画像としてエクスポートモーダルが開いたら、ベクター–SVGを選択します。

✏️ プロトタイプのSVGを画像付きでエクスポートし、Figmaのような他のソフトウェアへインポートする場合、画像はプレースホルダに置き換えられます。

Miro MCPサーバーを使用したエクスポート

例えばCursorのようなコードベースのAIエディタにプロトタイプをエクスポートするには、プロンプトにボードIDを含むボードURLを含めます。プロトタイプに基づいてコードを生成するための指示を必ず提供してください。

Miro MCPの使用方法について詳しくは、Miro MCPサーバーの概要をご覧ください。

Cursor のようなコードベース AI エディターは、Miro ボード URL とボード ID を受け取り、プロトタイプに基づいたコードを生成します。

よくある質問