Claude Designとは？使い方・料金・できることを解説

最終更新日:2026/11/04

「センスがないから…」「Figmaは難しそうで…」と、デザイン作りを後回しにしてきた方はいませんか？

Claude Designは、Anthropicが2026年4月に公開した、文章で伝えるだけでUIやスライド、LPの初稿をつくれるAIツールです。当初は専用サイト（claude.ai/design）で提供されていましたが、2026年9月以降は通常のClaudeのチャットから直接呼び出せる形に変わり、10月8日にはベータを終了して無料プランを含む全プランで使えるようになりました。

本記事では、Claude Designの概要・機能・使い方・料金から、Figma／Canvaとの違い、2026年12月14日に予定されている単体サイトの終了への備えまで、ビジネスパーソン向けに整理します。

Claude Designとは？できることと特徴

Claude Designは、会話を通じてデザインの初稿をつくるAnthropicのツールです。プロトタイプ（動作を確認できる試作画面）、ワイヤーフレーム（画面の骨組み図）、スライド、ワンページ資料、販促素材などを、文章の指示から生成できます。

たとえば「新商品紹介のLPを3案作って」と頼めば、構成案が数分で提示されます。

関連記事：Anthropic、Claude Opus 4.7を搭載した新デザインツール「Claude Design」リリース

公開からの主な変更点

公開から半年で提供形態が大きく変わりました。古い情報のまま使い始めないよう、時系列で押さえておきましょう。

時期	主な出来事
2026年4月17日	Anthropic Labsの新製品として公開（Claude Opus 4.7と同時）
6月17日	デスクトップ版に対応。Claude Codeとの双方向連携、キャンバス上の直接編集、デザインシステム取り込みの刷新
9月16日	通常のチャットやClaude Codeからデザインを依頼できる形に。Freeを含む全プランで利用可能に
10月8日	Docs・Slides・Designがベータを卒業（Freeを含む全プラン）
12月14日（予定）	単体サイト claude.ai/design が終了

注目される理由

最大の特徴は、専門ソフトの操作を覚えなくても、文章だけでデザインが形になる点です。生成後はキャンバス上でテキストや配置を直接直せるため、細部の調整をチャットに頼り切る必要もありません。

さらに、ブランドカラーやロゴ、既存コードを読み込ませると、以後の生成物にデザインシステム（色・フォント・ボタン形状などの決まりごと集）が自動で反映されます。作ったUIはClaude Codeへ引き渡し、実装までつなげることも可能です。

使える場所：Web・デスクトップ・スマホ

Web版Claudeとデスクトップアプリで利用でき、通常のチャット、Claude Code、Artifactsタブのいずれからでも始められます。

スマホ（iOS・Android）アプリでは、チャットでデザインを依頼して、Artifactsタブで結果を見られます。テンプレートからの開始や編集、共有設定はWeb／デスクトップで行うとヘルプに案内されています。

なお、Enterpriseプランでは、組織の管理者が設定を確認する必要がある場合があります。画面に出てこないときは管理者に相談しましょう。

日本語対応もしている

日本語のプロンプトでそのまま制作を進められます。ただし、フォントの選択肢などは英語より限られる場合があります。日本語のブランドガイドラインを使うなら、用語や書体の反映状況を事前に確認すると安心です。

Claude Designでできること・活用事例

Claude Designは主にプロトタイプ作成、プレゼン資料作成、販促素材の制作という3つの用途で活用されています。

いずれも、専門ソフトを開かずにチャット画面から着手できる点が共通しています。

UI/UXプロトタイプの作成

「予約アプリの画面遷移を3段階で作って」と依頼すると、入力から確認までの流れが一括で提示されます。完成物はClaude Codeに引き渡して実装へ進められるため、社内提案の叩き台づくりに向いています。

プレゼン資料づくり（DesignとSlidesの使い分け）

既存の会社案内を読み込ませ、「同じトーンで新商品の説明スライドを作って」と頼む使い方が定番です。

ただし、資料づくりに特化したClaude Slidesも同じ10月8日に正式提供となっています。迷ったときは次のように使い分けるとよいでしょう。

• デッキ（枚数の多い発表資料）が目的 → Slides
• 画面デザインやLP、ビジュアル重視の資料が目的 → Design

どちらもPowerPoint・PDFで書き出せます。

LPやマーケティング素材の制作

ターゲットや訴求点を伝えるだけで構成案が出るため、制作会社へ発注する前の方向性固めにも使えます。

Claude Designで実際にLPを作ってみた【スクリーンショット付き】

AIsmiley編集部の実機検証として、2026年8月時点の画面でLP作成を試みた流れを紹介します。

出力結果は利用時点のモデルや仕様に左右されるため、以下は一例として参考にしてください。

①プロジェクトの作成（所要時間：約1分）

まずは、Claude Design（https://claude.ai/design）にアクセスしてログインします。

トップ画面は、チャット欄にプロンプトを打ち込めば、すぐにデザイン作成を進められる状態となっています。

まったく素材を用意しない状態からでも着手できますが、既存のブランド資料を添付（チャット欄にドラッグ＆ドロップ）しておくと、後工程での修正回数を抑えやすくなります。

準備にかかる時間は短く、思い立ってすぐに試作へ移れる点が印象的でした。

② プロンプトを送信するとClaudeが質問を返してきた

「新商品のコーヒーミルを紹介するLPを作って」と依頼したところ、対象ユーザーや訴求したい特徴について、追加の質問が返ってきました。

一方的に生成物が出力されるのではなく、対話を重ねながら要件を詰めていく流れが特徴です。

質問への回答を通じて、ターゲット層や価格帯、比較したい競合像などの情報を伝えることで、方向性のずれた初稿を避けられます。

要件を先に整理してから依頼する場合と比べ、対話形式は考えを整理しながら進められる利点があります。

③約3分でLPデザインが完成

質問への回答後、約3分でヒーローセクションから購入導線までを備えたLP案が完成しました。

色使いや構成は、依頼内容に沿った形で一定の完成度に達していた印象です。

生成後は、キャンバス上での直接編集や、チャット欄で修正を依頼して仕上げていきます。

注意点として、Claude Design単体では画像を生成できませんでした。今回はChatGPTであらかじめ生成した画像をインプットさせました。

自社商品のデザインを作成する場合は、素材となる画像を用意しておくことが重要です。

Claude Designの主な機能

2026年6月以降の更新で強化された、デザインシステムの継承、直接編集、Claude Code連携、共有機能を紹介します。

いずれも、単発の生成にとどまらず、継続的な業務利用を意識した機能設計になっています。

デザインシステムを反映する

GitHubリポジトリ、ブランド資料、デザインファイル、画像などを読み込ませると、色・フォント・アイコンを組織固有のルールとして取り込めます。取り込んだルールは以後の生成物に自動適用されるため、案件ごとに見た目がぶれません。

キャンバス上で直接編集する

テキストの修正やドラッグでの配置調整、要素へのインラインコメントによる部分修正ができます。「見出しを少し大きく」といった調整をチャットなしで完結できるのが実務向きです。

Claude Codeと連携する

デザインからClaude Codeへ引き渡す、Claude Code側からデザインを呼び出す、という双方向の連携ができます。デザインと実装が分断されがちな工程を一本化できる点が強みです。

関連記事：https://aismiley.co.jp/ai_news/claude-code-difference/

共有・外部ツール連携を活用する

デザインは、.zip、PDF、PowerPoint、単体HTMLで書き出せ、Canvaなど外部ツールへ送ることもできます。作成物は共有するまで自分だけが見られる設定です。

Claude DesignとFigma・Canvaの違い

3つは代替関係ではなく、役割の違うツールです。0→1の初稿はClaude Design、精密な仕上げと共同作業はFigma、テンプレート起点の制作はCanvaが得意です。

 

比較項目	Claude Design	Figma	Canva
主な強み	会話による初稿の高速生成・コード連携	精密なUI設計・チーム共同編集	テンプレートによる直感的な制作
操作の敷居	非常に低い（文章で指示）	中〜高	低
ブランド設定	既存コードや資料から取り込み	手動で設定・管理	テンプレートで対応
コード出力	Claude Codeへ引き渡し	開発者向け参照（限定的）	なし
書き出し形式	.zip、PDF、PPTX、HTML、Canvaへ送信	PNG、SVG、PDFなど	PNG、PDF、MP4など
共同編集	共有・コメントに対応（同時編集の範囲は要確認）	リアルタイム対応	リアルタイム対応

Claude Designの料金・無料プラン・利用制限

Claude Designは無料プランでは利用できず、Pro・Max・Team・Enterpriseのいずれかへの加入が前提です。

追加料金は発生しませんが、既存プランの使用量枠を消費する形で提供されています。

料金プラン

Anthropic公式の料金ページ（2026年8月時点）に基づく、各プランの月額と対応状況は以下のとおりです

※税別表示です。

参考：Pricing｜Claude

無料でも使える

「Claude Designは有料プラン限定」という情報を見かけますが、現在はFreeプランでも利用できます（9月16日以降、10月8日に正式化）。まずは無料で試し、使用量が足りなくなったら有料プランを検討する流れが現実的です。

使用量と制限を確認する

Claude Designは、通常のチャットやClaude Code、Claude Coworkと使用量枠を共有しています。

複雑な生成物を依頼するほど、また修正の反復回数が増えるほど、消費される使用量も大きくなる仕組みです。

公開直後は、複雑な生成でクォータを短時間で使い切る事例も報告されていましたが、その後のトークン処理効率化により、状況は改善が進んでいます。

現在の使用状況は、「設定」→「使用量」の画面からいつでも確認できます。

Claude Designの使い方・始め方

Claude Designは、対象プランへのログインからプロジェクト作成、生成・編集、出力までの4段階で進められます。

➀Claude Designを開いてログインする

「claude.ai/design」への直接アクセス、またはデスクトップアプリのサイドバーから、Claude Designの画面を開きます。

対象プランのアカウントでログインしていない場合、画面自体が表示されないため、先にプランの確認が必要です。

Enterpriseで表示されない場合は、管理者による機能有効化が完了しているかどうかを確認します。

➁プロジェクトを作成して素材を読み込む

新規プロジェクトを作成し、作成タイプやプロジェクト名を指定します。

参考として、スクリーンショット、コードベース、DOCXやPPTX、XLSXといったファイル、Webページのキャプチャなどを読み込ませられます。

素材を多く読み込ませるほど、ブランドの雰囲気に沿った初稿が出やすくなる傾向があります。

➂プロンプトでデザインを生成・編集する

作りたい成果物を自然な文章で伝え、チャットでのやり取りを重ねながら方向性を固めていきます。

生成後は、インラインコメントやキャンバス上での直接編集を組み合わせ、細部を調整します。

一度に完璧な指示を出そうとせず、段階的に修正を重ねる進め方が効率的です。

④完成したデザインを共有・出力する

共有リンクの権限を設定し、組織内のメンバーへ確認を依頼します。

出力形式はPPTX・PDF・HTML・ZIPなどから選択でき、Claude Codeや外部アプリへの引き渡しも可能です。

用途に応じた形式を選ぶことで、後工程での変換作業を減らせます。

Claude Designを使いこなすプロンプトのコツ

目的・対象ユーザー・制約・出力形式を先に明確化し、生成後に反復して調整する進め方が効率的です。

目的と対象ユーザーを具体的に指定する

誰が、どのような場面で使う成果物なのかを明示することで、方向性のずれを防げます。

たとえば「20代女性向けの美容商品LP」と「経営層向けの投資判断資料」では、必要な情報量やトーンが大きく異なります。

対象読者を伝えるだけで、見出しの言葉選びや構成の優先順位が変わってきます。

制約と出力形式を具体的に指定する

画面数、ブランドカラー、対応デバイス、スライド枚数、出力先といった条件を、先に伝えておくことが有効です。

条件を後から追加すると、既に作られた部分の作り直しが発生しやすくなります。

「全5画面、コーポレートカラーは紺色、スマートフォン表示を優先」のように、条件を箇条書きで渡す方法も有効です。

フィードバックで修正点を具体的に指定する

全体の方向性を見直したい場合はチャット、部分的な修正はインラインコメントや直接編集、というように使い分けます。

「全体的に見直して」ではなく「見出しの色を濃くして、余白を狭めて」のように、対象箇所と変更内容を分けて伝える方法が確実です。

段階的な修正を重ねることで、意図に近い成果物へ効率よく近づけられます。

導入前に知っておきたい注意点とリスク

Claude Designはベータ版であり、仕様変更が起こり得る前提での導入が求められます。

単体サイト（claude.ai/design）は12月14日に終了予定

過去に単体サイトでプロジェクトを作っていた方は要注意です。

• デザインシステムは、ClaudeのArtifactsページから移行できます。
• 一方、単体サイト上のチャットやコメントは移行されず、終了後に削除されます。公開リンクも使えなくなるため、必要な内容は閉鎖前に保存しておきましょう。

機能ごとの制限を確認する

デザインシステム機能などは引き続きベータ版として案内されている部分があり、仕様は今後変わる可能性があります。また、インラインコメントがうまく反映されないときは、同じ内容をチャットに貼り付ける回避策が案内されています。

データ利用・商用利用の条件を確認する

個人向けプランと、Team・Enterpriseでは、データの扱いが異なります。機密情報や未公開の商品情報を読み込ませる前に、設定画面と利用規約を確認してください。なお、アーティファクトはBAA（医療情報向けの業務提携契約）の対象外のため、PHI（保護対象の健康情報）は入れないようにしましょう。

生成物の品質を人間が確認する

公開・配布・実装の前に、次の点を必ずチェックします。

• 内容の正確性
• ブランドガイドラインとの整合性
• アクセシビリティへの配慮
• 著作権・商標などの権利関係
• 実装する場合のコード品質

まとめ：まずは無料で試して、業務への組み込み方を見極めよう

Claude Designは、専門知識がなくても対話でデザインの初稿をつくれるツールです。現在はFreeプランを含む全プランで使え、通常のチャットから呼び出せるようになり、始めるハードルが大きく下がりました。

まずは小さな資料やLPで試し、Claude Codeや外部ツールとの連携まで含めて、自社の業務に合うか見極めるのがおすすめです。

アイスマイリーでは、生成AIのサービス比較と企業一覧を無料配布しています。課題や目的に応じたサービスを比較検討できますので、ぜひお問い合わせください。

よくある質問

Claude Designが出てこない場合はどうすればよいですか？

まずWeb版かデスクトップ版のClaudeで、チャットから依頼するかArtifactsタブを開いてください。コード実行とファイル作成の設定、Team・Enterpriseでは管理者のアーティファクト設定を確認します。それでも表示されない場合は、再ログインをお試しください。

Claude Designは無料プランでも使えますか？

使えます。 2026年9月16日以降Freeを含む全プランで提供され、10月8日にベータを終了しました。使用量は通常のチャットなどと共通のため、上限に達したら有料プランを検討してください。

Claude Designは日本語に対応していますか？

対応しており、日本語での指示・資料生成が可能です。ただしフォントの選択肢は英語より限られる場合があります。

CanvaやFigmaとどう使い分ければよいですか？

「0→1の初稿はClaude Design、精密な仕上げはFigma、テンプレートベースの編集はCanva」が現実的です。

Claude DesignとClaude Codeは何が違いますか？

Claude Designはビジュアル制作、Claude Codeはコード実装が主な目的です。連携機能でつなぐと、デザインから実装まで一気通貫で進められます。