Claudeとの会話だけでLP・UI・プロトタイプ・スライドといったデザインを生成可能非デザイナーでも高品質なデザインを短時間で作成可能コメントやEdit、Tweaksなど細かい調整や修正の機能も豊富Claude Codeに引き継ぐことで、デザイン生成からコード化まで一貫対応
Anthropicは2026年4月17日、Claudeの機能としてClaude Designをリリースしました。
Claude Designは自然言語での指示からデザイン・プロトタイプ・プレゼンテーション等を作成することができます。
デザイン分野には弱い（という関心がない？）とされてきたClaudeが満を持して発表してきただけはある高い完成度のツールとなっています。
本記事ではClaude Designの概要・料金・機能・操作手順を解説します。また、編集部で実際にスライド作成、LP作成、動画生成を試した結果も合わせてお伝えします。
LLMに強い会社・サービスの選定・紹介を行います
今年度LLM相談急増中！紹介実績1,000件超え！
・ご相談からご紹介まで完全無料
・貴社に最適な会社に手間なく出会える
・AIのプロが貴社の代わりに数社選定
・お客様満足度96.8%超
・GPT、Claude、Gemini、Llama等の複数モデルに対応
完全無料・最短1日でご紹介 LLMに強いAI会社選定を依頼する
Claude Designとは？
Introducing Claude Design by Anthropic Labs: make prototypes, slides, and one-pagers by talking to Claude.
Powered by Claude Opus 4.7, our most capable vision model. Available in research preview on the Pro, Max, Team, and Enterprise plans, rolling out throughout the day. pic.twitter.com/2BgBGtgYGX
— Claude (@claudeai) April 17, 2026
Claude DesignはClaudeと会話するだけで、デザインを作成できる機能です。会話や自然言語での指示によってデザインが生成されるため、非デザイナーでも簡単にデザインを作成できる点が特徴です。
用途としては、インタラクティブプロトタイプ作成・ウェブサイトデザイン作成・スライド作成・動画作成など多岐に渡ります。作成したものはPDFやPPTXとしてエクスポートできる他、Canvaに送信したりClaude Codeに引き継ぐことも可能となっています。
Claude Codeと組み合わせると実装まで一気通貫で行える点が非常に魅力的です。
また、画像やコードベースのコンテキストを読み込むことも可能で、様々な資料や情報を読み込ませることでより良い出力が得られるとされています。
Claude Opus 4.7によって高度なデザイン性能獲得
Claude Designの精度を支えているのは、2026年4月16日に発表されたClaude Opus 4.7におけるビジョン（画像認識）能力の大幅なアップデートです。解像度が従来の3倍以上（最大2,576px）に向上し、視覚精度ベンチマークが従来の54.5%から98.5%へ成長しています。
そしてAnthropicが初めて公式に「デザインの創造性」を謳ったモデルであるClaude Opus 4.7あってこそ、Claude Designの高いデザイン能力が実現されています。
公式リリース
Claude Designの料金プラン
Claude Designは、2026年5月時点ではClaudeの有料プランに加入することで利用することができます。
TeamプランやEnterpriseプランでも利用することができますが、以下では個人利用向けのプランを表でご紹介します。
プラン名月額（USD）概要Pro$20
（年払い $17相当）Claude Web UI上でClaude Design系の活用が可能な個人向けプラン
簡易的なUI生成やデザイン作成、プロトタイプ制作などに適している。Max$110~大規模なデザイン生成や開発用途向けの上位プラン
業務利用やチーム開発、継続的なデザイン制作を行うユーザー向け
料金次第でProプランの5倍または20倍の使用量
実際にProプランでClaude Desingを利用し、2回ほどのやりとりでLPを作成した際に週間制限の34%を使用しました。たまに使う程度であればProプランでも問題ないかもしれませんが、積極的に利用する場合はMaxプランでも足りないくらいかもしれません。
使用量上限は拡大しつつあるので、将来的には上限を気にすることなく利用できるようになる可能性もあります。
なお、上記の料金や利用制限は2026年5月時点のものになります。随時変更される可能性があるため、詳しくは公式サイトをご確認ください。
LLMに強い会社・サービスの選定・紹介を行います
今年度LLM相談急増中！紹介実績1,000件超え！
・ご相談からご紹介まで完全無料
・貴社に最適な会社に手間なく出会える
・AIのプロが貴社の代わりに数社選定
・お客様満足度96.8%超
・GPT、Claude、Gemini、Llama等の複数モデルに対応
完全無料・最短1日でご紹介 LLMに強いAI会社選定を依頼する
AI Market編集部でClaude Designを使いスライドを作成してみました
作成したスライド
Claude Designを使用し、20分程度で実際に作成したスライドが上記になります。以下では、このスライド作った際の工程と使用した機能について詳しく紹介していきます。
1．Claude Designを立ち上げる
Claudeにアクセスしサイドパネルから「デザイン」を選択するとClaude Designが立ち上がります。
2．スライド作成を指示
Claude Designは左側にチャットインターフェース、右側にキャンバスと分かれています。まずはチャットで作成したいものを説明します。
今回は、「AI Marketについて簡潔に説明するスライドを作成して」という指示と、AI Marketについての情報を与え作成してもらいました。
3. 生成される
まずできたのは上記のようなもので、既にある内容面は完成版とほぼ同じものになっており、なかなかのクオリティです。なお、スライドはHTMLベースで作られているようです。
ここから、キャンバスも使いながら修正を加えていきます。
4．コメントを追加して修正
Claude Designではキャンバスからコメントを追加し、それを元に修正を行わせることができます。上の画像のように、画面右上の「Comment」ボタンをクリックするとコメントモードになり、キャンバス上の気になる部分を範囲選択することでコメントを入力することができます。
コメントは「Send to Claude」で直ちにClaudeに送ることもできますし、一度画面右のコメント一覧にためておくこともできます。
コメントを十分に入れたら、コメントを選択しまとめてClaudeに送信します。以下はコメントを反映し、修正されたスライドです。上のものと見比べてみると、「パートナー」の改行がきれいになっています。
5. チャットから修正を指示
もちろん、チャットから修正を依頼することも可能で、細かい部分はコメントで修正し全体的な修正はチャットから行うという使い分けが大事になります。今回の場合は、AI Marketのロゴを画像データとして与え、ロゴに合うように青基調にするという修正をチャットから行いました。
6. Edit機能を使い手動で修正
Claude DesignにはEdit機能という手動での修正機能もあります。上記画像のようにEdit機能を起動した上で、編集箇所を選択すると、文言やサイズの変更といった細かな調整を行うことができます。
特に細かな調整では、Claudeに頼んだ際の出力が必ずしも思い通りにはならないので、最終的な調整はこの編集機能を使って手動で調整すると良いでしょう。
7. 完成したスライドをエクスポートする
完成したデザインは画面右上の「Share」を押し、お好みの方法を選択するだけで、簡単にエクスポートすることができます。なお、Canvaはコネクタで連携をする必要があります。
試しに、PPTXとしてエクスポート（Powe Point）とCanvaに送信を試してみました。上の画像からわかるように、Power Pointにエクスポートすると、文字サイズや改行で不具合が発生しやすいようです。
基本的にはCanvaやHTMLで出力するのがよいと思います。
Claude Designを使ってイベント告知のLPを作ってみました
Claude Desingが作成したLP
弊社で開催する予定のオフラインイベントAI Market ExConの基本情報を提供し、Claude Designに1からLPを作成してもらいました。実用に耐えるレベルとなるとまだまだ修正は必要ですが、上の動画でお見せしているLPは5分ほどでできました。
なお、上の動画はClaude Designが作成したものですので、古い情報を含む可能性があります。AI Market ExConの正式発表はこちらからご確認ください。
以下では、実際にLPを改良していくうえで使用したClaude Designの機能とその使用感を抜粋してご紹介します。
Tweaks機能でバージョン違いを比較
Tweaks機能を使うと、デザイン全体の配色や文字・余白等を変更し比較することができます。
動画の説明を入れる（例：公式サイトから引用）
動画のように、簡単に切り替えることが可能で、それぞれのバージョンを見比べることができるため、まずデザインの大枠を定めるのに非常に有用であると感じました。
Webキャプチャツール機能を使ってURLからデザイン改善
先ほどもご紹介した、実際のAI Market ExConのLPをClaudeに与え、デザインを改善させてみました。実サイトから要素を直接取り出して反映するWebキャプチャツール機能のすごさが分かります。
上の画像のように、FAQを追加した他、レイアウトが実際のものと同じような形になりました。一方で、アイコンや画像などを抽出することはできず、その部分は変わらぬままとなっています。
URLに限らず、PDFや画像データなどで手本となるようなデザインを与え、参考にするように言うことで求めるデザインをより簡単に実現できるようになることがわかりました。
企業デザイン需要を狙うWebキャプチャツール機能の完成度
Claude Designでは、企業のGitHubリポジトリやFigmaファイルを読み込ませることで、ブランドの色、タイポグラフィ、コンポーネントを自動抽出して記憶することも可能です。従来のAIツール最大の弱点だった「生成するたびに見た目がバラバラになる問題」を解決しました。
FigmaはUI/UXデザインの絶対王者であり、Figma自体もAIによるコンポーネント生成やワイヤーフレーム作成機能を急速に強化しています。しかし、Figmaは基本的には静的なデザインカンプ（絵コンテ）を美しく見せて管理するツールです。
一方、Claude Designは最初から実際に動くコード駆動のプロトタイプ（HTML/JS、アニメーション、3D等）」をチャットだけで構築できます。
デザイナーがカンプを作り、エンジニアがコードに起こすという従来のハンドオフ（引き渡し）の手間を、Claudeと会話するだけで消失させてしまう可能性を秘めているのです。
LLMに強い会社・サービスの選定・紹介を行います
今年度LLM相談急増中！紹介実績1,000件超え！
・ご相談からご紹介まで完全無料
・貴社に最適な会社に手間なく出会える
・AIのプロが貴社の代わりに数社選定
・お客様満足度96.8%超
・GPT、Claude、Gemini、Llama等の複数モデルに対応
完全無料・最短1日でご紹介 LLMに強いAI会社選定を依頼する
AI Market編集部でClaude紹介動画を作ってみました
Claude Designが生成した動画
上の動画は、Claude DesignにClaudeを紹介する動画を作成するように指示を与えた結果です。概要・できること・活用事例を紹介するようにという指示に忠実に従い、Claudeについて紹介してくれています。
動画と言ってはいますが、Claude Designは動画ファイルを生成することはできず、アニメーション付きのHTMLという構成になっています。そのため、スライドのアニメーションっぽくなってしまっていますが、アニメーションの使い方次第で改善できると思われます。
Claude Designに関するよくある質問まとめClaude Designは無料で使えますか？
いいえ、2026年5月時点では有料プランに加入しているユーザーのみが使用可能となっています。
Claude Designはどのような用途で使われますか？
プロトタイプやモックアップ・資料作成にデザイン探求などデザインに関連する幅広い用途に利用することができます。
まとめ
Claude DesignはClaudeに含まれるデザイン生成機能です。Claudeと会話しながら、デザイン・UIモック・プロトタイプ・スライド・LPなどデザインに関連する多岐に渡るものを生成することができます。
また、コメントやEdit、Tweaksなど細かい調整や修正の機能も豊富で、大枠のデザイン決めから細かな修正まで簡単に行うことができます。さらに、Claude Codeに引き継ぎ、実装まで一気通貫で済ませられる点も大きな魅力の一つとなっています。
最初のドラフトはAIに爆速で作らせ、コメント機能やEdit機能、パラメータ調整スライダーを使い、人間が泥臭く手作業で微調整を繰り返して完成度を上げていく共同作業（Co-work）をよりスムーズに行うために欠かせないツールとなるでしょう。
AI活用の方向性やツール選定で迷う場合は、早い段階で専門家に要件を整理してもらうことで選択肢が見えやすくなります。
AI Marketでは、要件のヒアリングから適切なAI関連サービスの厳選紹介まで無料で対応しており、1〜3営業日程度で複数社の提案を受け取ることができます。