Claude Design の使い方：入口、プロンプト、Claude Code 連携

まず claude.ai/design を開きます。Design が表示されない場合は、インストールや skill を探す前に、プランの rollout と Enterprise 管理者設定を確認します。Claude Design は、画面、プロトタイプ、スライド、one-pager、マーケティング素材を会話と canvas で作るためのWeb製品です。Claude Code skill は、実装時に SKILL.md でプロジェクトのルールを持ち運ぶための仕組みであり、Design の入口ではありません。

2026年4月25日時点で、公式の Claude / Anthropic ページは Claude Design を Anthropic Labs の research preview として説明しています。利用可能性、使用量、export、制限はアカウントや公式ページで確認すべき領域です。実務では、公式入口を確認し、文脈を入れ、canvas で反復し、実装条件が整ったら Claude Code へ渡す、という順番を崩さないことが重要です。

入口を確認してから始める

日本語の記事や動画では、Claude Design が Figma を置き換えるのか、無料で使えるのか、スライド生成に強いのか、という話題が先に出がちです。しかし最初に確認すべきなのは、あなたのアカウントで claude.ai/design を開けるかどうかです。開けなければ、prompt の問題ではなく、アクセスの問題として扱います。

Enterprise では管理者設定が関係する場合があります。チームの誰かが使えていても、自分の組織設定で閉じられている可能性があります。個人または Team の場合も、段階的 rollout の影響を受けることがあります。したがって、記事やSNSの成功例を見て焦るより、まず公式入口と自分のアカウント状態を確認します。

この順番は、過剰な期待値を避けるためにも必要です。無料、無制限、全員利用可能、Figma export 対応といった主張は、現在の公式ソースと自分の画面で確認できる範囲に限定します。確認できない機能は、本文では断定しません。

Claude Design と Claude Code skill を分ける

Claude Design は視覚的な作業面です。Claude Code skill はコードベースでルールを適用するための実装面です。両方とも Claude という名前を持ちますが、担当する仕事は異なります。

Claude Design では、layout、slide、prototype、visual variant、presentation を作ります。Claude Code skill では、component の使い方、テストコマンド、ディレクトリ規約、code style、acceptance check を読み込ませます。Design で見た目を決め、Code で実装規則を守る、と考えると混乱しにくくなります。

この分離をしないと、生成された画面はきれいでも、実装に必要な state、breakpoint、component mapping、error handling が抜けます。Claude Design の結果をそのまま production-ready と呼ぶのではなく、実装に渡せる情報があるかを確認します。

最初の prompt 前に context pack を作る

Claude Design の出力を左右するのは、派手な形容詞より context pack です。良い designer が最初に聞く情報、つまりユーザー、目的、既存UI、brand、component、copy、device、accessibility、acceptance criteria を先に集めます。

止める基準も明確です。brand asset、component example、real copy、accessibility rule、acceptance criteria がないなら、追加の variant を作る前に材料を補います。文脈が弱いまま生成を続けると、見た目は増えますが、採用できる案は増えません。

最初の project prompt は仕事として書く

prompt は mood board ではなく、仕事の依頼として書きます。artifact、audience、surface、context、design system、constraints、output、review criteria を入れると、Claude は構成を自由に考えながらも、実務の境界を外しにくくなります。

hljs text复制
Goal: 何を、誰のために、どの仕事で作るか。
Audience: 利用者または承認者。
Surface: web, mobile, deck, prototype, one-pager, component.
Context: screenshot, copy, assets, component examples.
Design system: token, typography, spacing, accessibility.
Constraints: device, state, compliance, localization.
Output: first canvas, variants, states, review notes.
Review criteria: 何が満たされれば成功か。

たとえば dashboard を作るなら、「operations manager が10秒以内に遅延 workflow を見つけるための desktop-first dashboard を作る。current screenshot、table component、spacing token、alert copy を使う。left navigation と table density は維持し、delay count、owner、reason、next action を first screen に置く。narrow tablet variant と empty/error state も出す」と書きます。

この書き方なら、結果がずれたときも修正点が明確です。より高級に、より先進的に、ではなく、component density、copy hierarchy、breakpoint、accessibility contrast、state coverage を指定して戻せます。

canvas で反復する

最初の canvas は完成品ではなく、レビュー対象です。大きな方向転換は chat、特定箇所の修正は inline comment、文言の精密修正は direct edit、意思決定の比較は variant に分けます。

毎回同じ criteria で見ることが大切です。first screen は task を解くか、state は揃っているか、mobile や tablet で崩れないか、engineer が component と behavior を推測せずに読めるか。ここで不足があれば、次の指示は aesthetic ではなく evidence の追加です。

export と Claude Code handoff

公式の export/share route には、organization share、zip、PDF、PPTX、Canva、standalone HTML、local Claude Code、Claude Code Web があります。stakeholder review なら share link や PDF、deck なら PPTX や Canva、実装なら Claude Code への handoff を選びます。

Claude Code に渡す前に、user job、chosen variant、component mapping、tokens、breakpoints、copy source、empty/loading/error/success state、assets、alt text、accessibility、test、out-of-scope をまとめます。画像だけを渡すと、実装側が component、state、responsive rule を推測することになります。

繰り返し同じ repository に落とすなら、project skill を作る価値があります。SKILL.md には実装の rule、script、template、test command、review checklist を入れます。ただし、その skill は code 側の規律を守るためのもので、Claude Design の製品入口ではありません。

制限と recovery

Claude Design は preview product です。使用量は通常の Claude chat や Claude Code と分けて扱われます。具体的な allowance、追加使用、plan 条件は、現在の公式ページとアカウントで確認します。本文や営業資料で、永続無料、全員利用可能、無制限などとは書きません。

実務上の制限もあります。inline comment が読まれる前に消えることがあります。compact view で save error が出ることがあります。巨大な codebase をつなぐと lag や browser issue が出ることがあります。chat upstream error が出たら、同じ project 内で新しい chat tab を開き、現在の決定と次の作業を再掲します。

production に進める前には、人間の review が必要です。text、claims、responsive behavior、accessibility、brand fit、component feasibility、image rights、QA conditions を確認します。Claude Design は探索と artifact 生成を速くしますが、責任ある確認を消すものではありません。

この最後の確認では、採用した variant、未決定の state、実装で使う component、除外する範囲を一つの note に残します。そうしておくと、レビューでは良かったが実装時に前提が崩れる、という問題を減らせます。

短い checklist でも構いません。

よくある質問

Claude Design はインストールが必要ですか？

いいえ。まず claude.ai/design を使います。見つからない場合は、アカウントと組織設定を確認します。

Design が表示されない理由は？

plan rollout、eligible plan、Enterprise admin setting の可能性があります。community skill や動画は access の証拠ではありません。

無料で使えますか？

断定しないでください。現在の公式 usage と自分の account 条件を確認します。

Claude Code skill で Design を開けますか？

開けません。skill は Claude Code の実装文脈です。Design の入口ではありません。

Figma に export できますか？

現在の公式 evidence がない限り、Figma export を断定しません。利用可能な export/share route を確認してください。

いつ variant 生成を止めるべきですか？

文脈、component、copy、acceptance criteria が足りないと分かった時です。先に context pack を直します。