Miro Prototypes

対象者: Miro Prototypes アドオン をお持ちのすべてのメンバー
プラン: Starter、Business、Enterprise
プラットフォーム: ブラウザ、デスクトップ

Miro Prototypes は Miro キャンバス上でユーザーインターフェースを直接作成することを可能にします。 

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

この記事では、Miro Prototypes の機能の使い方を説明します。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を繰り返すことができます。

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

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

ヒント：サイドキックを使ってプロトタイプを作成すると、AIチャット履歴が有効になり、以前に使用したプロンプトを記録し、過去に探したオプションをレビューしたり、どのボードからでも再開することができます。詳細は、サイドキックがMiroでのAI作成を進化させる、およびMiro Prototypesの概要をご覧ください。

注意：プロトタイプ向けのサイドキックの更新は現在公開ベータ版です。ここでの説明と実際の使用感が一致しない場合は、Miro AIでプロトタイプを作成するを参照してください。

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

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

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

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

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

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

ヒント：小さく始め、具体的にすることが重要です。一度に生成される画面が少ないほど、より短時間で正確な結果が得られます。それぞれの画面で欲しい重要な要素（ボタン、セクション、アクションなど）を明確に伝えてください。

ヒント：いくつかのプロトタイプ下書きをキャンバスに適用することができます。デザインの選択肢を比較して探求し、最適なオプションを継続的に改善できます。

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

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

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

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

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が新しいバージョンのプロトタイプを生成します。 

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

AI で編集

キャンバスに既に適用されているプロトタイプについては、AI で編集を使って継続的に改善を行うことができます。AI で編集を使用して、既存のプロトタイプを再構築するのではなく洗練させます。例えば、既存のプロトタイプをダークモード版にしたい場合などです。

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

1. キャンバスに適用されている任意のプロトタイプに対し、コンテキストメニューでAIで編集をクリックします。
   サイドキックパネルが開きます。
   AIで編集を使用すると、既存のプロトタイプを改良できます。

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

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

ノート: Miro Prototypesでは、すべてのAI強化プロトタイピング機能はPrototypesアドオンが必要です。

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

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

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

ヒント: スタイルは最初または最後に適用 プロトタイプのすべての要素がテーマに合致するようにするために、プロトタイプの設計を始める際にテーマを適用するか、最終段階で適用してください。

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

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

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

ヒント: スクリーンショットを編集可能なモックアップに変換しましょう。その後、Miro AI に編集を続けさせることができます。また、プロンプトの中でスクリーンショットを文脈として使用し、プロトタイプを生成することもできます。複数のスクリーンショットを使う場合は、すべてのスクリーンショットを選択し、画像としてコピーします。そして、その画像をプロンプトの文脈として利用します。

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

各リファインメントによってプロトタイプのバージョンが作成されます。プロトタイプを改善するたびに、バージョンセレクターがプロトタイプのドラフトの上に表示されます。

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

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

ヒント: キャンバスに追加をクリックする前に、任意のバージョンからスクリーンを選んでキャンバスにコピー＆ペーストできます。これにより、破棄するかもしれないバージョンからスクリーンを保存することができます。 

警告: キャンバスに追加をクリックすると、他のバージョンはすべて取り戻せなくなります。

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

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

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

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

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

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

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

多くのコネクターがあるプロトタイプでは、プロトタイプの展望を簡略化するためにコネクターを非表示にすることができます。

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

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

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

コネクタを表示するには、同じ手順を繰り返します。

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

フォーカスモード

Miro Prototypesにはフォーカスモードがあります。フォーカスモードに入ると、他のボードの内容が表示されることなくプロトタイプに集中して取り組むことができ、気を散らすことなく作業することが可能です。

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

フォーカスモードでは、集中して 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 アカウントなしで共有できるユニークなリンクをコピーできます。 

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

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

ヒント: フォーカスモードで共有リンクをコピーすることも可能です：右上の三点をクリックします。それからプロトタイプを共有をクリックします。そして、プレビューモードでも: 右上でプロトタイプを共有をクリックします。

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

プロトタイプをSVGとしてエクスポートできます。また、Miro モデルコンテキストプロトコル（MCP）サーバーを使用して、コードベースのAIエディターにエクスポートすることも可能です。チームはこのエクスポートを利用して実際に動作するコードを生成し、開発を加速させることができます。

SVG へのエクスポート

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

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

注意：画像付きプロトタイプをSVGとしてエクスポートする場合、Figmaなどの他のソフトウェアで編集するためにSVGをインポートすると、画像がプレースホルダーに置き換えられます。

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

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

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

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

よくある質問