はじめに
オンラインホワイトボードツール「Miro」にはワイヤーフレームを作成する機能が備わっています。
このワイヤーフレーム作成機能を使って、システム化要件時に必要となる「画面イメージ／画面遷移図／画面レイアウト」を作成したところ、PowerPoint や Excel 等を使用するよりも容易に感じました。
本記事では「画面イメージ／画面レイアウト」と「Miro」での描き方について、ご紹介します。
「画面遷移図」についてはこちらです。
画面イメージ／画面レイアウトの違い
まずは、「画面イメージ」と「画面レイアウト」の役割の違いをまとめます。
| ドキュメント | 役割 |
|---|---|
| 画面イメージ | UI(User Interface)の標準化 フォントや機能ごとに色を統一する等、操作性や視認性の向上を目指す |
| 画面レイアウト | 開発の規模感を把握する テキストボックス、ボタン等を配置して画面項目数を把握する |
Miro のワイヤーフレーム機能
左端のツールバーから「その他のツール」を選択し、その中から「ワイヤーフレームライブラリ」を選択します。（画像１）
ドラッグ＆ドロップでメインツールバーに移動することもできます。
（画像１）
コンポーネントにはテキストボックス、ボタン、トグル、チェックボックス等が揃っています。（画像２）
そのまま貼り付けて使用するだけでなく、コンポーネント内へのアイコンの挿入、ボタンに有効／無効の状態を設定等、各コンポーネント独自の機能も存在します。
（画像２）
特に便利だと思ったのは、デバイスタイプのワイヤーフレームです。
デバイスタイプのワイヤーフレームは内部に設置したコンポーネントを自動でグループ化し、一緒に移動・コピーすることができます。
標準では「スマートフォン」「タブレット」「ブラウザ」の 3 種類のコンポーネントに用意されている機能ですが、① 対象図を選択し、右上の「…」をクリックして、「Creat Frame」を選択する（画像３）又は ② フレームから選択する（画像４）ことで、同様の機能を持たせることが可能です。
（画像３）
（画像４）
実際にこのような画面イメージや画面イメージレイアウトを作成することができました。
公式サイト
Miro（公式サイト）
ご参考になれば幸いです。最後までお読み頂きありがとうございます。
関連した投稿
Miroでシステム化要件【動く画面遷移図】
要件定義で使用するフロー図の違い
Miroでファイルをエクスポートする方法
Miroはまず何から始めたらいいのか？
Miroのボードは無料版だと全世界に公開される？