はじめに
オンラインホワイトボードツール「Miro」にはワイヤーフレームを作成する機能が備わっています。
以前このワイヤーフレーム作成機能を使って、システム化要件の際に必要となる「画面イメージ／画面レイアウト」の作成についてご紹介しました。
今回は「画面遷移図」と「Miro」での描き方について、ご紹介します。
画面遷移図の役割
まずは、「画面遷移図」の役割をまとめます。
| ドキュメント | 役割 |
|---|---|
| 画面遷移図 |
開発する画面がどのように遷移するか示し、相互関係を理解する 画面内にある全てのリンクやボタンを対象とする 戻りの遷移も示す |
Miro のオブジェクトリンク機能
まずは前回と同様に「ワイヤーフレームライブラリ」ツール選択し、画面図を作成します。
次に、遷移先の図をクリック → 右上の「…」をクリック →「リンクをコピー」を選択します。
そして、遷移元の図クリック → 右上の「…」をクリック →「オブジェクトをリンク」を選択し、先ほどコピーした遷移先の図のリンクを貼り付けます。
そうすると、遷移元の図に矢印ボタンが表示されます。
この矢印ボタンをクリックすると、遷移先の図に自動で画面が移動する、動的な画面遷移図を作成することが可能です。
実際にこのような動く画面遷移図を作成することができます。
（↓動画が再生されない場合は、クリックしてください。）
画面遷移図全体
公式サイト
Miro（公式サイト）
ご参考になれば幸いです。最後までお読み頂きありがとうございます。
関連した投稿
Miroでシステム化要件【画面イメージ／画面レイアウト】
要件定義で使用するフロー図の違い
Miroでファイルをエクスポートする方法
Miroはまず何から始めたらいいのか？
Miroのボードは無料版だと全世界に公開される？