Claude Design を
ゼロから使えるようになる
チャットで会話しながら、デザイン・プロトタイプ・資料を作る Claude の新機能。専門知識ゼロでも、この順番どおりに読めば最初の1枚が作れます。
1Claude Design とは？
「絵を描くソフト」ではなく「お願いするとデザインしてくれる相棒」です。
Claude Design（クロード・デザイン）は、Anthropic（アンソロピック／Claude を作っている会社）が2026年4月に公開したデザイン機能です。マウスでパーツを並べて作るのではなく、「こういうものが欲しい」と言葉で伝えると、Claude が画面を作ってくれます。
こんなものが作れます
画面は左がチャット欄、右が「キャンバス」（作品が表示される場所）の2つに分かれています。あなたが左で話しかけると、右にデザインが現れ、会話を重ねるたびに少しずつ理想に近づいていきます。
2まず覚える用語
この5語だけ知っておけば、あとの説明がスッと入ります。タップで開きます。
キャンバス（Canvas）
プロンプト（Prompt）
プロトタイプ（Prototype）
デザインシステム（Design System）
エクスポート（Export）／ハンドオフ（Handoff）
3使える条件・始め方
「誰が使えるか」と「どこから入るか」を確認しましょう。
| 項目 | 内容 |
|---|---|
| 利用できるプラン | Pro / Max / Team / Enterprise（有料プラン）。現在はベータ版（試験公開）です。無料プランでは使えません。 |
| 入口（アクセス方法） | ① ブラウザで claude.ai/design を開く ② または Claude デスクトップアプリのサイドバーから |
| 使える端末 | パソコン（Web・デスクトップ）のみ。スマホ非対応です。 |
| 料金の考え方 | チャットや Claude Code と共通の利用枠から消費されます。Design 専用の追加料金はありません。大きく複雑なものほど多く消費します。 |
| Enterprise の注意 | 初期設定ではオフになっています。管理者に有効化を依頼してください。 |
claude.ai/design を開く → 新しいプロジェクトを作る。これだけで準備完了です。4最初のデザインを作る
いちばん大事な「基本の流れ」。実はたった4ステップです。
- 新しいプロジェクトを作るチームのデザインシステムが設定済みなら、色やフォントが自動で引き継がれます。何もなくてもOK、そのまま進めます。
- 欲しいものを言葉で伝える（プロンプト）「何を・どんな配置で・何を載せて・誰向けか」を一文で。例は下の枠を「コピー」して使ってみてください。
- キャンバスの結果を見る右側に最初のデザインが現れます。完璧でなくてOK。ここから育てていきます。
- 会話や直接編集で仕上げる「もっと暗い配色に」「ここを大きく」と伝えるたびに改善されます（詳しくは6章）。
そのまま使えるプロンプト例
新しいAI翻訳アプリのランディングページを作って。ヒーローセクション（キャッチコピー＋登録ボタン）、機能を3つ並べた紹介、料金プラン、お客様の声、フッターを縦に配置して。明るく信頼感のある配色で、対象は中小企業の担当者。
月間の売上を表示するダッシュボードを作って。上段に「売上・新規顧客・解約率」の3つの数値カード、その下に月別売上の折れ線グラフ、右側に地域でフィルターできる絞り込み。ビジネス向けの落ち着いた見た目で。
スマホアプリの初回登録フローを4画面で作って。①ようこそ ②メール登録 ③興味のあるカテゴリ選択 ④完了。各画面に進むボタンを付けて、若い世代向けの親しみやすいデザインで。
5画面（キャンバス）の見方
どこに何があるか分かれば、もう迷いません。
| 場所 | 役割 |
|---|---|
| 左：チャット欄 | Claude に指示を出す場所。大きな変更や「やり直し」「別案」はここで頼む。 |
| 右：キャンバス | デザインが表示される場所。要素をドラッグで移動・サイズ変更・整列でき、クリックしてコメントも付けられる。 |
| 右上：Export ボタン | 完成したデザインを書き出す・他ツールへ送る入口（10章）。 |
| 右上：Share ボタン | リンクを作って人に共有（12章）。 |
つまり「ざっくりした変更は左のチャット」「細かい位置や見た目は右のキャンバスで直接」と覚えると迷いません。
63つの修正方法を使い分ける
直し方は3通り。場面で使い分けると一気に上達します。
| 方法 | 得意なこと | 言い方の例 |
|---|---|---|
| ① チャット （大きな変更） | 全体の雰囲気・構成・別案づくり | 「配色を暗めでミニマルに」「指標を上の行にまとめて」「別レイアウトを2案見せて」 |
| ② インラインコメント （ピンポイント） | 特定の部品だけを直す | 要素をクリックして「このボタンの余白を広く」「ここをドロップダウンに」「ここはブランド色で」 |
| ③ 直接編集 （見た目の微調整） | 位置・大きさ・整列をその場で | マウスでドラッグ・リサイズ・整列。文字も直接打ち替え可能。 |
7参考資料を渡してブレを減らす
「こんな感じ」を見せると、一発で精度が上がります。
プロジェクトには、いつでも参考になる素材を追加できます。Claude はそれを見て方向性を合わせてくれます。
- ビジュアル参考：スクリーンショット、競合のデザイン、手描きのワイヤーフレーム、インスピレーション画像
- ドキュメント：Word（DOCX）、PowerPoint（PPTX）、Excel（XLSX）などの資料
- コード／ファイル：既存のコードリポジトリを連携して、部品の構成に反映
8デザインシステムと /design-sync
少し上級。会社のブランドに揃えたい人向けですが、概念だけ知っておけばOK。
デザインシステム＝色・フォント・ボタンの形などの「自社ルール集」。これを読み込ませると、作るものすべてが自動でブランドの見た目になります。
- セットアップ（デザイン責任者の作業）Claude が自社のコードやデザインファイルを読み取って、デザインシステムを自動で組み立てます。
- 適用は自動一度設定すれば、新しいプロジェクトに色・文字・部品パターンが勝手に反映されます。手動設定は不要。
- コードと同期したいときClaude Code（後述）で
/design-syncと打つと、コードベースのデザインシステムを取り込めます。
9バージョンを残して試す
「今のを残したまま、別案も試したい」を叶える一言。
大きく方向転換したいときは、こう伝えるだけ。今の状態が保存され、安心して別案に挑戦できます。
今のデザインを保存して、まったく別のアプローチを試して。
Claude は現在のプロジェクトを保存し、どこに保存したかを教えてくれるので、あとから見比べられます。
10書き出し（エクスポート）
完成したら、右上の Export ボタンから取り出します。
ファイルとして保存
他のツールへ送る
使い慣れたサービスへそのまま連携できます（順次追加中）。
11Claude Code へ引き継ぐ（ハンドオフ）
「デザイン → 本物のソフト（コード）」へ進める段階。あなたが選んだ目的地です。
デザインが固まったら、それを実際に動くソフトに変えるために Claude Code（Claude のコーディング担当）へ引き継げます。スクリーンショットから作り直すのではなく、あなたの作業の続きから開発が始まるのが特徴です。
| 引き継ぎ先 | こんな人に |
|---|---|
| ローカルのコーディングエージェント | 自分のPCで開発環境を持っている人 |
| Claude Code Web | ブラウザだけで手軽に進めたい人 |
/design や /design-sync の機能は、Claude Code の新しいセッションで /update を一度実行してから使えるようになります。12共有する
右上の Share から、権限を選んでリンクを発行します。
| 権限 | できること |
|---|---|
| 閲覧のみ（View） | 見るだけ。関係者への共有に |
| コメント（Comment） | 見て意見を書き込める。レビュー依頼に |
| 編集（Edit） | 一緒に直せる。共同作業に |
13良いプロンプトのコツ
指示の質＝出来の質。この「4要素」を入れるだけで激変します。
| 要素 | 意味 | 例 |
|---|---|---|
| 🎯 目的 | 何を作るか | 「採用ページを作って」 |
| 📐 レイアウト | どう並べるか | 「上にヒーロー、下に職種一覧」 |
| 📝 内容 | 何を載せるか | 「会社の魅力3つと応募ボタン」 |
| 👥 対象 | 誰向けか | 「20代のエンジニア向け」 |
やってみよう（4要素入りの完成形）
20代エンジニア向けの採用ページを作って。上にキャッチコピーと応募ボタンのヒーロー、その下に会社の魅力を3つカードで、最後に募集中の職種一覧。スタートアップらしい先進的でクリーンな配色で。
- 最初はシンプルに頼み、あとから少しずつ足す
- フィードバックは具体的に（「余白を8pxに」など数値で）
- デザインシステムの部品名で指定する（「プライマリボタンを使って」）
- 早めにレスポンシブ（スマホ・タブレット・PC）を意識
- 迷ったら「2〜3案見せて」と頼む
- 仕上げに「アクセシビリティと使いやすさをレビューして」と頼む
14困ったとき / 制限事項（ベータ版）
「壊れた？」と思う前に、まずここを確認。
コメントが消える・反映されない
大きなリポジトリで動作が重い
/design-sync を使うと安定します。/design や /design-sync が使えない
/update を実行する必要があります。チャットがエラーになる
スマホで使いたい
急に使えなくなった
デザインシステムの取り込みがいまいち
15練習：はじめてのチェックリスト
この順にチェックを付けながら、実際に1枚作ってみましょう。
- 有料プランで claude.ai/design を開いた
- 新しいプロジェクトを作った
- 4要素（目的・レイアウト・内容・対象）入りのプロンプトを送った
- キャンバスに最初のデザインが出た
- チャットで全体を1回直した
- 要素を1つクリックしてコメントで微調整した
- 「2案見せて」で別案を比べた
- Export から PDF か HTML で書き出した
- Share でリンクを作って共有した
16応用：Instagram投稿を作る
Claude Design はSNS素材も得意。サイズを指定するだけで3種類とも作れます。
コツはたった1つ。プロンプトの最初に「用途」と「正確なピクセルサイズ」を書くこと。これだけで縦横比がピタッと合います。下の例は「コピー」してそのまま使えます。
① 正方形〜縦長フィード投稿（4:5 / 1080×1350）
Instagramのフィードで一番大きく表示されるのが縦4:5（1080×1350px）。情報量が多い告知やTips投稿におすすめです（正方形なら1080×1080）。
Instagramのフィード投稿を1080×1350px（縦4:5）で作って。テーマは「Claude Designの使い方を無料で学べるサイトを公開しました」。上に大きめのキャッチコピー、中央にサイト名、下に「プロフィールのリンクから」の一言。明るく信頼感のある配色で、文字は離れて見ても読める大きさに。
② カルーセル（複数枚のスワイプ投稿）
複数枚を横スワイプで見せる形式。「1枚目で惹きつけ→2枚目以降で中身→最後にCTA（行動喚起）」の構成が鉄板です。保存・シェアされやすく、伸びやすい形式。
Instagram用のカルーセル投稿を5枚、各1080×1350px（縦4:5）で作って。テーマは「Claude Designの始め方5ステップ」。1枚目＝表紙（タイトルと「保存推奨」バッジ）、2〜4枚目＝ステップ解説（各1ステップ＋アイコン）、5枚目＝まとめとサイトへの誘導。全枚数で色・フォント・余白を統一して、左下に小さくページ番号を入れて。
③ ストーリーズ／リール表紙（縦長 1080×1920）
画面いっぱいに出る縦長（9:16）。タップで流れていくので1画面1メッセージが基本。上下は通知やボタンで隠れやすいので、大事な要素は中央に置きます。
Instagramストーリーズ用の縦長画像を1080×1920px（9:16）で作って。テーマは「Claude Design解説サイト公開」。画面中央に大きなタイトルと一言、下部に「上にスワイプ／リンクはこちら」の誘導。重要な文字は上下150pxを避けて中央寄せに。インパクトのある大きな文字で。
サイズ早見表
| 用途 | ピクセルサイズ | 縦横比 | ひとこと |
|---|---|---|---|
| 正方形フィード | 1080 × 1080 | 1:1 | 無難・万能 |
| 縦長フィード | 1080 × 1350 | 4:5 | 一番大きく表示・おすすめ |
| カルーセル各枚 | 1080 × 1350 | 4:5 | 最大10枚・統一感が命 |
| ストーリーズ／リール表紙 | 1080 × 1920 | 9:16 | 中央に主役を配置 |
作ったあとの書き出し
- 右上の Export → 画像で書き出してスマホに送る → そのまま投稿
- 仕上げを微調整したいときは Canva / Adobe へ送る連携が便利
- カルーセルは1枚ずつ画像で書き出し、投稿時に順番に並べる
☕ このサイトが役に立ったら
無料で公開しています。応援いただけると、解説の追加・更新の励みになります🙌
※「Claude Design を試す」は claude.ai/design へのリンクです。利用には Pro/Max/Team などの有料プランが必要です。