Claude Code に/design 爆誕！使い方を徹底解説

2026年8月、Claude Codeに新しいスキル「/design」が追加され、ターミナルやデスクトップアプリの「/design 作りたいデザイン」でデザイン作成ができるようになりました。

/designスキルは、Claude Designに相当する機能をClaude Codeの中に持ってきたもので、デザインの作成から修正、実装までを1つのセッションで完結できるようになったのが最大のポイントです。

本記事では、Claude Codeの新スキル「/design」の使い方と注意点について、実際にランディングページを作る流れに沿ってわかりやすく解説します。

YouTubeチャンネルでAI&Web活用術を配信中！

新しいコンテンツや、より詳細な解説を動画やショート動画でお届けしています。日々の情報収集にお役立てください。

Claude Codeの新スキル「/design」とは？

コマンド1行でデザインを作れる新機能

/designは、Claude Codeの中からデザイン作成機能を呼び出せる新しいスキルです。使い方はとてもシンプルで、プロンプトの入力欄に「/design」と入力し、そのあとに作りたいものを続けて書くだけです。

これだけで、Claudeがデザインを作成し、Webブラウザ上のデザインキャンバスとして確認できる状態にしてくれます。

デスクトップアプリやCLIのバージョンが古いと、この機能がうまく動かない場合があります。上手く動かない場合はアプリまたはClaude Codeを最新版にあげて再起動後試してみてください。

※なお、現在はリサーチプレビュー（試験公開）の段階です。ブラウザ版のClaude Designと比べると、マルチ画面のフロー設計や各種エクスポート形式など、機能落ちしている部分が見受けられます。今後、仕様変更や機能の追加・変更が行われる可能性があります。

デザインはCode＞アーティファクトに保存される

/designで作成したデザインは、「アーティファクト」という仕組みの上で生成されます。アーティファクトとは、Claudeの成果物をURL付きのWebページとして公開する仕組みのことです。

Claude Designのプロジェクト一覧には成果物はありませんので間違わないように注意しましょう。

キャンバスとClaude Codeが双方向で同期する

ブラウザのアーティファクト画面から指示を出すと、Claude Code側にも同じ処理内容が反映されます。

逆に、Claude Codeのセッションから「案Bを採用します。他は削除して」のように指示すれば、アーティファクト側のキャンバスにもその結果が反映されます。

どちらの画面から指示を出しても内容が連携されていることが大きな特徴です。

Claude Codeのセッションが迷子になったときはアーティファクトのデザインを開いて、「セッション」の項目をクリックすると、以前/designで指示したClaude Codeのセッションを開くことができます。

ターミナル（CLI)で/designを利用する場合

ターミナル（CLI)の場合でも同様に、/designを利用できます。

/designを実行すると成果物のデザインはWebブラウザでhttps://claude.ai/code/artifact/ から確認することができます。

対象プランと提供状況

/designおよびアーティファクト機能は、有料プラン限定の機能です。個人向けプランの場合はPro・Maxプランが対象で、無料プランでは利用できません。

まとめ

ここまでのまとめです。

今回はClaude Codeに新しく追加された/designスキルについてご紹介しました。

これまでClaude DesignとClaude Codeの連携で手間だった部分が、今回のアップデートで大きく使いやすくなりました。使い方自体は非常に簡単なので、ぜひ一度/designを試してみてください。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。