ワイヤーフレーム ライブラリー

対象ユーザー： すべてのユーザー
対象プラン： すべてのプラン
対応プラットフォーム： ブラウザ、デスクトップ、モバイル

注意： Prototyping Library は現在 Wireframing Library に改名されました。既存の screens、components、flows は同じように動作します。

Wireframing Library を使って、Miro キャンバス上で低忠実度の screens と flows を直接作成できます。ライブラリには screens、UI components、icons が含まれており、flows をスケッチしたりアイデアを早期に構造化したりするのに役立ちます。

すべてのユーザーは静的なワイヤーフレームを作成できます。 Advanced components、connector lines、および interactive preview を利用するには、Business plan または Enterprise Accelerate license が必要です。

ヒント: 高忠実度のプロトタイプが必要ですか？ Prototypes 2.0（HTML プロトタイプ）を使用してください。ワイヤーフレームを HTML Prototype に変換すると、よりリッチなビジュアルや AI 編集、レビュー、ハンドオフが可能になります。詳しくは Prototypes 2.0 について と Prototypes 2.0 を作成する をご覧ください。

Wireframing Library を開く

1. キャンバス上で、作成ツールバーからTools, Media and Integrations アイコンをクリックします。
2. Wireframing を検索し、次に Wireframing Library をクリックします。
3. Wireframing Library のパネルが開きます。

Wireframing Library に含まれるもの

Wireframing Library はタブで整理されています。すべてのユーザーは Screens、UI components、Icons を使って静的なワイヤーフレームを作成できます。

スクリーン

スクリーンはワイヤーフレーム作成用の既成フレームです。キャンバスにモバイル、タブレット、またはデスクトップのスクリーンを追加し、そこに UI 要素をドラッグします。

スクリーンの操作

• 表示/非表示にする スクリーンのフレームを切り替え、デバイスのフレーム風またはシンプルなフレームにする
• 回転する スクリーンを回転する
• サイズを変更する（ドラッグで高さを伸ばす、縦方向のみ）

UI コンポーネント

UI コンポーネントは、ボタン、入力欄、ナビゲーションバー、フォーム要素などの一般的な要素です。

以下のことができます。

• コンポーネントをスクリーンにドラッグする
• コンポーネントのサイズを変更し、位置を調整する
• コンテキストメニューでテキストと基本スタイルを編集する

注：選択する要素によって、context menu のオプションは異なります。

Business plan と Enterprise Accelerate license では、一部の UI components が Preview mode でインタラクティブになります。たとえば、ボタン、スライダー、入力フィールド、ドロップダウンメニューは、定義した Connector lines に反応します。

Advanced components は Business plan と Enterprise Accelerate license でのみ利用できます。

Icons

Icons タブには検索可能なアイコンライブラリがあります。

アイコンの追加または置換

1. ライブラリからアイコンをキャンバスに drag する
2. アイコンを選択して、context menu から色を変更する
3. 位置やサイズを変えずに別のアイコンに置き換えるには、Replace icon を選択する

Connector lines と interactive preview

どのプラン： Business, Enterprise （Accelerate ライセンス）

Connector lines は画面間のナビゲーションを定義します。ある画面上の要素から別の画面へ Connector lines を引くことで、複数ステップのフローを作成できます。

Connector lines は interactive preview も有効にします。Preview mode では、接続された画面がクリック可能なフローのように動作します。

TIP: 一部の UI 要素は画面に追加すると稲妻アイコンが表示されます。複数画面にまたがるフローでは、その稲妻アイコンを別の画面へドラッグすると Connector lines を作成できます。

ワイヤーフレームを HTML Prototypes に変換する

どのプラン： Business, Enterprise （Accelerate ライセンス）

フローが高精度のレビューや引き渡しの準備が整ったら、ウィジェット、ワイヤーフレーム、または Screens を HTML Prototype（Prototypes 2.0）に変換します。HTML Prototypes は次の機能をサポートします：

• よりリッチなレンダリング（グラデーション、影、フォント、レイアウト）
• キャンバス上での軽微な編集
• インタラクティブなコネクター
• AI で編集
• 共有リンクでの全画面プレビュー
• HTML または画像へのエクスポート

注：Wireframing Library の Screens で AI で編集 を使うと、Miro が新しい Prototypes 2.0 プロトタイプを作成します。元の Screens は変更されません。

よくある質問