Claude Designのデザイナー実務での使い方 — 4つの活用場面

Claude Designはデザイナーの実務でどう使われているか

Claude Designは、会話だけでプロトタイプ・ワンページャー・ランディングページなどを作れるツールです。デッキは管理者ガイド上、Claude Slidesという別ツールに分かれています(後述)。チュートリアルとヘルプセンターを読み比べると、実務の場面はプロトタイプ制作・ラフ案の共有・デッキ作成・マーケティング資料の叩き台の4つに分けられます。用途によって、求められる精度も渡す相手も違います。

用途別の進め方に加えて、ページ同士で記述が食い違う箇所(デッキの扱い、共有の選択肢、書き出し先)も確認しました。基本操作はClaude Designの使い方 — 会話でデザインを作る基本操作、デザインシステムの設定はClaude Designで自社のデザインシステムを設定する手順で扱っています。初めて使うなら、先にそちらを読むほうが早く進みます。

まず決めるのは「どこから始めるか」

Claude Designには入口が複数あります。ヘルプセンターでは、会話の中、Artifactsタブ、Claude Code、スマホアプリ、claude.ai/designの5つが挙がっています。入口によってできることが違うので、先に選んでおくと途中で詰まりません。

Enterpriseプランでは、組織の設定でOrganization settings > Artifactsをオンにするまで、会話やArtifactsタブからのDesignは使えません。単独版のclaude.ai/designは別の設定で、片方をオンにしてももう片方は有効になりません。社内で「使えない」と言われたら、どちらの入口の話かを先に確かめます。

プロトタイプ制作 — アイデアを動く画面にする

プロダクトデザイナーとPMに最も一般的な使い方は、機能アイデアを実装前に触れる形にすることです。1回の会話でコンセプトからインタラクティブなプロトタイプまで進みます。

新規ユーザー向けのオンボーディングフローを作って。データソース接続・
最初のダッシュボード設定・チームメンバー招待の5画面構成にして。

複数案を並べる依頼も定番です。「カード型・左サイドバー型・上部タブ型の3レイアウトを見せて」のように頼むと、意思決定の場で選択肢を並べて議論できます。管理画面やモデレーションキューのような社内ツールは、ピクセル精度より速度が優先されるため好相性です。

画面単体でなく、ユーザーの行動を通しで作る使い方もあります。チュートリアルの例は、無料プランから有料プランへのアップグレード動線です。ダッシュボードの案内表示から、料金比較、支払いフォーム、完了後のダッシュボードまでを順に指定すると、各画面を文脈込みで生成します。遷移の整合性を確かめたい場面に向きます。

チームで回すときの流れは、チュートリアルでは次の8段階です。

注意したいのは、この8段階が「デザインリードが実コンポーネントの使われ方を確認する」段を含むことです。生成された画面が見栄えよく見えても、実装に存在しない部品が混ざっていないかは人の目で確かめる前提になっています。

ラフな案を触れる形にして反応を取る

ワイヤーフレーム用途について、チュートリアルに独立した章はありません。製品ページに近い例があります。「ラフなアイデアをクリックできるフローにして、チームに共有し、合意できたらLinearにチケットを切る」という使い方です。

ヘルプセンターには、手描きの案を入れる経路も書かれています。競合製品のスクリーンショットやワイヤーフレーム、既存のスライドを添付して「これに似せて」と頼む使い方です。紙やFigma上のラフがあるなら、それを添付して動くフローに起こすところから始められます。

この段階で意識したいのは作り込みの深さです。画面遷移と情報構造が伝われば足りる段階で見た目を詰めすぎると、レビューで議論が見た目に流れてしまいます。ヘルプセンターは、最初の生成は出発点であり、基本レイアウトと内容から始めて、操作・エッジケース・仕上げを後から重ねるよう勧めています。

Claude Codeとの行き来は双方向です。デザイン側から実装へ渡す経路に加え、Claude Code側のリポジトリにあるコンポーネントを/design-syncでClaude Designへ引き込む経路もあります。手順はClaude Code design-syncの使い方にまとめています。

ピッチデック・プレゼン資料 — 公式ページで扱いが分かれる

デッキ作成は、Anthropic社内で利用の多い用途だと、チュートリアルが書いています。会議準備用の顧客別デッキ、全社会議、パートナー共同提案、役員報告、取締役会や投資家向けの資料が挙がっています。

Q1決算の10枚デッキを作って。売上・製品アップデート・
チームハイライトのセクション構成で。

生成後は、スライド番号を指定して直せます。「3枚目の見出しを『市場機会』に変えて、TAMにフォーカスした内容に書き換えて」といった依頼です。データを渡せばグラフも作れます。HTMLで出力されるので、スライドをまたいで話を運ぶアニメーションも作れます。チュートリアルはこれをPowerPointに対する利点に挙げています。

ここで、ページ同士の食い違いに触れておきます。デッキのチュートリアルはclaude.ai/designを前提に書かれています。一方、管理者向けガイドには「プレゼンテーションは独立したツール、Claude Slidesになった」とあります。Slidesの設定はOrganization settings > Artifactsにあると案内されています。同じガイドの用途一覧は5項目です。プロトタイプとモックアップ、マイクロサイトとランディングページ、インラインコメント、エンジニアへのハンドオフ、そしてClaude Slidesでのプレゼン作成です。

自分の組織でデッキをどの入口から作れるかは、管理者の設定次第です。チュートリアルの手順どおりに画面が出ないときは、Claude Slidesが別トグルになっていないかを確かめます。

デッキを組織の見た目に揃えたいなら、デザインシステムを公開しておくのが前提です。配色やタイポグラフィーがそこから反映されるので、資料ごとに見た目がばらつく問題を避けられます。

共有と書き出しの選択肢は、読む公式ページで違う

共有の選択肢も、ページによって書き方が違います。デッキのチュートリアルは、組織内のリンク共有を「非公開」「閲覧可」「コメント可(既定)」「編集可」の4つで説明しています。現在の共有ヘルプは別の組み立てで、まず「誰が開けるか」を選び、次に「閲覧・コメント・編集」のアクセスレベルを選びます。

Team・Enterpriseで「リンクを知っている全員」を選べるのは、オーナーが外部共有をオンにしているか、そのArtifactを個別に許可している場合だけです。グレーアウトしていたらオーナーに頼みます。組織外の相手へのメール招待は、Organization settings > Artifactsでオンにしておく必要があります。既定はTeamでオン、Enterpriseでオフです。メール招待はベータ提供で、組織外へは1つのArtifactにつき50人までです。保留中の招待は30日で失効します。招待された相手は、同じメールアドレスのClaudeアカウントでサインインして開きます。

書き出しも入口で変わります。ヘルプセンターの一覧は、zip・PDF・PPTX・スタンドアロンHTMLに加え、Google Slidesへの書き出し(claude.ai/designのみ)があります。送付先にはAdobe製品、Canva、Gamma、HubSpot、Miro、Netlify、Vercel、Wixなどが並びます。会議資料の書き出し先がGoogle Slidesなら、会話の中のDesignからでは出せない点に注意します。

マーケティング資料 — 叩き台を複数並べて絞る

ランディングページ、ワンページャー、キャンペーン素材の下書きも守備範囲です。管理者向けガイドは「マイクロサイトとランディングページ」を用途に挙げています。製品ページの例には、提案書をワンページャーにしてSalesforce(ベータ)の情報を差し込み、PDFに書き出すものがあります。

Adobeとの連携では、Claudeで始めたコンセプトをAdobe Expressへ送り、SNS投稿・チラシ・プレゼンを仕上げる使い方が紹介されています。Adobe Experience ManagerとAdobe Journey Optimizerを使えば、Claude Designの案をウェブサイトやメールに展開することも想定されています。

実務での進め方は、同じメッセージを3種類のビジュアルパターンで出させ、社内レビューで方向を絞ってからデザイナーが仕上げる形が組みやすくなります。ゼロの状態で議論するより、3案が並んだ状態から始めるほうが選べるからです。デザインシステムを公開済みなら、この段階からブランドカラーが反映され、後工程の手直しが減ります。

コードベースを繋ぐと何が変わるか

プロダクト用途では、自社のコードベースをGitHubまたはローカルディレクトリから接続すると、出力の質が大きく変わります。接続は「Import」ボタンから行います。接続後は、既存のボタンやカードを使って設計するため、「見た目はいいがその部品は実装にない」というハンドオフ時の齟齬が減ります。

Claudeが読み取る対象は、コンポーネント構成、スタイリングとテーマ、状態管理などのフレームワークの慣習、ファイル構成の4つです。プロンプトでは「ProductCardコンポーネントを使って」「設定画面と同じレイアウトパターンで」のように名前で指定できます。ヘルプセンターも、デザインシステムの取り込みは元の素材の質に左右されると書いています。コードが散らかっていたり、ファイルが不完全だったりすると、出力にそのまま出ます。

ハンドオフは「Export」から「Claude Codeへのハンドオフ」を選びます。デザインファイル、チャット履歴、READMEが束ねられ、ローカルのClaude Code(または他のコーディングエージェント)に貼るプロンプトが発行されます。そのプロンプトにはバンドルのURLが入っています。Claude Code Web版へのハンドオフも選べます。

引き継ぎを楽にする工夫は3つあります。プロトタイプ内の部品に具体名を付けておくと、その名前がハンドオフに残ります。「サイドバーでなくタブにした。全セクションを一度に見せる必要があるから」のように設計判断の理由をチャットに残すと、実装時の文脈になります。ハンドオフ前に、空状態・エラー状態・読み込み状態・データ量の違いを見せてもらうと、エンジニアが全体像をつかめます。

よくあるつまずきと回避策

• 巨大なリポジトリをまるごと接続する: モノレポや100人超が触るコードベースを丸ごとリンクすると、遅延やブラウザーの不安定さが出ます。.gitやnode_modulesを含めず、対象のパッケージやフォルダだけを接続します。大きなリポジトリはClaude Codeから/design-syncで同期する方法もあります
• インラインコメントが反映されない: 既知の問題としてヘルプセンターに載っています。コメントが拾われないときは、同じ指示をチャットに貼り直します。ページ上に表示されなくても、コメント一覧には残っている場合があります
• 「chat upstream error」が出る: 同じプロジェクトの中で新しいチャットタブを開くと回避できると案内されています
• 別方向を試したいが今の案も残したい: Claude Designにはバージョン履歴がまだありません。「今の案を保存して、まったく別のアプローチを試して」と頼むと、現在のプロジェクトを保存して保存先を知らせてくれます
• 複数人で同時に編集する: 2人以上が同じプロジェクトを同時に編集する機能は基本的なもので、確実に動かないことがあります。レビューはコメント主体にして、編集者は1人にしておくと安全です
• 使用量の枠を別に数えてしまう: Claude Designに専用の週次枠はもうありません。Claude Codeなどと同じ枠から消費され、上限に達すると使用量クレジットを有効にしていない限り、リセットまで使えません

まとめ

入口、共有範囲、書き出し先は管理者の設定とプランで変わります。チュートリアルどおりに画面が出ないときは、まず組織設定でどのトグルが有効かを確かめてください。