Anthropic は 2026 年 4 月 17 日、AI デザインツール「Claude Design」をリサーチプレビューとして公開した。Claude Opus 4.7 を駆動エンジンに、テキストプロンプトからプロトタイプ・スライド・ピッチデック・ランディングページまでを生成できるブラウザ製品で、発表当日に Figma の株価が約 7% 下落するなど、デザインツール市場に強い衝撃を与えている。
本稿では、実際の画面構成と操作フロー、独自機能（デザインシステム自動学習・インラインコメント編集・カスタムスライダー）、そして Claude Code への直接引き渡しまで、「使い勝手」にフォーカスして解説する。
Claude Design とは — Anthropic Labs が世に問う「会話型デザインツール」
Claude Design は Anthropic Labs（実験的プロダクト部門）から登場した、初めての本格 GUI ツールである。これまで Claude.ai がチャット主体だったのに対し、Claude Design はチャットと並んで キャンバス（生成物のプレビュー兼編集領域）が常時表示される 二画面構成 を採用する。プロンプトで指示し、その場で結果を確認しながら反復できるため、「言葉でデザインする」体験がそのままワークフローに落ちている。
何が作れるか
公式ヘルプおよび Anthropic のリリースブログによれば、現時点で以下の成果物が正式サポートされている。
| 種類 | 用途例 |
|---|---|
| インタラクティブプロトタイプ | クリック可能な画面遷移、ボタン挙動、フォーム入力 |
| ワイヤーフレーム / モックアップ | アプリ画面構成、機能フローのスケッチ |
| ピッチデック | 投資家・社内向けのプレゼン |
| ランディングページ | 1 ページ完結のマーケサイト |
| ワンページャー | 製品紹介 PDF、サマリ資料 |
| SNS アセット | OGP・サムネイル・SNS 広告画像 |
| コード駆動プロトタイプ | 音声 / 動画 / シェーダー / 3D / 組み込み AI を活用した動く実装 |
最後の「コード駆動プロトタイプ」が特徴的で、単なる静止モックではなく 実際に動く実装 を出力できる。これが Figma や Canva との最大の差分となる。
利用に必要なプラン
| プラン | Claude Design |
|---|---|
| Free | × |
| Pro（$20/月） | ✅ |
| Max | ✅ |
| Team | ✅ |
| Enterprise | ✅（管理者がオン設定する必要あり） |
Pro プラン以上が必須だが、すでに Claude Pro を契約していれば追加課金なしで利用できる。
実際に使ってみる — サインアップから初プロジェクトまで
サインアップは不要 — Claude Pro/Max ならアクセスするだけ
Claude Design 専用のサインアップやウェイトリスト登録は 存在しない。すでに Claude Pro / Max / Team プランに加入済み であれば、ログインしたまま claude.ai/design にアクセスするだけで使い始められる（Enterprise のみ管理者がオン設定する必要あり）。
執筆時点で「Research Preview」ステータスではあるが、有料プランユーザーには即時開放されており、機能制限のような壁は実質的に存在しない。
初期画面 — 3 タブと 4 つのプロジェクト種別
ログイン後に claude.ai/design を開くと、上部に Designs / Examples / Design systems の 3 タブ、左に 新規プロジェクト作成パネル、右に Recent / Your designs の作品ギャラリーが並ぶ構成の画面が立ち上がる。
各タブの役割は次のとおり。
| タブ | 役割 |
|---|---|
| Designs | 自分のプロジェクト一覧（Recent / Your designs 切替可） |
| Examples | 公式サンプル＋コミュニティ作例ギャラリー。プロンプト例の参考に |
| Design systems | 登録済みデザインシステムの管理画面 |
左パネルの新規プロジェクト作成は 4 種類から選択する。
| 種別 | 用途 |
|---|---|
| Prototype | アプリ画面・LP・モックアップなど Web 系プロトタイプ全般 |
| Slide deck | プレゼン資料・ピッチデック |
| From template | 既存テンプレートから複製スタート |
| Other | ワンページャー・SNS 画像など、上記 3 つに収まらない成果物 |
Wireframe か High fidelity か
Prototype を選ぶと、さらに Wireframe（線画ベース） と High fidelity（完成形に近い見た目） の 2 択が出る。デフォルト選択は High fidelity。
- Wireframe：構造・レイアウト検討段階向け。色やタイポを排してシンプル
- High fidelity：そのままステークホルダーに見せられる完成品を想定したリッチな仕上がり
社内検討なら Wireframe、クライアント提出資料なら High fidelity を選ぶのが王道。プロジェクト名を入れて「Create」を押すと、いよいよ二画面の作業ビューに切り替わる。なお、左下の「Set up design system」は 後回しでも OK で、初回はそのまま Create に進んで構わない。
二画面の作業ビュー — Chat + Canvas
プロジェクト作成後の本番画面は、左に チャット、右に キャンバス（生成物のライブプレビュー）が並ぶ二画面構成だ。プロンプトと素材を投げ込むと Claude Opus 4.7 が初稿を描画し、エクスポート時には複数フォーマット＋ Claude Code への引き渡しまでカバーされる。
| 領域 | 役割 |
|---|---|
| 左ペイン（チャット） | プロンプト入力、修正指示、コンテキスト追加（画像 / DOCX / PPTX / コードベース ZIP） |
| 右ペイン（キャンバス） | 生成された UI / スライドのライブプレビュー、要素クリックでインラインコメント |
| 上部バー | プロジェクト名・履歴・共有・エクスポート |
| 右上サイドパネル | カスタムスライダー、レイヤー、スタイルガイド |
最初のプロジェクトを作る（実例）
今回は実際に「中小企業向け SaaS の営業 LP を作って。トップに価値訴求、3 つの機能カード、料金 3 プラン、最後に CTA」というシンプルなプロンプトを投げてみた。すると Claude は 30 秒ほどで、プロダクト名「Kanade」、ヒーローコピー「バラバラだった業務を、ひとつの画面に。」、Inter Tight + Noto Sans JP のタイポ、CTA「14 日間 無料で試す」まで含む LP 初稿をキャンバスに描画した。
左ペインのチャットには Claude が決めたデザイントークン（屋号、タイポ、カラー、構図）が箇条書きで提示され、右ペインに完成形のプレビューが出ている。さらに右端の 「Tweaks」 パネルには アクセント ヒーロー 料金カード CTA文言 セクション などの 動的スライダーが自動生成 されており、ドラッグするだけで配色やレイアウトをリアルタイムで調整できる（後述）。
ここから先は反復ループに入る。
- キャンバスのボタンや見出しをクリックして インラインコメント で局所修正
- チャットで「フォントを Noto Sans JP に統一」「配色をネイビー基調に」のような全体トーン指示
- Tweaks スライダーで微調整
- 仕上がったらエクスポート → PDF / PPTX / Canva / 内部 URL / Claude Code への Handoff Bundle
このフローのまま、10〜15 分で「営業に持っていける品質の LP モック」が完成 する。Figma のテンプレ流用と比べても、「自社専用の文脈を一発で反映できる」点で生産性のレイヤーが違う。
強力な機能 3 選
1. デザインシステム自動学習
オンボーディング時に自社のコードベース（GitHub リポジトリ）やデザインファイル（Figma エクスポート、スタイルガイド PDF など）をアップロードすると、Claude が 色・タイポグラフィ・コンポーネントを自動抽出してデザインシステム化 する。以降の生成物にはこのシステムが自動適用されるため、ブランドトーンが揺れない。
複数のデザインシステムを併存させることもできるので、複数ブランドを抱える企業や、社内向け／顧客向けでスタイルを切り替えたい場合にも対応できる。
2. インラインコメント編集
キャンバス上の任意の要素（ボタン、カード、見出し）をクリックして、その場でコメントを残せる。下は CTA ボタンに「ボタンを目立つように」とコメントを書き込んでいる瞬間のスクショ。テキスト入力欄には 「Send to Claude」 ボタンが付いており、押すとその要素だけを対象にした修正リクエストが Claude に飛ぶ。
「ここに画像プレースホルダーを追加」「padding を増やして」のような 局所修正 を、メインのチャット欄を汚さずに指示できるのが利点。
ただし公式ヘルプには「インラインコメントが消失する場合はチャットに直接貼り付けてください」との注意書きがあり、プレビュー段階の不安定さは残る。重要な修正指示はチャット側にも控えておくのが安全。
3. カスタムスライダー（Claude が動的生成）
チャットで「色味の暖かさを調整したい」のような曖昧な要望を出すと、Claude が その場でスライダー UI を生成して右パネル「Tweaks」に追加 する。先ほどの「最初のプロジェクト」実例でも、初稿描画と同時に アクセント ヒーロー 料金カード CTA文言 セクション などの動的スライダーが既に並んでいたのを覚えているだろうか。
ドラッグするとリアルタイムで配色や余白が変わるため、「言語化しづらい好みの調整」 が劇的に楽になる。「もう少し落ち着いた感じ」のような感覚的な指示を、数値ではなくつまみで扱えるという発想は他のツールにほぼ存在せず、AI ネイティブツールの真骨頂と言える。デザインのレビューワークフローを根底から変える可能性がある。
Claude Code との連携 — Handoff Bundle
GleamHub のように Claude Code を実装ワークフローの中核に据えている チームにとって、Claude Design 最大の価値はここにある。右上の Share ボタン を押すと、以下のドロップダウンが開く。
メニュー最下段の 「Handoff to Claude Code…」 を選ぶと、以下を含む Handoff Bundle が生成される。
- HTML / CSS / 画像アセット一式
- React / Vue / Svelte などのフレームワーク別コンポーネント雛形
- デザイントークン（色・タイポ・余白）の JSON
- Claude Code 用の引き渡し指示プロンプト（「この LP を Astro で実装。既存の Tailwind 設定を踏襲」など）
ターミナルで Claude Code を起動して該当バンドルをドラッグするだけで そのまま実装に着手 できる。デザインから実装までの摩擦が最小化され、Claude Code の最新機能 と組み合わせれば、PM がプロトを作って即実装に流す、というスピード感が現実になる。
なお、同じドロップダウンには Export as PDF / PPTX / Send to Canva / Export as standalone HTML も並んでおり、実装の手前で止めて他チームに渡したいときに重宝する。最上部の Teammates can comment トグルをオンにすれば内部 URL も発行できるため、「レビュー → Handoff」 までシームレスに繋げられる。
エクスポートと共有
| 形式 | 主な用途 |
|---|---|
| 内部 URL | 組織内レビュー、ステークホルダーフィードバック |
| フォルダ（ZIP） | アセット一括ダウンロード |
| Canva | デザイナーへのバトンタッチ |
| 印刷・社外提案資料 | |
| PPTX | クライアントへのプレゼン提出 |
| スタンドアロン HTML | プロトタイプの暫定デプロイ |
| Claude Code Bundle | 実装フェーズへの引き渡し |
PDF / PPTX 出力時もタイポグラフィや余白が崩れず、実用に耐える品質で書き出される点が AI ツールとしては珍しい。
向き・不向きと競合比較
向いているケース
- 0 → 1 のスピード重視：アイデアからモックまで 10 分で行きたい
- デザイナー不在のチーム：エンジニア・PM だけでプロト品質まで持ち上げたい
- ピッチデック作成：投資家向けスライドを論理＋ビジュアル両面で素早く作る
- 既存デザインシステムへの追従：コードベースを読ませることで自社ブランド準拠の量産が可能
向いていないケース
- ピクセル単位の最終調整：Figma レベルの精緻な数値指定はまだ苦手
- 動画・モーション中心の制作：After Effects / Lottie の代替にはならない
- 印刷向け CMYK 入稿：DTP 用途は対象外（Adobe / Canva のほうが向く）
ノーコード／ローコードを使わない方が良い理由 で論じたのと同じ文脈で、Claude Design もあくまで 「下絵を高速生成するツール」 として位置づけ、最終仕上げは人間の手 or Claude Code に流すのが現実解と言える。
競合との比較
| ツール | 強み | 弱み | Claude Design との違い |
|---|---|---|---|
| Figma | プロ向けピクセル精度、共同編集 | 0→1 が遅い、AI は補助止まり | Claude Design は会話で「動くもの」まで届く |
| Canva | テンプレ豊富、SNS 制作に強い | 自由度低い、コード出力なし | Claude Design はコード駆動プロトもいける |
| Vercel v0 | React / Tailwind 出力に特化 | デザインシステム連携が浅い | Claude Design はデザイン → Claude Code 連携が公式 |
| Galileo AI | UI モックの高速生成 | エクスポートが Figma 限定 | Claude Design は PDF / PPTX / Canva まで対応 |
Claude Code と Cursor の比較記事 で論じたのと同じく、Claude Design の決め手は 「Anthropic エコシステム内で完結できる」 点にある。デザイン → 実装 → デプロイまで Anthropic で揃える戦略の最後のピースが埋まったと言ってよい。
料金プランと始め方
| プラン | 月額（USD） | Claude Design |
|---|---|---|
| Free | $0 | × |
| Pro | $20 | ✅ |
| Max（5x） | $100 | ✅ |
| Max（20x） | $200 | ✅ |
| Team | $30/ユーザー | ✅ |
| Enterprise | 要見積 | ✅（管理者設定） |
すでに Pro 加入者であれば 追加料金なし で利用開始できる。claude.ai/design にアクセスし、新規プロジェクト → プロンプト入力でその場から使える。組織で本格運用する場合は Team プラン（月額 $30/ユーザー）に切り替えると、デザインシステムの共有や複数メンバーでのプロジェクト編集が可能になる。
まとめ
Claude Design は単なる「AI 画像生成ツール」ではなく、プロンプト → デザイン → 実装 までを Anthropic エコシステム内で繋ぐ エンドツーエンドの制作インフラ として設計されている。Figma の株価下落が示す通り、デザインツール市場の力学は確実に変わり始めている。
中小企業や受託開発の現場視点で言えば、
- クライアント提案前の 0 → 1：従来 1 日かけていたモックを 30 分に短縮
- 社内資料・営業資料：PPTX 出力品質が高く、すぐ持ち出せる
- 実装連携：Claude Code 連携で「設計 → 実装」の摩擦ゼロ
という 3 点で、すぐに業務組み込み可能な水準に達している。Pro プラン契約者は今日からでも試せるので、まずは 1 プロジェクト立ち上げて、自社のデザインシステムを学習させるところから始めてみてほしい。
