Tracks
AIの基礎
10時間
Claude Designはどう動く？
2ペイン構成：左にチャット、右にライブキャンバス。プロンプトを書くと、Claudeがキャンバス上にデザインを生成し、そこから調整を重ねていきます。Anthropicはこのループを次の5ステップで説明しています。
- 関連するコンテキストでプロジェクトを作成
- やりたいことを説明
- 出力をレビュー
- チャットやコメントで反復
- エクスポートまたは共有
特に目を引いたのは「確認質問」の挙動です。曖昧なプロンプトの場合、Claudeは推測で描き始めるのではなく、必要な追加情報をたずねてから進めることがあります。
左がチャット、右が生成キャンバス。画像：筆者
次に、このループの各段階が実際どう感じられるかを見ていきます。
プロジェクトのセットアップとコンテキスト追加
新規プロジェクトは公開済みの組織デザインシステムを継承するため、一度セットアップしておけばブランドアセットを都度アップロードする必要はありません。
セットアップガイドでは、実際のコンテキストを最初に渡すことを推奨しています。スクリーンショット、モック、好みのスタイルのスライドデッキ、あればコードリポジトリなどです。情報が不足している場合、Claudeは描画前に確認質問をしてくることがあり、指定し忘れた要素に気づけます。
良いプロンプトは、目的、レイアウト、コンテンツ、対象読者の4点をカバーします。例として「地域と製品ラインのフィルター付きで月次収益を表示するダッシュボードを作成」「4画面のモバイルアプリのオンボーディングフローをデザイン」などがあります。
キャンバス上での反復
初稿の後、デザインを前進させる方法はいくつかあります。
- 広い変更はチャットで対応（よりダークなテーマ、2〜3種のレイアウト案など）
- インラインコメントは、場所説明なしで特定要素を指定
- テキストの直接編集でコピーを即修正
- カスタムスライダーで余白、色、レイアウトの微調整をライブで適用
公開初日の癖として、コメントがClaudeに読まれる前に消えてしまうことがあります。対処法はコメント文をチャットに貼り直すこと。煩わしいですが、レビューをコメントに頼る前に知っておくと良いでしょう。
バージョン、共有、エクスポート
現在のドラフトを保持したまま別案を試すには、Claudeに「今の状態を保存して、全く別のアプローチを試して」といった指示を推奨しています。
共有は組織単位で管理され、非公開・閲覧のみ・コメント可・編集可を設定できます。編集可では、同じ会話内でチームメイトがデザインを編集し、Claudeとやり取りできます。
エクスポートメニューは右上にあり、一般的なファイル形式、Canvaへのハンドオフ、Claude Codeへのパッケージ化ハンドオフが用意されています。
Claude Designで何が作れる？
リリース発表では、事前提供の顧客利用から6つの出力タイプが挙げられています。各タイプを簡単に補足します。
- リアルなプロトタイプ：静的モックを、コードレビューやプルリクなしで共有・ユーザテスト可能なインタラクティブプロトタイプへ。
- プロダクトのワイヤーフレームとモック：機能フローを、Claude Codeに渡すか、デザイナーに磨きをかけてもらうための素案に。
- デザイン探索：複数方向性を短時間で試行。探索時間を割きにくいデザイナー向け。
- ピッチデッキとプレゼン：ラフなアウトラインからブランド準拠のデッキまで。
PPTXエクスポートやCanva送信に対応。 - マーケティング資材：ランディングページ、ソーシャルアセット、キャンペーンビジュアル。
- フロンティアデザイン：音声、動画、シェーダ、3D、組み込みAIを用いたコード駆動のプロトタイプ。6つの中で最も実験的で、制限セクションで未解決点に触れます。
生成されたモバイルオンボーディングのプロトタイプ。画像：筆者
管理者向けガイドでは、マイクロサイトやランディングページを別カテゴリとして追加しています。ローンチ時の導入事例は、スピードや会議1回でアイデアからプロトタイプに到達することに焦点を当てていますが、同じドキュメントで実験的な出力の粗さにも触れているため、普遍的な結果とは捉えず参考事例として見るのがよいでしょう。
ブランドとデザインシステムの活用
ここは初期出力の質を左右する重要なポイントです。デザインシステムがない場合、出力は「機能するが汎用的」になりがちだとAnthropicは警告しています。公開済みであれば、新規プロジェクトは色、タイポグラフィ、コンポーネントを引き継ぎます。ただし、抽出されるシステムの品質はアップロードした元アセットに依存するため、雑然とした入力は雑然とした初期システムを生みます。
では、そのシステムがどう構築されるかを見ていきます。
システムの作成方法
セットアップは組織ごとに一度行います。デザインシステムの解説記事では、組織の作成、ブランド・プロダクトアセットのアップロード、Claudeが生成した内容のレビュー、そしてチームへの公開という4手順を説明しています。ソースはコードリポジトリ、既存のデザインファイル、ビジュアルアイデンティティを反映したスライド、ロゴやパレットなどの個別アセットのいずれでも構いません。1種類あれば開始可能です。
Anthropicによれば、生成されるシステムには通常、カラーパレット、タイポグラフィスケール、コンポーネント（ボタン、カード、ナビゲーション）、レイアウトパターンが含まれます。「[自社プロダクト]のランディングページを作成して」といったプロンプトで、ブランドが実際にどう表現されるかをテストするとよいでしょう。
抽出トークンを用いたデザインシステムのレビュー。動画：筆者
公開、複数システム、更新
内容に満足したら「Published」トグルをオンにし、その組織の新規プロジェクトがデフォルトで拾うようにします。サブブランドや別製品ライン向けに、複数のシステムを保持することも可能です。更新時は、デザインシステムの記事が案内する「Remix」ボタンからチャットを開き、Claudeに部分的な変更を依頼できます。
管理者ガイドは手順の優先度を明確にしています。公開済みシステムがない状態でClaude Designを有効化すると「機能するが汎用的」な出力になるため、推奨の展開順はデザインシステムのセットアップが先です。
Claude Designが受け付ける入力
1行のプロンプトだけに限定されません。Claude Designは複数の入力タイプを受け付け、組み合わせるほど現実的なコンテキストになり、初期ドラフトの質が上がる傾向があります。
現時点でドキュメント化されている入力は次のとおりです。
- チャットパネルでのプレーンテキストのプロンプト
- スクリーンショット、画像、既存アセット（希望のスタイルを反映したスライドや文書を含む）
DOCX、PPTX、XLSX形式のドキュメント（ローンチ投稿で明記）- コードベース（コードリポジトリをリンク、またはインポートフローでローカルフォルダを添付）
- Webキャプチャ：既存サイトから要素を取り込み、実際のUIパターンにより近い反映が可能
よく誤解される点が2つあります。Anthropicは「既存のデザインファイル」に言及しますが、ネイティブなデザインツールのファイル形式は列挙しておらず、現状Figmaのネイティブ入出力に関する言及はありません。エクスポートメニューにも.figファイルはありません。Figmaと往復するワークフローに依存している場合は、導入前にライブ製品で要確認です。
初稿が期待外れなら、先ほどの4点チェック（目的、レイアウト、コンテンツ、対象）に立ち返ってください。
Claude DesignとClaude Codeの違い
両者はClaudeという名称と基盤モデル、ハンドオフの橋を共有しますが、同じツールではありません。ローンチ以降、しばしば混同が見られます。名前は似ていますが、製品の役割は異なります。
実際の違いを見ていきましょう。
各ツールの目的
Claude Designは、キャンバス上でプロトタイプ、デッキ、マイクロサイト、マーケティングページなどのビジュアル出力を作成・洗練するためのWeb製品です。ブランド理解のためにコードリポジトリを読むことはできますが、コードベースを編集したりコマンドを実行したりはしません。
Claude Codeはエージェント型のコーディングツールです。公式概要では、コードベースを読み、ファイルを編集し、既存の開発ワークフロー内でコマンドを実行するツールと説明されています。ターミナル、IDE、デスクトップアプリ、ブラウザで動作し、仕事はコードに取り組むこと。同じプロセスでも役割は異なります。
両者はどうつながる？
ビルドの準備が整ったら、エクスポートメニューからClaude Code（ローカルのコーディングエージェントまたはClaude Code Web）へのハンドオフが選べます。Anthropicによると、デザインの意図はバンドルにパッケージ化され、受け取り側のエージェントが単一の指示で拾い上げます。具体的なクリック手順は下のウォークスルーに示します。
正しいメンタルモデルは「アイデア→プロトタイプ→コード」という順序です。両製品は使用量の制限も別々で、アクセスの章で後述します。
Claude Designは誰のためのもの？
Anthropicは対象を二分しています。探索時間を配分せざるを得ない経験豊富なデザイナーと、デザインの素養がなくてもビジュアル成果物を作る必要がある「それ以外の人々」です。展開ガイダンスでは、UXリサーチャー、プロダクトマネージャー、マーケター、周辺職種にも言及しています。
資料や顧客の声から読むに、本製品は方向性の早期検証を行うデザイナー、機能フローを描くPM、そして週末をスライドに費やさずデッキを要する創業者やアカウント担当者に適しているようです。
また、ランディングページ、ソーシャルアセット、キャンペーンビジュアルの素案を作るマーケターや、Figmaを使わずにアイデアを視覚的に伝える必要がある非デザイナーにも合います。
幅広い対象ですが「誰にでも同等」ではありません。厳密なコンポーネントライブラリや正確な仕様に従うデザイナーは、後工程で本格的なデザインツールが必要です。既にブランドシステムがあり、初稿の質を重視するチームとの相性がより明確です。
Claude Designの位置づけ
本製品は、初稿が最も重要で最終仕上げは重要度が下がる、デザインワークフローの初期〜中盤に位置します。以下のユースケースは、Anthropicのポジショニング、公式チュートリアル、ローンチ時の事例からのものです。
特に多いパターンは、初期プロトタイピングの探索、実装不要で「本物らしさ」が必要な社内デモ、そして創業者・セールス・アカウント担当者向けのデッキです。
同様の論理は、キャンペーンコンセプト、ランディングページの初稿、ブランドに沿ったモック、ハンドオフ準備にも当てはまります。完成したプロトタイプは、実装のためにClaude CodeまたはClaude Code Webへバンドル送付できるとしています。
多くのケースで共通するのは、アイデアから「見せられる初稿」までの道のりです。本製品はデザインプロセス全体を解決しようとはしていません。すべてが一発で決まるわけでもなく、初期の成功例の多くが2〜3回の反復で成立しているのもそのためです。
Claude Designを実際に試す
読み物だけでは限界があります。ここでは、アクセス権があれば再現できるプロンプトを使い、フルループを手短に通してみます。流れをすでに理解している場合は、エクスポート手順へ進んでください。多くの人がここをClaude Codeと混同します。
まずclaude.ai/designを開き、New projectをクリックし、名前をWorkspace tourにして、High fidelityを選びます。次のプロンプトをチャットパネルに貼り付けてください：
Create a dashboard for a small fintech app.
It should show monthly revenue at the top, a chart of revenue over the last six months in the middle, and a list of recent transactions below.
Keep it clean and readable. Single page, no sidebar.Claudeは最初にいくつか確認質問をするかもしれません。想定ユーザー、見た目のテイスト、通貨、ナビゲーションパターンなどです。簡潔な回答（社内向け、クリーン＆ミニマル、USD、トップバーのみ）で十分です。少し待つとキャンバスが埋まるはずです。
次に反復します。キャンバスをCommentモードに切り替え、プライマリのCTAボタンをクリックし、「このボタンの左右の余白を増やして」のような1行コメントを追加します。先述のインラインコメントの挙動です。
キャンバス要素にピン留めされたインラインコメント。画像：筆者
狙いどおりのデザインになったら、Exportをクリックし、Hand off to Claude Codeを選びます。これが前述のハンドオフ経路です。