Figma MakeとClaude Codeで、デザイナー不在のUIを作る — コードからデザインを逆生成する時代

「デザインとコーディングは別工程」。私はこれを、ほとんど物理法則くらいに信じていました。デザイナーがFigmaで完成形を作り、エンジニアがそれを実装する。一方通行で、順番は絶対。ところが2026年、この順番がひっくり返りました。きっかけは、自分のLPを1本作ろうとして「デザイナーいないな…」とつぶやいた夜です。

結論から言うと、企画からLP公開まで約1時間で回せました。デザイナーは不在のまま。種明かしは、Figma MakeとClaude Codeで「コードからデザインを逆生成する」という、これまでとは逆向きの流れです。今日はその実例と、どこまでAIに任せてどこから人が手を入れるべきか、正直なところを書いていきます。

なぜ「逆生成」が効くのか

逆生成が効くのは、デザインとコードのどちらからでも出発できるようになったからです。従来は「デザイン → コーディング」の一方通行でした。デザイナーがFigmaでUIを固め、それを見ながらエンジニアが実装する。デザインが上流、実装が下流。この上下関係が、分業の前提でした。

ところがFigma Makeは、HTMLやコードを渡すとFigmaの編集可能なデザインデータに変換してくれます。Figma自身も2026年に「Claude Code to Figma」を公式に出していて、本番・ステージング・localhostで動いている実際のUIを、そのままFigmaキャンバス上の編集可能なフレームに取り込めるようになりました。つまり「動いているコード → デザインデータ」という、これまで存在しなかった矢印が引けるようになったわけです。

これがなぜ大きいか。上流と下流が固定されていたから分業が成立していたのに、その向きが双方向になると、「誰が先に手をつけるか」が自由になります。エンジニアがClaude Codeでプロトタイプを先に作り、デザイナーがFigmaで仕上げてもいい。逆に、デザイナーがFigma Makeでデザインを起こし、Claude Codeが実装してもいい。どちらの入口から入っても、同じ品質の出口にたどり着けます。

Opus 4.6で品質が変わった

Figma Makeの中身がClaude Opus 4.6になったことで、生成されるプロトタイプの品質が一段上がりました。Figma Makeは2025年夏に公開されたAIデザインツールで、チャットでプロンプトを渡すだけでプロトタイプを作ります。ただ初期のデフォルトモデルは、正直「それっぽい画面」止まりでした。レイアウトは崩れるし、ボタンは飾りで押しても何も起きない。

2026年2月にClaude Opus 4.6が選べるようになって、ここが化けました。Zennで反響の大きかった検証記事によると、同じ「Slackクローンを作って」というプロンプト1つで、差は歴然だったそうです。

観点	デフォルトモデル	Opus 4.6
レイアウト	崩れあり	本物さながら
機能面	表示のみ	投稿・リアクション・検索が動く
インタラクション	静的	動的なプロトタイプ

簡素なプロンプト1つで「ちゃんと動くプロトタイプ」が出てくる。コードを書く感覚でデザインを作るこの営みは、Vibe Codingになぞらえて Vibe Designing とも呼ばれています。Opus 4.6の延びた文脈長と推論力が、デザイナーが途中で加える修正の意図を取りこぼさずに保持してくれる、というのが効いているようです。

1時間でLPを公開した流れ

実際の流れは4ステップで、合計1時間ほどでした。X上で23万ビュー・2,300いいねを集めた実践レポートを下敷きに、私の手元でも再現してみた手順です。

最初の15分は、Claude(チャット版)にLPのHTMLを生成させます。「SaaS型プロジェクト管理ツールのLP。ヒーロー、特徴3つ、料金プラン、お客様の声、CTA、フッター。青系、レスポンシブ、Tailwind」くらいの指示で、たたき台が出てきます。次の10分で、そのHTMLをFigma Makeに渡してデザインデータに逆変換。ここがブレイクスルーで、コードがそのまま編集可能なFigmaに化けます。

それからの20分は、Figma上での調整です。カラーパレットの微調整、フォントサイズの統一、画像の差し替え、余白の調整、モバイル版の確認。ここは人間の目と手が入る工程で、AIが作ったベースに仕上げを乗せていきます。最後の5〜10分で、FigmaのデザインをもとにClaude Codeに最終実装とデプロイをやらせて、公開。

工程	従来	Figma Make連携
企画・ワイヤーフレーム	2〜3日	15分
デザイン	3〜5日	30分
コーディング	3〜5日	10分
合計	1〜2週間	約1時間

1〜2週間が1時間。数字だけ見ると魔法みたいですが、種を割ってみればただの分業の組み替えです。AIが下書き、人が仕上げ、AIが清書。役割を渡す順番を変えただけなんですよね。

どこまでAIに任せて、どこから人が出るか

正直に書くと、これがそのまま1時間で済むのはプロトタイプやMVP、社内向けページまでです。本番のプロダクトLPには、デザインレビューもコピーライティングも入るので、1時間では終わりません。ここを「全部1時間でできます」と言ってしまうと、後で自分の首を絞めることになります。

AIに気持ちよく任せられるのは、レイアウトの初期案、コンポーネントの量産、ありがちなパターン(料金表、FAQ、フッター)あたり。一方で人が出るべきは、ブランドの色気の部分です。キャッチコピーの一言、独自の世界観、「ここだけは譲れない」という余白の取り方。この辺りはまだAIに丸投げすると、平均的に小綺麗で、平均的に記憶に残らないものが出てきます。平均点のLPは、誰の心も動かさない。

私はここで投資の考え方を持ち込んでいます。最悪これで稼げる、という最低ラインをAIにボトムアップさせておいて、空いた時間と気力を「人にしか出せない一点」に全部突っ込む。下を底上げして、上を尖らせる。デザイナー不在の個人開発でこそ、この配分が効きます。

CLAUDE.mdにデザインシステムを書いておく

チームでこの流れを回すなら、デザインシステムをCLAUDE.mdに書いておくのが効きます。デザイントークン(プライマリカラー、背景、テキスト色)、タイポグラフィ、コンポーネント規約、レスポンシブのブレークポイント。これをCLAUDE.mdに定義しておけば、チームの誰がClaude Codeで画面を作っても、統一されたUIに収束します。

# CLAUDE.md — デザインシステム連携

## デザイントークン
- プライマリ: #2563EB (blue-600)
- 背景: #F8FAFC (slate-50)
- テキスト: #0F172A (slate-900)

## コンポーネント規約
- ボタン: primary / secondary / ghost の3種
- カード: shadow-sm, rounded-lg, p-6

## レスポンシブ
- モバイルファースト。< 640px / 640-1024px / > 1024px

将来は、実装の段階で「このボタンの角丸はデザインシステムの規定と違います」とClaude Codeが自動でツッコんでくれる未来も近いはずです。デザインレビューがコードレビューに溶け込む、という流れですね。

Typstでスライドまで一気通貫

デザイン連携のもう1つの応用が、Typstでのプレゼン作成です。TypstはRust製の新しい組版システムで、LaTeXの代替として注目されています。コンパイルが速くてリアルタイムプレビューができる。

ある勉強会の発表事例では、タイトルスライド以外のすべてをClaude Codeが生成したそうです。人間がやったのは日本語で指示を出すだけ。テーマファイルの作成も、スライドの追加・修正・ビルドも、Claude Codeが一貫してやる。同じことをOpenAI Codexでも試した報告がありますが、Typstは比較的新しい言語なので構文が正しく出ないケースが多発したとのこと。

Claude Codeが優位なのは ビルドエラーを読んで自己修正できる 点です。Typstコンパイラのエラー出力を読み取り、構文を直してリトライする。この「書く→ビルド→直す」のループが自動で回るので、結果的に正しいスライドが出来上がります。テキストベースなのでGit管理しやすいのも、エンジニアには嬉しいところです。

まとめ

Figma MakeとClaude Codeの連携で見えてきたのは、デザインとコードの間にあった一方通行の壁が消えた、ということです。私が一番わくわくしているのは、デザイナー不在でも高品質なUIにたどり着けるようになったこと。少人数の法人やフリーランスにとって、デザイナーの確保はずっと課題でした。その重さが、だいぶ軽くなります。

• Figma Make × Claude Codeで、企画からLP公開まで約1時間が現実になった
• 「コード → デザインデータ」の逆生成が、分業の前提を崩している
• Opus 4.6でプロトタイプの品質が一段上がり、動くものが出るようになった
• CLAUDE.mdにデザイントークンを書けば、チームのUI一貫性が保てる
• AIに任せるのは下書きと量産、人が出るのはブランドの色気の一点

道具が揃った今、足りないのは「やってみる」だけです。まずは社内向けの小さなページ1枚から。ちなみにあの夜「デザイナーいないな…」とつぶやいた私は、結局いまだにデザイナーを雇えていません。面白くいきましょう。

この逆生成のワークフローは、Claude Codeを実務で使い込む中で見えてきた応用の1つです。CLAUDE.mdの設計やContext Engineering、チーム展開まで含めた実践の全体像は、実践Claude Codeにまとめています。