Miro Prototypes

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

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

単一画面とマルチ画面のフローを生成し、デザインを洗練しスタイルを適用し、プロトタイプのインタラクティブなシミュレーションをプレビューすることができます。各要素を生成する複数の特定のプロンプトでデザインを構築できます。また、最初からやり直さずにプロンプトを洗練することもできます。

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

✏️ 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. プロンプトボックスで、プロトタイプを作成 をクリックします。
   サイドキックがプロトタイプ作成の手伝いをする準備ができました。
   サイドキックパネルでプロトタイプを始めましょう。

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

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

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

💡 小さく始めて具体的に進めてください。一度に生成する画面が少ないほど、より正確な結果を短時間で得られます。それぞれの画面に必要なボタンやセクション、アクションなどの要素を明確に指定してください。

💡 プロトタイプのドラフトをいくつかキャンバスに適用します。デザインの選択肢を比較し、最適なオプションを引き続き改良することができます。

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

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

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

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

1. キャンバス上のコンテンツを選択します。たとえば、文書や付箋です。複数のオブジェクトを選択することも可能です。
2. Miroのキャンバス上で、クリエーションバーの上にあるサイドキックをクリックします。
   サイドキックのパネルが開きます。
   注：更新済みの場合…。
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強化プロトタイピング機能はアドオンのプロトタイプでのみ利用可能です。

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

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

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 を体験できるようにします。

Figma にコピー

プロトタイプを Figma でデザイナーに提供し、手動で再構築せずに行うことができます。プロトタイプまたは個々の画面をコピーすることができます。

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

1. プロトタイプのフレームをクリックします。
   フォーマットコンテキストメニューが表示されます。
2. コンテキストメニューで縦に並んだ三点リーダーをクリックして詳細メニューを開きます。
3. Figmaにコピーをクリックします。
   Miroがプロトタイプをクリップボードにコピーします。
   プロトタイプをFigmaにコピーします。 
4. Figmaでプロトタイプを貼り付けます。 (Windowsの場合) Ctrl + V または (MacOSの場合)Command + V のホットキーをご利用いただけます。
   プロトタイプがFigmaに貼り付きます。

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

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

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

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

SVG にエクスポート

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

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

✏️ 画像を含むプロトタイプSVGを他のソフトウェア（例えばFigma）で編集するためにインポートすると、画像はプレースホルダーに置き換えられます。

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

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

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

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

よくある質問