自由度の高いコラボレーションが可能なオンラインホワイトボードツール Miro について
VALUに11月から参加してデザイナーをしている近藤です。UIのデザインはもちろん、その前の段階としての企画検討やの設計などをよくしています。そんな私が VALU Advent Calendar 2019 8日目としてMiroについて書いてみます。
組織が違うとデザイン・開発・情報共有ツールが異なることがよくありますが、私も先月VALUに参加してから新しいツールをいくつか触るようになりました。メインのデザインツールは Sketch（+Abstract）だったので、これは前職から変わらずなので安心。自分的に新しく触ったツールはいくつかありましたが、特に印象的だったのは今回取り上げる Miro です。
Miroは「オンラインリアルタイムホワイトボード」ツールなんて呼ばれているのですが、元々は Realtime Board という名前で実は結構歴史があります。ですが調べて見ると意外に情報が少ないですね...
Mac, Windows, iPad, iPhone, Webとどんな環境でも使えてコラボレーションします。主な特徴はこんな感じ↓です。
・色々な図が簡単にきれいに書けるテンプレートが豊富
・画像やテキスト、手書きメモにコメントなど自由に配置、移動ができる
・画面のサイズに限界がない
・ズームイン・ズームアウト、ボード内の移動がスムースに早く行える
・任意の場所にコメントを付け、スレッド化できる
・同時に見ているユーザーのアカウント名とカーソルが動いているのがわかる（これは Figma みたいですね）
用意されているテンプレートもとても豊富で、マインドマップ、カスタマージャーニーマップ、ワイヤーフレーム、ユーザーストーリーマップ、カンバン、フローチャート、プロダクトロードマップ... これらの他にも便利なもの、特に最近のUXデザインやスクラム、デザインスプリントなどに役立つテンプレートがたくさん用意されています。その他、Miroでどんなことができるのかはこちらの記事に詳しいので、初めての方はこちらを見ていただくと良いかもしれません。
VALUでは新しい機能や施策を検討、開発する際の画面遷移、フローなどをまとめるのに使っています。内容わからない程度に実際のボードの一部をチラ見せします。
拡大しては見せられないのでこちらで。かなり自由に色々配置でき、ズームアウトして全体像を見る時にもコメント（特に未読のもの）がわかるようになっています。どこからでも、どの表示倍率でも図を始められ、どこへでも伸ばしていけるのでボード全体を見るとかなりカオスな感じになりますが、任意の大きさで「フレーム（Frame）」を切ると、サイドバーにフレーム一覧を表示して任意の場所に瞬時に移動することができます。
最初の正直な印象は「カオスすぎる...」「デザインの確認、レビューに使うのはデザイナーが面倒くさそう...」「拡大・縮小面倒...」でした。しかし実際に使ってみるとMiroの得意なことやいい所がたくさん見えてきました。
1. デフォルトで用意されている付箋のディティール
最初から用意されている付箋をただペタペタ貼っただけなのですが、付箋のめくれや影がそれぞれ違うの凄くないですか！？こういうのに気がつくと評価がグーッと1000ポイントほど上がります。
また、付箋を貼ってから書くモードの他に、先に書きたい内容をまとめて書くとまとめて付箋を作ってくれる Bulk mode もあります。
↑こんな感じで箇条書きでまとめて書いて Done! すると ↓こんな感じ。
2. URLからリンク先のページ全体のスクショを撮ってきて貼ってくれる
ツールバーの「･･･」でまとめられてしまっている中には結構便利なものがあるのですが、この中の「Web page capture」にこうやって VALU Advent Calendar 2019 のURLを入れると...
ページ全体のスクショを撮ってきて貼ってくれます。これは参考サイトを貼ったり、改善ポイントを画面から洗い出したり、現在の画面と改善のデザイン案を比べたりするのに中々便利です。また他にも「Google image search」を使えば、画像検索の結果から画像を選んでボードに貼ることもできます。オンラインホワイトボードツールとして、「ボードにソースを貼る」というところをこうやって簡略化してくれるツールを用意してくれているのはこれもとてもポイント高いです。
3. マインドマップが意外に、というかちゃんと使える
Miroで自分で遷移図や仕様を書く時に使うコネクトの線ツールはテキストも載せられたり悪いものではないのですが、吸着や配置調整なんかはできないのでMiroのマインドマップテンプレートは正直あまり期待してなかったのですが、これが結構ちゃんと使えるんです。ブランチを増やしていくのも直感的に簡単ですし、ブランチが増えてきたら自動でレイアウト調整もしてくれます。手動で自分の好きな位置へ調整するのももちろんできます。
マインドマップ歴が結構長く、 MindNodeを愛用している私でもそんなに不満無く使えます。
4. 大人数で同時作業すること自体が楽しい
Figmaもそうですが、他の人がどこを見ているのか、何かをしているというのがリアルタイムでわかるのは結構楽しいです。そこまでの大人数での同時作業はまだやっていませんが、けっこうな人数でも大丈夫そうですね。Goodpatch Anywhereさんでもよく使われているようです。
さすがにこの量でわいわいするのははじめて！！ #ezopatch pic.twitter.com/jfbXyZnFpQ
— Keita Saito / Goodpatch Anywhere🕴 (@qnoub) August 27, 2019
そんな感じで色々な情報やメモ、流れなどをコラボレーションでまとめるのに便利な Miro ですが、チームで使うだけじゃなく、一人でラフアイデアから思考を整理してまとめていくのにもかなり使えると思います。最近だとDropbox PaperやNotionもそういう使われ方されている方も多いと思いますが、Dropbox PaperやNotionはファイルやページ、カラムという概念からは離れられないので、自由度という面ではアートボードの広さに制限がないMiroの方が上です。ただ、散らかってしまうのは避けられないのでどちらを優先するかという話になりますが。
実際使い出してみて便利なMiroですが、さすがに万能ではないので、細かい使い勝手で気になる点もありますので、その点もいくつか挙げてみます。
Miroの使い勝手でちょっと気になる点
1. Sketchから画面デザインを書き出して送った時に毎回画像を探さなきゃいけない
MiroにはSketch用のプラグインがあり、Sketch側からアートボードを選択して書き出し、Miroのボードを選んで送ることができるのですが、貼る場所やFrameを選べないので毎回探すのが面倒です。縮小・拡大なども自由に使っている場合は更に面倒です。画面デザインの詳細確認までMiroで行おうとすると、修正の度にこの作業をするのでデザイナーにとってはかなり無駄なストレスになってしまいます。ということで、VALUでは画面デザインの確認にZeplinを採用させてもらいました。遷移、フローの確認にはMiroを引き続き使用しています。
2. オブジェクトのサイズや位置を数値で直接編集出来ない
ワイヤーフレームもMiroで作ることができます。その際に例えば四角（rectangle）のショートカットは R 、テキスト（text）のショートカットは T 、丸（oval）のショートカットは O と言ったようにSketchやFigmaを使っている人であれば似たような操作ですぐ使えるのですが、数値指定はできないので比率や並び、サイズをちょっときれいにしたい等は難しいです。あくまでラフなワイヤーフレーム作成までに留まります。ワイヤーフレームもきれいに作りつつ、遷移やコメントなども含めてササッと共有したい時はやっぱりFigmaが便利ですね。
3. テキストボックスのリサイズがちょっとやりにくい
テキストを流し込むボックスをリサイズしたい時に、PhotoshopやIllustratorの感覚で角のハンドルを動かして枠のサイズを変更したいのですが、これをやるとテキストがオブジェクトとして扱われ、フォントサイズも可変してしまいます。ボックスのサイズを変えるには横の辺に合わせてドラッグすればいいのですが（縦はできないのかな？）、これがなかなか慣れず... 右のドットを選んでしまって接続のコネクタを引っ張り出してしまうのをよくやってしまいます。
4. 誰がいつどこを編集したかわからない
まあ、これは自由度が高すぎるトレードオフなのかもしれません。そういうものだと思って割り切っています。必要な場合はコメントを置いておけばいいですね。
まとめ
ということで、Miroを使ってきてみて気に入った点も気になる点もありますが、自由度の高いコラボレーションができるMiroはとてもいいツールだと思いますし、UXデザイン・開発をチームで進めていくスタイルにはとてもあっていますので、これまで使ったことがない方も是非試してみてはいかがでしょうか？