「UI案をサクッと作りたいけど、Figmaを開くのが面倒くさい……」

先日、あるクライアント向けに新機能のプロトタイプを3時間で用意しなければならない状況になりました。デザイナーは別の案件でつかまっており、かといってFigmaで1からワイヤーフレームを引く時間もない。そこで試したのがAnthropic が2026年4月17日にリリースしたClaude Designでした。

結果として、既存のコードベースを読み込ませることで、デザインシステムに沿ったモックアップが約10分で出てきました。そのままCanva経由でスライドに組み込んで、クライアント向けプレゼンを乗り切ることができました。

この記事では、Claude Designの基本的な使い方から、開発ワークフローへの組み込み方まで、コード例つきで解説します。2026年4月17日現在、Claude Pro / Max / Team / Enterpriseプランで利用できるResearch Preview版の情報に基づいています。

まず試したい「5分で動く」デザイン生成3パターン

パターン1：プロンプト1行でモバイルアプリUIを生成

Claude Designへのアクセスは、Claudeの会話画面からツールアイコンを選択します。最もシンプルな使い方は、自然言語でデザインを説明するだけです。

“`

Claude Designへの基本プロンプト例

“シンプルな瞑想アプリのモバイルホーム画面を作ってください。
背景は深いネイビー、タイマーは中央に大きく表示し、
下部に「開始」ボタンを配置してください。”
“`

生成後は、コメント機能やカスタムスライダー（Claude Designが自動生成するUI調整ツール）でインタラクティブに修正できます。たとえば「タイマーのサイズを調整」というスライダーが自動で表示され、ドラッグするだけで数値を変更できます。

効果：初稿生成まで約2分。デザイン経験ゼロでもプロトタイプレベルのアウトプットが得られます。

パターン2：コードベースを読み込ませてデザインシステムを自動適用

Claude Designの最大の差別化ポイントは、チームのコードベースやデザインファイルを読み込む機能です。既存のCSS変数やコンポーネント仕様を認識し、ブランドに一貫したデザインを生成します。

“`bash

GitHubリポジトリのURLを会話に貼るだけで読み込み開始

または、ローカルのデザインファイルをドラッグ&ドロップでアップロード

読み込み後のプロンプト例

“このコードベースのデザインシステムを使って、
ユーザーダッシュボードの新機能カードコンポーネントを作ってください。
既存のカラー変数とフォントサイズを必ず使うこと。”
“`

実際に試したところ、`–color-primary`や`–font-size-lg`などのCSS変数を正確に認識し、既存コンポーネントと見た目が揃ったデザインが出てきました。

注意：2026年4月現在Research Preview段階のため、すべてのデザインシステム形式に対応しているわけではありません。Figmaファイル（`.fig`）とCSS/Tailwindは実績あり。Storybook形式は確認中です。

パターン3：直接編集とコメントでリビジョンサイクルを高速化

生成されたデザインは、以下の4種類の方法でリビジョンできます。

“`
リビジョン方法（優先順位順）：
1. 会話（最も高速）：「ボタンの色をオレンジに変えてください」
2. コメント：デザイン上の特定箇所をクリックしてコメントを追加
3. 直接編集：要素をクリックして値を直接変更
4. カスタムスライダー：Claudeが生成する専用コントロール
“`

1回の会話でリビジョンを指示するコツは、変更箇所を具体的に限定することです。

“`

効果的なリビジョン指示の例

“ヘッダーのタイトルを「今日の瞑想」から「おかえり、{名前}」に変えて、
フォントサイズをそのままに色だけを白からライトブルーにしてください。
他の要素は変更しないでください。”

避けるべき指示（変更範囲が曖昧）

“全体的にもう少し落ち着いた感じにしてください。”
“`

Claude Designの4エクスポート形式と使いどころ

生成したデザインは4つの形式でエクスポートできます。

エクスポート形式	主な用途	補足
PDF	クライアント共有、印刷	高解像度出力
URL	チームでのプレビュー共有	ブラウザで閲覧可能なプレビューリンク
PPTX	プレゼンスライドへの挿入	PowerPoint/Keynoteで編集可
Canva	コラボレーション編集	Canvaで全要素を編集可能

開発チームとの共有にはURLが最も手軽です。クライアント向け提案には、そのままCanvaに送ってリアルタイム編集できる形が便利でした。

開発ワークフローへの組み込み方

PoC段階：アイデアをビジュアルに変換する

開発の初期段階では、要件定義書や仕様をClaude Designに貼り付けて、「これをUIに起こすとどうなるか」を確認するフローが有効です。

“`markdown

Claude Designへの要件入力テンプレート

—
機能名：通知センター
ユーザー：一般ユーザー（スマートフォン利用）
主な操作：
– 通知一覧の閲覧
– 既読/未読の切り替え
– 通知タイプ別フィルタ

デザイン制約：
– 既存のダッシュボードと同一カラースキームを使用
– アクセシビリティ：WCAG 2.1 AA準拠
—
上記の仕様でモバイルUIを生成してください。
“`

プロトタイプ段階：デザインシステムを読み込んで一貫性を担保

コードベースを読み込ませた後は、新しい画面を追加するたびに「このコードベースのスタイルで〇〇画面を作って」と指示するだけで、ブランド一貫性が自動的に保たれます。

> 事例区分: 自社検証
> 弊社（Uravation）がクライアント向けWebアプリのダッシュボード設計で試したところ、既存のTailwindクラスを認識してほぼそのまま使えるコンポーネントが生成されました。手動での色調整は2〜3箇所程度で済みました（2026年4月、Research Preview版での検証）。

本番設計段階：Claude Codeとの連携

Claude Designで生成したデザインは、そのまま実装のインプットとして使えます。URL形式でエクスポートしてClaude Codeに共有する、またはPDF/PPTXを貼り付けて「このデザインをReactコンポーネントに実装して」と依頼するフローが実用的です。

“`bash

Claude Codeでの実装依頼例

1. Claude DesignからURLエクスポート

2. Claude Codeの会話にURLを貼り付け

“このデザイン [URL] を参考に、
src/components/NotificationCenter.tsx として実装してください。
既存の Button コンポーネントと Card コンポーネントを再利用してください。”
“`

よくある失敗パターンと回避策

失敗1：コンテキストなしで抽象的な指示を出す

❌ よくある間違い：「いい感じのダッシュボードを作ってください」

⭕ 正しいアプローチ：「SaaSアプリの管理者向けダッシュボードを作ってください。左サイドバーにナビ、右側にKPIカード3枚と折れ線グラフ1枚を配置。カラーはシステムのCSS変数（–color-primary: #3B82F6）を使用。」

なぜ重要か：Claude Designは高い生成能力を持ちますが、コンテキストが曖昧だと汎用的なアウトプットになり、修正ラウンドが増えます。最初から制約を明示するほど、望ましいアウトプットが出る確率が上がります。

失敗2：デザインシステムを読み込まずに複数画面を生成する

❌ よくある間違い：コードベース読み込みなしに複数の画面を別々に生成する

⭕ 正しいアプローチ：最初にコードベースまたはFigmaファイルを読み込ませ、「このシステムのスタイルを使って」というコンテキストを会話に維持する

なぜ重要か：コンテキストなしで複数生成すると、画面ごとにフォントサイズや余白がばらつき、後から統一するコストが高くなります。

失敗3：Research Preview段階で本番UIをそのまま使おうとする

❌ よくある間違い：生成されたデザインをコードに直接変換して本番投入する

⭕ 正しいアプローチ：アイデアの可視化・チームレビュー・クライアント提案に限定して活用し、実装はエンジニアが別途行う

なぜ重要か：2026年4月現在Research Preview段階のため、出力のピクセルパーフェクト精度は担保されていません。「デザイン意図の伝達ツール」として位置づけるのが現実的です。

失敗4：リビジョン指示で複数の変更を一度に詰め込む

❌ よくある間違い：「色を変えて、レイアウトを直して、テキストも修正して」

⭕ 正しいアプローチ：1回の指示で1〜2箇所の変更に絞る。「他は変更しないでください」を明示する

なぜ重要か：複数の変更を一括指示すると、意図しない箇所まで変わるケースがあります（Research Preview版での検証結果）。

利用条件と料金

プラン	利用可否	月額
Claude Free	不可	$0
Claude Pro	可（Research Preview）	$20/月
Claude Max 5x	可	$100/月
Claude Max 20x	可	$200/月
Team	可	$25〜/ユーザー/月
Enterprise	可	カスタム

Claude DesignはOpus 4.7を使用しているため、利用量はOpus 4.7のトークン消費としてカウントされます。Research Preview段階での追加料金は現時点では発生していません（2026年4月17日時点の公式情報）。

参考・出典

– [Anthropic launches Claude Design, a new product for creating quick visuals](https://techcrunch.com/2026/04/17/anthropic-launches-claude-design-a-new-product-for-creating-quick-visuals/) — TechCrunch（参照日: 2026-04-17）
– [Anthropic Debuts Claude Design for Creating Prototypes, Pitch Decks, and Mockups](https://www.macrumors.com/2026/04/17/anthropic-claude-design/) — MacRumors（参照日: 2026-04-17）
– [Anthropic just launched Claude Design, an AI tool that turns prompts into prototypes and challenges Figma](https://venturebeat.com/technology/anthropic-just-launched-claude-design-an-ai-tool-that-turns-prompts-into-prototypes-and-challenges-figma) — VentureBeat（参照日: 2026-04-17）
– [Claude by Anthropic – Release Notes – April 2026](https://releasebot.io/updates/anthropic/claude) — Releasebot（参照日: 2026-04-17）

まとめ：今日から始める3つのアクション

1. 今日やること：Claude Pro以上のアカウントでClaude Designを開き、「5分で動く」パターン1（プロンプト1行でUIを生成）を試してみる
2. 今週中：チームのコードベースまたはFigmaファイルを読み込ませて、実際のプロジェクトのモックアップを1枚生成する。エンジニアとPMへの共有で使えるか検証する
3. 今月中：PoC段階の要件定義からClaude Designを挟む「デザインファースト」のフローを1案件で試し、従来比でプロトタイプ作成時間がどれだけ短縮できるか計測する

—

あわせて読みたい:
– [Claude Opus 4.7ベンチマーク完全解剖【2026年4月最新】](/articles/claude-opus-4-7-benchmark-swebench-cursorbench-2026/) — Claude Designが動くOpus 4.7の性能詳細
– [Claude Code vs Make比較 — コード駆動 vs ノーコード](/articles/claude-code-vs-make-ai-automation/) — Claudeを使った開発自動化の全体像

—

著者: 佐藤傑（さとう・すぐる）
株式会社Uravation代表取締役。X（[@SuguruKun_ai](https://x.com/SuguruKun_ai)）フォロワー10万人超。
100社以上の企業向けAI研修・導入支援。著書累計3万部突破。
SoftBank IT連載7回執筆（NewsPicks最大1,125ピックス）。

ご質問・ご相談は [お問い合わせフォーム](https://uravation.com/contact/) からお気軽にどうぞ。