Webディレクター、結局どのツールが一番『マブダチ』なの?

Figmaのコメント欄が荒れないために。デザイナーを怒らせない『マナーとしての操作スキル』

Figmaのコメント欄を見て、そっとタブを閉じたくなることがある。

解決済みにされていない修正依頼が20件以上溜まっていて、「確認お願いします」「こちらはいかがでしょうか」「返答お待ちしています」が時系列に並んでいる。デザイナーさんが丁寧に対応してくれているほど、返事のないコメントとのコントラストが際立つ。修正依頼の墓場、という感じ。

コメント欄が荒れる原因は、コミュニケーションの問題だけじゃないことが多いです。Figmaの操作の誤解から来ている部分が、けっこうある。

「Figmaは見るだけ」という認識の危うさ

ディレクターがFigmaを使う場面は、大きく3つあります。デザインを確認する、コメントで修正依頼を入れる、プロトタイプの遷移を確認する。この3つがメインで、デザイナーのように画面を設計したりコンポーネントを作ったりすることは、基本的にない。

「見るだけだから、操作を覚えなくていい」という認識は、半分正しくて半分間違いです。

Figmaは、ビューアー権限で開いても、編集権限で開いても、同じ画面に見えます。でも編集権限があると、クリックでオブジェクトを選択できて、ドラッグで動かせる。コメントモードに切り替えずに操作していると、「コメントを入れようとしたらオブジェクトを動かしていた」という事故が起きます。

このやらかし、経験した人はわかると思うのですが、気づきにくいんですよね。オブジェクトが少しずれても、画面を見ているだけでは「なんか変かな」くらいの印象で、誤操作とわからないことがある。デザイナーさんが次に開いたときに「これ、誰かが動かしましたよね」という話になる。

「操作を覚えなくていい」は正しいですが、「何がまずい操作なのかを知らなくていい」は違います。

コンポーネントという概念を知っているかどうかで変わる

Figmaの操作でディレクターが知っておくべき概念として、コンポーネントがあります。

コンポーネント(component) は、Figmaでくり返し使われるデザイン要素を「テンプレート化」したものです。ボタン、ヘッダー、カードなど、画面内で複数回登場するパーツをコンポーネントとして定義しておくと、一か所を変更したときに全ページに変更が反映されます。コンポーネントの「オリジナル(マスターコンポーネント)」と、そのコピーである「インスタンス」という関係で管理されています。

よくある誤解が「全部同じように触っていい」という認識です。 コンポーネントのインスタンスを直接編集すると、そのインスタンスだけが変更されます。でもマスターコンポーネントを編集すると、そのコンポーネントを使っている全ページに変更が反映される。「このボタンのテキストだけ変えたい」とマスターコンポーネントを触ってしまうと、全ページのボタンが変わってしまう。

実際に起きたケースとして、クライアントへのプレゼン資料として確認用のFigmaファイルを共有していたときに、「この一か所のテキストを変えてほしい」という依頼があって、URLを共有したままデザイナーさんに対応してもらっていたのに、なぜか複数ページに同じ変更が反映されていて確認が混乱した、という話があります。マスターコンポーネントを編集していたことが原因でした。

コンポーネントの概念を理解しているかどうかは、「デザイナーとの会話が成立するかどうか」に直結します。使いどころとして言えば、コンポーネントを説明できる状態だと「このパーツ、コンポーネント化されていますか」と聞けるようになる。 この一言が言えると、デザイナーさんとの仕様確認の精度が変わります。

デザイナーを怒らせる操作には段階がある

正直に書くと、デザイナーさんの怒り方には段階があります。

第一段階は「お知らせ」です。「ここ、少し動いていますね」「このオブジェクト、編集されていますか?」という確認の連絡。この段階は、まだ穏やかです。

第二段階は「注意」です。「編集権限があっても、オブジェクトを直接触らないでほしいです」「コメントモードで入れてもらえますか」という、やや明示的な依頼。この段階になると、関係性にじわっと影響が出始めます。

第三段階は、コメント欄での返信が短くなる、確認の連絡に対するレスポンスが遅くなる、という形で現れます。言葉にしてもらえない分、気づきにくい。

多くの場合、第一・第二段階は「操作の誤解」から来ていて、悪意があるわけではないんですよね。ただ、「Figmaの正しい使い方を知らないまま使っている」ことが、関係性のコストになってしまっている。

押さえておくべき操作の基本

デザイナーを怒らせない操作として、最低限これだけ知っておくといいという3点を書きます。

コメントモードで入れる。Figmaの左上にあるツールバーで、コメントアイコン(吹き出しマーク)を選択してからコメントを入れる。編集ツールのままコメントしようとすると、クリックでオブジェクトを選択してしまいます。コメントを入れる前に、必ずコメントモードに切り替える。これだけで「オブジェクトを動かしてしまった」事故の大半は防げます。

解決済みは自分でつける。自分が依頼したコメントへの対応が完了したら、「解決済み」にするのは依頼者側の仕事です。デザイナーさんが対応してくれた後に「確認しました」だけで終わると、コメントが残り続けて何が対応済みか追跡できなくなる。返信で確認を伝えたら、そのままコメントを解決済みにする、という流れを習慣にする。

オブジェクトを選択したまま離席しない。些細なことに見えますが、Figmaはリアルタイムで誰が何を選択しているかが表示されます。誰かが何かを選択した状態でいると、デザイナーさんが「今誰か作業してるのかな」「動かされた?」と気になってしまうことがある。確認作業が終わったら、何も選択していない状態で画面を閉じる。

この3つは機能の話ではなくて、Figmaという共有スペースでの振る舞いの話です。オフィスで誰かのデスクを借りるときに「勝手に引き出しを開けない」という感覚に近い。

マナーとしての操作スキルが信頼を作る

「Figmaの操作を勉強する」というと、デザイナーレベルの使いこなし方を連想するかもしれないですが、ディレクターに必要なのはそこじゃないです。

コメントの入れ方、解決済みの管理、オブジェクトへの干渉を避けること。これは5分説明すれば理解できる話で、習熟に時間がかかるスキルではない。それでも知っているかどうかで、デザイナーとの関係性と仕事のスムーズさが変わります。

ツールへの理解は、相手への配慮の別名でもあります。 デザイナーさんの作業環境を壊さないで使えることは、「一緒に仕事しやすい人かどうか」の評価に繋がっている。Figmaのコメント欄が荒れないチームは、操作のマナーが揃っているチームです。

「どのツールが一番使いやすいか」より「どのツールで、どう振る舞うか」の方が、長期的に見て現場の品質を左右すると思っています。

前の記事 Figma全盛期に、あえて『XD』でワイヤーを引く。その愛着に隠された合理性