FigmaのAI機能「Figma Make」において、新たに Claude Opus 4.6 が選択可能になりました。

プロンプトからUIデザインを瞬時に生成するこの機能は、設計プロセスの初期段階を大きく効率化する可能性を秘めています。今回は、最新モデルでの生成精度や、エンジニア視点での技術特性、そして実務に導入する際のポイントについて検証します。

1. Figma Makeの概要とモデルの進化

Figma Makeは、テキストプロンプトを基に、ランディングページ（LP）やモバイルアプリのUIを自動生成する機能です。単なるレイアウトの提案にとどまらず、テキスト、画像、アイコン、そしてコンポーネント構造を含んだプロトタイプを生成します。

今回、推論能力に定評のあるClaude Opus 4.6が導入されたことで、日本語の細かなニュアンスの理解や、セクション間の論理的なつながりがより洗練された印象を受けます。

2. デザイン生成の実践

2-1. プロンプトによる一括生成

今回の検証では、v0 vs Orchids AI の比較記事と同条件での精度を確認するため、同じプロンプトを指定しました。

あなたはプロのWebデザイナー/フロントエンドエンジニアです。  
架空の企業「NovaWorks株式会社」のWebサイトに掲載する  
SaaSサービス「NovaFlow（ノヴァフロー）」のランディングページを作成してください。  

目的は、企業担当者が「無料デモを申し込む」ことです。  
Next.js + Tailwind CSSを使用して1ページ構成のLPを生成してください。

【技術条件】
- フレームワーク：Next.js（App Router構成）
- スタイリング：Tailwind CSS（ユーティリティクラスのみ）
- 出力形式：React + Tailwind単一コンポーネント or page.tsx相当
- モバイル〜PC対応のレスポンシブ構成

【LP構成】
① ヒーロー（見出し＋CTA）
② 課題提起（3点）
③ サービス概要（3特徴カード）
④ 効果（定量成果）
⑤ 導入事例（2社）
⑥ 導入ステップ（4段階）
⑦ 料金プラン（3タイプ）
⑧ よくある質問（5項目）
⑨ 最終CTA（再度ボタン）

【出力条件】
- 上記文言をそのまま使用（改変禁止）
- 構成順・階層を厳密に守る
- コード出力のみ（説明文不要）

生成結果を確認すると、ヒーローセクションから「課題提起」「導入メリット」「料金プラン」「FAQ」まで、プロンプトで指定した構成が破綻なく配置されています。デザイン自体は標準的なレベルですが、余白やカラー選定も適切になされており、初期のたたき台としての役割は十分に果たせるクオリティです。

2-2. 直感的なUIエディタによる部分編集

Figma Makeの強力な点は、生成して終わりではなく、その場で直感的なチューニングが可能であることです。

[要素のプロパティ編集の様子]

生成されたキャンバス上の要素を直接クリックして指定するだけで、専用の編集ツールバーが出現します。動画にある通り、文字サイズの変更やカラーの調整などをリアルタイムで試行錯誤でき、コードを意識することなくブラウザ上で完結します。

2-3. プロンプトによる追加修正
手動での微調整（UIエディタ）に加え、チャット欄からプロンプトを追加で送ることで、デザインやアニメーションをさらにブラッシュアップできます。

ホームデザインを踏襲した無料でもを申し込むページを実装し、
現在のページが左方向にスライドして消え、
同時に新しいページが右方向から追いかけるようにスライドインしてくる、
スマートフォンのアプリのようなシームレスな横移動ページ遷移アニメーションを実装してください

またテキストだけでなく、参考となる画像やFigmaデザインをチャット欄に添付し、「このデザインを参考に実装して」「この画像の配色を取り入れて」といった視覚的な指示を出すことも可能です。
下の画像はUHDのHPの画像を添付し、「このデザインの配色のように修正してください。」という指示で生成されたデザインです。

3. 検証で見えてきた実務上の特性

実務への導入を検討する上で、理解しておくべき挙動も明らかになりました。

3-1. 既存サイトの再現

たとえば「https://uhd-inc.jp/ の見た目も機能も完全にクローンしたサービスを作成してください」というプロンプトを指定してもデザインの生成はできませんでした。

理由として、AI側から以下の制約が明示されます。

• 著作権および商標の保護: 既存サイトのコンテンツやブランディングを「完全にクローン」することは権利侵害にあたる可能性があるため、ガードレールによって制限されています。
• 外部サイトへのアクセス制限: 特定のURLに直接アクセスして内容を取得・解析する機能が制限されており、最新のレイアウトをリアルタイムで参照することができません。

ただし、こうした「特定URLの複製」は厳しい一方で、SlackやInstagramといった世界的に著名なサービスについては挙動が異なります。リンクを指定せずに「SlackのUIを忠実に再現して」といった指示を送れば、精度の高いデザインが生成されます。

ただし、画像をもとに生成した場合、元のデザインに対する再現性は現時点では低めに留まるという点には注意が必要です。

[UHDのHPのスクリーンショットを再現したデザイン]

3-2. デザインの出力形式と互換性

Figma Makeの出力はあくまでコードベースであり、通常のFigmaデザインファイル（.fig）のようなベクターデータ構造を持っていません。
そのため、生成されたデザインをFigmaの標準機能で編集できません。

4. 総評

Claude Opus 4.6を搭載したFigma Makeは、初期の構成案や「動くプロトタイプ」を素早く形にする点において、強力なスピードを提供します。特にプロンプトや画像ベースの修正への柔軟性は、企画段階の合意形成において大きなメリットとなるでしょう。

一方で、生成したデザインをFigma上で直接編集できない点や、既存サイトに対する再現性の低さは、実務レベルのワークフローに組み込む際の明確なボトルネックとなります。