Claude Codeの/designとは？artboardでUIを作る使い方【research preview】
「Claude Codeでコードは書けるが、UIの見た目は結局ブラウザとエディタを往復して調整している」——実装とデザインの行き来は、AIで開発しても最後まで残る手間でした。
結論から言うと、2026年8月17日に追加された/designスキルは、この往復を1つのセッションに畳み込みます。UI案を複数枚まとめて出し、その場で選んで手直しし、そのまま実装させる流れです。ただしリサーチプレビュー段階で、成果物が「Artifactとして公開される」点は導入前に知っておく必要があります。
株式会社Fyveは中小企業のAI活用を支援しています。この記事では公式発表と、私自身が手元のClaude Code v2.1.234で確認した内部仕様をもとに、/designで何ができるのか・何ができないのかを整理します。
結論：/designは「編集できるUI案を複数枚出す」コマンド
/designは、作りたい画面を言葉で説明すると、編集可能なUI案を複数パターン並べて出してくれるスキルです。気に入ったものを選び、その場で手直しし、そのままClaudeに実装させられます。
従来は「claude.ai/design で作る → コードをコピー → エディタに貼る」というタブの往復が必要でしたが、それがコーディングセッションの中で完結します。2026年8月17日にリサーチプレビューとして公開されました。
先に知っておくべき2つの前提
ニュースだけ見ると誤解しやすい点が2つあります。導入判断に直結するので先に置きます。
前提①：成果物は「Artifact」として公開される
手元のClaude Code v2.1.234の内部定義を確認したところ、/designが作るのはArtifactとして公開されるデザインキャンバスだと明記されていました。つまり生成物はローカルのファイルだけで完結せず、Claude Design のキャンバスエディタが動くページとして公開される形になります。
社内規程で成果物を外部サービスに置けない場合や、クライアントの機密画面を扱う場合は、ここが判断の分かれ目になります。「ローカルで完結するUI生成ツール」ではない、と理解しておいてください。
前提②：claude.ai/design（Claude Design本体）とは役割が違う
/designはClaude Design本体の置き換えではなく、実装に直結させるための軽量版という位置づけです。報道でも両者は次のように整理されています。
/design（Claude Code内）——セッション内で実装まで繋げる用途。手早く案を出して、そのままコードにする- claude.ai/design（本体）——関係者への共有、デザインシステムのインポート、複数画面の設計といった本格的な作業
「デザインツールがCLIに移植された」のではなく、実装フローに必要な部分だけが持ち込まれたと捉えるのが実態に近いです。
読者特典・無料ダウンロードClaude Codeを「素のまま」使うな無料でダウンロード →仕組み——キャンバスとアートボード
用語が2つ出てくるので整理します。手元の内部定義から確認できた構造です。
- キャンバス（design canvas）——全体の作業台。パン・ズームできる1枚の大きな面
- アートボード（artboard）——キャンバス上に並ぶ個々の画面。実体は
.dc.htmlという拡張子のファイル
1つのキャンバスに複数のアートボードを並べられるので、「ログイン画面・一覧画面・詳細画面」を横に並べて画面遷移ごと見渡すといった使い方ができます。Figmaのアートボードと同じ発想です。
内部定義には「すべてのキャンバスは最低1つのアートボードを必要とする」という制約も明記されていました。空のキャンバスは作れません。
編集できる範囲は「保存が有効かどうか」で変わる
ここは記事化されていない実務上の重要点です。内部定義によれば、体験が2段階に分かれます。
- 保存が有効なアカウント——要素をクリックして選択し、プロパティパネルで調整、テキストは直接編集、取り消し・やり直しも可能。保存すると新しいバージョンとして公開される
- 保存が有効でない場合——閲覧とエクスポート（PNG／PDF）のみのプレビューになる
つまり「その場で自由に手直しできる」体験は、保存が有効な環境が前提です。試して「編集できないじゃないか」となった場合は、この違いを疑ってください。
UIモックだけではない——印刷物やレポートも対象
意外に知られていませんが、内部定義が挙げている用途はUIに限りません。
- UIモックアップ・画面遷移——本来の主用途
- ランディングページ
- マーケティング用・SNS用のグラフィック
- 印刷物——ポスター、チラシ、パンフレット。これらは1枚もののアートボードとして作る
- メモやレポート——1枚の長いアートボードとして流し込む
中小企業の実務で考えると、チラシやA4資料のたたき台を出す用途のほうが出番は多いかもしれません。「エンジニア向けのUI設計機能」と決めつけると使い所を狭めます。
使う流れ——4ステップ
実際の操作は単純です。公式・報道が示している流れは次の4つです。
- ① 作りたい画面を言葉で説明する——「料金プランを3つ並べる画面」のように、機能や内容を書く
- ② 複数案が並んで出る——1案だけでなく、レイアウトの違う候補が横に並ぶ
- ③ 選んで手直しする——気に入った案を選び、テキストや配色をその場で調整する
- ④ そのまま実装させる——確定した案をもとに、Claudeにコードを書かせる
従来との違いは②と③です。「1案を出して気に入らなければ作り直す」ではなく、最初から複数案が並ぶので、方向性の比較が先にできます。デザインの良し悪しを言語化するのが苦手な人ほど、並べて選ぶ形式は決めやすいはずです。
手元の内部定義を見ると、アートボードはファイル名で個別に指定して扱える形になっていました。たとえば料金画面のアートボードだけを名指しして操作する、といった扱いが想定されているようです。複数画面を1つのキャンバスに並べたとき、どれを対象にするかを指定できるということです。
受け渡し——エクスポートの実際
作ったものを人に渡す段になると、エクスポートの仕様が効いてきます。手元で確認できた挙動は次のとおりです。
- アートボード単位でエクスポートする——キャンバス全体ではなく、画面ごとに書き出す形が基本
- PDFは1アートボードにつき1つ——内部定義に「1つのPDFを出力する」旨の記述があり、前述のとおりページ分割にはまだ対応していません
- PNGでも書き出せる——保存が有効でない環境でも、閲覧とエクスポートは可能
実務への影響は具体的です。「10画面のモックを1つのPDFにまとめてクライアントに送る」という使い方は、現時点では素直にできません。画面ごとにPNGで書き出して資料に貼る、あるいはキャンバスのページ自体を共有する、といった運用になります。提案書に組み込む前提なら、この制約を先に見ておいたほうがよいでしょう。
対象プランとリサーチプレビューの位置づけ
2026年8月時点の提供条件です。
- 対象プラン——Pro・Max・Team・Enterprise
- 提供形態——リサーチプレビュー。仕様が変わる前提で、粗さが残る段階だと公式に位置づけられています
リサーチプレビューという言葉は「試験公開」と読み替えて構いません。業務フローに組み込むより、まず触って感触を掴む段階です。本番の制作フローに載せるのは、仕様が固まってからのほうが安全です。
既知の制限
導入前に把握しておくべき制限が複数あります。公式・報道・手元の確認で一致しているものを挙げます。
- トークン消費が大きい——Claude Design由来の高コスト構造を引き継いでいます。複数案を生成する性質上、通常のコーディングより消費が嵩みます
- PDFエクスポートがまだページ分割しない——手元の内部定義に明記されていました。長い成果物を複数ページのPDFにする用途は現時点では期待できません
- 既存のコードスタイルに自動で合わない——生成されたコードが、あなたのプロジェクトの書き方に自動的に揃うわけではありません
- デザインシステムの自動適用は未確認——手動で参照させる運用が推奨されています
デザイントークンをCLAUDE.mdに書いておく
最後の点への実務的な対処として報道が挙げているのが、デザイントークン（色・フォント・余白の基準値）をCLAUDE.mdに数行書いておく方法です。主要カラー、本文フォント、余白のスケールをピクセルで書いておけば、生成される案の見た目が毎回ブレにくくなります。
CLAUDE.mdとsettings.jsonの役割分担については、こちらで詳しく整理しています。
デザイントークンの書き方——3行で足りる
報道が具体例として挙げているのは、CLAUDE.mdに3行だけ書くやり方です。難しい設定ではありません。
- 主要カラー——ブランドカラーとアクセントカラーを色コードで書く
- 本文フォント——使うフォント名を書く
- 余白のスケール——8px刻みなど、余白の基準をピクセルで書く
これだけで、生成されるアートボードの見た目が毎回ブレにくくなります。デザインシステムの自動適用が効くかどうかは未確認である以上、この3行が実質的な代替になるという位置づけです。自社サイトやサービスの色・フォントが決まっているなら、先に書いておく価値があります。
/design-sync との違い
Claude DesignとClaude Codeの連携には、以前から/design-syncという別の仕組みがあります。名前が似ているので混同されがちですが、方向が違います。
/design-sync——claude.ai/designで作ったデザインと、手元のコードを双方向に同期する。デザイン本体が主で、コードと往復させる仕組み/design（新）——Claude Codeのセッション内でUI案を作って、そのまま実装まで進める。コーディングが主で、デザインはその一部として発生する
すでにclaude.ai/designで本格的にデザインを作っている場合は/design-sync、コードを書いている途中で画面の見た目を決めたい場合は/design、という住み分けになります。/design-syncの詳細はこちらで解説しています。
この機能が出てきた背景
唐突に現れた機能に見えますが、下地はありました。Claude Designは2026年6月の更新で、見たまま編集できるキャンバス（WYSIWYG）を備えています。/designはその仕組みをClaude Code側に持ち込んだもので、技術的にはArtifactsの実行基盤の上に乗っています。
つまり新規に作られた別系統の機能ではなく、既にあるデザインキャンバスと、既にあるArtifactsの仕組みを、コーディングセッションから呼べるようにしたという構図です。前提①で触れた「成果物がArtifactとして公開される」のも、この出自から来ています。
背景を押さえておくと、今後の変化も読みやすくなります。Claude Design本体が進化すれば/design側にも波及する可能性が高く、逆に言えばいまの粗さの多くは「本体に追いついていない部分」と見ることもできます。
向いている仕事・向いていない仕事
ここまでの制限を踏まえて、現時点での適性を整理します。
- ⭕ 方向性を決めるためのたたき台——複数案が並ぶ利点が最も効く
- ⭕ 社内資料・チラシの下書き——印刷物が用途に入っている
- ⭕ 実装前の見た目の合意——コードを書く前に決めれば手戻りが減る
- ⭕ デザインツールを持っていないチーム——ゼロから何か出せること自体に価値がある
- ❌ 機密性の高い画面——成果物が公開される形になるため
- ❌ 複数ページのPDF納品——ページ分割に未対応
- ❌ 既存デザインシステムへの厳密な準拠——自動適用は未確認
- ❌ 本番フローへの固定的な組み込み——仕様が変わる前提のリサーチプレビュー段階
この整理は2026年8月時点のものです。リサーチプレビューである以上、❌の項目は今後解消される可能性があります。
実務でどう使うか
私が制作実務の目線で有望だと考えている使い方を挙げます。リサーチプレビュー段階であることを踏まえ、失敗しても損失が小さいところからという基準です。
- たたき台の量産——複数案を並べて出せるのが最大の利点なので、「ゼロから1案を magic に出す」より「方向性を絞るための3案」に使うほうが噛み合います
- 社内資料・チラシの下書き——印刷物が対象に入っているので、外注前のイメージ共有に使えます
- 実装前の合意形成——コードを書く前に見た目を確定させると手戻りが減ります。ただし関係者への正式な共有はclaude.ai/design本体のほうが向いています
逆に、現時点で向かないと考えるのは、機密性の高い画面（前提①のとおり成果物が公開される形になるため）、既存デザインシステムへの厳密な準拠が必要な案件、複数ページのPDF納品が前提の仕事です。
なお、AI生成のUIが「どれも同じ見た目になる」問題は/designでも起こり得ます。その対処は別のスキルの領分で、こちらで扱っています。
非エンジニアが使う場合の勘所
Claude Codeというとエンジニア向けの道具に見えますが、/designに限ってはコードを書かない人のほうが恩恵を受けやすい面があります。理由は3つあります。
- 成果物が「見えるもの」——コードと違い、出てきたものの良し悪しをその場で judge できます。AIの出力を評価できないという非エンジニア最大の壁が、ここでは低くなります
- 指示が日本語の説明で済む——デザインツールの操作を覚える必要がありません
- 印刷物が対象に入っている——チラシ・ポスター・A4資料は、多くの中小企業で日常的に発生する仕事です
一方で、注意点も同じところにあります。見た目が整っていることと、目的を果たすことは別です。出てきた案が綺麗でも、伝えたい情報の優先順位がずれていれば資料としては失敗します。AIが出した見た目に引っ張られて、載せるべき内容を後から削る——という順序の逆転が起きやすいので、何を伝えるかを先に決めてから/designを呼ぶのが実務のコツです。
よくある質問
無料プランでも使えますか？
使えません。対象はPro・Max・Team・Enterpriseです。
作ったデザインはローカルに保存されますか？
アートボードの実体は.dc.htmlファイルですが、キャンバス自体はArtifactとして公開される形になります。ローカルのみで完結する使い方を想定している場合は、この点を確認してから導入してください。
編集ができず、見るだけになってしまいます。
保存が有効なアカウントかどうかで体験が変わります。保存が有効でない場合は、閲覧とPNG／PDFエクスポートのみのプレビューになります。
claude.ai/designを使っていれば/designは不要ですか？
用途が違うので、不要とは言い切れません。関係者共有やデザインシステムを伴う本格的な設計は本体、コーディング中に画面の見た目を決めて実装まで進めたいときは/design、という使い分けになります。
トークン消費はどのくらい増えますか？
具体的な倍率は公表されていませんが、複数案を生成する性質上、通常のコーディングより消費が増えることは公式・報道とも既知の制限として挙げています。使用量の確認方法は普段どおりです。
生成されたコードはそのまま使えますか？
既存のコードスタイルに自動的に揃うわけではないと明示されています。たたき台として受け取り、プロジェクトの規約に合わせて整える前提で使ってください。
仕様は今後変わりますか？
変わる前提です。リサーチプレビューとして「コマンドの形が変わることを想定してほしい」と位置づけられています。業務フローに固定的に組み込むのは、仕様が安定してからをおすすめします。
まとめ
Claude Codeの/designについて、判断に必要な要点をまとめます。
- 2026年8月17日追加のリサーチプレビュー。編集可能なUI案を複数枚出し、選んで手直しし、そのまま実装まで繋げる
- 成果物はArtifactとして公開される——ローカル完結ではない。機密案件では要確認
- キャンバス＋アートボード（
.dc.html）構造。編集の自由度は保存が有効かどうかで2段階に分かれる - UIだけでなくLP・マーケ画像・チラシ・レポートも対象
- 対象はPro・Max・Team・Enterprise
- 制限はトークン消費・PDFの未ページ分割・既存コードスタイル非準拠。デザインシステムの自動適用は未確認
- claude.ai/design本体とは役割が違う。実装直結の軽量版と捉える
リサーチプレビューという段階を踏まえると、いまはたたき台づくりから試すのが現実的です。仕様が固まった段階で、制作フローのどこに置くかを改めて設計するとよいでしょう。
Claude Codeを「素のまま」使うな
設定で差がつく——CLAUDE.md・権限・スキルの実物を公開（全24ページ）
素のClaude Codeは"優秀な新入社員"。仕事を教えるほど、自分専用になります。覚えさせる4点セット——会社の説明書（CLAUDE.md）・権限の柵・手順書（スキル）・フォルダの地図——を、1人会社の実運用からコピペで使える型つきで公開します。
- そのまま書き換えて使えるCLAUDE.mdの型
- お金と送信をAIに触らせない「3段階の柵」
- 1回教えたら何度でも動く、手順書のコピペ雛形
- AIが迷子にならないフォルダ構造の3原則
受け取りページには、他にもこれだけ置いてあります
＋6PDF 10点・合計266ページ ＋ すぐ使えるzip素材 3点
どれも登録後の受け取りページから、まとめてダウンロードできます。
毎週金曜の無料ニュースレター「まるごとAI経営」の購読特典です。メール登録後すぐ、受け取りページのご案内が届きます。そこにはこの資料に加えて、過去の特典もすべてまとめて置いてあります。あわせて、AI活用に関するお知らせやお役に立てそうなご案内をお送りすることがあります。解除はいつでも1クリック。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。