AI デザインツール8選を比較：Figma・Canva・Claude Designの用途と料金【2026年】

AI デザインツールは、仕上げたい仕事から選びましょう。継続して編集するプロダクトUIならFigmaとFigma Make、繰り返し制作する販促素材ならCanva AI、公開するランディングページならFramer AIが候補です。5人の会社だからといって、有料のデザイン用シートを5人分そろえる必要はありません。Figma ProfessionalのFullシートは年払いで月額$16。ほかのメンバーは無料で閲覧・コメントできます。それぞれが担うのは、サービスを世に出すまでの異なる工程です。契約を増やす前に、今の制作環境に足りない機能を見極めましょう。

料金と公開されている機能は2026年10月13日に確認しています。 以下は、リンク先の提供元ページに表示された税別の米ドル（USD）価格です。支払い周期は料金に併記しています。年額から割り出した月額相当は計算値として示し、月払いの契約価格とは区別しています。

AI デザインツールを用途別に比較

まず、今週の事業に必要な成果物を決めます。クリックできるプロトタイプはプロダクトの動きを検討するため、公開サイトは顧客に訪問してもらうため、販促素材は提供価値を伝えるためのものです。プレビューでは似て見えても、完成までに必要な作業は異なります。

料金の出典はFigma、Claude、v0、Stitch、Canva、Adobe、Framer、Relumeです。Relumeには、これとは別にSite Builderのエクスポート用プラン群もあります。詳細は後述します。

選定基準と比較の範囲

本記事では用途ごとに候補を選び、根拠のない点数によるランキングは行っていません。比較の根拠は、上記の日付に確認した公開製品ページ、ドキュメント、料金です。ログインしての試用や生成結果の比較テストは実施していないため、品質や速度に関する提供元の主張は、その提供元による説明として扱います。

判断軸は、最終的に何が手元に残るか、どこまで細かく修正できるか、次の担当者がどこで作業を引き継ぐか、実際に編集する人にいくらかかるか、という4点です。ここでいう成果物とは、編集可能なデザインファイル、画像、コードリポジトリ、公開ページなど、相手に渡すものを指します。

専任デザイナーのいない創業者にとっては、最初の生成と同じくらい、最後の修正が重要です。ボタンの文言を直すたびに画像全体を作り直すなら、そのツールはそのUIに向いていません。最初のページがどれほど美しくても、マーケティング担当者が開発者の手を借りずにキャンペーンの見出しを差し替えられないなら、ランディングページの制作・運用方法を見直す余地があります。

今回の8ツールは、プロダクトのインターフェース、ブランドに沿った制作、画像、Webサイトの公開をカバーします。プレゼンテーション作成ツールは別記事のGamma代替ツール比較で扱っています。画像生成に特化したツールはMidjourney代替ツールで詳しく比較していますが、編集可能なプロダクトのレイアウトを作るツールとは役割が異なります。

以下では、独立系の修理事業者向け予約管理サービスを例にします。制作するのは予約画面、ランディングページ、そしてそれらと統一感のあるキャンペーン用画像です。何を依頼し、どこを確認するかを説明するための仮の要件であり、今回の比較で実際に生成した成果物ではありません。

UI/UXデザインに使うAIツールの選び方

インターフェース用のツールは、次に誰が修正するかを基準に選びます。UIは利用者が操作する画面や部品、UXはそれらを通じて目的を達成するまでの体験です。見栄えのよい画面でも、予約変更の手順がわかりにくいことはあります。レビューでは、うまく進まないケースも含めて、操作を最初から最後まで追ってください。

1. FigmaとFigma Make：更新し続けるプロダクトのデザイン基盤に

FigmaとFigma Makeを組み合わせると、共同作業のためのデザイン環境で、AIを使ってコードを伴うプロトタイプを作れます。FigmaはMakeを「作成したものはすべてコードを基盤とし、視覚的に編集できます」と説明しています。製品ページでは、既存のデザイン情報を出発点に、キャンバスで調整し、デザインとコードの間で作業をつなぐ流れが紹介されています。Figma Make

修理事業者向けの例なら、予約画面を継続的に改善するプロダクトへ育てる場合にFigmaが向いています。重要なのは、顧客の行、訪問ステータス、予約変更の操作、確認メッセージを、統一感を保って修正できる状態にすることです。再利用可能な部品と見た目のルールをまとめたデザインシステムがあれば、画面を増やすたびに別のボタンを作る事態を防げます。

Makeは、そうした部品を操作したときの動きを検討するのに役立ちます。一方、元のデザインを確認して磨き込む場所はFigma Designです。要件にも「議論できるプロトタイプを作り、保守できる編集可能なデザインを残す」と明記しましょう。プレビューが魅力的なだけでは、顧客に提供できる実装が完成したとはいえません。

向いている用途： 見た目の継続的な調整と、開発者への引き継ぎが必要なプロダクトUI。
特徴： 既存のFigmaの情報、Make kits、編集可能なデザインレイヤーに戻すためのワークフロー。
料金： Starterは無料。Professionalは年払いでFullが月額$16、Devが月額$12、Collabが月額$3。Organizationは年払いでFullが月額$55、Devが月額$25、Collabが月額$5。Enterpriseは年払いでFullが月額$90、Devが月額$35、Collabが月額$5です。
無料で試す方法： Starterから無料で始められます。ただし、AIを無制限に使えるという意味ではありません。

StarterのAIクレジットは1日150、月間上限500と記載されています。Fullシートの月間クレジットはProfessionalが3,000、Organizationが3,500、Enterpriseが4,250です。DevとCollabには500と記載されていますが、使える製品はFullシートと異なります。AIの追加利用については別途検討が必要です。Figmaの料金

Figmaを選ぶ最大の理由は、デザインを引き継いでいけることです。創業者が最初の案を探った後も、プロダクトの見た目に関する決定を残しておけます。不要なケースも明確です。成果物が案内用のランディングページだけで、独立したデザインファイルを誰も必要としないなら、公開まで行えるツールで引き継ぎの工程を省けます。

最初のプロトタイプを実際の業務に結び付けるには、次の手順が役立ちます。

1. 1

   プロンプトの前にデザインのルールを渡す

   既存のフレームやデザイン素材、承認済みの色、タイポグラフィ、ボタンの文言を渡します。デザインシステムがなければ、先に簡単なルールをまとめましょう。予約画面では新しい見た目を考えるのではなく、そのルールを使うように指定します。

2. 2

   操作の流れと各状態を計画する

   MakeのPlanモードで、訪問予定を探す、日時を変更する、変更を確認する、という流れを記述します。成功時に加えて、予定が空の状態と予約変更に失敗した状態も依頼します。見た目を磨く前に、計画を確認してください。

3. 3

   修正する要素を具体的に指定する

   予約変更ボタンを目立たせるなど、局所的な修正にはpoint-and-editを使います。構造の変更はプロンプトで依頼します。レイアウトを直す間も、承認済みの文言とブランドのルールは維持します。

4. 4

   引き継ぎに必要な形式で仕上げる

   Figma Designの編集可能なレイヤーが必要なら、copy-to-designのワークフローを使います。動きについて意見を集めるためにプロトタイプを共有し、リリース前には保守するデザインと実装済みの画面をそれぞれ確認します。

この手順は公開されているMakeのワークフローに基づきます。周辺の制作環境についてはFigmaレビューで解説しています。開発者がコーディングエージェントの成果をデザイン側に戻す場合は、Claude CodeからFigmaへ引き継ぐガイドを参照し、取り込んだデザインと保守対象の実装を区別してください。

2. Claude Design：文章の要件から、議論できるデザイン案へ

Claude Designは、AnthropicがClaude内で提供するビジュアル制作のワークフローです。提供元は「作りたいビジュアルを説明すると、Claudeがブランドに沿った最初の案を作ります」と説明しています。デザインシステムの利用、キャンバス上での直接修正、ほかのツールへの引き継ぎに対応しています。Claude Design

画面で何を伝えるべきかを形にするのが難しいときに向いています。創業者が予約業務を普段の言葉で説明し、利用者が迷う点を示して、クリックできる案を依頼できます。目的は、開発タスクに落とし込む前に、判断すべき内容を目に見える形にすることです。

たとえば予約変更の画面では、顧客への通知が済んでいるかを事業者が判断できる必要があります。その条件を要件に入れてください。結果を見るときは配色だけで判断せず、状況と、問題が起きたときの対処方法が明確かを確認します。整ったフォームでも、操作後に何が起こるかわからなければ、デザインは未完成です。

向いている用途： 文章でまとめた業務要件を、ブランドに沿った検討用プロトタイプにすること。
特徴： 対話、デザインシステムの情報、見た目の調整を同じワークフローで扱えます。
料金： Freeは$0。Proは年払い割引適用で月額$17と表示され、$200を前払いします。月払いなら$20です。Maxは月額「$100から」で、Max 5xとMax 20xがあります。Team Standardは年払いで1シートあたり月額$20、月払いでは$25。Team Premiumは年払いで月額$100、月払いでは$125です。Enterpriseは年払いで1シートあたり月額US$20に、API料金に基づく従量課金が加わります。
無料で試す方法： FreeプランにDesignが含まれます。有料プランでは利用枠とプラン機能が変わります。

以上はClaudeの料金ページに記載されたサブスクリプション料金です。主要なプランカードにはMax 20xの個別料金がないため、ここで推測して補ってはいません。Teamは2〜150人向けと案内されています。Proの年額は$200であり、丸めて表示された$17を年間分掛け合わせた額ではありません。

現行のヘルプガイドにはHTMLのエクスポートとClaude Codeへの引き継ぎが記載されています。一方、同時編集はまだ基本的な段階で、安定しない場合があるとも説明されています。バージョン履歴もまだありません。チームで使う場合、こうした制約は第一印象の美しさ以上に重要です。

デザインの責任者を1人決め、ほかの人の意見はレビューの機会を設けて集めるとよいでしょう。大きく変更する前には、利用可能なエクスポート機能で承認済みの成果物を保存します。これは公開されている制約を踏まえた運用上の提案であり、デザインファイルを組織的に管理する機能が成熟しているという意味ではありません。

要件を議論できる形にしたいならClaude Design、共同で編集し続けるデザインファイルを重視するならFigmaです。 利用条件の変更はClaude Designの無料化、実装へのつながりはUI生成におけるClaude Designとv0の比較を参照してください。

3. v0 by Vercel：開発者がコードを引き継ぐUIに

Vercelのv0は、ビジュアル編集とコードでの引き継ぎに対応するAIアプリケーションビルダーです。Vercelは「AIで、動くアプリケーションを数分で生成」と説明しています。これは提供元の主張であり、今回の比較で測定した時間ではありません。選定時に注目したい機能は、GitHub同期、Design Mode、Vercelへのデプロイです。v0

修理事業者向けの管理画面を、開発者がコードリポジトリで引き継ぐならv0が候補です。リポジトリは、ソフトウェアのファイルを共有・管理する場所です。開発者はそこから実際の予約データを接続し、動作を確認して保守を続けられます。完成したアプリに見えるプレビューだからではなく、引き継ぎ先が自分たちの作業に合うから選ぶことが大切です。

プロンプトでは、見えるインターフェースと業務上の処理を分けて指定します。予約一覧、ステータス表示、確認後の状態を明示し、どれがサンプルデータかも示してください。ボタンを押してローカルのプレビューが変わっても、顧客に通知が届いた証拠にはなりません。別の利用者の予約を変更できないようになっていることも、それだけでは確認できません。

向いている用途： 次の工程でコードによる開発を続けるプロダクトUI。
特徴： 見た目の調整と、リポジトリ・デプロイのワークフローを併用できます。
料金： Freeは月額$0、Plusは1ユーザーあたり月額$30で、現行ページでは$90に取り消し線が付いています。Businessは1ユーザーあたり月額$100、Enterpriseは個別見積もりです。
無料で試す方法： Freeには新規ユーザー向けの1回限りの$5分のクレジットが付き、メッセージは1日7件までです。

PlusとBusinessはいずれも、1ユーザーあたり毎月$30分のクレジットと、ログインした日に$2分のクレジットが付くと記載されています。追加クレジットも購入できます。Businessでは学習へのデータ利用がデフォルトで無効になり、Enterpriseにはより強い組織管理機能が記載されています。公開ページには、表示されているPlusの特別価格の終了日はありません。v0の料金

レビューの中心は、実際の動作に置きます。予約変更の操作が、データ更新、失敗時の応答、画面上の確認表示までどうつながるかを開発者に確認してもらいましょう。そのうえで、実装を承認済みのデザイン要件と照らし合わせます。見た目と動作を一緒に確認すれば、見栄えだけを整えた近道が、仕組みのわからないまま本番の一部になるリスクを減らせます。

生成したソフトウェアを引き継ぐ責任者がいるなら、v0を選びましょう。 目先の目的がコンセプトの承認なら、Claude DesignやStitchで、制作の初期段階の判断に集中できます。

4. Google Stitch：有料契約の前にUIの方向性を探る

Google Stitchは、Google Labsが提供するアプリとWebサイトのUI向けAIデザインキャンバスです。Googleはその役割を「アイデアをモバイルおよびWebアプリケーションのUIデザインに変える」と説明しています。公開ページには、編集可能なFigma形式へのエクスポート、静的なHTML/CSS出力、複数画面をつないだプロトタイプが記載されています。Google Stitch

予約画面の構成案を比べたいときに向いています。たとえば、その日の訪問予定を一覧にする案と、次の予約を中心に見せる案を作り、どちらなら事業者が次の行動を判断しやすいかを検討します。決めるべきなのは情報の優先順位であり、どちらのモックアップが流行に合っているかではありません。

向いている用途： 有料のデザイン環境を決める前の、初期のUI検討。
特徴： 生成した画面を、編集可能なFigmaのデザインやフロントエンドのコードへつなげられます。
料金： 現在は無料で提供されています。公開ページに有料サブスクリプションの階層はありません。
無料で試す方法： 1日ごとのクレジット上限の範囲で無料利用できます。数量はアカウント設定に表示され、UTCの午前0時にリセットされます。

公開ページには、1日に使えるクレジットの数量が記載されていません。そのページだけでは、1日あたりの制作量を見積もれません。1アカウントでも5アカウントでも、記載上のサブスクリプション料金はありませんが、チームで共有できる利用枠や組織管理プランがあることを意味するわけではありません。

残したい方向性が見つかったときに役立つのが、Figmaへのエクスポートです。Googleのページには、構造化されたAuto Layout、名前付きのコンポーネントレイヤー、編集可能なテキストが記載されています。Auto Layoutは、固定された写真のように扱うのではなく、内容の変化に合わせて配置を調整できる仕組みです。こうした性質は引き継ぎに有用ですが、エクスポート後も実際のコンテンツを入れて確認する必要があります。

長い顧客名、メモのない予約、幅の狭い画面をレビューのケースに使いましょう。内容が変わると構成が崩れるなら、見た目のバリエーションを増やす前に直します。これは読者が実践できる受け入れ確認の方法であり、本記事で実施したテストではありません。

「このUIをどんな形にすべきか」を考えている段階なら、今回の候補ではStitchが特に有力な出発点です。 方向性が固まったら、継続的に管理するデザイン環境や開発環境へ移しましょう。

グラフィックデザインに使うAI：ブランド素材と画像

繰り返し使うレイアウトにはCanva、その中に配置する画像にはFireflyが向いています。販促素材には、写真やイラスト、見出し、情報の優先順位、タイポグラフィ、行動を促す文言など、複数の判断が含まれます。画像を生成しただけではデザインは完成せず、レイアウトを生成しただけではそこに書かれた主張が事実になるわけでもありません。

5. Canva AI：小規模チームの日常的な販促制作に

Canva AIは、Canvaのビジュアルデザイン環境に生成と編集を組み込んだものです。Canvaは、その一部を「見たいものを説明すると、Magic Designがプロ品質のSNS投稿を作成します」と紹介しています。同じ製品ページでは、ブランドカラーやフォントの適用、手持ちのメディアの利用も説明されています。Canva Magic Design

修理事業者向けサービスの立ち上げで、告知画像、顧客への案内、営業資料に同じ会社らしい統一感を持たせたいならCanvaが候補です。目を引く画像を単発で作ることより、繰り返し使える仕組みが重要です。見出しのスタイル、承認済みの色、ロゴの配置をそろえておけば、次の素材をほかの人に任せても、デザインの議論を最初からやり直さずに済みます。

予約管理サービスの例では、キャンペーンで伝える約束をランディングページとそろえます。事業者の予約管理を助けるという内容です。承認済みの実際の製品画像を使い、行動を促す文言は変えず、掲載先に合わせてレイアウトを調整します。生成時に、根拠のない顧客数、削減効果、未取得の認定バッジなどを追加させないでください。

向いている用途： デザイナー以外の担当者が編集する、ブランドに沿った定期的な販促素材。
特徴： 生成機能と、テンプレート、ブランド設定、通常のビジュアル編集を一緒に使えます。
料金： 米ドルの年額表示では、Freeが1人向けで年額US$0、Proが1人向けで年額US$144、Businessが1人あたり年額US$250。Enterpriseは要問い合わせです。
無料で試す方法： ProとBusinessにトライアルがあります。料金FAQによると、トライアル中のAI利用枠はFreeと同じです。

Proには5個のBrand Kits、Businessには100個と承認・チーム管理機能が記載されています。CanvaではPremium AIとUltra AIを共通の利用枠として説明しており、消費量はツールと作業によって変わります。目安はProでPremium最大200回またはUltra最大20回、Businessで最大400回または40回です。別々の使い方の例であり、足し合わせて使える枠ではありません。Canvaの料金

任意で追加できるAI Passは、ProまたはBusinessに上乗せする継続課金です。公開ページには利用枠の拡張内容が説明されていますが、今回確認した版では価格が示されていませんでした。そのため、予算に推測の追加料金は含めていません。Canva AI Pass

編集できる販促素材を作るためのAIデザインツール選び

文字は、できる限り長く編集可能な状態で残します。キャンペーンの見出しが画像に焼き込まれていると、訴求の修正や翻訳にも画像編集が必要になります。通常の販促制作では、承認済みの文言をテキストとして配置し、その周囲に画像を組み合わせましょう。

レビューの順序も毎回そろえます。主張の正しさ、情報の優先順位、ブランドとの整合性を確認し、最後に書き出したファイルを点検します。誤字のない見出しでも、情報量の多い写真に重なると読めないことがあります。サイズ変更後にすべての要素が残っていても、行動を促す文言が埋もれることはあります。こうした仕上がりの判断は、「生成」ボタンを押すだけでは解決しません。

今回、販促制作の標準的な候補として挙げるのはCanvaです。 開発者が継続管理するUI仕様やアプリケーションのコードを必要としているなら、プロダクトデザインを引き継ぐ主な手段には別のツールを選びましょう。これは成果物の引き継ぎ先に基づく判断であり、Canvaにインタラクティブな機能がないという意味ではありません。

6. Adobe Firefly：キャンペーン画像の生成と写真の編集に

Adobe Fireflyは、Adobeの生成メディア制作環境です。Adobeは「AIの力で画像、動画、音声を作成・編集」と説明しています。本記事の読者にとって重要なのは、画像を作る、一部を修正する、キャンペーンに合うよう構図を広げる、といった仕事です。Adobe Fireflyのプラン

レイアウトは決まっているものの、画像が足りない、あるいは構図が合わないときにFireflyが向いています。修理事業者向けサービスの告知なら、見出しを置く余白のあるイメージ画像や、承認済みの写真を横に広げる作業などです。実際の製品スクリーンショットは、実物の記録として扱ってください。生成したソフトウェア画面は、その機能が製品に備わっている証拠にはなりません。

向いている用途： キャンペーンで使う画像の生成・編集。
特徴： Adobeの制作環境につながる画像生成・編集機能。
料金： Freeは1日の生成回数に制限があります。Standardは月額US$9.99、Proは月額US$19.99。Pro Plusは通常月額US$49.99、現在はUS$34.97。Premiumは通常月額US$199.99、現在はUS$139.91です。これらには月払いの表示があります。Pro PlusとPremiumの特別価格は初年度が対象で、10月21日に終了します。
無料で試す方法： Standard、Pro、Pro Plusにはトライアルへのリンクがあります。リンクの横に期間は記載されていません。

有料プランの月間生成クレジットは、上記の順に2,000、4,000、10,000、50,000です。有料プランでは標準の画像・ベクター生成が無制限ですが、プレミアム機能とパートナーモデルの出力にはクレジットを使います。クレジットは毎月リセットされ、繰り越しはありません。「無制限」がどの機能に適用されるのかまで確認してください。Adobeのプラン比較

Adobeのページには、より広い製品を含むパッケージとして、月額US$69.99でFireflyクレジット4,000を含むCreative Cloud Proも掲載されています。企業向けの要件にはEnterpriseプランが案内されています。ほかのアプリケーションも必要な場合にパッケージを比較してください。Firefly単体の別の料金階層ではありません。ここではEnterpriseの条件に推測の定額料金を当てはめていません。

制作上の判断は、その画像を最終素材として使えるかどうかです。ラスター画像はピクセルで構成され、ベクターは拡大してもきれいに表示できる編集可能なパスで構成されます。Fireflyにはベクター生成機能が記載されていますが、生成した写真がすべて編集可能なブランドマークになるわけではありません。生成する前に必要な最終形式を決め、実際に書き出した素材を確認しましょう。

キャンペーン用の写真では、主役となる被写体、影、輪郭、手が写っていればその形、そして背景などに入った文字を確認します。全体は自然で一部だけに問題があるなら、構図と光を保ったまま、その箇所を修正するよう依頼します。繰り返すキャンペーンでは、毎回無関係な方向性を求めず、承認済みの構図を参照として残してください。

構図が許す限り、宣伝文句は生成写真の外に置きます。最終的なデザイン環境で校正、更新、位置合わせをしやすくなるためです。生成結果はレビューを経てキャンペーン素材として使えますが、製品の実態を正しく示す資料の代わりにはなりません。

Fireflyで画像を仕上げ、レイアウト用ツールで伝える内容を仕上げましょう。 見出しのバリエーションを増やしたいだけなら、通常の編集作業で済む可能性があります。そのためだけに上位のメディア制作プランを購入する必要はありません。

ランディングページ制作に向くAI Webデザインツール

Webサイトの制作方法は、公開後に誰が更新するかで選びます。単一のサービスを紹介する創業者と、プロダクトのアプリケーションを保守する開発者では、必要な環境が異なります。ランディングページでは提供価値を約束し、その根拠を示し、訪問者の次の行動を明確にします。選んだ担当者がそれらを更新し続けられるツールが必要です。

7. Framer AI：創業者が公開後も編集できるランディングページに

Framer AIは、ビジュアルWebサイトビルダーとエージェントを組み合わせたものです。Framerによると、このエージェントは「編集可能なページ、セクション、文言、ビジュアルを、プロジェクト内に直接作成」します。公開AIページでは、対話やキャンバスで調整を続けられることに加え、コンテンツ管理と公開につながるワークフローが説明されています。Framer AI

予約管理サービスの会社が公開用ランディングページを必要とし、その後の更新を開発者以外が担当するならFramerが候補です。重要な利点は、AIが最初のレイアウトを作ることだけではありません。同じ担当者が公開後も見出しを変え、製品画像を差し替え、ページを管理できることにあります。

ページは訪問者が判断しやすい順序で組み立てます。予約管理の課題を最初に示し、製品を正確に見せ、誰のためのものかを説明して、「デモを予約する」を見つけやすくします。主張する内容には、事業として裏付けられるものだけを使ってください。目を引くアニメーションのせいで、訪問者がサービスを理解するための情報を下まで探さなければならない構成は避けましょう。

向いている用途： ビジュアルな作業環境で行う、マーケティング用Webサイトの公開と更新。
特徴： サイトを日常的に編集する環境の中で、AI生成と手動調整を行えます。
料金： Freeは$0、Basicは月額$10、Proは月額$30、Enterpriseは個別見積もりです。ページには月額料金が表示され、購入時に選んだ支払い周期に従って請求されると記載されています。
無料で試す方法： Freeで作業を始められます。Enterpriseにはトライアルの申請窓口があります。

ワークスペースのオーナーは無料です。追加のデザイン編集者は1人あたり月額$20、コンテンツ編集者は月額$10で、閲覧者は無料です。BasicとProには、編集権限を持つシートは最大10と記載されています。有効なサブスクリプションがないワークスペースでは、Freeで試用用のAIクレジット500を使えます。Basicは毎月1,000、Proは毎月3,000を含み、ワークスペースの編集者間で共有します。Framerの料金

上位プランは、必要な機能が明確になってから選びます。Basicにはコンテンツコレクション2個、Proには10個に加え、ステージング、リダイレクト、ブランチ機能が記載されています。コンテンツコレクションは、記事や顧客事例などを同じ構造で管理する仕組みです。ステージングでは、公開前の版を確認できます。独自ドメインの接続には有料プランが必要です。

シンプルなランディングページを持つ創業者なら、アップグレードの理由も具体的に考えられます。そのコンテンツ構造やレビューの仕組みが必要でしょうか。追加の編集者はデザインそのものを変えるのか、それとも承認済みの文章を差し替えるだけなのか。大きなプランなら見た目もよくなると考えず、必要な機能と権限を購入しましょう。

仕上げでは、狭い幅でのレイアウト、文章の折り返し、ボタンのコントラスト、フォームの送信先を確認します。ブレークポイントは、レイアウトが切り替わる画面幅の境目です。制作に使った大きなデスクトップ画面だけでなく、その前後の幅でも確認してください。AIのページにはブレークポイントとタイポグラフィの調整機能が記載されていますが、見た目や読みやすさの最終判断は制作する側に残ります。

マーケティング担当者や創業者が最終的に管理するランディングページなら、Framerが候補です。 次の担当者がソフトウェアのリポジトリの一部としてUIを保守するなら、コードを中心にしたワークフローを選びましょう。

8. Relume：見た目を磨く前に、サイトの構成を決める

Relumeは、再利用可能なコンポーネントを中心とするWebサイト構築システムです。その仕組みは「AIが生のコードを書くのではありません。当社のデザイナーが作成・保守するコンポーネントから選びます」と具体的に説明されています。サイトでは、Relumeでの公開と、Figma、Webflow、Reactへのエクスポートが紹介されています。Relume

サイトに何を載せ、どの順で見せるかが決まらないときにRelumeが向いています。予約管理サービスの例なら、装飾の細部を議論する前に、トップページの説明の流れと、製品、活用例、問い合わせの各ページの関係を決めます。サイトマップはページの構成、ワイヤーフレームは見た目を仕上げる前のコンテンツの配置です。

デザインに多くの時間を割けない創業者には、この進め方が役立ちます。まず一貫した構成を作り、汎用的な訴求を実際のサービス内容に置き換え、その後でスタイルを整えます。再利用可能なコンポーネントは、統一感のある出発点になります。ただし、それだけで事業の価値を十分に説明できたかが決まるわけではありません。

向いている用途： 再利用可能なコンポーネントで、一貫したサイト構成を作ること。
特徴： 要件、サイトマップ、ワイヤーフレーム、スタイルガイドを作り、公開またはエクスポートにつなげられます。
料金： 「Build with Relume」にはFreeと、月額$14からのProがあります。EnterpriseはAI利用量と利用規模に応じた個別料金です。ホスティングは別で、Free hostingまたは1プロジェクトあたり月額$12からのLaunch hostingを選びます。別系統のSite Builderには、Free、月額$18からのStarter、月額$40からのPro、**月額$36から（最低3ユーザー）**のTeamがあります。
無料で試す方法： Freeはカード登録なしで利用できます。料金FAQによると、現在Proのトライアルは提供されていません。

これらはRelumeの現行料金ページに並んで掲載されていますが、異なる購入経路です。同じプランの別名として扱うことはできません。特にSite Builder Teamの大きく表示された料金には、1ユーザーあたりという単位が明記されていません。この表示だけから正確な5人分の請求額を算出すると、誤解を招きます。

Build Proのカードには、基本の月間制作量の目安としてWebサイト1〜2件と記載され、より多く利用するための上位枠もあります。これはRelumeが示す容量の説明です。すべての要件や修正の往復が同じ量を消費するという約束ではありません。シート代が5人分発生しなくても、5人で共有枠を使えば、消費が早まることはあります。

作り始める前に、引き継ぎ先を決めましょう。公開後の担当者がWebflowを使うなら、そのエクスポート経路を確認します。次の工程が見た目の調整ならFigmaの出力を確認し、開発者が実装を保守するなら、その開発者とReact出力をレビューします。Relumeにエクスポート先の選択肢があっても、移行先の環境に必要な費用やスキルがなくなるわけではありません。

今回の例なら、画像を差し替える前にサイトの構成を修正します。漠然とした事業変革を美しく語るセクションより、訪問予定の確認や変更をわかりやすく説明するほうが有益です。余白を埋めることしか役割のないセクションは削除しましょう。適切なコンポーネントとは、顧客の判断に必要な情報を明確に伝えるものです。

サイトの見た目より先に構成を固めたいなら、Relumeを選びましょう。 公開ページを自分で直接管理することが最優先ならFramer、アプリケーションのコードを引き継ぐならv0が候補になります。

AIデザインツールの費用：1人と5人ではいくら違う？

総額を比べる前に、購入する権限を比べます。以下の5人の欄は、提供元が編集者のシート料金を明確に不要としている場合を除き、5人全員に記載の有料制作権限が必要な想定です。予算を考えるための例であり、全員分のシートやすべてのツールを購入する提案ではありません。

これらの合計は、引用したプラン料金から計算した値であり、提供元が公表したチーム向けセット料金ではありません。 任意の追加利用や無関係なサービスは含みません。すべてを無理に同じ単位に見せるより、年払いと月払いの違いを明示するほうが、判断に役立ちます。

少人数で立ち上げるなら、成果物ごとに責任者を決めます。Figmaのシートはプロダクト担当者が持ち、画像を生成するのはマーケティング担当者だけ、という形も考えられます。ほかのメンバーは、選んだサービスが実際に提供する権限でレビューします。有料権限を見直すのは、入社したという理由だけでなく、その人が制作を始めるときです。

同じ考え方は、プランのアップグレードにも当てはまります。クレジットの追加は制作量、ブランド管理機能の追加は一貫性、編集者の追加はアクセス権の問題に対応します。どれかを購入すれば、ほかの問題も自動的に解決するわけではありません。

AIにデザインを依頼するとき、要件をどう書くか

仕事で使える成果物を作るには、具体的な課題から始め、最後に完成物を確認します。次の改善前・改善後の例は、依頼内容の書き方を考えるためのものです。これらのツールをテストし、同じ下書きが出たと主張するものではありません。

改善前： 「モダンな予約アプリとランディングページ、それからリリース告知用の画像を作ってください」。これでは対象者、主な操作、載せる内容、成果物の使い先が決まっていません。生成する側には、修理事業者とほかのソフトウェア利用者を区別する手掛かりがほとんどありません。

改善後： 「次の訪問予定を確認する独立系の修理事業者向けにデザインしてください。顧客、予約状況、日時変更の操作を明確にします。承認済みのロゴ、色、書体を使い、UIの文字は編集できる状態にしてください。ランディングページでは予約管理の流れを説明し、行動を促す文言を『デモを予約する』にします。キャンペーン用画像でも同じ文言と承認済みの製品画像を使います。顧客のロゴ、評価、性能に関する主張を作り足さないでください」。

この書き直しだけで優れたデザインになるとは限りません。ただし、要件に合格基準が含まれるため、結果が弱いときに原因を特定しやすくなります。

1. 1

   最初に業務の目的を達成できるか確かめる

   予約を探して変更するまで、実際の流れを追います。主な操作がわかりにくければ、装飾より先に情報の優先順位を直します。ここでいう優先順位とは、見る人が最初に何に気付き、その次に何を見て、最後に何を見るかという順序です。

2. 2

   要件を維持して、問題の箇所を修正する

   予約状況が埋もれているなら、承認済みの文章、色、構成は保ち、その点を具体的に修正するよう依頼します。ランディングページでは、補足情報より上に顧客のメリットを置きます。キャンペーン素材では、プロダクトが約束する内容を維持しながら、注意を奪い合う要素を減らします。

3. 3

   表示が崩れやすい内容を試す

   長い名前、情報の欠落、幅の狭いレイアウトを試します。ラベルが見えるか、データが空のときに次の操作がわかるかを確認します。写真なら背景などの文字や、編集した物体の輪郭を点検します。見栄えのよい初期状態だけで判断しないでください。

4. 4

   引き継ぎ先で使う成果物を承認する

   引き継ぐのがFigmaファイルならそのファイルを、開発者がコードを保守するならリポジトリを、顧客が訪問するなら公開ページをレビューします。画像素材は、最終文言を入れて書き出した画像を確認します。プレビューを承認しただけで、その先のすべての形式を承認したことにはなりません。

公開・納品できるとは、使い先の要件を満たしているということです。 ムードボードは未解決の部分が残っていても方向性を伝えられます。一方、実際に使う素材には、承認済みのメッセージ、掲載先に合った寸法、担当者が必要とする編集のしやすさが必要です。その条件がそろうまでは検討用と明示し、試行錯誤を有効に進めましょう。

無料のAIデザインツールはどこから試す？

制作の進め方をまだ決めている段階なら、無料で始めましょう。アイデアを見える形にするにはClaude DesignやStitchが候補になります。プロダクトのデザイン環境が自分に合うかはFigma Starterで確認できます。Canva FreeやFireflyの無料利用なら、不足しているのがレイアウトなのか画像なのかを見極められます。

自分の作業に関わる上限を具体的に確認してください。Stitchの公開ページにはクレジットの数量がありません。Canvaの有料プラントライアルでは、有料プランの全AI利用枠が付くわけではありません。v0の新規ユーザー向けクレジットは1回限りです。Framerの無料AIクレジットも、ワークフローを試すためのもので、有料プランのような継続的な付与枠として示されてはいません。無料利用は有用な入口ですが、制作量を横並びで比較できる単位ではありません。

価値のある作業が具体的な制限に阻まれたときに、アップグレードを検討します。創業者がプロトタイプを承認していても、公開サイトを管理できないなら、プロトタイプの生成回数を増やしても引き継ぎの問題は解決しません。承認済みのブランドテンプレートがあり、必要なのが文言の変更だけなら、画像生成の利用枠を増やしても役立たない場合があります。

自分の仕事にはどのツールが合う？

プロダクトのデザイン基盤を継続して管理するなら、FigmaとFigma Makeを選びます。 次の工程で開発者のリポジトリへ渡すことが必須なら、v0が有力です。両方を同じワークフローで使うこともできますが、デザインと実装が食い違ったとき、どちらを正とするかは決めておきましょう。

要件をこれから視覚的な提案にする段階なら、Claude Designを選びます。 すでに仕事でClaudeを使い、既存の利用枠で足りる場合には特に合理的です。現時点でサブスクリプション料金を払わずにUIの方向性を探りたい、かつ1日の利用量が公開されていないことを受け入れられるならStitchが候補です。

販促素材を繰り返し作るなら、Canva AIを選びます。 次のキャンペーンでも編集しやすく、統一感を保てる状態を作るのが役割です。画像制作そのものが独立した仕事になったらFireflyを追加します。それは、汎用のレイアウト制作環境をもう1つ必要とすることとは別です。

創業者やマーケティング担当者が公開中のランディングページを管理するなら、Framer AIを選びます。 サイトの構成やコンポーネント選びが行き詰まっているならRelumeを選び、Relume上で仕上げるか、エクスポート先で仕上げるかを決めます。購入前には、自分が使う系統の料金を確認してください。

判断基準は明快です。次の担当者が保守できる成果物を作れるツールを購入しましょう。 次の工程に責任者がいないなら、上位プランを選ぶ前に担当を決めることが先です。

避けたいツールと用途の組み合わせ

定期的なSNS画像の制作に、最初のツールとしてv0を購入するのは避けましょう。リポジトリへの出力が役立つのはソフトウェアの開発・提供です。その販促業務にはCanvaのほうが適しています。

編集可能なプロダクトUIの代わりにFireflyを使うのは避けましょう。優れた画像でも、コンポーネントの動作は決まらず、UIの文字を継続して編集できる状態にもなりません。

チームの同時編集用にClaude Designを無条件で選ぶのは避けましょう。提供元のドキュメント自体が、まだその使い方に注意を促しています。デザイン責任者を決め、レビューを区切って行う形が合う場合に使います。

同僚がレビューするだけなのに、Figma Fullを5シート、あるいはFramerのデザイン編集者を5人分購入するのは避けましょう。必要な権限を確かめ、制作権限を使う人の分だけ支払います。

Canva Proを会社共通のログインとして扱うことや、Relumeのエクスポートプランの開始価格を、確認済みのチーム総額とみなすことも避けてください。どちらも、実際に何を購入すべきかを見えにくくします。

これらは用途との不一致を避けるための指摘であり、製品そのものが劣っているという主張ではありません。必要な仕事を仕上げられることが、ツールを導入する理由になります。

創業者が知っておきたい質問

プロダクトUI、ランディングページ、販促素材を1つのツールで作れますか？

複数の用途をカバーするツールもありますが、最終的な引き継ぎ先で選んでください。Canvaのキャンペーン素材、Figmaのプロダクトデザイン、FramerのWebサイトでは、担当者も修正の要件も異なります。最も急ぎで繰り返し発生する仕事から始め、今のワークフローで必要な成果物を作れない場合にだけツールを追加しましょう。

5人の会社には、有料のデザイン用シートが5人分必要ですか？

必ずしも必要ではありません。FigmaとFramerでは無料で閲覧でき、RelumeのBuildワークスペースは編集者ごとの課金がないと明記されています。成果物を変更する役割に対して支払いましょう。5人全員に有料の制作権限が必要なら、個人アカウントを共有するのではなく、該当するチーム料金やシート料金を使って計算してください。

開発者がUIを仕上げる場合は、どれを選べばよいですか？

リポジトリで引き継ぐならv0、開発者が継続管理される編集可能なデザインを必要とするならFigma、Claude Codeへの引き継ぎが作業に合うならClaude Designを選びます。作業を引き継いでもらう前に、承認済みの動作と見た目がどの成果物に表されているかを開発者に伝えてください。

有料契約なしで始められますか？

はい。8ツールすべてに、確認できる無料の利用方法があります。ただし、利用枠と得られる成果物は異なります。Google Stitchは現在サブスクリプション料金がなく、Claude DesignはFreeに含まれます。小さくても意味のある作業を選び、確認済みの制限や必要な有料機能の不足が妨げになったときにだけアップグレードしましょう。

契約を増やす前に、AIを使う業務フローの点検チェックリストで、必要なデザイン業務、担当者、引き継ぎ先を整理してください。