Claude Designで実際に何ができる？ 触ってわかった機能・使うコツ・Figmaへの出し方
Claude Codeでワイヤーやデザイン、モックの作成はskillにしていたため、Claude Designを使う機会があまりありませんでしたが、今回改めて使ってみました。Claude Designで何ができるのか、どういうところが便利か、どうしたらより良く使えるのか、実際に触ってわかったことを書きました。
Claude Designって何？
Claude Designは、Claudeと会話するだけでデザインが作れるAIツールです。画面は左が「チャット（指示を書く場所）」、右が「キャンバス（デザインが表示される場所）」に分かれています。左に「XXのページを作って」と書くと、右に実際に動くデザインが出てくる。あとは会話しながら直していくだけです。
誰が使える？
Claude DesignはPro・Max・Team・Enterpriseといった有料プランで利用でき、別料金はかかりません。無料プランでは使えないので、そこだけ注意が必要です。ただし「別料金がかからない＝使い放題」ではありません。Claude Designの利用は、チャットやClaude Code、Coworkと共通の利用上限から消費されます（以前はClaude Design専用の消費枠がありましたが、現在は共通プールに統合されています）。実際、複数案のLPを作ってもらった場合、1回目の出力に対して1度修正するだけでも相当に消費したので、本格的に使い込むならMax以上が安心だと感じました。
Claude Designで実際に何ができる？
思った以上に便利でした。まだ初期の着想段階のものでも気軽に形にしてもらえるので、壁打ちで使える印象です。
様々なテンプレートが作成できる
Webページのプロトタイプ（試作品）、LP（ランディングページ）、提案用のパワポスライドなど、かなり幅広くカバーしてくれます。動きまで作れるので「こんな感じ？」というのがすぐに出せます。
デザインシステムを作ることが出来る
たとえば、GitHubリポジトリを指定したり、既存のデザインファイルやスクリーンショット、ブランドを反映したスライド・PDF、ロゴやカラーパレットといったアセットをアップロードすることで、既存のルールをClaude Designに組み込めます。ソースは1つからでも始められますが、複数渡したほうが精度は上がるようです。
※デザインシステムとは、デザインのルールのことです。使いたい色、フォント、マージンなどのルールやコンポーネントとその用途などが規定されているものです。
Claude Designは以下のもので設定ができます。画像を読む力が高く、既存ページのスクリーンショットを渡すだけでもかなり忠実に作ってくれます。
Claude Code → Claude Designへ連携
Claude Code → Claude Designへ連携することもできます。私はこちらで行いました。
1.Claude Code側でMCPサーバーを追加する
claude mcp add --scope user --transport http claude-design
https://api.anthropic.com/v1/design/mcp2./design-login を実行してサインインする
3./design-sync を実行してデザインシステムを取り込む
出力されたものへの直接編集
右側のデザインを直接修正できます。また左側でコードが出てくるので、そちらで修正もできます。figmaみたいな使い勝手です。
「Tweaks」で微調整
細かい調整は、チャットで頼むより Tweaks という機能が便利です。キャンバス上部のツールバーでトグルをオンにすると、スライダーやトグルのパネルが開きます。ポイントは、この調整項目がそのデザイン専用にClaudeが自動生成していることです。LPなら色の方向性やヒーローのレイアウト、ダッシュボードならグラフのスタイルやグリッドの密度、といった具合に、作ったものに応じて「いじる価値のある軸」が用意されます。さらに嬉しいのが、Tweaksでの調整はモデルとのやりとりが発生しないため、利用枠を消費しない点です。前述のとおりClaude Designは消費が大きいので、ここを使い分けられるかどうかで持ちがかなり変わります。私は「構造の変更はチャット、見た目の微調整はTweaks」と分けるようにしています。
作ったデザインは共有・エクスポートも可能
完成したデザインは、共有リンクを発行して組織内のメンバーと共有できます。権限は「表示のみ」「コメント」「編集」から選べるので、レビュー依頼にそのまま使えます。組織の外に渡したい場合はエクスポートを使います。右上のエクスポートボタンから、.zip・PDF・PPTX・スタンドアロンHTMLでの書き出しのほか、CanvaやMiro、Vercelといった外部ツールへの送信、Claude Codeへのハンドオフが選べます。スタンドアロンHTMLは1ファイルで完結するので、社内共有には特に使い勝手が良いです。
Claude Designにうまく動いてもらうコツ
事前準備や指示の仕方で、出てくる質が変わります。
デザインシステムの登録
前述したデザインシステムは、必須ではないですが、自分の中のルールがある場合は明示しておいたほうがラリー数は減ると思います。
ペルソナ・ページの目的など前提情報を指示する
「かっこいいLPを作って」だけでは、雰囲気は良くても刺さらない案が出ます。誰が・どんな状況で・どんな期待をもってページに訪れるか・サイト来訪者の何を解決するページかを最初に渡すのが鉄則です。私は「ペルソナ」「このページの役割」「読んだ後どうなってほしいか」の3点を必ず先に書くようにしています。
作ってくれたデザインの意図を出力してもらう
どういう意図でこういう配置、デザインにしたのかを説明してもらうように指示しています。そうすると、人間のデザイナーが作ったデザインを見るのと同じように確認できて便利だったので、毎回出してもらうようにしています。
Claude DesignをFigmaに出力する方法
ある程度作りこんだ後は、いったん保存をし後日Figmaで管理・編集したい場面も出てきます。
Step 1｜Claude Design → Claude Code へハンドオフ
Claude Design画面右上の「Share」→「Export」→「Handoff to Claude Code」→「Send to local coding agent」を選択し、表示されるプロンプトを「Copy prompt」でコピー。Claude Codeに貼り付けて実行します。
Step 2｜Claude Code から Figma MCP で書き出し
Claude Code側でFigma MCPが接続されている状態で、「このデザインをFigmaに書き出して」と指示します。
figma:figma-generate-design — コードからFigmaへページ・画面単位で書き出すスキル（「write to Figma」「create in Figma from code」がトリガー）
figma:figma-use — Figmaへの書き込み操作時に読み込まれる前提スキル
figma:figma-create-new-file — 新規Figmaファイルを作る場合
Step 3｜Figma側で編集可能な状態に
figma-generate-design スキルは、既存のデザインシステムのコンポーネント・変数・スタイルを探してから、セクション単位で段階的に組み立てるようになっています。そのため、単なる画像の貼り付けではなく、編集可能なレイヤー構造としてFigmaに再現されます。
まとめ
今までfigma makeを試行錯誤して使った時期もあったのですが、私は活用しきれませんでした。Claude Designは気軽で高精度に出してくれるので、もっと早くから使っていればよかったと思うくらい使いやすかったです。今後は、構想段階でClaude Designを使い方向性を高めてfigmaで調整や確定を行う流れで使っていこうかなと思います。最後まで読んでくださり、ありがとうございました！
