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