Gaji-Labo の UIデザインでの Miro と Figma

こんにちは、Gaji-Labo UIデザイナーの今西です。

今回は、Gaji-Labo の UIデザインにおける、Miro と Figmaについてまとめます。

Miro

Miro は オンラインホワイトボードツールです。
豊富なツールやテンプレートを使って、ブレインストーミングやマインドマップ作成などをボード上で進めることができます。同時に共同編集ができるので、オンラインで会議の多い昨今、より便利なツールになっています。

Gaji-Labo の UIデザインでは、ヒアリングやスタディで出てきた方向性検討のための成果をまとめたりすることに活用しています。

• 概念モデリング
• ユースケース
• ペルソナ
• フロー
• ワイヤーフレーム

共同編集できるMiro なので、プロジェクトメンバーで協働しながらアウトプットを出していくことができます。作業やその成果がひとつの場所に集まっているという共通言語と共通理解を作ることに役立ちます。

余談ですが、Gaji-LaboではOKRや施策についてのアイデア出しやディスカッションにも Miroをよく使っています。
同期非同期で各自のアイデアを溜めていくことができるので、ディスカッションのための事前ワークとしてのアイデア出しにも活用しています。 「アイデアはMiroで書いて、MTGで話しながらすり合わせしましょう」という検討の流れが、全体に身についています。

Figma

Gaji-Labo でUIデザインは主に Figma で進めています。
ヒアリングとスタディのUIの検討フェーズの後に進めるビジュアルへの落とし込み、具体的なUIデザインなので、主に Figma で作成・制作を進めるのはデザイナーです。 Figma でも共同編集はできますが、主に複数のデザイナーで行います。

Figma で進める作業範囲は下記のあたり。

• ワイヤーフレーム
• デザインカンプ作成
• コンポーネント作成
• プロトタイピング
• デザインシステム

Figma の具体的な UIデザインの立ち位置や活用は過去の記事を見ていただければと思います。

ワイヤーフレームはどちらで行う？

ワイヤーフレームについてはMiro でも Figma でも作業するものとして挙げています。その作業する場所の違いを書いておきます。

プロジェクトでのワイヤーフレームのニーズにあわせて、作業する場所を Miro にするか、 Figma にするかを選択しています。

機能の検討や要件定義の段階では、Miro が適していると思います。
Miro だと編集できるメンバーが多く、構成要素や検討や情報設計にデザイナーではないメンバーが参加できます。ワイヤーフレームがそれまでの検討と同じ Miro のボードにあることで、ボード自体が共通言語と共通理解のひとつの成果となります。

Figma でワイヤーフレームを作成するのに適しているのは、機能の検討から少し進んでワイヤーフレームを粒度の大きいプロトタイプとして作る場合です。 Figma で検討のためのモデリングを元に実際に触れる形にします。実際に触れる状態をつくることで、体験としてのUI検討ができます。動くワイヤーフレームを触ってみてわかることをコミュニケーションして更にUIの検討を深めます。

UIデザイン検討には協働できるツールを

Gaji-Labo はUIデザインのためのヒアリング〜検討〜ビジュアライズをすべてオンラインで行っています。

双方向で協働するメンバーが参加しながら、クイックに作業できるものとして、これらのツールを使用しています。これからより良いツールが出てくるかも知れませんが、今のところは Miro とFigma を主な検討のツールとして使用しています。

ツールをどのように使うかは検討のコミュニケーションにもよるので、常によりうまく議論を深められる方法を考えながらチューニングしていきたいと思います。