Miro Prototypes

Who can do it: チームメンバー
Which plans: Business、Enterprise（有料アドオン）
Which platforms: ブラウザー、デスクトップ

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

単一画面および複数画面のフローを生成し、デザインを洗練してスタイルを適用し、プロトタイプのインタラクティブなシミュレーションをプレビューできます。プロトタイプの各要素を生成する複数の具体的なプロンプトでデザインを構築できます。プロンプトを調整すれば、最初から作り直す必要はありません。

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

注記:Miro Prototypes は現在 Business プランに含まれています。旧 Business プラン、または Starter プランをご利用の場合は、変更点をご覧ください。

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

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

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

ゼロから始める

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

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

一部のユーザーは、プロトタイピング用に更新されたサイドキックの入力を既に利用できる場合があります。本節ではサイドキックでプロトタイピングを開始する方法を説明します。手動で開始する方法は、プロトタイピング ライブラリを参照してください。

ヒント：サイドキックでプロトタイプを作成すると、AI チャット履歴が有効になり、過去のプロンプトを呼び出してこれまでに試した選択肢を確認したり、どのボードでも作業を再開したりできます。詳細は、サイドキックが Miro の AI 作成を進化させる、および Miro Prototypes の概要を参照してください。

注：Prototypes 向けのサイドキックの更新は現在公開ベータです。操作がこのセクションのドキュメントと一致しない場合は、Miro AI でプロトタイプを作成するを参照してください。

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

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

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

   TIP: または、サイドキックパネルを開いてすぐにプロンプトを入力して開始できます。必ずプロトタイプを作成したいことを明確に伝えてください。例: "チェックアウト フローのプロトタイプを作成してください。"

   TIP: また、作成バーのツール、メディア、インテグレーション (+)からプロトタイプ形式にアクセスできます。

3. サイドキックに生成してもらいたいプロトタイプを説明するプロンプトを入力します. 
4. 上向き矢印をクリックするか、キーボードでEnterキーを押します。
5. （オプション）生成を停止するには、プロトタイプ上で停止をクリックします。
6. （オプション）プロトタイプを繰り返し改良するには、プロトタイプパネルでプロンプトの入力を続けます。
   各反復は下書きのプロトタイプのバージョンを作成します。
7. 下書きのプロトタイプで、次のいずれかを選択します:
   • キャンバスに適用
     プロトタイプはキャンバス上で編集できます。
   • すべて破棄
     下書きがキャンバスから削除されます。プロンプトを調整して、ステップ 3–6 を繰り返すことができます。

ヒント：小さく始めて、具体的に指示してください。一度に生成する画面数を少なくすると、短時間でより正確な結果が得られます。各画面に必要な主要要素（ボタン、セクション、操作など）を明確に述べてください。

ヒント：複数のプロトタイプ案をキャンバスに適用して、比較・検討しながら最適な案をさらに洗練できます。

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

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

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

キャンバス上のコンテンツを選択してプロンプトに使います。たとえば、Doc にあるデザインブリーフや付箋の内容を選択できます。プロトタイプはこれらのコンテンツをコンテキストとして利用して作成されます. 

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

1. キャンバス上のコンテンツを選択します。例: Doc や 付箋。複数のオブジェクトを選択することもできます。
2. Miro のキャンバスで、作成バー の上にある サイドキックをクリックします。
   その サイドキック パネルが開きます。
3. プロンプトボックスの下部にある プロトタイプアイコンをクリックします。
4. プロンプトボックスの画面上の指示に従って、プロトタイプを生成してください。
   Miro はご指定の内容と選択したキャンバスのコンテンツに基づいてプロトタイプを生成します。

注：キャンバスに 1 枚以上のスクリーンショットを追加し、選択したスクリーンショットから Miro Prototypes がプロトタイプ内の複数の画面を作成できます。

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

埋め込み済みの Figma フレームを Miro Prototypes に変換する

1. Figma で該当するフレームを選択します。
2. フレームを右クリックし、Copy/Paste as > Copy link to selection を選択します。 
3. Miro ボードに移動します。
4. Figma からのリンクを貼り付けます。
5. まだ接続していない場合は、Figma を接続します。
6. キャンバス上で Figma の埋め込みを選択します。
7. 埋め込みのコンテキストメニューで Convert to をクリックします。
8. 「変換先」メニューからプロトタイプを選択します。
9. Miro AI は埋め込まれた Figma のプロトタイプを、編集可能な Miro プロトタイプに変換します。

プロトタイプを繰り返し改善する

最初の下書きが完璧な仕上がりになるとは限りません。下書きをキャンバスに適用する前に、繰り返し改善してプロトタイプの複数のバージョンを作成できます。

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. キャンバスに適用されているプロトタイプで、コンテキストメニューから AI で編集 をクリックします。
   サイドキック パネルが開きます。
    
   AI で編集では、既存のプロトタイプを再構築せずに改善できます。

   注意：AI で編集とサイドキックは同時に 1 つのプロトタイプでのみ使用できます。切り替えるには、サイドキックパネルを閉じ、対象のプロトタイプから再度 AI で編集 を開いてください。

2. プロンプトボックスに行いたい変更内容を記述します。例えば「ダークテーマに変更」と入力します。
3. プロンプトを実行するには、上向き矢印ボタンをクリックするか、キーボードの ENTER を押します。
   サイドキックが調整済みのプロトタイプを生成します。
4. （オプション）引き続きサイドキックにプロンプトを送信して、プロトタイプを繰り返し調整できます。プロトタイプをキャンバスに適用する前にバージョンを選択できます。
5. 作成されたプロトタイプの上にあるキャンバスに追加をクリックします。

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

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

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

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

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

1. プロトタイプを作成.
2. プロトタイプ画面を選択します.
   コンテキストメニューが表示されます.
3. Click on the Miro AI icon in the Context menu.
4. Select Import style from image.
   スタイルをインポートしてプロトタイプに適用します
5. スタイルをインポートする画像ファイルを選択します.
6. スタイルがプロトタイプに適用されます.

ヒント：スタイルは最初か最後に適用しましょう。 プロトタイプ内のすべての要素をテーマに揃えるには、デザインの早い段階でテーマを適用するか、最終工程として適用してください。

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

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

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

ヒント：スクリーンショットを編集可能なモックアップに変換します。その後、Miro AI に編集を続けるよう指示できます。スクリーンショットをプロンプトのコンテキストとして使用して、プロトタイプを生成することもできます。複数のスクリーンショットを使用する場合は、すべてのスクリーンショットを選択して画像としてコピーしてください。続けて、その画像をプロンプトのコンテキストとして使用します。

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

各調整でプロトタイプのバージョンが作成されます。プロトタイプを調整すると、バージョン セレクタがプロトタイプの下書きの上に表示されます. 

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

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

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

ヒント： バージョンをキャンバスに追加した後、AI チャット履歴から以前のバージョンにアクセスできます。

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

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

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

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

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

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

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

コネクター線が多数あるプロトタイプでは、表示を簡素化するためにコネクター線を非表示にできます。

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

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

フォーカスモードでコネクターを非表示／表示できます。

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

ヒント：ホットキーでコネクターの表示・非表示を切り替えられます。キーボードで Shift + E を押します。キャンバスモードでは、ホットキーを使う前にプロトタイプを選択していることを確認してください。

フォーカスモード

Miro Prototypes にはフォーカスモードがあります。フォーカスモードを使うと、他のボードのコンテンツを表示せずにプロトタイプに集中して作業できます。

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

フォーカスモードでは、余計な表示を排して Miro Prototypes を集中して操作できます。

Figma にコピー

手作業で再構築することなく、プロトタイプを Figma のデザイナーに提供できます。プロトタイプ全体または個別の画面をコピーできます。

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

1. プロトタイプのフレームをクリックします。
   フォーマットのコンテキストメニューが表示されます。
2. コンテキストメニューで、縦の三点リーダーをクリックして詳細メニューを開きます。
3. 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 Prototypes の Claude Code 接続

Model Context Protocol（MCP）を使用して、Claude Code のプロジェクトから Miro Prototypes を作成できます。

1. Miro の MCP サーバーに接続するには、こちらの手順に従ってください。
2. 接続後、AI ツールで次のコマンドをコピーして実行してください。
   "Fetch this design file, and implement the relevant aspects of the design. [Relevant Miro board link]"
3. Miro ボード上で Miro Prototypes を閲覧でき、Claude Code はターミナルで確認できます。

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

チームメンバーや外部の関係者と、Miro アカウントがなくても共有できる一意のリンクをコピーできます. 

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

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

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

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

プロトタイプを SVG としてエクスポートできます。また、Miro Model Context Protocol（MCP）サーバー を使って、コードベースの AI エディターに書き出すこともできます。チームはこのエクスポート機能を使って動作するコードを生成し、開発を加速できます。

SVG にエクスポート

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

ヒント：プロトタイプ内の単一画面をコンテキストメニューから SVG としてエクスポートできます。プロトタイプで画面を選択します。コンテキストメニューから縦の三点リーダーをクリックし、次に Export as image をクリックします。Export as image モーダルが開いたら、Vector – SVG を選択します。

注意：画像を含むプロトタイプの SVG エクスポートを、Figma のような他のソフトにインポートして編集すると、画像はプレースホルダーに置き換えられます。

Miro MCP サーバーでのエクスポート

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

Miro MCP の使い方について詳しくは、Miro MCP Server の概要をご覧ください。

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

よくある質問