Miro のワイヤーフレーム コンポーネント ライブラリーを使用して、ボード上にワイヤーフレームを直接作成します。組み合わせが簡単な約 60 種類の UI デザインパターンがあり、ユニークな低忠実度のモックアップを容易に作成することができます。
ツールバーのワイヤーフレーム
作成ツールバーにワイヤーフレームを追加することもできます。
ツールバーにワイヤーフレームを追加
ワイヤーフレーム コンポーネントの編集
さまざまな要素から選択して、詳細なウェブページや製品画面、モバイルアプリのレイアウトを作成します。
- デバイスタイプ(電話、タブレット、ブラウザー)
- UI コンポーネント(ワイヤーフレームのインタラクティブな要素)
- チップ
- リスト
- カード
- 進捗バーのコンポーネント
- アイコン
デバイスタイプは、人気の高いデバイスの比率で作られたフレームです。フレームの境界線をクリックして選択し、コンテキストメニューを表示します。ここでは、デバイスタイプの変更や、デバイスの輪郭の表示 / 非表示、方向の変更、色を塗ることが可能です。
デバイスタイプのメニュー
💡 デバイスタイプのワイヤーフレームは接着性があり、通常のフレームと同様に、オブジェクトをまとめたページのような機能をします。つまり、コンポーネントやアイコンをワイヤーフレームに追加すると、フレーム内のすべてのコンテンツを一緒に動かすことができ、フレームと一緒にコピーできます。
接着性のあるデバイス ワイヤーフレーム
💡 ボードを PDF としてエクスポートした場合、デバイスのワイヤーフレームも別の PDF ページとしてエクスポートされます。
既成のインタラクティブな UI コンポーネントを使うと、設計経験があまりなくても、わずか数分で、ウェブサイトのページや製品画面のシンプルな低忠実度のプロトタイプを作成できます。
UI コンポーネントの追加
ダブルクリックして編集を開始します。選択したコンポーネントによっては、スタイルや状態(チェック / チェックなし、選択 / 無効、テキスト / プレースホルダーなど)の変更、アイコンの変更、または行の追加(ラジオボタン、チェックボックス)が可能です。
コンポーネントの編集
チップの場合、色、アイコン、状態(有効 / 無効)、塗りつぶし(あり / なし)を設定できます。
ワイヤーフレーム ライブラリーからチップを追加
リストを使用する場合、プライマリーリストとセカンダリーリストを選択し、色を設定することができます。リストをダブルクリックすると、アイコンを設定できます。
カードのコンポーネントを使用する場合、画像なし / 左側に画像あり / 上側に画像ありから選択し、カードの色とアイコンを設定できます。
進捗バーを追加する場合、形(長方形、円形、マイルストーン)、色、状態(開始、進行中、完了)を自由に選択できます。
既成のアイコンライブラリーは、時間を節約し、詳細なワイヤーフレームを作成するのに役立ちます。UI コンポーネントと組み合わせても、単独でも使用できます。
ワイヤーフレーム ライブラリーのアイコンタブで、最も人気のあるアイコンとアイコンのカテゴリー(矢印、食品、ソーシャルなど)が表示されます。
アイコンの編集
数分でシンプルなワイヤーフレームを作成できる強力な機能
- リアルタイムであらゆるデバイスからフィードバック
ワイヤーフレーム上でリアルタイムでコラボレーションし、@メンションを使ったコメントや内臓のビデオチャットなど複数のコミュニケーション オプションで、チームからフィードバックを得ることができます。
- Unsplash、IconFinder などとのインテグレーション
IconFinder や Unsplash との Miro のインテグレーションを使用して、明確で包括的なワイヤーフレームを作成します。
- フレーム、接続ライン、リンク
フレームを利用して複数のウェブや製品の画面を表示したり、ピッカーから既成のワイヤーフレーム テンプレートを追加したりすることができます。ラインと接続し、オブジェクトをリンクする 機能を使用してユーザーの操作の流れや、一つの画面から別の画面への移動を視覚化します。
旧ライブラリー
現時点では、以前のワイヤーフレームもワイヤーフレーム ライブラリーに表示されます。リストをスクロールダウンしてください。
ライブラリーにある以前のワイヤーフレーム
⚠️ 以前のバージョンのワイヤーフレーム ライブラリーは非推奨になりますのでご注意ください。