Web制作の打ち合わせで「Miroでワイヤーまで作って、FigmaでUIに入る」という流れをよく見ます。一方で、Figmaだけで全部やっている現場も多い。私もディレクションと実装を兼ねるので、Miro Figma 使い分けは案件ごとに毎回考え直しています。どちらか一方に統一したい気持ちはわかりますが、ツールの得意分野が違うので、無理に寄せると後から手戻りが増えがちです。
この記事では、フリーランスや小規模チームの制作現場を想定して、MiroとFigmaをどう役割分担するかを書きます。ライセンス料の比較だけでなく、情報設計の段階とUIの段階で何をどこで決めるかが焦点です。
先に結論
- 向いている人: クライアントと画面構成を一緒に決めたい人、サイトマップやユーザーフローを可視化したい人、FigmaのUI作業に入る前に合意形成をしたい人
- 向いていない人: 1人でLPを1枚だけ作る短期案件、すでに完成デザインが渡されていて構成変更がない人、ツールを増やしたくない人
- 私のおすすめ: 構成・合意はMiro、見た目・コンポーネントはFigma。案件の最初に「どこまでMiroで止めるか」を1行で決める
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
Miroはチームの合意が取れるかどうかで価値が変わると感じています。
MiroとFigmaは何が違うのか
| 観点 | Miro | Figma |
|---|---|---|
| 得意なこと | ホワイトボード、フロー、付箋、共同ブレスト | UIデザイン、コンポーネント、プロトタイプ |
| 向く工程 | 要件整理、サイトマップ、ワイヤー | ビジュアル、デザインシステム、Dev Mode |
| クライアント共有 | 画面全体を俯瞰しやすい | ピクセル単位の確認向き |
| 学習コスト | 操作は軽め、デザインスキル不要 | UIの知識があると活きる |
Miroは「考える場」、Figmaは「形にする場」と割り切ると迷いが減ります。どちらもオンラインで共同編集できますが、決めることの粒度が違います。Miroではページ構成や導線を早く動かし、Figmaではタイポグラフィや余白、コンポーネントの一貫性を詰めます。
Figmaの公式プランは、UI作業の本番用として検討する価値があります。Miroは無料枠やチームプランで要件整理から入れることが多いです。料金は執筆時点（2026年7月・日本時間）の各社サイトで確認してください。キャンペーンや為替で変わることがあります。
使い分けの基本ルール
私が現場で守っているルールは3つです。
- 構造が動く段階はMiro — ページ数、ナビゲーション、コンテンツの優先順位
- 見た目が固定に近づいたらFigma — カラー、フォント、ボタン、カードのパターン
- クライアント承認の単位を分ける — 「構成OK」と「デザインOK」を別日にする
この3つだけでも、Slackで「ここ直して」が何度も来る回数は減ります。特にフリーランスは、修正の境界が曖昧だと工数が膨らみやすいので、承認のタイミングをツールで分ける意味は大きいです。
案件タイプ別の目安
- コーポレートサイト新規: Miroでサイトマップ＋主要ページワイヤー → Figmaでトップと下層テンプレ
- LP1枚: Miroは省略または簡易スケッチ → Figmaから開始で十分なことが多い
- 既存サイト改修: 現状URLをMiroに並べ、差分だけFigmaで
- アプリUI: ユーザーフローはMiro、画面はFigma（FigJamを使う選択肢もある）
Miroに寄せるべき作業
Miroが向いているのは、まだ正解が1つに決まっていないときです。
サイトマップとナビゲーション
ページの親子関係や、グローバルナビに何を載せるかは、Miroのフレームとコネクタで早く描けます。Figmaでいちいちフレームを複製して並べ替えるより、付箋感覚で動かせる方がクライアントも話しやすいです。私は「トップ → サービス → 事例 → お問い合わせ」のような骨格をMiroで固めてから、各ページのワイヤーに入ります。
ユーザーフローと導線
フォーム完了までのステップ、会員登録の分岐、ECのカート導線など、矢印でつなぐ作業はMiroの方が見通しがよいです。Figmaのプロトタイプでも繋げられますが、まだ画面デザインがない段階では重いです。フローだけ先に合意しておくと、後から「この画面いらない」という無駄なUI作業を減らせます。
ワークショップと要件の可視化
キックオフでクライアントと一緒に付箋を並べる、ペルソナや競合サイトのスクショを貼る、といった作業もMiro向きです。デザインのセンスを問われにくく、ビジネス側の人が参加しやすいのが強みです。議事録のリンクをMiroボードに貼っておくと、後から「なぜこの構成になったか」を追いやすくなります。
Figmaに寄せるべき作業
UIの本番は、基本的にFigmaに寄せます。Miroでワイヤーまでやったあと、見た目の言語を統一する場所がFigmaです。
ビジュアルデザインとコンポーネント
ボタン、見出し、カード、フォームのスタイルはFigmaでコンポーネント化します。Variablesやスタイルを使えば、後からブランドカラーが変わっても一括更新しやすいです。Miroのワイヤーはグレーボックスのままにして、色やフォントはFigmaに任せると役割がぶれません。
プロトタイプとインタラクション
ホバー、タブ切り替え、モーダルの開閉など、動きの確認はFigmaのプロトタイプが向いています。クライアントに「クリックしてみて」と渡す資料も、Figmaの共有リンクの方が馴染みがある人が多いです。Dev Modeで開発者に渡す場合も、最終データはFigmaに集約するのが一般的です。
デザインシステムと量産
同じパターンのページが10枚以上ある案件では、Figmaのコンポーネントとバリアントが効きます。Miroでページ一覧を作り、各ページの中身をFigmaテンプレに流し込む、という分担が現実的です。Figmaのチームプランを検討するタイミングは、コンポーネントが20個を超えてきたあたりです。小規模なら無料枠でも回ることが多いです。
FigJamを使う場合の整理
FigmaにはFigJamというホワイトボード機能もあります。「MiroとFigJam、どちらを使う？」と聞かれることがあります。
私の切り分けはこうです。
- すでにFigmaだけで回しているチーム → 新ツールを増やさないならFigJamで十分なことが多い
- クライアントがMiroに慣れている、またはMiroテンプレがある → Miroのままの方が説明コストが低い
- デザイナー以外がボードを触る → Miroの方がUIがシンプルで入りやすいこともある
FigJamとMiroを両方使う必要は通常ありません。案件の主ツールを決めて、もう一方は使わない方が運用は楽です。
フリーランス向けの進め方（実務フロー）
- キックオフ後、Miroに「サイトマップ」「主要ワイヤー」の2ボードを作る
- クライアントにMiroリンクを共有し、構成のコメントをもらう（修正は1〜2ラウンドに区切る）
- 構成承認後、Figmaにワイヤーの骨格を転写する（ピクセルパーフェクトにこだわらない）
- Figmaでビジュアルとコンポーネントを作り、デザイン承認を取る
- WordPress実装やコーディングに入る（必要ならDev Modeで開発者に渡す）
見積もりに含めるときは、「Miroでの要件整理○時間」「Figmaデザイン○時間」と分けて書くと、クライアントにも納得されやすいです。両方を1つの「デザイン費」にまとめると、構成変更のたびにデザイン修正と同列に扱われてしまい、こちらが損をしがちです。
ファイル管理のコツ
Miroボード名とFigmaファイル名は、案件名＋日付で揃えます。例: clientname-202609-sitemap と clientname-202609-ui。リンクをNotionやスプレッドシートの案件一覧に1行で貼っておくと、半年後に改修依頼が来たときに迷いません。クライアントへの共有権限は、Miroは編集可、Figmaは閲覧＋コメント、と段階を変えることもあります。
よくある失敗と回避策
失敗1: Figmaでいきなりビジュアルから始める
トップページをきれいに作ってから「やっぱりページ構成変えたい」となるパターンです。先にMiroでサイトマップを固めれば、ビジュアル作業の捨てが減ります。どうしても期限が短いLPだけは例外です。
失敗2: Miroのワイヤーを細かくしすぎる
Miroでピクセルまで詰めると、結局Figmaで二重作業になります。ワイヤーはブロックの配置と優先度まで。フォントサイズや余白の数値はFigmaに任せます。
失敗3: ツールが2つあることを伝えない
クライアントが「Figmaのリンクだけ欲しい」と言うことがあります。そのときは、Miroは内部用、共有はPDF書き出しまたはスクリーンショットで要点だけ渡す、という運用もあります。ただし、構成の合意を取っていないままFigmaだけ渡すと、後からの変更がデザイン修正扱いになりやすいので注意です。
失敗4: ライセンスを誰が払うか曖昧にする
MiroとFigmaは、クライアント契約か自分の経費かを案件開始時に決めます。フリーランスが自分の席で使う分は経費計上できる場合がありますが、クライアント専用のゲスト編集が必要なら、クライアント側のプランを使ってもらう形もあります。会計処理は自分のルールに合わせてください。
料金とプランの考え方（執筆時点）
正確な金額は各サービスの公式サイトで確認してください。ここでは選び方の軸だけ書きます。
- Miro: 個人や小チームは無料枠から始めやすい。ボード数や編集者数に上限があるので、案件が増えたら有料を検討
- Figma: 無料のStarterでも個人のUI作業は可能。複数ファイルのバージョン管理やチームライブラリが必要ならProfessional以上
両方有料にすると月額が積み上がるので、主戦場を1つ決めて、もう一方は無料枠で足りる範囲に収めるのが現実的です。UI案件が8割ならFigma有料＋Miro無料、要件整理の打ち合わせが多いならその逆、というイメージです。
価格やプラン名は執筆時点（2026年7月・日本時間）の情報です。契約前に公式サイトで最新を確認してください。
よくある質問
Q. MiroなしでFigmaだけでも問題ない？
A. 問題ありません。特にLP1枚や、クライアントが構成を最初から指定してくる案件では、Figmaだけの方が速いです。サイトマップやフローが必要なときだけ、Figma内のFigJamやシンプルなフレーム一覧で代用する方法もあります。
Q. ワイヤーはFigmaの低忠実度フレームで十分？
A. 十分なことが多いです。チーム全員がFigmaに慣れていて、クライアントもFigmaでコメントできるなら、Miroを増やさない選択は合理的です。Miroの価値は、デザインツールに不慣慣な人が一緒にボードを触る場面で出やすいです。
Q. 開発者にはどちらを渡す？
A. 実装用はFigma（Dev Modeまたは書き出し仕様）が基本です。Miroは仕様の背景説明用としてリンクを添える程度でよいです。CSSの数値やアセットはFigmaから取るのが一般的です。
Q. WordPress制作ではどう使う？
A. テーマやブロックの構成をMiroで合意し、Figmaでトップと主要テンプレの見た目を固めてから実装に入る流れが扱いやすいです。プラグインでページビルダーを使う案件では、Figmaの粒度を下げてワイヤー相当までに留めることもあります。
私は実装直前の手戻りを減らすために、Miroの手順を短く固定しています。
まとめ
MiroとFigmaの使い分けは、「考える・合意する」をMiro、「形にする・渡す」をFigma、と割り切るとシンプルです。ツールを2つ使うコストは、構成の手戻りが減ることで相殺できることが多いです。次の一手は、進行中の案件で「いま構造が動いているか、見た目の段階か」を確認し、動いているならMiro、固まっているならFigmaに集中することです。
今日やること: 手元の案件で、サイトマップやフローがまだ口頭だけなら、Miroに30分だけ骨格を描いてクライアントに1回共有してみてください。合意が取れたらFigmaでUIに入ると、迷いがかなり減ります。
