Miro Prototypes

誰が利用できるか： Miro Prototypes アドオンを持つすべてのメンバー
どのプラン： Starter, Business, Enterprise
どのプラットフォーム： ブラウザ、デスクトップ

Miro Prototypes は、Miro キャンバス上で直接ユーザーインターフェースを作成できるようにします。

シングルおよびマルチスクリーンのフローを生成し、デザインを洗練しスタイルを適用して、プロトタイプのインタラクティブなシミュレーションをプレビューできます。プロトタイプの各要素を生成する特定のプロンプトでデザインを構築することができます。また、プロンプトを調整して最初からやり直すのを避けることもできます。

この記事では、Miro Prototypesの機能の使い方について説明します。Miro Prototypesの一般的な情報については、Miro Prototypesの概要をご覧ください。

注意: プロトタイプの機能はサイドキックに移行されました。現在パブリックベータ版として、一部のユーザーにはAIで生成されたプロトタイプのためにサイドキックの入力が提供されています。ドキュメントが実際の体験と一致しない場合は、サイドキック（ベータ版）でプロトタイプを作成するを参照してください。出力を洗練し反復する方法を説明するコンテンツは引き続き適用されます。

詳細情報: よくある質問をご覧ください。

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

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

ゼロから始める

1. Miroのキャンバス上で、作成バーの上にあるサイドキックスをクリックします。
   サイドキックパネルが開きます。
2. サイドキックライブラリをクリックします。
   サイドキックライブラリでプロトタイプにアクセス 
3. フォーマット > プロトタイプをクリックします。
4. テキストプロンプトまたはスクリーンショットから始めるかを指定します。
5. デバイスタイプを指定します。
6. 単一スクリーンまたは複数スクリーンのプロトタイプを指定します。
7. 画面上の指示に従ってプロンプトを記述するか、スクリーンショットをアップロードしてください。応答ボックスでは、必要に応じて提案タグを使ってプロンプトを始めることができます。
8. プロンプトを完了させたら、送信の矢印をクリックするか、キーボードのENTERを押してください。
   Miro AIがキャンバス上にプロトタイプのドラフトを作成します。
9. （オプション）生成を停止するには、プロトタイプ上で停止をクリックしてください。
10. （オプション）プロトタイプを繰り返し改善するには、プロトタイプパネルでプロンプトを続けてください。
    各反復でドラフトプロトタイプのバージョンが作成されます。
11. ドラフト プロトタイプで、次のいずれかを選択します：
    • キャンバスに適用
      プロトタイプがキャンバス上で編集可能になります。
    • すべて破棄
      ドラフトがキャンバスから削除されます。プロンプトを改善し、ステップ 7～9 を繰り返すことができます。

サイドキックでプロトタイプを作成 (ベータ版)

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

ヒント: サイドキックを使用してプロトタイプを作成すると、AI のチャット履歴が有効化され、プロンプトを記憶し、以前に検討したオプションを確認したり、任意のボードで作業を再開したりできます。詳細は、Miro の AI 作成を進化させるサイドキックとMiro Prototypes の概要を参照してください。

注: プロトタイプのためのサイドキックのアップデートは現在パブリックベータ版です。このセクションのドキュメントと体験が一致しない場合は、「Miro AI を使用してプロトタイプを作成する」を参照してください。

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

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

2. プロンプトボックスで、プロトタイプ作成をクリックします。
   サイドキックがプロトタイプ作成をサポートします。
   サイドキックパネルでプロトタイプの作成を開始しましょう。

   TIP: 代わりに、サイドキックパネルを開いてすぐにプロンプトを開始することもできます。プロトタイプを作成したいことを明確に言いましょう。例：「チェックアウトフローのプロトタイプを作成」

   TIP: また、ツール、メディアとインテグレーション (+)からプロトタイプフォーマットにアクセスすることもできます。

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

ヒント: 小さく始めて、具体的にしてください。一度に生成される画面が少ないほど、より迅速かつ正確な結果を得ることができます。各画面に必要な重要な要素、例えばボタン、セクション、またはアクションを明示的に記載しましょう。

ヒント: 複数のプロトタイプ下書きをキャンバスに適用できます。デザインの決定を比較し、最良の選択をさらに洗練することができます。

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

TIP: プロンプトにURLを含めて、リンク先のサイトからスタイルを適用するようにサイドキックに指示することができます。

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

キャンバス上のコンテンツを選択してプロンプトに使用します。例えば、ドキュメントや付箋に記載されているデザインブリーフを使用する場合など。プロトタイプはこの内容をコンテキストとして利用して作成されます。

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

1. キャンバスのコンテンツを選択します。たとえば、Doc や付箋です。複数のオブジェクトを選択することも可能です。
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はプロトタイプの新しいバージョンを生成します。 

ヒント：ボード上にすでにあるプロトタイプ画面を視覚的なコンテキストとして使うことができます。プロトタイプをボードに作成して適用し、画面を選択してください。

AI で編集

キャンバスに適用済みのプロトタイプに対して、引き続きAI で編集して繰り返し改善できます。AI で編集を使用して、再構築するのではなく、例えば既存のプロトタイプのダークモードバージョンを作成するなど、改善をします。

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

1. キャンバスに適用したプロトタイプのコンテキストメニューでEdit with AIをクリックします。
   The サイドキックパネルが表示されます。
   Edit with AIを使用すると、既存のプロトタイプを洗練することができます。

   注意: Edit with AIとサイドキックは、一度に1つのプロトタイプでのみ使用できます。切り替えるには、サイドキックを閉じて、ターゲットプロトタイプからEdit with AIを再度開きます。

2. プロンプトボックスで、行いたい変更を説明します。たとえば、「ダークテーマに変換」と入力します。
3. リクエストを実行するには、上矢印ボタンをクリックするか、キーボードの ENTER キーを押します。
   サイドキックがプロトタイプを改良します。
4. （任意）サイドキックにさらにリクエストを出し、プロトタイプを繰り返し修正します。バージョンを選択し、キャンバスにプロトタイプを適用する前に選んでください。
5. 作成したプロトタイプの上にあるキャンバスに追加をクリックします。

NOTE: Miro PrototypesのすべてのAI強化プロトタイピング機能は、プロトタイプアドオンでのみ利用可能です。

URLからプロトタイプスタイルを適用

既存のURLからプロトタイプにスタイルを適用するには、次の手順を実行します。

1. プロトタイプを作成します。
2. プロトタイプ画面を選択します。
   コンテキストメニューが表示されます。
3. コンテキストメニューでAI で編集をクリックしてサイドキックパネルを開きます。
4. 入力ボックスに、サイドキックに含まれている URL からスタイルを適用するよう指示します（必ず URL を完全に入力してください）。
5. サイドキックはボード上のプロトタイプの更新版に URL から視覚スタイルを適用します。

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

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

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

ヒント: スタイルを最初または最後に適用します。 プロトタイプのすべての要素をテーマに合致させるためには、デザインの早い段階でテーマを適用するか、最後のステップとして適用してください。

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

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

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

ヒント: スクリーンショットを編集可能なモックアップに変換し、次に Miro AI に編集を続けるよう促します。また、プロンプトのコンテキストとしてスクリーンショットを使用し、プロトタイプを生成することができます。複数のスクリーンショットを使用する場合は、すべてのスクリーンショットを選択し、画像としてコピーしてからプロンプトでそれをコンテキストとして使用します。

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

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

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

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

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

WARNING: キャンバスに追加をクリックすると、他のすべてのバージョンは取得できなくなります。

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

プロトタイプのコンテキストメニューから、プレビューをクリックします。プレビューが読み込まれます。

TIP: 完全にインタラクティブなプロトタイプのプレビューを取得するには、画面間にコネクター線を使用してください。

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

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

1. プロトタイプ上の要素（ボタンなど）をクリックします。
2. コネクター線アイコンをドラッグして、リンク先の画面へ配置します。
3. プレビューモードで要素をクリックすると、ユーザーをリンクされた画面に誘導します。

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

プロトタイプに多くのコネクターがある場合、コネクターを非表示にしてプロトタイプのビューを簡素化することができます。

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

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

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

同じ手順を繰り返してコネクタを表示します。

TIP: ホットキーを使用してコネクタを非表示または表示します。キーボードでShift + Eを押します。キャンバスモードでホットキーを使用するには、プロトタイプを選択していることを確認してください。

フォーカスモード

Miro Prototypesにはフォーカスモードが含まれています。フォーカスモードに入ると、他のボードコンテンツは表示されず、気兼ねなく作業に集中できます。

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

フォーカスモードは、Miro Prototypes の没入型体験を可能にします。

Figma にコピー

プロトタイプを Figma で設計者に提供し、手動で再構築する必要がありません。プロトタイプや個々の画面をコピーすることができます。

プロトタイプを Figma にコピー

1. プロトタイプのフレームをクリックします。
   フォーマットのコンテキストメニューが表示されます。
2. コンテキストメニューで、縦の三点リーダーをクリックして詳細メニューを開きます。
3. Copy to Figmaをクリックします。
   Miro がプロトタイプをクリップボードにコピーします。
   プロトタイプをFigmaにコピーします。 
4. Figma で、プロトタイプを貼り付けます。 (Windows)ではCtrl + V、(MacOS)ではCommand + Vのショートカットを使用します。
   プロトタイプが Figma に貼り付けられます。

プロトタイプ画面をFigmaにコピー

1. プロトタイプ画面をクリックして選択します。
   ウィジェットのコンテキストメニューが表示されます。
2. コンテキストメニューで、三点リーダーをクリックして詳細メニューを開きます。
3. Figma にコピーをクリックします。
   Miro はあなたのプロトタイプ画面をクリップボードにコピーします。
4. Figma でプロトタイプを貼り付けます。 (Windows)ではCtrl + V、(MacOS)ではCommand + Vのホットキーを使用できます。
   プロトタイプ画面がFigmaに貼り付けられます。

プロトタイプへのリンクを共有（ベータ版）

Miro アカウントを持たないチームメンバーや外部ステークホルダーと共有できるユニークなリンクをコピーできます。 

1. プロトタイプのコンテキストメニューから、縦の三点リーダーをクリックして、詳細メニューを開きます。
2. 共有とエクスポート > プロトタイプを共有をクリックします。
   プロトタイプを共有のモーダルが開きます。
3. リンクをコピーをクリックします。
4. （オプション）ブラウザでプレビューをクリックして、リンクを持っている人がプロトタイプをどのように閲覧するか確認します。
5. リンクを共有します。

注意: 外部ユーザーがアクセスするには、ボードを公開する必要があります。外部ユーザーはフォーカスモードでのみプロトタイプにアクセスでき、キャンバス上の他のコンテンツにはアクセスできません。ホットスポットやプロトタイプのフローとインタラクションが可能です。ボードの権限が許可すれば、外部ユーザーもコメントを追加できます。

ヒント: フォーカスモードでシェア可能なリンクをコピーすることもできます: 右上にある三点リーダーをクリックして、プロトタイプをシェアをクリックします。またプレビューモードでは、右上にあるプロトタイプをシェアをクリックします。

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

プロトタイプをSVGフォーマットでエクスポートできます。MiroのModel Context Protocol (MCP) Serverを使用すると、コードベース AI 編集用にエクスポートすることもできます。チームはこのエクスポート機能を利用して、実行可能なコードを生成し、開発を加速することができます。

SVG へのエクスポート

1. プロトタイプのコンテキストメニューから、縦三点リーダーをクリックします。
2. 共有およびエクスポート > 画像としてエクスポートをクリックします。
   選択ウィンドウと画像としてエクスポートモーダルが開きます。
3. 選択ウィンドウを調整し、プロトタイプをカバーするようにします。
4. 画像としてエクスポートモーダルで、ベクター – SVGを選択します。
5. エクスポートをクリックします。 

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

注意：画像を含むプロトタイプのSVGエクスポートを他のソフトウェア（例えば、Figma）で編集する場合、画像はプレースホルダーに置き換えられます。

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

プロトタイプをコードベースAIエディター（例：Cursor）にエクスポートするには、プロンプトにボードIDが含まれているボードのURLを含めます。プロトタイプに基づいてコードを生成するための指示を含めることを確認してください。

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

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

よくある質問