画面設計フェーズ
議論して導いた要件を元に、具体的なワイヤーフレーム、サイトマップ、遷移図などをビジュアル化していくフェーズに移ります。このフェーズではそのビジュアル化をデザイナーやプロダクトマネージャーが作成していくことになりますが、チームや組織外の顧客と確認や議論をする時にリアルタイム編集やコメント機能を使いこなすことで、やり取りがスムーズになります。
議論をしながらリアルタイム編集
あるページの構成についてワイヤーフレームを元に議論している場合、議論に沿ってリアルタイムに編集・更新することで、会議に参加しているメンバーの間の合意スピードが非常に速くなります。
従来のツールでは別案を作成するために作業を持ち帰ってデザイナーが作成、後日承認者が確認する、と決定までに時間がかかるフローを通ることが多いので、このロスを解消できる点は大きなメリットです。
株式会社ブリューアスでは、会議中にリアルタイムで修正して合意を早めるため、デザインのプレゼンターと作業者を役割分けし、プレゼンターはFigmaの画面を共有して承認者に対してプレゼン、作業者はその場で編集する役割を専任して素早くフィードバックを処理するという体制を用いることもあります。
コメント機能によるコミュニケーション
作成した画面について議論する際、要望、改善点、確認したい点などコメント機能でやり取りすることができます。対象のファイルを閲覧できるユーザーであれば誰でもコメントを記載することができます。
任意の場所にコメントピンを立てることができるので、デザインの修正をするべき場所に、どのようなアクションをしてほしいか記述することができます。また、「@」を用いることで対象となるアカウントにメンションすることができ、リプライをすることでスレッド化することができます。
Slackと連携することで、コメントが発生した際に通知されるため、コメントによるやり取りスピードの活性化や、認識漏れが非常に少なくなります。細かい点ですが、常用しているチャットツールへの通知があるのは利点です。
フレームやオブジェクトごとに発行できるURL
チャットツールやメールなどで作成した画面について修正箇所の報告をすることがあると思いますが、どの画面を指しているか把握しにくいことがあります。
同じキャンバス内でも、フレームやオブジェクトごとに異なるURLを発行し、それぞれのフレームやオブジェクトに直接リンクさせることができるという機能があり、共有する際にも正確な画面の指定ができます。
おわりに
Figmaは、デザイナーがUI制作に関わる作業をシームレスにすることができるプロトタイピングツールと認識されていますが、それだけでなく、紹介したようなデザイナーとそれ以外の方のコミュニケーションをサポートする機能が非常に充実しています。このコミュニケーションが盛んになることで、より良いUIデザインに繋がることになります。
第3回では、UI制作ツールとしてFigmaを活用するデザインフェーズ、エンジニアとのコラボレーションを行う開発フェーズを紹介していきます。
