# CC Learn - Claude Design Just Dropped - Full Tutorial (Slides, Websites

## 概要
- **Source**: https://www.youtube.com/watch?v=vnSGv8UmfCo
- **Title**: Claude Design Just Dropped - Full Tutorial (Slides, Websites, Designs)

- **Method**: yt-dlp+LLM
- **Analyzed**: 2026-04-19T02:34:17.823665+09:00

## 解析結果

【動画全体像】
Claudeがリリースしたばかりの「Claude Design」という新機能を、実際に触りながら解説するデモ動画。
主なテーマは「AIが数分で高品位なデザイン資材（スライド、Web、ワイヤーフレーム、動画、3D）をゼロから生成できる」という衝撃的な生産性革命。話者は「誰でもすぐに使える実践的なワークフロー」を提示し、視聴者に「今すぐ試せるステップ」を示す。

---

### 1. 具体的なツール・技術・設定
| 項目 | 内容 |
|---|---|
| ツール名 | Claude Design（Claude.ai 内蔵） |
| アクセス方法 | サイドバーの「Design」タブ → リサーチプレビュー段階（順次ロールアウト） |
| 出力形式 | ・スライドデッキ（高忠実 or ワイヤーフレーム）
・Webサイト（HTML/CSS/JS パッケージ）
・動画（アニメーション）
・3Dグラフィック |
| 参照可能素材 | ・Webサイトのスクリーンショット
・Figmaファイル
・Claude Code のコードベース
・音声入力 |
| 技術スタック | 内部的には React + Tailwind 等のコンポーネントを自動生成し、即座にホスティングURLを発行 |

---

### 2. 実践的なTips / ワークフロー
1. スタート地点
1. claude.ai → 左サイド「Design」
2. 「Slide deck」→ ネーミング（例：Automatable Slideshow）
3. モード選択
- High-fidelity：完成品（即公開可能）
- Wireframing：構造重視のラフ案

2. コンテキスト注入
- 自社サイトのスクリーンショットをアップロード → 色・フォント・雰囲気を自動コピー
- Figma URL 貼り付け → デザインシステム読み込み
- 音声 or テキストで要件を伝える → Claude が追加質問を投げかける

3. プロンプト例
> 「2,000ドルの造園パッケージを販売する営業後にクライアントへ送る美しいスライドを作って」
→ 会社名、追加サービス、ターゲット層などを対話で補完

4. 生成後の流れ
- 1クリックで公開URL発行 → クライアントへ即送信
- ダウンロード（ZIP）→ 自社サーバへアップロードも可能

---

### 3. コスト感・効率化の数値
| 従来 | Claude Design |
|---|---|
| デザイナー1名 × 半日〜1日 | 2〜5分 |
| 外注費用：$300〜$1,000/案件 | 無料（Claude Pro 利用料のみ：$20/月） |
| 修正ラウンド 2〜3回 | 対話で即座に調整 |

---

### 4. 注意点・落とし穴
1. リサーチプレビュー
- まだ全ユーザーに開放されていない → 数日中に順次展開
2. ブランドガイドラインの精度
- スクリーンショットだけでは細かいルール（余白、ロゴクリアスペース等）が反映されない場合あり
3. 著作権・ライセンス
- 生成画像のライセンスは曖昧 → 商用利用前に再確認が必要
4. 過度な依存
- テンプレート感が強く出る → 差別化のためには手直し必須
5. レスポンシブチェック
- モバイル表示が微妙に崩れることも → 公開前に実機テスト推奨

---

### まとめ
「Claude Design」は、デザイナー不在でも「営業資料→公開」まで5分以内に完結できる革命的ツール。ただし、ブランド精度や商用利用における法務面は人の目で最終チェックが必須。まずは小規模案件で試し、社内ガイドラインと組み合わせる形で段階的に導入するとリスクが最小限で済む。

---

【Claude Designを使ってすぐに実行できるアクションアイテム一覧】

1. 画面遷移・初期設定
- ブラウザで `claw.ai` を開く
- 左サイドバー → 「Design」をクリック（※まだ表示されなければ数時間～数日待つ）

2. プロジェクト作成
- 「Slide deck」ボタンを押す
- プロジェクト名を入力（例：`automatable slideshow`）

3. 品質レベル選択
- 「High fidelity」にチェック（完成版をそのまま使いたい場合）
- または「Wireframing」にチェック（構造確認用の簡易版）

4. コンテキストの追加（オプション）
- 自分のウェブサイトを反映させる場合
・ウェブサイトのスクリーンショットを撮影
- 「Upload reference files」から画像をアップロード
- Figmaファイル → 「Upload from Figma」
- 既存のコードベース → 「Attach a codebase」

5. プロンプト送信
- テキストボックスに以下のようなプロンプトを入力
```
Can you please build me a beautiful slideshow presentation that I can send to my clients after a sales call where we are selling landscaping services for $2,000 a package.
```
- またはマイクボタンを押して音声で同内容を話す

6. 追加質問への回答
- Claudeが提示する質問に逐次回答（例：会社名 → `Landscaping Co`、他サービス → `none`）

7. 生成完了後の即時アクション
- 「Continue」をクリックして自動生成を完了させる
- 生成されたスライド／ウェブ／3Dグラフィックをプレビュー
- 右上の「Share」または「Export」から数分でWeb公開／ダウンロード

8. 繰り返し利用時のショートカット
- 次回以降は「Design」→「Slide deck」→ プロンプトのみで即生成可能
- ブランドガイドラインを一度アップロードしておけば以降自動適用

**Why:** Claude Code活用の最新知見を自動収集
**How to apply:** 実践可能なTipsは即座にワークフローに取り込む