オンラインホワイトボードツール「Miro」を使ってみた感想

## はじめに
こんにちは。
アドベントカレンダーもいよいよ終盤となってきました。
他の皆さんの投稿を拝見しながら、たくさんの学びや発見があり、毎日楽しませていただきました。この素晴らしい企画が終わると思うと少し寂しい気持ちですが、感謝の気持ちでいっぱいです。

今回の記事では、チーム開発で設計書ライクな資料を作成する際に活用したアプリケーション「Miro」についてご紹介します。**使いやすかった点**と**課題に感じた点**に焦点を当てて、実際に利用した際のエピソードも交えながらお話しします。Miroを検討されている方にとって、少しでも参考になれば嬉しいです。

それでは、本題に入ります😎

## Miroとは？
Miroは、オンラインで利用できるコラボレーションツールで、ホワイトボード感覚で図やフローを作成できます。リアルタイム編集や多彩なテンプレートが特徴で、設計資料やプロジェクト管理に便利です。
今回、**Miroの使い方は記載しない**ので、必要な方はMiroの[公式サイト](https://miro.com/ja/)を参照ください。

## Miroの使用用途
Miroを活用して、チームで以下の内容を共有・検討しました。
・画面遷移図やユースケースを視覚的に整理することで、全体像を共有しやすくし、意見交換をスムーズに行える環境を作成した。
・基本的な画面操作の検討を行う際も、Miro上でアイデアを可視化して議論を進めた。
・事前に作成したDB構造と入力・出力項目の妥当性をMiroで検証し、APIシーケンス図を作成してシステム間の連携を開発メンバーが確認しやすいように整理した。

## Miroの使いやすいと感じたところ

#### アプリケーションとして使いやすいと感じたところ
* ブラウザで動作する点
Miroはソフトのインストールが不要で、アカウント登録だけで利用を開始できます。そのため、新しいツールを導入する際のハードルが非常に低く、すぐに作業を始められる点が魅力です。
* リアルタイムに複数人で操作できる点
一つのボードを複数人でリアルタイムに操作できるため、全体の作業進捗を簡単に把握できます。また、メンバーと相談する際には画面共有が不要で、各自がMiro上で操作しながらその場で議論や修正を進められるので、作業効率が大幅に向上しました。

#### Miro内の機能で使いやすいと感じたところ
* フレームテンプレート
フレームテンプレートを利用することで、フレームごとにレイヤーが分かれるため、オブジェクトをグループ化しなくても、フレームの移動に合わせて上に置いた図形や内容が一緒に移動します。これにより、資料を整理しながら作業を進めるのが簡単になりました。
:::note
フレームの移動で上に置いた図形も一緒に移動できます。
![１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553958/89d78eda-822b-b8be-28c2-f9243c944193.png)
![２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553958/c8788fb0-e966-f7ba-5f9b-50db91712ded.png)
:::
* カラーパレットのスポイト機能
使用する色をスポイト機能で簡単に統一できる点が便利でした。特にデザインや資料作成時に、色の一貫性を保つための手間を省けます。
:::note
カラーパレットからスポイト機能を使用できます。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553958/9b6a3b08-0ba1-1735-21eb-09fec4603f2d.png)
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553958/bcf36f96-b302-85e5-bfa8-2cdaaf85cc27.png)
:::
* オブジェクトリンク機能
オブジェクト同士をリンクで参照し合える機能は、複雑な資料を扱う際に非常に便利です。画面一覧やAPI一覧からそれぞれの詳細を記述した資料へのオブジェクトリンクを活用することで効率的に内容を把握・共有することができました。
:::note
オブジェクトリンクを作成すると、リンククリックで対象のオブジェクトを拡大表示します。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553958/726db186-e26a-6e90-dc94-6506015735be.png)
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553958/4501e6de-a0ca-469e-3dab-70b9f0eab0b4.png)
:::
* メンション機能
Miroでは、@名前で他のメンバーにメンションを送れる機能があり、コメントでやり取りが可能です。また、Slackなどと連携することで、メンションの内容がチャットツールにも通知されるため、作業の見落としを防げます。
:::note
メンションされると通知が送信され、ボード上でも強調されます。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553958/e536c2cf-bcf1-09e3-cd77-e19b330228ad.png)
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553958/07bfdc3b-498b-3493-1262-2ca4a18bb550.png)
:::

## Miroの課題を感じたところ
* 表の機能が使いにくい
表の列幅や行幅を自動調節する機能がなく、すべて手動で調整する必要があるため、見た目を整える作業に時間を取られてしまいました。
* 付箋のフォントサイズが付箋自体の大きさに依存してしまう
同じフォントサイズを適用しても、付箋の大きさが異なるとフォントサイズも相対的に変化してしまい、資料全体の統一感を保つことが難しく感じました。
:::note
フォントサイズを32で統一しているが、文字のサイズが同じにならない。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553958/5532f7a8-e74f-2e6b-3125-c37b8ec93613.png)
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553958/f2e60602-f1d1-608c-c35f-64c6e0cf1acb.png)
:::
* メモリ消費が激しくなる場合がある
特に画像を多量に貼り付けて作業をしていると、メモリ使用量が5GB以上に達し、ブラウザが反応しなくなることがありました。資料によってボードを分ける等の対処が必要だと思いました。


## さいごに
Miroは全体的に非常に使いやすいツールだと感じました。
複数人で同時に作業していても、基本的には操作が軽快で、効率よく資料を作成することができます。
また、無料版でも十分な機能が提供されており、初めて利用する場合でも手軽に取り入れやすい点が大きな魅力です。

直感的な操作性や高い柔軟性が求められる場面では特に効果を発揮するため、チームでの共同作業やアイデア共有をスムーズに進めたい方におすすめできるツールです。
この記事が、Miroの導入や活用を検討されている方の参考になれば幸いです。

最後までお読みいただき、ありがとうございました！