小さな画面修正でもモックアップを待つなら

「設定メニューにヘルプを1つ入れるだけなのに。」PMとして小さな変更案を提案する場合でも、変更後の姿を見せるにはデザイナーに説明してモックアップを待たなければならないことがあります。頭の中では簡単な修正でも、誰かに頼む仕事がもう1つ増えるわけです。

会議の前に、その画面を自分で作れたらどうでしょうか。位置を言葉で説明する代わりに、同僚が実際にクリックして意見をくれるかもしれません。

Figma Makeの時間短縮実験は、こうした小さな修正をPM自身がドラフトとして作れる可能性を示しています。PMとプロダクトデザイナー100人に同じ課題を任せたところ、Makeを使えるPMグループでは、3課題の累積完了時間が23%短縮されました。どの作業で差が出たのか、実際の課題を見ていきましょう。

100人に任せた仕事は3つでした

Figmaはプロダクトデザイナー50人とPM 50人を募集し、MakeにアクセスできるグループとAIを使わない対照グループに無作為に割り当てました。両グループは同じソーシャルメディア画面を対象に、3つの修正課題を行いました。全参加者では、3課題の累積完了時間がMake使用条件で20%減少しました。

実験課題PMプロダクトデザイナー
ライトモードをダークモードに変更する有意な時間短縮有意な差なし
設定メニューにヘルプを追加する有意な時間短縮有意な差なし
コメントパネルが開くインタラクションを作る有意な差なし有意な時間短縮

ここでいう「有意な差なし」は、効果が正確にゼロだったという意味ではありません。公開された実験結果だけでは、統計的に時間短縮を確認できなかったという意味です。

PMに適していたのは範囲の小さい画面変更でした

PMが有意に時間を節約できた課題は、ダークモードへの切り替えとヘルプメニューの追加でした。一方、最も複雑なコメントのインタラクションでは、同じ改善は確認されませんでした。

そのため、最初の試みは変更範囲と完了条件が明確な仕事から選ぶのがよいでしょう。たとえば、メニュー項目を1つ追加する、または特定の画面状態を変えたうえで、同僚がクリックして試せるドラフトをデザイン依頼とともに渡す方法です。言葉だけで説明していた変更案を、PMも目に見える形で用意できることが、この結果から得られる実用的なポイントです。

ただし、23%はPMのすべてのデザイン業務や、デザイナーを待つ時間が短縮されたという意味ではありません。PM 50人が行った3課題の累積完了時間を比較した結果であり、成果物の品質、協業への効果、プロジェクトのリリース速度は、この研究では実証されていません。

デザイナーには、クリックして伝わる動きが候補です

プロダクトデザイナーに有意な時間短縮が見られた課題は、コメントパネルが開くインタラクションでした。慣れた色の切り替えやメニュー修正では、同じ差は確認されませんでした。

ボタンをクリックするとパネルが開く、選択によって画面が変わるなど、静的なモックアップだけでは説明しにくい動作から候補にできます。単純な修正までをすべてMakeに任せるのではなく、各役割で表現に時間がかかる作業を選ぶべきです。

最初に適用する基準

PMは範囲の小さい画面変更から、デザイナーはクリック可能なインタラクションから試してみてください。この基準は3つの課題で見つかったパターンにすぎないため、実際のチームでは同じ完了条件で手作業と比較する必要があります。

今作ってみるもの：クリックで開くヘルプメニュー

初めてなら、用意済みのデザインなしで小さな画面を1つ作るところから始めてみましょう。以下の手順はFigmaの実験を再現する方法ではなく、Makeの使いどころを確かめるために構成した練習です。

  1. 利用条件を確認します。 Figma Makeの開始ページで登録またはログインしてください。利用範囲はプランとシートによって異なり、プロンプトを送るとAIクレジットが使用されます。
  2. 新しいMakeファイルを開きます。 Figmaのファイルブラウザで、Drafts（下書き）→右上のMakeを選びます。
  3. 以下の依頼文をAIチャットに貼り付け、Sendを押します。 最初の練習では、画面1つと動作1つだけを依頼してください。作る対象、必要な要素、動作、除外する機能を明確に書けばよいです。

会議で同僚がクリックして試せる、シンプルな設定画面を作ってください。メニューは「アカウント」「通知」「ヘルプ」の3つだけにしてください。「ヘルプ」をクリックすると右側に案内パネルが開き、パネルの「閉じる」をクリックすると再び閉じるようにしてください。実際の会員登録や外部サービスへの接続なしで、この動作を確認できるようにしてください。

最初の成功は画面がきれいかどうかではなく、ヘルプが開いて再び閉じるかで確認します。 生成後に表示されるインタラクティブプレビューで、「ヘルプ」と「閉じる」を順にクリックしてみてください。開かない場合は、「ヘルプをクリックしてもパネルが開かない。メニューとパネルの接続を修正してください」のように、失敗した動作を1つ具体的に伝えます。

実際の画面に拡張するときは、修正したいFigmaフレームをMakeチャットに貼り付け、「添付した画面の残りの構成は維持し、ヘルプメニューだけを追加してください」として範囲を限定できます。既存デザインを取り込む方法も、公式のファイル作成ガイドで確認できます。

節約できた時間は修正完了後に計算します

実務で確認する数字は、最初の結果が出た時間ではなく、要件を満たすドラフトが完成するまでの総時間です。依頼文の作成、生成待ち、失敗した動作の修正にかかった時間をすべて記録してください。プロンプトごとに使われたAIクレジットも残す必要があります。クレジット消費量は、モデル、課題の複雑さ、処理するコンテキスト量によって異なります。

比較するときは、手作業とMakeでの作業に同じ完了条件を適用します。この練習なら、「ヘルプをクリックするとパネルが開き、閉じるをクリックすると消える」が基準です。同僚が成果物を再度修正した場合は、その手戻り時間も合算します。

今回の実験が示した、最も実用的な出発点は明確です。PMなら、まず小さく明確な変更案を、自分で動くドラフトにしてみてください。次に、実際の仕事でも準備時間が短くなったかを確認すればよいです。