Claude Code「/design」始動|デザインが手元の能力に

[最終更新]

Googleで優先するソースとして追加するボタン

「/design」というコマンドは、2026年6月の時点で Claude Code にすでにありました。それでも Anthropic は8月17日、「Claude Code がデザインできるようになった」と改めて告げています。同じ名前で、何が変わったのでしょうか。答えは、発表文にある「artifacts」というひと言に隠れています。


Anthropic は2026年8月17日、Claude Code に新しい「/design」スキルを追加したと公式Xで発表した。ステータスはリサーチプレビュー。Claude Design のアートボード・ワークフローを CLI とデスクトップアプリに持ち込むもので、Artifact を基盤に実装されている。「/design」を実行すると UI 用の編集可能なアートボードが得られ、ひとつを選んで手を入れ、そのまま Claude に実装させる流れになる。

Claude Design は2026年4月17日に発表され、6月17日の大型アップデートで Claude Code との双方向連携が加わっていた。公式ドキュメントと変更履歴への反映は、8月19日時点ではこれから進むところにある。

From: 文献リンクClaudeDevs on X「Claude Code can design now.」

【編集部解説】

「/design」というコマンド自体は、初めて現れたものではありません。2026年6月17日の大型アップデートで、Claude Code のターミナルから「/design」を打つことはすでにできました。ただしそのときの「/design」は、claude.ai 上の Claude Design にあるデザインプロジェクトを、ターミナルを離れずに作成・編集・同期するためのものでした。手元で動くのはコマンドで、デザインそのものは向こう側にありました。

今回の発表が示したのは、そのアートボード・ワークフローごと Claude Code の内側に入ってくるという変化です。中身は、Claude Code に同梱されているスキルの説明から具体的に読み取れます。「/design」を実行すると、複数のアートボードが1枚のパン・ズーム可能なキャンバスとして組み上がります。ファイルの実体は .dc.html で、手元のプロジェクトに書き出されます。キャンバスの上では、Claude Design のキャンバスエディターがそのまま動きます。

実装の選び方が、この発表のいちばん興味深い部分です。発表文は「built on artifacts」と書いています。デザイン機能を、新しいプロダクト面としてではなく、既存の出力基盤の一用法として実装した。発表文のこのひと言からは、そう読み取れます。

Artifact は、Claude Code が作業の成果を claude.ai 上のライブページとして公開する仕組みです。既定は非公開で、共有は明示的な操作を必要とし、公開のたびにバージョンが積み上がります。デザインキャンバスが、その上に載ります。ということは、共有も、版の管理も、組織単位の権限も、すでに敷かれていた配管に相乗りできることになります。新しい機能のために新しい土管を掘らない。そういう選び方が見えてきます。

体験は、保存が使えるかどうかで二つに分かれます。保存が有効なアカウントでは、要素をクリックして選び、プロパティパネルで値を調整し、テキストはその場で書き換えられます。undo と redo も効きます。Save を押せば新しいバージョンが公開され、そのキャンバスを見ている全員に届きます。保存が有効でない場合は、閲覧と、PNG または PDF への書き出しに限られます。同じコマンドを打っても、返ってくるものが違います。

日本の開発現場に引きつけて考えると、意味がはっきりします。専任のデザイナーを置けるチームばかりではありません。多くの現場で UI の細部は、実装しながら「なんとなく」決まっていきます。「/design」が効くのは、Figma のような専門ツールを置き換える場面よりも、この「なんとなく」を目に見える形にする場面だと私は見ています。案を並べて選ぶ、手を入れる、実装させる。その3手が、ターミナルから出ずに終わります。

守備範囲も UI に限りません。画面フローやランディングページに加えて、ポスター、チラシ、パンフレット、1枚もの、報告書までが想定用途に入っています。Claude Design が web の側で扱ってきた領域が、そのまま開発者の手元へ降りてきた形です。

一方で、リサーチプレビューという言葉どおり、公表されている情報はまだ多くありません。8月19日の時点では、公式ドキュメントのコマンド一覧やスキルのページ、そして8月17日に公開された v2.1.234 の変更履歴への反映は、これから進むところです。対象プランや提供範囲も、これから示される段階にあります。ここまで挙げたキャンバスの仕様も、公式ドキュメントではなく、製品に同梱されたスキルの説明文を典拠にしています。土台である Artifact 側の要件(Pro・Max・Team・Enterprise の各プラン、/login 済みのセッション、Anthropic の API に直接つながる構成)がそのまま効くと考えるのが自然ですが、これは公式の裏づけがある話ではありません。6月の「/design」との関係も、置き換わったのか併存するのか、まだ説明されていません。

こうした空白は、この段階ではむしろ順当です。Claude Design 自身も4月17日にリサーチプレビューとして出て、いまはベータの表示に変わりました。機能が先に届き、文書があとから追いつく。更新が週に数回という速度で回っている製品では、その順序は避けがたいものです。

Claude Code は、コードを書く道具として始まりました。そこにデザインのキャンバスが加わったことは、単に機能がひとつ増えたという話にとどまりません。デザインが、出向いて使う場所から、手元で呼び出せる能力へ移りつつあります。文字を打ち込むという、半世紀を超えて変わらない入口が、いま何を受け取れるのか。その輪郭が、また一段広がりました。

【関連記事】

Claude Design大型アップデート|デザインシステム連携とClaude Code双方向統合で「変換の損失」に挑む
2026年6月の大型アップデートを扱った記事。デザインシステム連携とClaude Codeの双方向統合について解説している。

Claude Design始動─Anthropicがデザインツール市場に参入、Claude Opus 4.7が下支え
Claude Design発足時の記事。Anthropicがデザインツール市場へ参入した経緯と、その背景について扱っている。

Anthropic「Claude Code」はこうして生まれた|16人の証言でたどる誕生から普及まで
Claude Codeの誕生から普及までを、開発に関わった16人の証言でたどった記事。本記事と同じ書き手による長編である。

【編集部後記】

Artifact のドキュメントに、小さいけれど見過ごせない一節があります。Claude は、プロジェクトに既存のデザインシステムがあれば、それを自分の選択より優先する。色とフォントと余白を CLAUDE.md に書いておくだけでいい、と書かれています。

つまり「/design」に何かを頼む前に、こちらが決めておくべきものがある。道具が賢くなるほど、決めているのは誰かが問われます。あなたのリポジトリに、その3行はありますか。


【用語解説】

スキル(Skill)
Claude Code の機能を拡張する仕組み。手順書を書いたフォルダを置くと、Claude がそれを道具として使えるようになる。「/名前」で直接呼び出すこともできる。今回の「/design」は、この形で提供されている。

リサーチプレビュー
Anthropic が新機能を試験的に公開するときの段階名。正式提供の前に置かれ、仕様や提供範囲が変わることを前提とする。Claude Design 自身も、この段階を経てベータへ移った。

アートボード
デザインツールで、1つの画面や1枚の紙面を表す作業領域。複数のアートボードを1枚の広い平面(キャンバス)に並べ、拡大・縮小や移動をしながら全体を見渡す使い方が一般的である。

Artifact
Claude Code が作業の成果を claude.ai 上のライブページとして公開する仕組み。1枚完結のページで、既定は非公開。公開するたびにバージョンが積み上がる。今回のデザインキャンバスは、この上で動く。

CLI(Command Line Interface)
文字を打ち込んでコンピュータを操作する方式、およびその画面。ターミナルとも呼ぶ。マウスで操作する GUI と対をなす。

.dc.html
「/design」が書き出すアートボードのファイル形式。実体は HTML で、手元のプロジェクトに置かれる。

変更履歴(CHANGELOG)
ソフトウェアの版ごとに、追加・修正された点を列挙した文書。Claude Code は版を公開するたびに更新している。

【参考リンク】

Anthropic(外部)
Claudeを開発する米国のAI企業。AIの安全性研究を掲げ、Claude CodeやClaude Designなどの製品を展開している。

Claude Code(外部)
ターミナルやデスクトップアプリで動くコーディングエージェント。コードベースを読み、ファイルを編集し、開発作業を代行する。

Claude Design(外部)
Anthropicのデザインツール。会話でキャンバス上にデザインを生成し、要素を直接編集できる。2026年8月時点はベータ提供。

Figma(外部)
ブラウザ上で動く共同編集型のデザインツール。UIデザインにおける標準的な選択肢として、世界中の開発現場で長く使われている。

【参考記事】

Introducing Claude Design by Anthropic Labs(外部)
2026年4月17日のClaude Design発表。Claude Opus 4.7を基盤とし、リサーチプレビューとして提供すると述べる。

Claude Design now stays on brand for daily work(外部)
2026年6月17日の大型アップデート。この時点の「/design」がプロジェクトの作成・編集・同期用だったことがわかる。

Share session output as artifacts(外部)
Artifactの公式ドキュメント。既定は非公開で、公開のたびにバージョンが積み上がる仕組みと、必要な条件を説明している。

Claude Code changelog(外部)
版ごとの変更点をまとめた文書。v2.1.234が2026年8月17日に公開されたことと、更新の頻度の高さが確かめられる。

Get started with Claude Design(外部)
Claude Designの使い方。「/design-sync」によるデザインシステムの取り込み手順などが説明されている。

Googleで優先するソースとして追加するボタン
投稿者アバター
山本 達也 代表社員
合同会社デジタルの窓口 代表。ウェブ解析士。生成AI・サイバーセキュリティ・ 宇宙開発領域を中心に執筆。

関連記事