ClaudeCode、"見た目"はClaudeDesignに任せられます

2026年9月24日 22:24

文章の提案文や企画書の中身は、もうClaudeCodeにだいぶ任せられるようになった。なのに、クラウドワークスに添付するLPやワンページャー、本業の企画書の体裁だけは、相変わらずCanvaやPowerPointを開いて自分の手で作っている——そんな感覚はないでしょうか。

前作「ClaudeCode、インストールしただけで止まっていませんか？」「外部連携（MCP）」「裏コマンド」を読んでくださった方は、もうターミナルへの抵抗感はないはずです。実はもう一つ、新しいサービスに登録し直さなくても、ターミナルから一歩も出ずに試せる機能が増えていました。それが今回扱う/designです。

このnoteでわかること

Claude Designの正体（ClaudeCodeの一部ではありません）
ClaudeCodeユーザーが/designコマンドだけで試せる理由と、混同しやすい/design-syncとの違い
始める前に確認すべき3つの前提（プラン・バージョン・料金）
副業の提案資料・本業の資料作成・SNS投稿ビジュアルという3つの具体的な使い道（実際に生成したサンプル画像つき）
逆に、Claude Designに向いていないこと（実際に試してわかった限界）

本記事は2026年9月8日時点の情報です。Claude Designはまだ「研究プレビュー」段階のため、今後仕様が変わる可能性があります。その前提で読み進めてください。

そもそもClaude Designって何？（ClaudeCodeの一部ではありません）

先に誤解を訂正しておきます。Claude Designは、ClaudeCodeに組み込まれた一機能ではありません。Anthropic Labsが2026年4月17日に公開した、claude.ai/designという独自URL・独自のキャンバス・独自のエクスポート機能を持つ、切り出された別プロダクトです。使用モデルはClaude Opus 4.7。

厳密に言うと、ClaudeCode公式ドキュメントには「/designで作ったキャンバスは、Claude Designのエディタ（研究プレビュー版）を動かすArtifactとして公開される」と明記されています。つまり技術的には、Artifacts基盤の上にClaude Design専用のキャンバスエディタが載っているという位置づけが正確です。「ClaudeCodeの新機能」ではなく「別プロダクトだが、ClaudeCodeから繋がる」と覚えておくと、この先の話が理解しやすくなります。

できることは、1枚のキャンバス上に複数の「アートボード」（レイアウト違いの案など）を並べて生成・比較すること。2026年6月のアップデートで、キャンバス上の要素をクリックして直接ドラッグ・リサイズ・整列する編集機能も加わりました。

公式が挙げている用途は、プロトタイプ作成、プロダクトのワイヤーフレーム・モックアップ、複数方向性のデザイン案の一括生成、ピッチデック・プレゼン資料、マーケティング素材（LP・SNS用ビジュアル）、履歴書・ワンページャーなどのドキュメント生成と幅広いのですが、正直このリストだけを見ても「自分に関係あるのか」はピンと来ないと思います。次の章から、ClaudeCodeユーザーとしてどう関わってくるかを具体的に見ていきます。

ClaudeCodeユーザーなら/designだけで試せます（claude.ai/designを開かなくていい）

Claude Designには2つの入口があります。

入口A：ブラウザ版入口B：ClaudeCode CLIから始め方claude.ai/designにアクセスし、プロジェクト作成→デザインシステム添付→チャットで指示ターミナルで/designに続けて作りたいものを書くだけ例（手順を踏んでプロジェクトを準備）/design モバイル銀行アプリの設定画面その後キャンバス上で調整を繰り返し、エクスポート・共有アートボードがArtifactとして公開されURL表示。気に入った案があれば「この案で実装して」とそのままClaudeCodeに伝えられる

前3作を読んでClaudeCodeを使い慣れた方にとって刺さるのは、圧倒的に入口Bです。新しいアカウント登録も、新しいUIを覚える手間もなく、いつものターミナルで/designと打つだけで始まります。公開されたURLを開くと、「保存」が有効なアカウントでは要素をクリックして直接編集・保存もできますが、無効な場合は閲覧とPNG/PDFエクスポートのみになります。いずれにせよ、生成されたデザインが気に入れば、そのままClaudeCodeに「この案で実装して」と伝えて実装まで繋げられるのが、ブラウザ版にはない入口Bならではの利点です。

注意：/designと/design-syncは別物です。名前が似ているため混同されがちですが、/designは今回紹介しているアートボード生成コマンドです。一方/design-syncは、デザインシステムをGitHubリポジトリ等からClaude Designに取り込む・ClaudeCodeで作ったUIをClaude Design側に押し戻す、というデザインシステム同期に特化した別コマンド（2026年6月リリース）です。今回のnoteで扱うのは前者の/designのみなので、この2つを混同しないよう覚えておいてください。

補足：似たツールとの違いが気になる方向けに
通常のArtifactsにも「見た目を自動で整える」機能はありますが、これは1枚のWebページの体裁を整えるものであり、複数アートボードを比較できるClaude Designとは別物です。またCanvaとは競合ではなく提携関係で、Claude Designで作ったドラフトを「Canvaへ書き出す」と編集可能なCanvaファイルとして引き継げます（Adobe・Figma・Gamma等への書き出しにも対応）。Figmaのようなピクセル単位の手動操作が主軸のツールとは異なり、あくまで「文章で指示→初版をClaudeが作る」生成ベースのワークフローが軸です。ここは深掘りせず先に進みます。

始める前に確認したい3つの前提（プラン・バージョン・料金）

試す前に、次の3点は必ず押さえておいてください。

1. Freeプランは対象外です
Claude Designが使えるのはPro・Max・Team・Enterpriseプラン。Freeプランでは利用できません。

2. ClaudeCode側のバージョン要件
/designを使うにはClaudeCode v2.1.234以降が必要で、かつそのセッションでArtifactsが有効であること（claude.aiアカウントでの/login認証が前提で、Bedrock/Vertex/Microsoft Foundry経由では非対応）が条件です。

3. 料金は追加課金ではなく、共有プールを消費します
Claude Design専用の課金枠は存在しません。チャット・ClaudeCode・Coworkと同じ利用枠（プラン共有プール）を消費する仕組みです。つまり「Pro以上に入っていれば追加費用なしで試せる」一方、大規模なデザイン生成をすればその分、他の用途に使える枠が減る点は意識しておく必要があります。

会社員・副業目線で使えそうな3つの場面

副業の提案資料・ポートフォリオ作り

クラウドワークス等での提案文はClaudeCodeで時短できても、添付するLP・ワンページャーの「見た目」だけは、これまでCanvaやPowerPointを別途開いて作る必要がありました。/designなら、/design ○○向けの提案書ワンページャーのように一言指示するだけで、複数のレイアウト案を一つのキャンバスにまとめて生成してくれます。気に入った案があれば、そのままClaudeCodeに「この案で実装して」と伝えて形にできる点が、従来のツール切り替えとの一番の違いです。文章はAIに任せられるのに見た目だけ手作業、というモヤモヤを解消できる使い道として、まず試すならここがおすすめです。

実際に/design SNS運用代行の提案書ワンページャーのように指示して生成したサンプルがこちらです。

課題の整理→提案内容→スケジュール→料金、という提案資料の型そのものを一度に組んでくれるので、あとは中身（クライアント名や金額）を差し替えるだけの状態から始められます。

本業の資料作成の時短

企画書やピッチ資料のたたき台作りに、毎回30分〜1時間かかっている方も多いはずです。アウトラインを/designに渡すだけで、体裁込みの叩き台を数分で生成できます。本業側の資料作成が時短できれば、その分、平日夜の副業に使える時間の捻出にも直結します。

こちらは「Q3振り返りと次の一手」という定例会議向けの1枚スライドを想定して生成したサンプルです。

現状・課題・次の一手を3カラムに分けるという、よくある構成をゼロから手で組む手間がなくなります。数値はもちろんダミーなので、実データに差し替えて使うイメージです。

SNS投稿用ビジュアルの下書き

Threads・Instagram用のカルーセル台割やバナー案を、複数アートボードで一括生成し、気に入った方向性だけCanvaに書き出して微調整する、という分業もできます。ただしこの使い道は、SNS運用側の世界観との相性を見ながら試すのが良いと思うので、あくまで選択肢の一つとして覚えておく程度で十分です。

3枚構成のカルーセル台割を/designで一括生成した例が以下です。

表紙・本編・CTAという台割の骨格を1枚のキャンバス上で見比べられるので、投稿前に「流れとして自然か」を確認しやすいのが利点です。

逆に、Claude Designが苦手なこと

ここまで良いことばかり書きましたが、フェアに書くと苦手なこともあります。「イラストを描いて」「写真風の画像を作って」という、絵そのものを生成する用途には向いていません。

実際に自分のInstagram投稿用イラストを/designで試したことがあるのですが、出てくるのはSVG図形を組み合わせた素朴なフラットイラストで、ChatGPT（DALL-E系）のような絵的な仕上がりには及びませんでした。Claude Designが得意なのは、あくまで「情報を構造化して、レイアウトに落とし込む」こと（資料・ダッシュボード・カルーセルの骨格など）で、一枚絵としてのイラストや写真風のビジュアルが欲しい場合は、ChatGPTなど別の画像生成AIを使う方が、期待した仕上がりに近づくと思います。この使い分けを最初に知っておくと、「思ったのと違った」という無駄な往復を減らせます。

まとめ

Claude DesignはClaudeCodeとは別プロダクトですが、/designコマンドを使えばターミナルから一歩も出ずに試せます
/design（アートボード生成）と/design-sync（デザインシステム同期）は別コマンドなので混同注意です
Freeプランは対象外、ClaudeCode v2.1.234以降が必要、料金は追加課金ではなく既存プランの共有プールを消費します
得意なのは資料・ダッシュボード・カルーセルなど「構造化されたレイアウト」で、イラストや写真風の一枚絵を作りたいだけならChatGPT等の画像生成AIの方が向いています
まず1つだけ試すなら、副業の提案資料・ポートフォリオ作りから始めるのが一番効果を実感しやすいはずです

改めての念押しですが、Claude Designは現時点ではまだ「研究プレビュー」段階の機能です。2026年4月の公開以降、6月・8月と短期間で仕様変更が続いており、この記事の内容も今後変わる可能性があります。実際に試す際は、公式ドキュメントの最新情報もあわせて確認していただくのが確実です。

このnote、参考になったという方は、スキ・フォローをいただけると励みになります。実際に/designを使ってみた方は、どんな場面で使ったかコメントで教えてください。今後、実際に使ってみた検証記録や、/design-syncの実践編を出すかもしれません。

ClaudeCodeのインストール・料金プラン・基本の使い方がまだの方は、まずこちらのnoteをどうぞ。

#ClaudeDesign #design #ClaudeCode #ClaudeCode使い方 #ClaudeCode初心者 #ClaudeCodeでできること #Artifacts #designsync #生成AI #AIツール #AI活用 #AI副業 #副業 #会社員の副業 #業務効率化 #資料作成 #提案書 #ポートフォリオ #プレゼン資料 #デザイン生成AI #ノーコード #Canva連携 #Anthropic #Claude #note