【MIROで画面遷移図を書く方法】講師初心者でもできる！かんたん実践ガイド

2025年6月4日 2025年6月4日山崎講師

山崎講師

こんにちは。ゆうせいです。
今回は、オンラインホワイトボード「MIRO（ミロ）」を使って画面遷移図を書く方法を、やさしく丁寧に解説していきます。

MIROって聞いたことあるけど、「どう使えばいいの？」「画面遷移図なんて描けるの？」と思った方、安心してください。
この記事では、実際の手順やコツをまじえて、ステップバイステップでご案内します！

MIROってなに？

まず、MIRO（ミロ）とは、リアルタイムで共同作業ができるオンラインホワイトボードツールです。
ふせん、図形、矢印、テキストなどを自由に使って、ブレストから設計図まで描けます。

特に画面遷移図との相性がいい理由は？

直感的に図形や矢印を置ける
共同編集ができる（チーム開発に最適）
テンプレートも豊富
無料プランでも十分に使える

ステップバイステップで解説！

ステップ①：アカウントを作成・ログイン

https://miro.com にアクセス
Googleアカウントなどで無料登録
ダッシュボードから「New board（新しいボード）」を選択

ステップ②：画面を表す図形を用意

左側ツールバーから「Rectangle（四角形）」を選びます
各画面を表す四角形ノードをボード上に配置
画面名を中に入力（例：「ログイン」「マイページ」など）

👉 コツ：図形のサイズはなるべくそろえましょう。見やすくなります！

ステップ③：画面同士を矢印でつなぐ

図形をクリックすると表示される丸い点（ハンドル）からドラッグ
遷移先の図形までドラッグして矢印を描画
矢印のラベルに「操作内容」（例：「ログイン成功」「設定ボタン押下」）などを記載

💡 この時、条件や処理の流れも添えると、より理解しやすくなります！

ステップ④：色やラベルでわかりやすく整理

各画面の種類（認証・メイン・設定など）で色分けすると◎
複数画面をグルーピングして、レイアウトを整えよう
吹き出し（コメント機能）を使って注意点も記載

図の例（構成）

[ログイン画面] ──(ログイン成功)──▶ [ホーム画面]
     │
(新規登録)
     ▼
[登録画面] ──(登録完了)──▶ [ホーム画面]

このように、ノード（画面）＋矢印（遷移）＋説明（条件）の3点セットを意識してください！

よく使う機能まとめ（MIRO内）

機能名	用途
Rectangle（四角形）	画面（ノード）の表現
Arrow（矢印）	遷移の表現
Text	ラベルや説明書きに
Sticky Note（ふせん）	コメントや補足情報に便利
Frame（フレーム）	関連画面をまとめる箱として
Comment	チームメンバーとのやりとり用

テンプレートを使う方法（効率化したい人向け）

「Templates」から「User Flow」や「Wireframe Flowchart」などを選ぶ
遷移図のベースをそのまま流用可能！
中身だけ自分のアプリに合わせて修正すればOK

メリット・デメリットを比較しよう！

観点	メリット	デメリット
操作性	ドラッグ＆ドロップで直感的	スマホ操作はやや不便
共同作業	チャット・コメントで即時共有	メンバー招待にアカウントが必要
表現力	色・図形・フォントも自由自在	図が増えると重くなることも

よくある質問（FAQ）

Q. フリープランでも十分に使えますか？

→ はい。3つまでのボードであれば無料で使えます。画面遷移図1つならまず困りません！

Q. 図がごちゃごちゃしてきたときは？

→ 「フレーム」を使ってグルーピングしましょう。または「レイヤー構造」で分けるのもアリ！

最後に：これからどう学べばいい？

MIROで画面遷移図が描けるようになったら、次のステップはこれ！

画面遷移図＋ワイヤーフレームをセットで作る練習
実際の開発フローの中でMIROを活用（要件定義 → UI設計）
他の人の作例を見て学ぶ（MIROのテンプレート検索がオススメ）

ツールはあくまで「手段」です。大事なのは、「どんな設計をすればユーザーが迷わず使えるか」を常に考えることです。

ぜひあなたも、手を動かしてMIROで1つ画面遷移図を描いてみてください！
「このアプリの遷移図を真似したい！」など具体的な題材があれば、またいつでも教えてくださいね。

セイ・コンサルティング・グループでは新人エンジニア研修のアシスタント講師を募集しています。

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。