ワイヤーフレームライブラリ – Miro Help Center

Miro のワイヤーフレームコンポーネントライブラリーを使用して、ボード上にワイヤーフレームを直接作成します。組み合わせが簡単な約 60 種類の UI デザインパターンがあり、ユニークな低忠実度のモックアップを容易に作成することができます。

作成ツールバーにワイヤーフレームを追加することもできます。

wireframes_on_the_toolbar.gif
ツールバーにワイヤーフレームを追加

豊富なラインナップから要素を選択して、詳細なウェブページ、製品画面、モバイルアプリのレイアウトを作り上げましょう。

デバイスタイプは、人気の高いデバイスの比率で作られたフレームです。フレームの境界線をクリックして選択し、コンテキストメニューを表示します。ここでは、デバイスタイプの変更や、デバイスの輪郭の表示 / 非表示、方向の変更、色を塗ることが可能です。

device_context_menu.gif
デバイスタイプのメニュー

デバイスタイプのワイヤーフレームには接着性があり、通常のフレームと同様、オブジェクトをグループ化して配置可能なページのように機能します。つまり、コンポーネントやアイコンをワイヤーフレームに追加すれば、フレーム内のすべてのコンテンツとフレームを一緒に移動・コピーすることができます。

移動_ワイヤーフレーム.gif 粘着装置のワイヤーフレーム

ボードを PDF としてエクスポートした場合、デバイスのワイヤーフレームも別の PDF ページとしてエクスポートされます。

既成のインタラクティブな UI コンポーネントを使うと、設計経験があまりなくても、わずか数分で、ウェブサイトのページや製品画面のシンプルな低忠実度のプロトタイプを作成できます。

creating_a_prototype.gif
UI コンポーネントの追加

ダブルクリックして編集を開始します。選択したコンポーネントによっては、スタイルや状態（チェックあり / チェックなし、選択 / 無効、テキスト / プレースホルダーなど）の変更、アイコンの変更、または行の追加（ラジオボタン、チェックボックス）が可能です。

editing_wireframes.gif
コンポーネントの編集

チップの場合、色、アイコン、状態（有効 / 無効）、塗りつぶし（あり / なし）を設定できます。

wireframe_chip.gif
/span>ワイヤーフレームライブラリーからチップを追加

リストを使用する場合、プライマリーリストとセカンダリーリストを選択し、色を設定することができます。リストをダブルクリックすると、アイコンを設定できます。

カードのコンポーネントを使用する場合、画像なし / 左側に画像あり / 上側に画像ありから選択し、カードの色とアイコンを設定できます。

進捗バーを追加する場合、形（長方形、円形、マイルストーン）、色、状態（開始、進行中、完了）を自由に選択できます。

組み込まれたアイコンライブラリーを活用します。UI コンポーネントと組み合わせて使用したり、それ自体を使用することで、時間の節約や、詳細なワイヤーフレームを作成するのに役立ちます。

ワイヤーフレームライブラリーのアイコンタブでは、最も人気のあるアイコンとアイコンのカテゴリー（矢印、食品、ソーシャルなど）が表示されます。

adding_an_icon.gif
アイコンの編集

ワイヤーフレーム上でリアルタイムでコラボレーションし、@メンションを使ったコメントや内蔵のビデオチャットなどのさまざまなコミュニケーション機能を活用して、チームからフィードバックを得ることができます。

IconFinder や Unsplash との Miro のインテグレーションを使用して、明確で包括的なワイヤーフレームを作成します。

フレームを利用して複数のウェブや製品の画面を表示したり、ピッカーから既成のワイヤーフレームテンプレートを追加したりします。ラインと接続し、オブジェクトをリンクする 機能を使用してユーザーの操作の流れや、一つの画面から別の画面への移動を視覚化します。

現時点では、以前のワイヤーフレームもワイヤーフレームライブラリーに表示されます。リストをスクロールダウンしてください。

previous_wireframes.jpg
ライブラリーにある以前のワイヤーフレーム

⚠️ 以前のバージョンのワイヤーフレームライブラリーは非推奨になりますのでご注意ください。