今、優れたプロダクトを作るのに必要なもの

プロトタイプを作るのは、かつてないほど簡単になった。本当に難しいのは、そのスピードをリリースまで保ち続けること、進む方向を間違えないこと、そして他とは違うプロダクトに仕上げることだ。そのためには、次の条件が揃っている必要がある。

イラスト：Lena Muller

AI があれば、prompt を一行書いてから触れる画面ができるまで、数時間で済む。だが速く作れることと、よく作れることは別だ。どれだけ練られたプロトタイプでも、大きな問いからは逃れられない。この方向は最善なのか、それとも最初に思いついただけなのか。自分たちが作っているものらしく見えるか。そして何より、本当にやる価値があるのか。これらの問いにきちんと答えられるチームは、スピード、方向、差別化の三つすべてで強い。最後の一区間でも手を止めず、一つの方向に賭ける前に複数の方向を比べ、結果を自分たちにしか作れない形に磨き上げる。

スピード：リリースまで勢いを保つ

80% が楽になると、チームは最後の 20% で失速しがちだ。プロトタイプは、もう出せるのではないかと錯覚させる。プロダクトを作る側は、さっと組んだプロトタイプがデザインシステムをまったく使っていなかったり、デザインからコードに移る段階でかえって作業が増えたりすることに気づく。難しいのは、作業が細かくなり、関わる人が増え、リリースが近づくにつれて、[最初の勢いを保ち続ける

正しい方向へ速く進むには

AI があればスピードは簡単に手に入るが、技術的負債も同じだ。だから優れたチームは、速いだけでなく、よく考え、確実に作り込み、見分けがつくものにする。](https://www.figma.com/blog/how-to-move-fast-toward-the-right-thing/)。[](https://www.figma.com/webinars/lc-chaos-as-a-catalyst/)Sephora テクノロジー担当シニアバイスプレジデントの Sneha Narahalli が、スピードを速く届ける以外にどう活かすかを語っている。

最も速い媒体で問題を解く

プロダクトが形になる過程では、細かな見た目の調整から機能の挙動の変更まで、チームはひたすら反復する。どれが速いかは、解こうとしている問題によって変わる。たとえばフォームのフィールドとボタンの間隔が広すぎるなら、Figma で直接スペーシングを調整するほうが、その変更を prompt で説明するより速いことがある。コードでやったほうが楽な変更もある。ユーザーがチームの人数から価格を見積もる計算機を作っているとしよう。10 人、20 人、50 人用のバージョンをそれぞれデザインする必要はない。コードに簡単な計算を書けば、人数が変われば価格も自動で更新される。スピードを出す鍵は、あらゆる作業を同じ流れに押し込むのではなく、変更の種類ごとに最速の道を選ぶことにある。Figma では、これから加える変更に応じて、直接編集、prompt、コードを使い分けるということだ。タスクに合ったツールを選ぶ：

• [正確な見た目の編集を直接行う

プロパティパネルとアノテーションが Figma Make に登場

ビジュアル編集とアノテーションによって、Figma Make はデザインとコードの隔たりを埋めようとしている。変更したい要素を選び、プロパティパネルで直接調整するか、アノテーションでその場の prompt を書く。](https://www.figma.com/blog/properties-panel-and-annotations-now-in-figma-make/)。スペーシング、フォント、レイアウト、サイズといった調整を、いちいち prompt で説明する必要はない。

• [Make のプレビューをコピーする

Figma Make をキャンバスへ

Figma Make のプレビューから任意のデザインをデザインキャンバスにコピーし、編集と反復を続けて、アイデアをさらに先へ進められるようになった。](https://www.figma.com/blog/bringing-figma-make-to-the-canvas/)を Figma Design に取り込み、編集可能なレイヤーに変えれば、チームがそのまま磨き、広げていける。

• [Figma Make をあなたのコードベースに接続する

Figma Make が、あなたのローカルコード上で動くように

ビジュアル編集から文脈を踏まえた prompt、そしてコラボレーションまで、Figma Make はチームがコードでデザインする方法を広げている。](https://www.figma.com/blog/figma-make-now-on-your-local-code/?utm_source=chatgpt.com)し、プロダクトに既にあるコードで変更を加えてプレビューし、その変更をエンジニアリングチームにレビューしてもらう。

近道をチーム全体のものにする

仕事がチーム内を回っていくとき、スピードを保つには、使い勝手のよい近道を繰り返し使えるようにしておく必要がある。あるデザイナーが、新しいフローがアクセシビリティ基準を満たしているかを素早く確実に確認する方法を編み出したとしよう。その方法を自分の中に留めておくのではなく、チーム全体が再利用できるワークフローにする。Figma では、こうした繰り返し使える進め方を、誰もが再利用できる skill や plugin にできる。

Skill と plugin の違い

Skill は再利用できる指示のまとまりで、/ コマンドで呼び出せる。たとえばアクセシビリティ基準に沿ってデザインをチェックする、といったものだ。Plugin は再利用できるツールで、キャンバス上で特定の作業をこなす。ダッシュボードのレイアウトを生成したり、画像をまとめて整理したりする。より良い進め方を Figma でチーム全体に広げよう：

• [カスタム skill

この 10 個の skill を試してみて——自分でも作ってみよう

今なら、私たちの agent の中で、Figma 上で直接 skill を書いて、自分のアイデアを動かせる。まずはおすすめの 10 個をどうぞ。](https://www.figma.com/blog/try-these-10-skills-and-show-off-your-own/)は自分で作成できる。Figma agent に作らせることもでき、チームに共有すれば、デザインレビュー、ユーザーテスト、コンプライアンス上の問題の洗い出しといった繰り返しのワークフローに使える。

• Figma agent に[再利用できる plugin を作らせる

Figma のデザイン agent がカスタムツールに対応、コンテキスト能力も強化

プロンプトは出発点にすぎない。カスタムツール、本物のコンテキスト、そして skill があってこそ、デザインエージェントは遠くまで行ける——最終的にキャンバスに現れるものが、本当に自分の手によるもののように見えるかどうかがすべてだ。](https://www.figma.com/blog/agent-custom-tools-context-skills/#generative-plugins)こともできる。チームがキャンバス上でよく行う作業、たとえば画像を自動でレイアウトに並べるといった用途に使い、共有すれば同じショートカットを他の人も使える。

方向性：まず広く探り、それから選ぶ

以前は複数の方向を探るのに時間がかかった。そのせいでチームは早々に範囲を絞らざるを得なかったり、アイデアが仮説の段階にとどまり、どう実現するのか（そもそも実現できるのか）を理解できないままになったりした。今では、最初の一案を加速させるツールが、他の案を試すのも同じだけ速くする。有望なアイデアがもっと多くの場面で通用するかどうかを、本格的に取り組む前に見極められる。OpenAI のプロダクトデザイン責任者 Ian Silber とそのチームが、何を届ける価値があるか決める前に、どうアイデアを広く展開しているかを読む。

取り組む前にエッジケースを確認する

プロトタイプが 1 つあるだけでは、分岐や空の状態、ぎこちない遷移が見えなくなる——有望なコンセプトでも、まさにそういうところで実運用上の問題を起こす。ヘアサロンの予約フローを設計しているとしよう。誰かが空き枠を選び、確認を受け取る。だがプロトタイプは見せてくれない。その週に空きがまったくなかったらどうなるのか、担当者がキャンセルしたらどうなるのか、顧客が日時を変更したくなったらどうなるのか。こうした瞬間こそ、プロトタイプが狭すぎて全体像を映せないところであり、この方向が本当に成り立つかどうかがわかる場所でもある。Figma で全体像を見る：

• [コードレイヤーを使って、

Figma キャンバス上のコード

Figma Design では、コードレイヤーを使えば、コードで複数の方向を探り、チームと並べて見比べられる。](https://www.figma.com/blog/code-on-the-figma-canvas/)プロトタイプの主要な画面や状態を編集可能なデザインレイヤーとして取り出せば、キャンバス上でフロー全体を確認し、手を入れ、その変更をプロトタイプに反映できる。

• [Figma agent に

Figma デザイン agent の登場

今日から、キャンバス上で Figma のために作られた agent と直接一緒に作業できる。](https://www.figma.com/blog/the-figma-agent-is-here/)既存の画面やフローをもとに、足りない状態や分岐を補わせる。

• Figma agent に、今のフローではカバーできていないかもしれない穴やシナリオを指摘させる。

複数の方向を並べて比べる

比べてこそ、アイデアは判断しやすくなる。いくつかの方向を並べれば、トレードオフがはっきりする——どれがビジュアルアイデンティティをより押し進めているか、どれが UI 体験のわかりやすさを優先しているか。それに、AI の実験はたいてい密室で行われるが、チームには比較し、応答し、議論し、互いのアイデアの上にさらに積み上げていく場が要る。共有キャンバスはその場を与え、方向性と議論を同じ場所に置くので、フィードバックが別のスレッドに散らばらない。チームメイトのフィードバックに加えて、Figma agent に特定の観点からある方向をレビューさせることもできる。たとえば初回利用のしやすさや、エンタープライズ営業上の懸念といった観点だ。そうすればチームは、方向を決める前に、検討すべき問いをもう一組持てる。Figma で複数の方向を探り、比べる：

• [Figma の agent

Figma のデザイン agent がカスタムツールとより豊富なコンテキストに対応

プロンプトは着手の助けにはなる。カスタムツール、実際のコンテキスト、スキルが揃えば、デザイン agent はさらに先へ進める——最終的にキャンバスに現れるものは、本当にあなたらしく見える。](https://www.figma.com/blog/agent-custom-tools-context-skills/) 1 つのプロンプトから複数のバリアントを生成すれば、チームとの議論は最初から複数の選択肢を前に始められる。1 つだけではない。

• 操作可能なコードレイヤーを複製し、その隣で別の案を試す。どのバージョンも見た目だけでなく、振る舞いを比較できるくらいリアルに仕上げられる。

差別化：注目に値するプロダクトをつくる

AI がより多くの人を洗練された出発点へ運べるようになると、抜きん出るにはより意識的な選択が要る。差別化は、最初のアウトプットに満足せず、体験を磨き続け、そこに自分だけの明確な視点が表れるまで作り込むことから生まれる。0 から 1 を生み出すことがかつてないほど容易になった世界で、いかに品質を守るかについて、Airbnb デザイン担当バイスプレジデントの Teo Connor が語る。

堅固な土台から始める

[強力なデザインシステム

AI 時代のデザインシステムを再定義する 5 つの転換

AI がプロダクトのつくり方を塗り替えるなか、デザインシステムは再利用可能なコンポーネントのライブラリから、テイストとクラフトをスケールさせて担う生きたフレームワークへと進化しつつある。デザインシステムの構築、利用、保守のしかたに転換を見出しているプロダクト責任者や現場の実践者たちに話を聞いた。](https://www.figma.com/blog/5-shifts-redefining-design-systems-in-the-ai-era/)はプロダクトの視点を担う。そのコンポーネントと変数には、何を残し何を残さないかという何千もの小さな決定が刻まれている——ブランドに合うのはどの赤か、カードの角丸はどれくらいか、要素間にどれだけ余白を取るか、どのボタンスタイルが主操作を表すか。チームがこうした選択をシステムに書き込めば、AI の生成物は同じ視覚言語を引き継げる。画一的なデフォルトには戻らない。プロダクトを他と区別する特徴は、チームがつくるあらゆるものに安定して現れる。Figma で基準を再利用可能にする：

• Figma agent をあなたのデザインシステムに基づいて動かし、逸脱を指摘させる。
• Figma MCP 経由で Code Connect を使い、Figma のどのコンポーネントがチームのコードで使うコンポーネントに対応するかを agent に伝える。推測したりコンポーネントを書き直したりせず、同じシステムで構築できる。

出力を直接磨く

プロンプトは強力だが、小さな修正のためにもう 1 つプロンプトを書くと、思っていたよりずっと多くが再生成されてしまうことがある。良い仕事は出力を掌握することから生まれる。使える部分は残し、合わない部分は変え、細部を磨き続けて意図に近づける。たとえばカスタム shader を生成し、輝きだけが強すぎたとする。別のプロンプトで修正を求めれば、色やぼかしやパターンまで変わったバージョンが返ってくるかもしれない。それより、輝きの強さを直接手で調整すればいい。Figma ですべてを掌握する：

• 異なるプロバイダーのモデルを [Figma Weave で組み合わせる

Figma と Weave をつなぐ

本日、Weave のクリエイティブワークフローと Figma のフレームを並行して使える新しい方法を発表した。](https://www.figma.com/blog/connecting-figma-and-weave/)、本当に求める結果に近づけられる。

• shader エフェクトを使い、歪みやグレイン、テクスチャといった視覚効果をキャンバス上で直接適用する。

表現の幅を広げる

出力を直接作り込めるようになれば、カスタムイラストやモーションなどの視覚表現でさらに先へ進める。以前なら別のツールや専門家が必要だったが、その制約は消えつつある。たとえば、メニューをぱっと表示するのではなく、特定のバウンド感でスライドさせたい。カードを単色ではなく、きらめくグラデーションにしたい。今なら同じデザイナーがキャンバスを離れずにどちらも実現でき、Figma agent と一緒にアイデアを形にできる。Figma キャンバス上のモーションを使えば、ファイルを離れずにアニメーションを構築・調整し、コンポーネントのすべてのインスタンスで再利用できる。使い方： プリセットのアニメーションスタイルから始めて、欲しい効果を説明し、Figma agent に初版を作らせる。あるいは位置・スケール・回転・透明度のキーフレームを自分で設定する。タイムライン上でレイヤーをドラッグしてタイミングを調整したり、マーカーを任意の時点に飛ばして確認したりできる。構築後は、開発者が Dev Mode から正確な結果をそのままコピーし、CSS、JSON、React として書き出せる。プロダクト体験をさらに先へ：

• [Figma Draw

Express yourself with Figma Draw

Figma Draw pairs faster, simpler vector editing with powerful tools for visual expression—so designers of all stripes can bring their vision to life without breaking focus.](https://www.figma.com/blog/introducing-figma-draw/) でキャンバス上に直接ベクターを描く。

• Weave で画像や動画を生成して組み合わせる。
• フレームを [Figma Motion

Introducing Figma Motion: Your canvas now has a timeline

Motion now lives on the canvas—in the same file as your components, your variables, and your team—so your designs can come to life from day one.](https://www.figma.com/blog/introducing-figma-motion/) モードに切り替え、タイムライン上でレイヤーをドラッグして各部分のアニメーションの開始タイミングと長さを調整する。Figma agent と直接会話して、まず v1 を受け取ることもできる。

• カスタム shader を記述し、たとえばカード上の微光効果を Figma agent に初版として作らせ、キャンバス上で調整する。

優れたプロダクトを作るのが楽になったわけではない。変わったのは、面倒な作業がどこで起きるかだ。プロトタイプは取っ掛かりになるが、チームは最後の一マイルでも勢いを保ち、正しい方向を選び、はっきりと識別できるものを作り上げる必要がある。速度・方向・差別化が揃って初めて、より速い構築が人々の本当に使いたいプロダクトになる。