Claude Design の教科書
言葉で伝えるだけでデザインが作れる時代へ。
ゼロから「使いこなせる」まで、手を動かしながら学ぶ全11章+付録。
はじめにお読みください
Claude Design は 2026年4月に公開されたばかりの「研究プレビュー版」です。画面や機能は予告なく変わることがあります。この教科書は 2026年7月9日時点 の公式情報にもとづいて書かれています。もし本書の説明と実際の画面が違っていたら、画面のほうを信じてください。考え方や指示の書き方(第4章)は、画面が変わっても役に立ち続けます。
この教科書の使い方
- 章の順番どおりに読み進めてください。前の章で作ったものを次の章で使う場面があります。
- 「✍️ 例題」は必ず手を動かしてください。プロンプト(Claude への指示文)は「コピー」ボタンでそのまま貼り付けられます。
- 「💪 練習問題」は自力で挑戦してから答えを開いてください。ヒントと模範解答は折りたたんであります。
- 章の最後の 「この章を学び終えた」にチェックを入れると、この目次に ✅ が付きます(記録はこのパソコンの中だけに保存されます)。
学習にかかる時間の目安
1章あたり 30分〜1時間です。第0〜4章(基礎編)を終えれば日常使いができるようになり、第5章以降(実践編・応用編)で仕事の成果物づくりまで到達します。全部で 2〜3日、じっくりやっても 1週間の内容です。
目次 — 学習マップ
【基礎編】 まず道具と仲良くなる
-
第0章
Claude Design とは何か
できること・できないことの全体像。「AI がデザインを作る」とはどういうことか。 ✅ -
第1章
準備と画面の見方
開き方(claude.ai/design)と、左チャット+右キャンバスの二分割画面の歩き方。 ✅ -
第2章
はじめてのデザイン
最初の1枚を作る最短コース。例題「自己紹介スライド」で生成の流れを体験。 ✅ -
第3章
修正の4つの方法
チャット指示・インラインコメント・直接編集・スライダー調整。使い分けが上達の近道。 ✅ -
第4章
伝わる指示の書き方
「いい感じに」を卒業する。構成のリスト化と、80点で良しとする反復のコツ。 ✅
【実践編】 実際の成果物を作る
-
第5章
スライド・提案書を作る
5枚のプレゼン資料をゼロから完成させ、PowerPoint 形式で書き出すまで。 ✅ -
第6章
LP・Webページを作る
紹介ページ(ランディングページ)の定番構成を学び、Web で使える形で書き出す。 ✅ -
第7章
参考資料・ブランドを与える
画像や PDF を渡して「自分らしい」デザインに。デザインシステムの考え方。 ✅ -
第8章
書き出しと共有
PDF・PPTX・HTML・Canva など6つの書き出し形式の使い分けと、共有時の注意。 ✅
【応用編】 もっと遠くへ
-
第9章
Claude Code との連携
デザインをそのまま開発へ手渡す。/design-syncによる双方向の同期。 ✅ -
第10章
制限と上手な付き合い方
利用量の仕組み(Claude Code と共通の枠!)、できないこと、他ツールとの使い分け。 ✅ -
付録
逆引きプロンプト集・トラブル対処・用語集
「こういう時はこう書く」実例30本、困ったときの対処法、用語の平易な対訳。 ✅
本書が前提にしている環境
- Claude の Max プランを契約済み(Pro プランでもほぼ同じ手順で使えます)
- パソコンのブラウザ(Chrome など)で
claude.aiにログインできる - 第9章のみ、Claude Code(パソコン上で動く Claude)を使います
主な出典(本書全体)
- Get started with Claude Design(公式ヘルプ・英語)
- Introducing Claude Design(Anthropic 公式発表・英語)
- Set up your design system(公式ヘルプ・英語)
各章の末尾に、その章で使った出典を掲載しています。