1.はじめに
画面イメージを作るのは難しくないですか？ 私はデザインの知識もなく、フロント実装もささっとはできないため、簡単に画面イメージを作れる手段を探していました。 AIが登場する前は、Figma Design で時間をかけて画面イメージを作ることもありました。 画面イメージを作るのは、要件定義をより精度良く進めるためであることが多いです。
昨今、AIツールが色々登場しており、どのツールを選ぶべきか迷いますよね。 今回は、AIを使ったUI生成ツールとして Claude Design と Figma Make を触って比較してみました。
先に結論を書きますと、私には「Claude Design」の方が使いやすいと感じました。 何が良かったのかは本記事で説明していきます。
2.対象読者
- デザインが本業ではない方
- 自分のイメージをテキスト以外で表現したい方
- AIを使って効率を上げたい方
3.ツールの紹介
ここでは、今回比較する2つのツールの基本情報を整理します。 料金や利用条件は変更される可能性があるため、2026年5月時点の情報で記載します。
3.1.Claude Design
Claude Design は、Anthropic Labs から2026年4月に Research Preview として公開されたツールです。 テキストで作りたいものを伝えると、Claude が画面デザイン、プロトタイプ、スライド、1枚資料、HTML などのビジュアル成果物を生成してくれます。
特徴は、最初の生成だけでなく、その後の調整方法が豊富な点です。 会話で修正するだけでなく、画面上の要素にコメントしたり、テキストを直接編集したり、Claude が用意する調整用のスライダーで余白や色などを変えたりもできます。
利用には Claude の有料プランが必要で、無料プランでは利用できません。 利用量は通常の Claude チャットや Claude Code とは別に、Claude Design 専用の週次利用枠として管理されています。
| 項目 | 内容 |
|---|---|
| 登場年月 | 2026年4月 |
| 主な用途 | 画面モックアップ、プロトタイプ、スライド、1枚資料、マーケティング素材の生成 |
| 利用条件 | Claude Pro、Max、Team、Enterprise の有料プラン |
| 注意点 | Enterprise は初期状態では無効で、管理者による有効化が必要 |
| 料金 | Claude 有料プランに含まれる。Pro は月額20ドル、Max は月額100ドルまたは200ドル、Team は月額25ドル/席から |
3.2.Figma Make
Figma Make は、Figma が2025年5月に発表した prompt-to-app ツールです。 2025年7月にはベータ版から一般提供に移行し、より多くのユーザーが試せる状態になりました。
最大の特徴は、Figma Design との接続の強さです。 テキストプロンプトだけでなく、既存の Figma フレームをもとに、操作可能なプロトタイプやアプリ画面を生成できます。 生成後も画面上の特定要素を選択して指示できるため、デザイン意図を保ったまま細かい調整がしやすいです。
利用は Figma のプランによって異なります。 Full seat では Figma Make の機能を広く利用でき、Figma Make ファイルの公開やプライベート共有も可能です。 一方で Starter や View、Collab、Dev seat ではドラフト利用や共有数などに制限があります。 また、Figma Make は AI クレジットを消費するため、月次クレジット量を確認しておく必要があります。
| 項目 | 内容 |
|---|---|
| 登場年月 | 2025年5月 (一般提供は 2025年7月) |
| 主な用途 | 既存デザインのプロトタイプ化、アプリ画面生成、インタラクション追加、実装イメージの検証 |
| 利用条件 | Figma アカウントで利用可能。Full seat で機能を広く利用可能 |
| 注意点 | 利用量は AI クレジットを消費する。処理内容や選択モデルにより消費量が変わる |
| 料金 | Starter は無料。Professional Full seat は年払いで月額2,400円、月払いで月額3,000円。Organization Full seat は月額8,300円、Enterprise Full seat は月額13,600円 |
4.ツールの比較
4.1.前提
既存の管理画面に「クーポン機能」を追加することを想定しています。 Claude Design と Figma Make の両方に、既存の管理画面のキャプチャとクーポン機能の説明を与え、同じプロンプトから出力された成果物を比較していきます。
今回重視した点は次の2つです。
- 既存のデザインをどこまで踏襲できているか
- 既存デザインから外れると、確認者の混乱を招くため
- 指示した要件を必要最小限で満たしているか
- 要件不足や、記載していない機能を盛り込んでいないか
参考にした既存管理画面のキャプチャは こちらです。
今回与えた指示は次の通りです。 雑にプロンプトを記載して AI と認識合わせしながら進めるやり方が合っているため、「質問してほしい」旨は大体のプロンプトに含めています。
キャプチャ画像のデザインを踏襲して、クーポン管理機能を作成して。
認識合わせが必要な箇所は質問してほしい。
## スコープ内
- クーポン設定項目
- クーポン名・クーポンコード
- 利用可能期間
- 割引額 or 割引率
## スコープ外
- クーポン設定項目
- 利用条件(購入者条件や選択プラン)
- クーポン配布機能
- クーポン併用設定
- クーポン回数制限 (システム全体)4.2.Claude Design の場合
Claude Design では、まず選択肢付きで認識合わせをしてくれました。 とても助かりますね。こちらの想定をひたすらボタンぽちぽちで進められます。
体感3〜5分ほど動いて出来上がりました。 UI モックとしては十分な仕上がりです。
4.3.Figma Make の場合
Figma Make では、残念ながらこちらに向けた確認はありませんでした。 体感3〜5分ほど動いて出来上がりました。
既存のデザインを踏襲できていない点が気になりました。
5.観点別の比較
5.1.要件の認識合わせ
Claude Design は、初期段階で細かい選択肢を提示してくれるため、「どの方向性で作るか」を事前にすり合わせしやすいです。 認識ズレを早い段階で減らせるため、後戻りコストを抑えやすい印象でした。
一方で Figma Make は、選択肢の提示よりも生成を先に進める印象が強く、要件の意図が十分に反映されないケースがありました。 Figma Make で期待通りの生成を望む場合は、最初のプロンプトで細かく要件を盛り込むと、精度の高い結果が出力されるのかもしれません。
5.2.デザインツールとの連携
Figma Make の最大の利点は、生成結果をそのまま Figma Design に転用しやすいことです。 デザインチームを中心とした運用では、この連携性は非常に大きな価値があります。 既存の Figma ワークフローに自然に組み込めるため、「生成後に手作業で作り直す」コストを下げられます。
一方で Claude Design にはデザインツールとの連携機能はありません。 HTML や PDF の出力には対応しています。
5.3.指示追従性とエラー対応
Figma Make は指示への追従性が安定しない場面があり、期待と違う結果が出た際のリカバリーで苦戦しやすかったです。 特にエラー解消や再調整に時間を取られ、試行回数が増える印象でした。
Claude Design は比較的意図に沿った出力が得られやすく、修正サイクルを短く保ちやすいです。
6.使い分けの指針
- 要件を丁寧に詰めて、完成度高く素早く形にしたい場合: Claude Design
- Figma Design への接続を最優先にしたい場合: Figma Make
7.まとめ
今回私が重視した観点では、認識合わせのしやすさと完成度の高さから Claude Design に優位性を感じました。 一方、Figma Make は Figma Design に直結できるという、他にはない実務的な価値があります。 昨今のAIは目覚ましい進歩を実感していますので、今回の比較検証が有効なのは長くても半年ほどかもしれませんね。
