Claude Designとは何か
Claude Designは「Anthropic Labs」のリサーチプレビュー製品です。私たちが知るClaudeチャットが「文章で答えるAI」なら、Claude Designは「見える成果物を作るAI」です。プロンプト（依頼文）を渡すだけで、ウェブサイトのモックアップ、クリックできるプロトタイプ、プレゼン用スライド、広告レイアウト、履歴書や契約書のようなドキュメントを画面上に直接描いてくれます。
動かすのはClaudeのフロンティア（最上位）モデルで、本稿が参照するチュートリアル時点ではOpus 4.8が動いています。別のデザインソフトを学ばなくても、いつもClaudeに話しかけるように依頼すれば結果が出る——それが核心です。
重要な区別が一つあります。Claude Designは「デザインとモックアップ」を作るツールです。そのモックアップを実際に動くコードに変え、インターネットに載せる（デプロイ）のは、後で扱うClaude Codeが引き継ぎます。二つは対になりますが、同じものではありません。
どこで、どう始めるのか
まずClaudeアカウントと有料購読が必要です。Claude Designは現在リサーチプレビューのため、Pro・Max・Team・Enterpriseの購読者に開かれています。claude.aiにアクセスしてログイン（Googleアカウントなどで登録可）するのが出発点です。
入口は二つあります。一つはウェブブラウザです。claude.aiに入り、左上のサイドバーを開くと「Claude Design」の項目が見え、そこから直接開けます。
もう一つはClaudeデスクトップアプリです。画面を広く使えるため、チュートリアルの作者が勧める方法でもあります。左下のダウンロードボタンから自分のOS（macOS・Windows）用アプリを入手してインストールし、ログインすると、左下に「Design」ボタンが現れます。押すとClaude Designが別ウィンドウで開きます。
初めて開くと、いくつかのサンプルデザインが見えることもあれば、空白の画面のこともあり、人によって違います。慌てず、次のステップ「デザインシステムを作る」から始めれば大丈夫です。
なぜ「デザインシステム」を先に作るのか
Claude Designで何を作るにせよ、最初の一歩は「デザインシステム」です。デザインシステムとは、一つのブランドの視覚ルールを一か所にまとめた束です。どのフォントを使い、どの色を使い、ロゴはどんな形で、ボタンやカードといった要素がどんな形かを決めておく「ブランドの手引き」だと思ってください。
先に作る理由は一貫性です。デザインシステムを決めておけば、以後に作るウェブサイト・スライド・広告がすべて同じフォントと色で出ます。毎回ブランドを説明し直す必要がなくなります。
作り方はいろいろあります。すでにコードやデザイン資産があるなら、GitHubリポジトリのURLを貼る、自分のPCのコードフォルダを指定する、Figmaファイルをつないでそのスタイルを読ませる、といった方法があります。何もなければ、会社名と一〜二文の紹介だけ与え、フォントと色はClaudeに尋ねて候補をもらえばよいのです。実際にClaudeチャットで、合うGoogleフォントの組み合わせと配色をプレビュー付きで提案してと頼めば、選べる案をくれます。
ロゴがなければ、ロゴは別の画像生成ツールで先に作って入れます。チュートリアルでは、作者がAnthropic以外のサードパーティ製ツールで、拡大しても崩れないSVGロゴを作ってドラッグして入れていました。この部分はClaude Designの機能ではなく作者の選択だ、という点だけ覚えておけば十分です。ロゴ画像はどのツールで作っても構いません。
情報をすべて入れて生成を押すと、数分後にブランドガイドが完成します。ロゴのバリエーション、配色、ボタン・カード・フォームなどの要素が整理された、いつでも編集できる「生きたドキュメント」が出てきます。気に入ったら「公開（published）」状態に切り替え、望むなら既定のデザインシステムに指定して、以後すべての作業に自動適用できます。
この会社に合うGoogleフォントの組み合わせを4つ提案して。
見出し用と本文用を対にして、ありきたりでなく、かといって奇抜すぎないもので。
各組み合わせのプレビューも一緒に見せて。
（フォントを選んだあと）
信頼感がありつつ、地元の小規模事業らしさを残す配色を4つ提案して。実際に一枚のウェブサイトを作ってみると
デザインシステムを作ったら「New design（新規デザイン）」を押し、今作ったデザインシステムを選んで、何を作るか文章で説明します。たとえば、上部に無料見積もりフォームのあるランディングページ、ファーストビュー（ヒーロー）領域、サービス欄、地域欄、下部に同じフォームをもう一度、そして上部ナビ、という具合です。
Claude Designはプロンプトを受け取ってもすぐには作らず、まず聞き返します。「サービス項目は何にしますか？」「電話番号は？」「強調する信頼指標は？」「見積もりフォームに入れる項目は？」といった質問に答えると、その答えを反映してサイトを組み始めます。この先に確認する手順のおかげで、見当違いが減ります。
作っている間は「tweaks（調整）」パネルが出ます。コードを知らなくても、フォーム位置（右／下）、フォームの見た目（インライン／カード）、見出しの文言、全体のトーン（控えめ／バランス／大胆）を、スライダーやボタンでその場で変えて試せます。画面右上のbreakpoint（デスクトップ・タブレット・モバイル）切り替えで、端末ごとの見え方も先に確認できます。
画像が入る場所は斜線のプレースホルダーで空けておき、各場所にどんな画像を入れるとよいか、プロンプトと必要な比率（例：16:9）までClaudeが一緒に教えてくれます。そのプロンプトで画像を作り（画像生成もやはり別ツールを使います）、番号に合わせてドラッグして入れると、Claude Designが所定の位置に配置します。
うちのデザインシステムを使って、一枚のランディングページを作って。
- ファーストビュー：右に無料見積もりフォーム＋左に会社紹介（地域密着・信頼）
- サービス欄／地域欄／一番下に見積もりフォームをもう一度
- 上部ナビ（サービスはドロップダウン）
画像の場所は空けておき、各場所に入れる画像プロンプトと必要な比率も一緒に教えて。ウェブサイトだけではない——広告・スライド・ドキュメント
Claude Designの成果物はウェブサイトだけではありません。始めるときに選ぶテンプレートによって種類が変わります。
「animation（アニメーション）」テンプレートを選ぶと広告スタジオが出ます。Instagram・Facebookなど各広告規格に合わせ、テキストの重ね、イントロ・アウトロのモーション、色や文言を調整するダッシュボードを作ってくれます。ただし広告に入る背景の動画や画像そのものはClaude Designが作るのではなく、別の生成ツールで作って入れる必要があります。Claude Designは、その素材を載せる「広告の枠と動き」を組んでくれます。
「slides（スライド）」テンプレートはプレゼン資料を作ります。たとえば製品の色や仕様を載せた提案用デッキを、画像プレースホルダー付きで組んでくれます。仕上がりはPPTX（PowerPoint）に書き出せるので、タブレットに入れて客先でそのまま見せられます。
「document（ドキュメント）」テンプレートは、契約書や提案書のような文書をブランドのトーンで作ります。顧客名や項目など、変えるべき箇所をプレースホルダーとして残すので、毎回値だけ差し替えて使いやすく出ます。（法的効力が必要な文書は当然、専門家の確認が要ります。）
まとめると、一つのデザインシステムの上で、ウェブ・広告・プレゼン・文書までを同じブランドで出す——これがClaude Designの狙いです。
仕上げたデザインをClaude Codeに渡してコードとデプロイへ
ここまでは「見えるデザイン」です。これを実際にインターネットに載せて動かすには、Claude Codeが必要です。Claude Codeは、命令でコードを書いて実行するAIコーディングツールです。
渡し方は簡単です。Claude Designの成果物で「Share（共有）→ Send to Claude Code（Claude Codeへ送る）」を使うと、貼り付け用のプロンプトが出ます。これをClaude Codeに貼ればよいのです。デザインシステムも同じやり方で渡せますし、Claude Codeの中で/design-syncコマンドを使ってデザインシステムをやり取りすることもできます。
そこから先はClaude Codeの仕事です。渡された各デザインを一つのコードリポジトリに整理し、ウェブサイトは実際にデプロイし、ドキュメント・スライド・広告を作る繰り返し作業を再利用できる「スキル」としてまとめられます。チュートリアルでは、こうして作ったサイトをホスティングサービスに載せて実アドレスで公開し、管理者だけがログインして受け付けた見積もりを確認するところまで進めていました。このデプロイと組み立ての部分は、Claude DesignではなくClaude Codeがやったことだと覚えておいてください。
核心の価値はこれです。Claude Designは速いプロトタイプを、Claude Codeはそれを保守・拡張できる本物のコード資産に変えてくれます。デザインが一枚の絵で終わらず、コードとして残ります。
なぜこれが重要か——SH Consultingの視点
かつては一つのブランドを立ち上げるだけで、デザイナー、ウェブ開発者、動画編集者、文書担当がそれぞれ付いていました。Claude Designはこれらの役割を、一人の会話の流れの中に引き込みます。デザインシステムを一式決めておけば、ウェブ・広告・プレゼン・文書が同じ手先から出てきます。
とりわけ小規模事業者や一人社長にとって意味が大きいです。代理店に頼む予算がなく先延ばしにしていたブランド整備を、いまや代表一人が週末に初稿まで仕上げられます。完璧な最終版ではなく、「手直しできる出発点」が数時間で手に入ることこそが、本当の変化です。
ただし、ツールを起動すれば終わりではありません。何を作るかを判断し、出てきた結果をブランドに合わせて整え、コード資産として残すかを決めるのは、依然として人の仕事です。SH Consultingが見ているのはここです。問いを「どのデザインツールを買うか」から「自社のブランド制作プロセスをどう組み直すか」へ変えること。ツールはすでに十分に強く、勝負はそれを業務フローのどこに差し込むかで決まります。