Miro Prototypes

実行できるユーザー：チームメンバー
利用可能なプラン：Business、Enterprise（Accelerate ライセンス）
利用可能なプラットフォーム：ブラウザー、デスクトップ

Miro のキャンバス上で直接 UI を作成できます。 

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

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

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

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

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

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

ゼロから始める

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

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

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

ヒント：サイドキックでプロトタイプを作成すると、AI チャット履歴が有効になり、入力したプロンプトを記録して過去に試した案を確認したり、どのボードでも作業を再開したりできます。詳しくは、サイドキックが Miro の AI 作成を進化させる、および Miro Prototypes の概要 をご覧ください。

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

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

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

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

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

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

3. サイドキックに生成してほしいプロトタイプの内容をプロンプトに入力します. 
4. 上向き矢印をクリックするか、キーボードで Enter キーを押します。
5. (オプション) 生成を停止するには、プロトタイプ上で 停止をクリックします。
6. (オプション) プロトタイプを繰り返し改善するには、 Prototype パネルでプロンプトを続けてください。
   各反復で、ドラフト プロトタイプのバージョンが作成されます。
7. 下書きのプロトタイプで、次のいずれかを選択してください：
   • キャンバスに適用
     キャンバス上でプロトタイプを編集できるようになりました。
   • すべて破棄
     下書きがキャンバスから削除されます。プロンプトを調整して、手順 3–6 を繰り返すことができます。

ヒント: 小さく始め、具体的に伝えましょう。一度に生成する画面数を減らすと、より短時間でより正確な結果が得られます。各画面に欲しいボタン、セクション、アクションなどの主要要素を明確に指定してください。

ヒント: 複数のプロトタイプ案をキャンバスに適用してください。比較してデザイン判断を検討し、最適な案をさらに洗練できます。

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

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

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

キャンバス上のコンテンツを選択してプロンプトに使用します。例えば、Doc にデザインブリーフがある場合や付箋に書かれている場合など、そのコンテンツをコンテキストとして利用してプロトタイプを生成できます。 

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

1. キャンバスのコンテンツを選択します。例：ドキュメントや付箋。必要に応じて複数のオブジェクトを選択できます。
2. Miro のキャンバス上で、作成バー の上にある Sidekicksをクリックします。
   Sidekick パネルが開きます。
3. プロンプトボックスの下部にある Prototype アイコンをクリックします。
4. プロンプトボックスの画面上の指示に従ってプロトタイプを生成します。
   Miro は指定した内容とキャンバス上で選択したコンテンツからプロトタイプを生成します。

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

TIP: キャンバス上でオブジェクトを選択することで、Miro AI に特定のキャンバスオブジェクトを使用するよう指示できます。例えば、プロンプトで「キャンバス上のスクリーンショットを参考にしてプロトタイプを作成してください」と指定できます。キャンバス上に似たオブジェクトが多数ある場合は、どのオブジェクトを Miro AI に使ってほしいかを具体的に指定してください。

埋め込まれた Figma フレームを Miro Prototypes に変換する

1. Figma で、対象のフレームを選択します。
2. フレームを右クリックし、コピー/ペーストとして > 選択範囲へのリンクをコピー を選択します。 
3. Miro のボードに移動します。
4. Figma のリンクを貼り付けます。
5. Figma を接続します（未接続の場合）。
6. キャンバス上の Figma 埋め込みを選択します。
7. 埋め込みのコンテキストメニューで 変換先 をクリックします。
8. 「Convert to」メニューからPrototypeを選択します。
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. キャンバスに適用されているプロトタイプで、コンテキストメニューからEdit with AIをクリックします。
   サイドキックパネルが開きます。
    
   Edit with AI によって既存のプロトタイプを洗練できます。

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

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

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

既存の URL からスタイルをプロトタイプに適用するには：

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

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

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

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

ヒント： スタイルは最初か最後のどちらかで適用してください。 プロトタイプ内のすべての要素をテーマに合わせたい場合は、設計の早い段階でテーマを適用するか、最後のステップで適用してください。

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

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

1. スクリーンショットを Miro のボードに追加します。
2. 画像をクリックするとコンテキストメニューが開きます。
3. 「Convert to」ボタンをクリックし、次に「Prototype」をクリックします。
4. サブメニューでデバイスタイプ（Mobile、Tablet、Desktop、Custom）を選択します。
5. AI がテキスト、ボタン、レイアウトなどを再構築して、編集可能なプロトタイプにします。
6. このバージョンは、必要に応じて編集、追加、修正できます。

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

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

各改良ごとにプロトタイプのバージョンが作成されます。プロトタイプの改良を重ねると、バージョンセレクターはプロトタイプ下書きの上に表示されます。 

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

プロトタイプのどのリファインメント（バージョン）をキャンバスに追加するかを選択します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フォーカスモード

Miro Prototypesにはフォーカスモードがあります。フォーカスモードに入ると、他のボードのコンテンツが表示されない状態でプロトタイプに集中して作業できます。

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

フォーカスモードでは、 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 を介して、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) Server を使ってコードベースの AI エディターにエクスポートすることもできます。チームはそのエクスポートを利用して動作するコードを生成し、開発を加速できます。

SVG にエクスポート

1. プロトタイプのコンテキストメニューで、縦に並んだ三点リーダーをクリックします.
2. Click 共有とエクスポート > 画像としてエクスポート をクリックします.
   選択範囲が表示され、画像としてエクスポートモーダルが開きます.
3. 選択範囲がプロトタイプを覆うように調整します.
4. 画像としてエクスポートモーダルで、ベクター – SVG を選択します.
5. エクスポートをクリックします. 

ヒント: コンテキストメニューから、画面を1つSVGとしてエクスポートできます。プロトタイプ内の画面を選択します。コンテキストメニューから縦の三点をクリックし、次に 画像としてエクスポート をクリックします。画像としてエクスポート モーダルが開くので、ベクター – SVG を選択します。

注意: 画像を含むプロトタイプのSVGを、Figma のような他のソフトウェアに編集のために取り込むと、画像はプレースホルダーに置き換わります。

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

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

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

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

よくある質問