Claudeに「デザイン」を起こさせる ─ UI/UXが会話から立ち上がる

Claude（クロード）の連載、第7回です。前回は、Claudeが作ったものを会話の横に開いて、直しながら仕上げていく「アーティファクト」を紹介しました。

この回は、アーティファクトの型の1つで、話しながら見た目の案や試作を作っていく「Claude Design」を紹介します。

Claude Designとは

Claude Designは、Claudeと話しながら、見た目の案、動かして試せる試作、1枚ものの資料などを作る機能です。前回紹介したアーティファクトの型（テンプレート）の1つで、会話の横の「キャンバス」と呼ばれる場所に作られます。

Free・Pro・Max・Team・Enterpriseのどのプランでも使えます。使った分は、Claude Codeを含む、Claudeのほかの使い方と同じ上限に数えられます。前は、Claude Designだけ別に、週ごとの使える量がありました。

アーティファクトの1つなので、使う前の設定も前回と同じです。設定の「機能」で「クラウドコード実行とファイル作成」をオンにしておきます。Team・Enterpriseプランでは、組織の設定の「機能」でオンにします。組織でアーティファクトがオフになっていると、Claude Designも使えません。

前は、claude.ai/design という別の場所で使うものでした。この別の場所は、2026年12月14日に閉じます。

そこで作ったデザインシステム（色・文字・部品の形などの決まりをまとめたもの）は、Claudeに移せます。ただし、中身が空のものと、はじめから用意されている見本から作ったものは、手を加えていても移りません。作ったプロジェクトは、閉じるまでそのまま使えます。一方、そこでのチャットとコメントは移らず、閉じたあとに消えます。公開していたリンクも、閉じたあとは開けなくなります。前から使っている人は、要るものを早めに残しておいてください。

使える場所

• 会話の中で
  「この提案書から1枚ものの資料を作って」のように頼むと、会話の横に作られる。メッセージを書く欄の「出力」から「デザイン」を選んでもいい
• 「アーティファクト」タブで
  Designの型を選んで始める
• Claude Codeで
  Claude Codeが入っているプランなら、考えをデザインにしてと頼むか、/design を使う。デスクトップのアプリでも、ターミナル（文字で命令を打つ画面）でも使える
• スマホのアプリで
  頼んでおいて、あとで結果を見る。全画面で見たり、直したりもできる。共有の設定は、ブラウザかデスクトップのアプリで変える

作り方と頼み方

作るときの流れは、だいたい次のとおりです。

• 会話か「アーティファクト」タブで始める
• 使うデザインシステムをつける
• 参考になる材料を足す
• 作りたいものを書く
• キャンバスにできたものを見る
• 会話、コメント、直接、のどれかで直す
• 書き出すか、共有する

デザインシステムをつけておくと、Claudeはその決まりに合わせて作り、できたものを決まりと照らして直してから見せます。組織で決めてあるときは、新しく作るたびに自動でつきます。デザインシステムの作り方は、この回では省きます。

参考になる材料は、いつでも足せます。

• 画面の撮りや画像
  今のデザイン、ほかの会社の製品、骨組みの下書き、雰囲気の見本など。「こんな見た目に」と頼むときに使える
• 今ある資料やスライド
  見た目をまねたい資料をつけられる
• コード
  コードの置き場所をつなぐと、今ある部品や作り方をふまえて作る

製品のページでは、Word・PowerPoint・Excelのファイルからも取り込めるとしています。

頼むのに、デザイナーである必要はありません。次の4つを入れると伝わりやすくなります。

• 何を作るか
• どう並べるか
• 何を載せるか
• だれが使うか

足りないことがあれば、Claudeのほうから聞き返してきます。公式のヘルプには、たとえば次のような頼み方の例があります。

• 地域と製品で絞りこめる、月ごとの売り上げのダッシュボードを作って
• 主な機能を4つの画面で案内する、スマホのアプリの最初の流れをデザインして
• 問い合わせの種類によって質問が変わる、お客さまの声を集めるフォームを作って

直し方

最初にできたものは、出発点です。直し方は3つあります。

• 会話で頼む
  全体にかかる変更に向く。色合いを変える、並びを変える、新しい部分を足す、など。「このページの別の並べ方を2〜3案見せて」のように、案を出してもらうこともできる
• コメントをつける
  キャンバスの直したい所をクリックして、そこだけの変更を頼む。場所を言葉で説明するより早い
• キャンバスで直接直す
  部品を動かす、大きさを変える、そろえる。製品のページでは、文字をその場で書き換えたり、Claudeが作る調整のつまみで、間や色を整えたりできるとしている

どれを使うかは、ボタン1つや間1か所のような細かい所はコメント、構成を変える・新しい節を足す・説明が要るものは会話、見た目をさっと整えるのは直接、というのが公式の目安です。

Claudeに、どう考えてこのデザインにしたかを説明してもらったり、よくする案を出してもらったりもできます。

今のものを残して別の方向を試したいときは、「今のものを保存して、まったく別のやり方を試して」と頼みます。Claudeは今のものを保存して、どこに保存したかを教えてくれます。Claude Designには、前の版に戻す「版の履歴」はまだありません。

書き出しと共有

できたものは、右上の「エクスポート」から、ほかの形にして持ち出せます。

• ファイルにする
  .zip、PDF、PowerPoint、HTML
• ほかの道具へ送る
  Googleスライド、Canva、Miro、Wixなど、ふだん使っている道具へ
• Claude Codeへ渡す
  画面の撮りから作り直すのでなく、できたものの続きから、動くものを作っていける

デザインは、初めは自分だけが見られます。「共有」を押して、だれが開けるか、何ができるか（見る・コメントする・直す）を選びます。リンクで共有できるプランや、見る人もClaudeのアカウントが要ることは、前回書いたとおりです。

知っておきたいこと

公式のヘルプには、今の時点で気をつけることも書かれています。

• 版の履歴はまだ無い
  別の方向を試すときは、上の頼み方で今のものを残しておく
• 何人かで同時に直すのは、まだ不安定
  2人以上が同じデザインを同時に直すのは、まだ基本的な作りで、うまくいかないことがある
• コメントが出ないことがある
  コメントの一覧を開けば見られる。Claudeに伝わらないときは、チャットに貼る
• スマホのアプリでは共有の設定を変えられない
  ブラウザかデスクトップのアプリで変える

うまく使うコツとして、公式は次のことを挙げています。

• 簡単な形から始めて、少しずつ足していく
• 直してほしいことは具体的に言う。「なんか違う」より「入力欄の間を8pxに詰めて」
• スマホ・タブレット・パソコンのどれで見るものかを、早めに伝える
• 方向に迷ったら、2〜3案を出してもらって見比べる
• できたものを、読みやすさや色の見分けやすさ、情報の順番、使いやすさの目で、Claudeに見てもらう

まとめ

• Claude Designは、見た目の案、試作、1枚ものの資料を会話から作る、アーティファクトの型。どのプランでも使える
• 別の場所の claude.ai/design は2026年12月14日に閉じる。デザインシステムは移せるが、チャットとコメントは移らない
• 頼むときは、何を作るか・どう並べるか・何を載せるか・だれが使うか
• 直し方は、会話・コメント・直接の3つ。版の履歴はまだ無い
• PDFやPowerPointなどに書き出せる。Claude Codeへ渡して、続きから作れる

人とAI、どちらも必要で、どちらにも意見がある。その前提で、実際の仕事での使い方を書いていきます。

次回は「Claudeに『得意技』を覚えさせる」です。

※この記事は、2026年10月に今の内容に書き直しました。