対象ユーザー： すべてのユーザー
対象プラン： すべてのプラン
対応プラットフォーム： ブラウザー、デスクトップ、モバイル
このプロトタイピング ライブラリを使用して、Miro のキャンバス上で直接プロトタイプのレイアウトを作成できます。ライブラリには、フローを視覚化し、アイデアを早い段階で整理するのに役立つスクリーン、UI コンポーネント、アイコンが含まれます。
プロトタイピング ライブラリを使って静的なプロトタイプを作成できます。高度なコンポーネント、コネクターライン、インタラクティブ プレビューなどの機能は、Business プラン、または Enterprise プランのAccelerate ライセンスが必要です。
プロトタイプ ライブラリーには、Miro 上で単一画面および複数画面のフローを手動で作成するために必要なものがすべて含まれています。
プロトタイプ ライブラリーを開く
- キャンバスで、作成バーから ツール、メディア、インテグレーション (
) をクリックします。
- 「プロトタイピング」を検索して見つけ、 次に プロトタイピング ライブラリをクリックします。
- プロトタイピング ライブラリのパネルが開きます.
プロトタイピング ライブラリの内容
プロトタイピング ライブラリはタブごとに整理されています。すべてのユーザーは、スクリーン、UI コンポーネント、アイコンを使って静的なプロトタイプ レイアウトを作成できます。
💡 AI 生成されたプロトタイプやインタラクティブなフローを作成する場合は、プロトタイピング ライブラリを Miro Prototypes と併用してください。
スクリーン
スクリーンは、フローのプロトタイピング用に用意されたフレームです。キャンバスにモバイル、タブレット、またはデスクトップのスクリーンを追加し、UI 要素をドラッグしてレイアウトを作成できます。
スクリーンで作業
- 表示または非表示にすることで、画面のフレームをデバイスのフレームのようにも、シンプルなフレームとしても表示できます
- 回転させることで、画面を回転できます
- サイズを変更することで、ドラッグして高さを伸ばせます（縦方向のみ）
UI コンポーネント
UI コンポーネントは、ボタン、入力欄、ナビゲーションバー、フォーム要素など、画面にドラッグして配置できる一般的なインターフェイス要素です。
以下の操作が可能です。
- コンポーネントを画面にドラッグして配置する
- コンポーネントのサイズを変更し、位置を調整する
- コンテキストメニューからテキストや基本スタイルを編集する
✏️ コンテキストメニューのオプションは、選択する要素によって異なります。
Miro Prototypes を使うと、一部の UI コンポーネントは プレビュー モードでインタラクティブになります。例えば、ボタン、スライダー、入力欄、ドロップダウンメニューは、定義したコネクタラインに応じてユーザーの操作に反応します。
一部のコンポーネントセット（例: Advanced components）は Miro Prototypes のみで利用可能です。アクセス権がない場合、ライブラリにインジケーター付きで表示されることがあります。
アイコン
アイコンタブには、プロトタイプで使用できる検索可能なアイコンライブラリが含まれています。
アイコンの追加または置換
- ライブラリからアイコンをキャンバスにドラッグします。
- アイコンを選択して、コンテキストメニューから色を変更します。
- 位置やサイズを変えずに別のアイコンに差し替えるには、アイコンを置き換えを選択します。
ワイヤーフレーム（レガシー）
ワイヤーフレームタブには従来のワイヤーフレーム要素が含まれています。これらの要素は既存のボード上で引き続き利用および編集できますが、新しいプロトタイプではプロトタイピング ライブラリのスクリーンと UI コンポーネントを使用してください。
コネクタ線とインタラクティブ機能（Miro Prototypes）
コネクタ線はプロトタイプ内の画面間のナビゲーションを定義できます。Miro Prototypes を利用すると、要素と画面の間にコネクタ線を作成して、複数ステップのフローを構築できます。
コネクタ線はインタラクティブ プレビューも可能にします。プレビュー モードでは、接続された画面がクリック可能なフローとして動作し、画面がビューポートを超える場合は縦にスクロールします。Miro Prototypes がない場合、コネクタ線やインタラクティブな動作は利用できません。
💡 一部の UI 要素を画面に追加すると、稲妻アイコンが表示されます。複数画面のフローでは、その稲妻アイコンをドラッグして画面間のコネクタ線を作成します。