海外AI活用事例/海外事例

デザインとコードの受け渡しをなくす。FigmaがClaudeで変えた作り方

Figmaは、デザインから動くアプリまでをつなぐためにClaudeを組み込みました。受け渡しで失われていたもの、そして作れる人の範囲がどう広がったのかを公式導入事例から整理します。

デザインの画面と、実際に動く画面のあいだには、いつも溝があります。作った人の意図が実装で少しずつ削れていき、確認したときには別のものになっている。Figmaは、この受け渡しの工程そのものを対象にしてClaudeを組み込みました。Anthropicの公式導入事例に掲載された内容をもとに、何が変わり、誰の仕事が変わったのかを整理します。デザインツールの話に見えますが、実際にはランディングページや広告用の画面を作るマーケティングの現場にも同じ構図があります。

この事例の概要

導入事例の見出しは「Figmaは、アイデアをClaudeで対話的なソフトウェアへと変える」です。業種はソフトウェア、企業規模は大企業、所在は北米、使っている製品はClaude Platformと記載されています。

成果として4点が挙げられています。デザイナー、開発者、プロダクトマネージャーが、コードを書かずに数分で動く試作やアプリを作れること。時間のかかる作業を自動化することで、チームがより多くのデザインとプロダクトの案を試せること。デザイナーでない人も自分の考えを目に見える形にできるようになり、デザインの工程に関わる人が増えたこと。そしてClaude Sonnetが、コードの品質、デザインの意図、速さのいずれについても安定して応えたことです。

モデルについては、Claude Opus 4.6にも言及があります。最高デザイン責任者のLoredana Crisanさんは「Claude Opus 4.6はFigma Makeの中で、複雑で対話的なアプリや試作を、目を見張るような創造の幅で生成します」と述べています。

Figmaの公式サイトによれば、Figma Makeはプロンプトから作りたいものをコードとして生成し、デザインシステムや画像などの素材を踏まえた試作を作れる機能です。デザインとコードのあいだを行き来しながら、見た目を編集できる形で扱えると説明されています。

受け渡しで何が失われていたのか

プロダクトマネージャーのAlex Mullansさんは、問題をこう表現しています。「デザインと開発のあいだの従来の受け渡しは、摩擦を生みます」。

摩擦の中身は、往復のやりとりです。デザインを渡し、実装され、意図と違う部分を指摘し、直してもらう。この繰り返しの中で、当初の狙いから少しずつずれていきます。時間がかかるだけでなく、どこで何が変わったのかが分からなくなることが問題です。

Figmaのエンジニアの言葉として、モデルの評価も紹介されています。「Anthropic以前のモデルには、センスと個性が欠けていました。いまは知的なモデルと、センスのあるモデルの両方を手にしています」。デザインの工程にAIを入れるとき、正確さだけでは足りないという指摘です。ただしこれは同社の担当者による主観的な評価であり、当サイトが比較検証した結果ではありません。

左右比較。従来の受け渡しでは往復で狙いがずれる。導入後は数分で動く試作を作り、より多くの案を試せる
導入事例に記載された課題と成果を左右に分けました。右側はFigmaが公表した内容で、当サイトの検証ではありません。 出典:Claude「Figma」(Anthropic公式 導入事例)(確認日 2026-08-21)

デザインを捨てさせない

Figma Makeのプロダクトマネージャーを務めるHolly Liさんは、AIの置き方について明確な立場を示しています。「AIはデザイナーがいる場所まで来るべきです。すでに完璧なデザインを作り上げているなら、ゼロからやり直す必要はないはずです」。

これは実装上の思想の話です。プロンプトから生成する道具は、既存の成果物を無視してゼロから作り直させがちです。しかし現場には、すでに合意されたデザインがあり、決まったデザインシステムがあります。それを起点にできなければ、実務では使えません。

Liさん自身の経験も紹介されています。自分のウェブサイトを作るために、Reactを独学するのに30時間を費やしたこと。そしてClaudeを使って、そのコードすべてを1日でリファクタリングし、自分では実装できなかった機能を加えたことです。

ここで注目すべきは、学習の30時間が無駄になったわけではない点です。自分で書いたコードがあったからこそ、何を直すべきかを判断できています。AIが埋めたのは、判断ではなく実装の手数の部分です。

分岐図。既存のデザインを起点にできる場合と、ゼロから作り直す場合の違いを示す
担当者が課題として挙げた「やり直しを強いられる状態」と、Figma Makeが取っている前提を分岐で表しました。 出典:Claude「Figma」(Anthropic公式 導入事例)(確認日 2026-08-21)

作れる人の範囲が広がる

成果の3つめに挙げられていた「デザイナーでない人が考えを目に見える形にできる」という変化は、組織にとって影響が大きい部分です。

これまで、試作を作れるのはデザイナーか開発者に限られていました。企画の担当者が思いついた案は、言葉か静止画で説明するしかなく、動かしてみて初めて分かる問題は検討の遡上に載りませんでした。数分で動くものが作れるなら、議論の材料そのものが変わります。

最高経営責任者のDylan Fieldさんは、この関係を短く述べています。「AIモデルが良くなるほど、Figmaは良くなります」。

一方で、作れる人が増えることは、確認すべきものが増えることでもあります。誰が品質を担保するのか、どの段階で止めるのかを決めないまま試作だけが増えると、選ぶ作業に時間が移るだけです。

試作で終わらせない部分についても記載があります。Figmaの公式サイトでは、Figma Makeをローカルで使って任意のコードベースの中で作り、そのまま本番へ出す使い方が説明されています。生成された結果はコードに裏打ちされていて、見た目のまま編集できるとも書かれています。デザインとコードを別々の成果物として扱わず、同じものの2つの見え方として扱う設計です。

この点は、受け渡しの問題に対する答えとして重要です。往復が起きる原因は、デザインの成果物と実装の成果物が別物であることにあります。片方を変えたときに、もう片方を人が手で追随させる必要があるからです。同じものを2つの見え方で扱えるなら、追随の作業そのものが減ります。

マーケティングの現場に置き換えると

同じ構図は、ランディングページや広告のクリエイティブ制作にもあります。企画があり、デザインがあり、実装があり、そのあいだで意図が削れていく。案を増やしたいのに、1案あたりの制作コストが高いために、比較検証の本数を絞らざるを得ない。

Figmaの事例が示しているのは、この制約が「作る手数」に由来していた部分と、「判断」に由来していた部分を切り分けられるということです。手数の部分は道具で減らせます。しかし、どの案を出すか、どこで止めるかという判断は残ります。

切り分けができていない組織では、案が増えないことの原因を制作体制の不足だと考えがちです。実際には、何を良しとするかの基準が決まっていないために、決められないだけということもあります。手数の制約が外れると、この違いがはっきり表に出ます。

日本の制作現場が読み取れること

第一に、AIを入れる場所は工程の受け渡しの部分から探すのが有効だということです。担当者の中で完結している作業より、人から人へ渡る場面のほうが、失われているものが大きいためです。

第二に、既存の資産を起点にできるかどうかを選定の基準にすることです。デザインシステムや過去の制作物を無視してゼロから生成する道具は、試作では便利でも、運用では続きません。

第三に、作れる人が増える前提で確認の設計をしておくことです。試作の本数が増えたときに何を基準に選ぶのかを決めておかなければ、増えた案はそのまま滞留します。

確認リスト。受け渡しの場面を探す、既存資産を起点にできるかを基準にする、選ぶ基準を先に決めるの3項目
この事例から導いた確認事項です。導入の費用や人数は事例に記載がないため、含めていません。 出典:Claude「Figma」(Anthropic公式 導入事例)(確認日 2026-08-21)

出典と注記

この記事はAnthropicの公式導入事例とFigmaの公式サイトのみを出典とし、人物名・製品名・引用は原文の表記に従いました。数値はFigmaの担当者が述べた内容であり、当サイトが計測したものではありません。導入の費用、利用規模、他社環境での再現性については記載がありません。

この分野の実務を相談したい方へ

記事で扱っている内容は、当社が実務として支援している領域です。 自社で進めるか外部に任せるかの判断からご相談いただけます。

支援サービスを見る 相談する