MyVault

Claude Designという神機能を徹底解説！本格デザイン・動画・スライド資料を作成可能

Properties1
tagsclaude-design, vibe-design, design-system, web-design, slide-deck, non-engineer, claude-code

5 min read

Claude Designという神機能を徹底解説！本格デザイン・動画・スライド資料を作成可能

KEITO（AI&WEB ch） による Claude Design の徹底解説動画（YouTube, 2026-04-18）。非デザイナーが Web サイト・スライド資料・問い合わせフォーム・紹介動画を Claude Design で作成する手順とデザインシステム活用法を実演する。

主要な主張・内容

Claude Design とは

  • Claude の Web 版左サイドバーに追加された新機能（動画撮影時点では デスクトップ版には未搭載）
  • 非デザイナーでも本格的なデザインを直感的に作れる「バイブデザイン」の Claude 版
  • Web サイト・スライド資料・お問い合わせフォーム・サービス紹介動画を生成できる
  • ワイヤーフレームモードと実デザインモードを選択可能

プロジェクト作成の基本手順

  1. Claude Design ページ（Web 版）を開く
  2. 左サイドバーのプロジェクト種別（プロトタイプ等）を選択、名前を入力
  3. デザインシステムを選択（なし、または事前作成済みのもの）
  4. ワイヤーフレーム or デザイン直接生成を選択して「Create」
  5. 左下チャットルームで「何を作りたいか」を指示
  6. 右キャンバスにデザインが生成される

エディット機能

  • 生成後にキャンバス上の要素をクリックしてリアルタイム編集が可能
  • サイズ・色・透明度（オパシティ）・テキストを GUI で変更できる
  • ドローツールで特定要素を選択し、音声入力で修正を指示できる
  • コメント機能によるチームへの共有・デザインレビューが可能
  • 微調整パネル（スライダー）: 見出しサイズ・余白・アクセントカラーをスライダーで調整できるパネルを追加できる（ただし一度追加すると増設不可。全体要素で1つ作ることを推奨）

エクスポート・連携

出力先形式
PDFドキュメント印刷用
PowerPointスライド編集続行用
HTML / ZIPWeb サイトとしてデプロイ用
Canvaスライド・デザインの細部編集用
Claude CodeHandoff to Claude Code でコード生成
  • Handoff to Claude Code: 右上エクスポート → 「Handoff to Claude Code」でコードブロックを生成し、デスクトップ版 Claude Code にペーストするだけでコーディング作業を引き継げる
  • 推奨ワークフロー: Claude Design（デザイン/ワイヤーフレーム）→ Claude Code（微調整・コーディング）→ サーバーデプロイ

スライド資料作成

  • プロジェクト作成時にデザインシステムを指定すれば毎回同じデザインフォーマットでスライドが生成される
  • 生成前に「想定オーディエンス」「資料の主目的」「スライド枚数」「内容の深さ」などをヒアリングされ、回答後に生成スタート
  • 生成完了後、自動でレイアウト確認ループが走り崩れを修正してから完成通知が来る
  • 所要時間の目安: 8枚で約 15分
  • 完成後は Canva エクスポートや PowerPoint ダウンロードで続きの編集が可能

アニメーション動画作成

  • 「From Template」→「Animation」からアニメーション動画を生成できる
  • Web ページ URL や具体的なユースケースをプロンプトに含めることで、業務効率化紹介動画等を 1発で生成
  • 生成した動画はテンプレート保存（右上シェア → テンプレート化）で再利用可能

デザインシステム

  • Claude Design の最重要機能。ブランドのデザインルール（カラー・フォント・コンポーネント・レイアウトパターン・ロゴ等）をセットとして保存・再利用できる
  • 入力方法: 自然言語での説明 / GitHub リポジトリリンク / 既存 Web サイトの ZIP ファイル / Figma ファイル
  • フォントは別途アップロードが必要（Google フォント等の無料フォントを推奨）
  • 完成後「公開」ボタンをオンにして初めて使用可能になる
  • 作成者の実践例: 自社コーポレートサイトの ZIP を読み込ませてデザインシステム化 → 同一ブランドトーンを維持した Claude Design 出力が可能に

AI感排除ハック

  • Web 上で公開されているアニメーション系 JS フレームワーク（例: Particles.js・HyperFrame Launch Video 等）の GitHub URL をデザインシステムに組み込む
  • 派手めなアニメーションを追加することで「Claude 感」を排除できる
  • デザインシステムへの組み込みが難しければ、Claude Code に Handoff してアニメーションを追加する代替ルートも有効

デスクトップ版 Claude Code の新機能（言及）

  • リアルタイムプレビュー機能
  • デバイスツール切り替え（PC/スマホ表示）
  • Diff 表示（変更前後の差分確認）

関連

Graph View

バックリンク