Claude Design 使い方 入門【2026年4月最新】——プロトタイプ・スライド・UIモックアップをAIとの対話で作る方法とFigma・Canvaとの使い分け

Claude Designが登場、Figma株が1日5%下落した理由

2026年4月17日、AnthropicのリサーチブランドであるAnthropic Labsが「Claude Design」を公開しました。リリース直後、UI/UXデザイン市場で80〜90%のシェアを持つFigmaの株価が1日で約5%下落し、AnthropicのCPOでFigmaの取締役でもあったMike Kriegerが辞任するという事態が起きています。デザイン業界がこれほど動揺したのは、このツールが単なる新機能の追加ではなく、デザインの始め方そのものを変えてしまうものだったからです。

Claude Designは「フィットネス管理アプリのダッシュボードを作りたい」と自然言語で伝えるだけで、インタラクティブなUIの初期ドラフトを数分で生成するプラットフォームです。中核には同社の最上位ビジョンモデルClaude Opus 4.7が使われており、生成されたUIはチャット画面に流れ込むのではなく、右側の専用パネル（Artifacts）でコードビューとライブプレビューを切り替えながら操作できます。ブラウザ上でIDEのような体験が完結する、というのが最大の違いです。

プロジェクト立ち上げ時の約15分間はOpus 4.7が高度な推論を担当し、色変更や余白調整などの細かい微調整は軽量モデルのHaiku 4.5が処理します。この分業体制によって、ユーザーは遅延なくリアルタイムで操作を続けられます。利用できるのはProプラン（月額20ドル）以上のユーザーに限られており、2026年4月時点ではリサーチプレビューとしての提供です。

UIモックアップからスライドまで、何が作れるか

Claude Designで生成できるのは、静的な画像ではありません。クリックで数値が変化するグラフやフォームのリアルタイム入力チェックまで含んだ、ビジネスロジックと状態管理を持つ機能的なプロトタイプです。生成後は「Tweak Mode」でUI要素をクリックしてスライダーを動かすだけで色・余白・フォントサイズを調整できるので、CSSの知識がなくても操作できます。

スライド資料はPDFやPPTX形式でのエクスポートがネイティブに可能で、エントランスアニメーションやスライド間のトランジション、スピーカーノートまで自動生成されます。「動画を作成して→それをアニメーション付きスライドデッキに変換して」という2ステップで、プロのデザイナーが作ったような動的プレゼンテーションを仕上げることもできます。

マーケティング用途では、WordやExcelの仕様書をアップロードして「ランディングページに変換して」と指示するだけで、CTAボタンの配置からコピーまで含んだページモックアップが生成されます。製品仕様書からマーケティング資料への変換作業時間を70〜80%削減できたという報告も出ています。

使い始めるための3ステップ

まず、claude.aiでProプラン以上に加入します。支払い完了後、画面上部または左サイドバーに「Design」タブが表示されます。プランごとのトークン上限は以下の通りです。

DesignのトークンはChaudeチャットやClaude Codeとは別枠なので、チャットを使ったからといってDesignの枠が減ることはありません。

次に、いきなりプロトタイプ生成を始めるのではなく「SKILL.md」と「README.md」の2ファイルを先に用意します。README.mdにはブランドカラーの16進数・フォントスケール・トーン&マナーを、SKILL.mdにはAIが従う操作の優先順位・禁止事項・不明点があれば実行前に質問させる指示を記載します。これをワークスペースにアップロードすることで、AIが常にブランドガイドラインに沿った出力を返すようになります。

準備ができたら以下のようなプロンプトで試してみてください。

フィットネス管理アプリのプロトタイプを構築してください。ターゲットは週3回運動する社会人です。アップロードしたSKILL.mdのデザインシステムを適用してください。ダッシュボードには週間運動記録を示す動的なSVGチャートと、タップでチェックできるインタラクティブなリストを含めてください。ブラウザをリフレッシュしても入力が保持されるようにしてください。不明点があれば実行前に質問してください。

生成後はTweak Modeでの細かい調整か、チャット欄への追加指示で再生成できます。

失敗しやすい3つのパターン

よくある失敗の一つ目は、最初から10画面分の指示を一度に送ることです。AIが推測で埋める部分が増えてブランドガイドラインから外れた汎用的な出力になり、トークンも大量消費します。対処は「段階的プロンプティング」で、まず軽量モデルのチャットで要件定義を固めてから、最終レンダリングの段階だけClaude Designを呼び出すワークフローにするとトークン消費を30〜40%抑えられます。

二つ目はSKILL.mdなしで量産しようとすること。デザインシステムファイルなしで複数ページを生成するとフォントや色が毎回微妙に異なり、統一感が失われます。最小限のSKILL.md（カラーパレット・フォント・禁止事項のみ）を30分で用意するだけで解決します。GitHubで公開されているオープンソーステンプレートを流用するのが最速です。

三つ目はレートリミットを無視した使い方です。制限は「5時間ごとのローリングウィンドウ」方式で管理されるため、大規模なプロトタイプを作成する途中で作業が中断されることがあります。Tweak Modeを積極活用して重い推論モデルの再呼び出しを減らすか、業務でのヘビーな使用が想定される場合は最初からMax 5x以上を選択してください。

FigmaやCanvaとの正しい使い分け

Claude Designは、CanvaやFigmaの代替ではありません。最大の違いは「何から始めるか」で、CanvaとFigmaが「自分でレイアウトを組む」ことを前提にしているのに対し、Claude Designは「言葉で意図を伝えると初期ドラフトが出来上がる」ツールです。

現在の業界標準になりつつあるワークフローはこうです。Claude Designで初期プロトタイプを生成し、FigmaでピクセルパーフェクトなUI仕上げを行い、Canvaでマーケティングアセットに展開する。3つのツールをこの順番で使い分けることで、それぞれの強みを最大限に引き出せます。

Claude CodeからFigma MCPを設定すると、FigmaファイルのデザイントークンをClaudeが直接読み込み、Figma上のデザインシステム更新がReactコンポーネントに自動反映されるようにもなります。「FigmaのデザインとエンジニアのコードがずれてしまU」という手戻りを60%削減できたという事例も報告されています。デザイナー・PM・マーケターそれぞれの入口から使い始めて、徐々にワークフローを連携させていくのが現実的な進め方です。

実務での活用を考えているなら、まずProプランに加入してこの記事のプロンプト例をそのままコピーし、自分のプロジェクトに使えるUIモックアップを1つ作ってみるところから始めてみてください。

ドリップ（執筆）

「デザインって専門スキルがないと無理」と思い込んでいた方には、かなり刺さる内容だと思います。

個人的に面白いと思ったのは、FigmaやCanvaを「置き換える」のではなく「入口を変える」という発想です。初期ドラフトをAIに任せることで、デザイナーがより本質的な判断に集中できる時間が増えるのは、チーム全体にとってうれしい変化ですよね！

SKILL.mdの準備に30分かけるだけで出力の精度が大きく変わる、という点は見落としがちなので、最初の一歩を踏み出す前にぜひ用意しておいてください。