とは What & Why 02 デザインシステム統合 Design System Setup 03 スライド作成ワークフロー Deck Building Flow 04 編集インターフェース Editing UI 05 エクスポートと外部連携 Export & Integrations 06 組織導入と運用 Org Rollout C L A U D E D E S I G N G U I D E 02 / 27
新機能を発表。基盤は同社最高峰の視覚モデル「Claude Opus 4.7」 。 2026.04.17 一般公開日 GENERAL AVAIL ABILIT Y Opus 4.7 基盤の視覚モデル VISION FOUNDATION 数分 指示から成果物まで PROMPT → RENDER C H 0 1 · W H AT & W H Y 04 / 27 製品概要 P R O D U C T OV E RV I E W
I F T 静的画像から、動的コードへ。 B E F O R E — 既存の生成A I 静的なモックアップ画像を出力するのが主体。 そのままでは触れない、改修もできない。 [ STATIC IMAGE ] A F T E R — C L A U D E D E S I G N HTML / CSS / JS / React / SVG をデプロイ可能なコードで 生成。 ブラウザ上にリアルタイムレンダリング、クリックや展開も 実動。 <button onclick="open()"> <span>CTA</span> </button> Live preview Interactive C H 0 1 · W H AT & W H Y 05 / 27 パラダイムシフト S TAT I C → DY N A M I C
プロのデザイナーだけのものではない。 Anthropic は Claude Design を「探索的プロトタイピングから プロダクションコード、プレゼンテーション構築までを 一本の線で結ぶフロントエンドデザインの統合型ワークスペース」と位置づけている。 FOR — 01 デザイナー 探索プロトから本番コードまで地続きで設計でき る。デザインシステムを学習させて自社ブランド の体裁を維持。 FOR — 02 PdM・創業者・ マーケター Figma等の高度な操作を知らなくても、自然言語で アイデアをブランド準拠のビジュアルに具現化。 FOR — 03 エンジニア 生成された HTML / React コードはそのまま Claude Code へ受け渡し、実装フェーズに移行可 能。 C H 0 1 · W H AT & W H Y 06 / 27 対象ユーザー TA R G E T U S E R S
E L A N D S C A P E 類似ツールとの位置づけ TOOL 出力形式 デザインシステム 編集手法 環境 Claude Design HTML / PDF / PPTX / Canva / Standalone コード・Figma・スライド等 から自動抽出 チャット・インラインコメン ト・Tweaks Webブラウザ Figma デザインデータ（静的） 手動設計・完全制御 ベクター編集・D&D App / Web Pencil.dev コード／ローカルプレビュー Claude Code 連携 Figma風キャンバス操作 Desktop + CLI Gamma Webリンク / PPTX / PDF / Google Slides 自動レイアウト・テーマ選択 AIアウトライン生成 Webブラウザ SlideSpeak PowerPoint / PDF 独自ブランドテンプレ テンプレ + 高速AI生成（<1分） Web + API C H 0 1 · W H AT & W H Y 07 / 27 ツール比較マトリクス TO O L M AT R I X
F L O W 5段階のセットアップフロー 管理権限を持つデザイナーやブランド責任者が、組織設定から開始する初期構築プロセス。 STEP 01 組織を選択 プロジェクトピッカー左下隅から組織 を選ぶ、または新規組織を作成してオ ンボーディングを開始。 STEP 02 資産を接続 コードベース、画面フロー、PPTX、 ロゴなどを接続。Claudeが配色・タ イポ・コンポーネントを自動抽出。 STEP 03 ガイドラインを追記 "Any other notes?" 欄に「暖色系」 「角丸」 「日本語出力」など、補強し たい制約を自由記述で追加。 STEP 04 検証 → 公開 テスト用ダッシュボードでブランド適 合度を確認し、納得したら "Published" トグルをオン。 STEP 05 Remix で更新 ブランド進化に合わせ、"Remix" ボタ ンからチャット形式で Claude と協働 して定義をアップデート。 C H 0 2 · D E S I G N SYS T E M 09 / 27 セットアップ手順 5 S TAG E S
コードベース GitHubリポジトリ接続、ローカルフォルダのアップ ロード Reactコンポーネントや Tailwind 設定を解析し、再利用可 能なスタイルを取得 プロトタイプ・既存デザイン Webサイトのスクリーンショット、アプリ動作画面 フロー 画像を視覚認識エンジンでスキャンし、配色バランスや配 置ルールを学習 スライド・文書 既存の PowerPoint（.pptx）や PDF ファイル タイポグラフィ、レイアウトパターン、カラーパレットを 逆引き解析 個別スタイルアセット 企業ロゴ、フォントスペック、カラーパレット仕様 書 ブランドガイドラインの基本定義をベース値として直接読 込 C H 0 2 · D E S I G N SYS T E M 10 / 27 4 種類のインプット 4 A S S E T T Y P E S
アクセスから初期設定まで 有料プラン（Pro / Max / Team / Enterprise）アカウントで、ブラウザか ら直接アクセス。 claude.ai/design プラン詳細は CH 06「ライセンス比較」を参照。 01 ダッシュボードで「Slide Deck」を選択 新規プロジェクトの選択肢から選び、プロジェクト名を設定。 02 スピーカーノートの ON / OFF を選ぶ 発表原稿補助の使用有無を初期設定段階でトグル可能。 03 プレゼン概要を自然言語で指示 日本語などで大まかに伝えるだけで OK。続くヒアリングで詳細化される。 C H 0 3 · W O R K F LO W 12 / 27 3 ステップで開始 3 S T E P S TO S TA RT
B R I E F I N G 5つの自律的ヒアリング項目 大まかな指示でも、Claude は即生成せず資料精度を高める「深掘り質問」を返してくる。 パラメータ 入力例 スライド生成への影響 Angle — 切り口 旅行ガイド／歴史的概説／ビジネスピッチ コンテンツの構成論理と、情報の優先順位を決定 Audience — 対象 学生／同僚／潜在顧客／経営陣 用語の難易度、説明の具体化レベルを調整 Duration — 発表時間 3分〜30分のスライダー調整 スライドの総枚数と、1枚あたりの情報密度を最適化 Tone — 文体 温和でナラティブ／編集者風／学術的 コピーライティングの文体、フォント選定基準を定義 Visual Direction — 視覚指向 エディトリアル／ムーディー／ミニマリスト 余白比率、グリッド配置、全体配色の基本を決定 C H 0 3 · W O R K F LO W 13 / 27 事前ヒアリング 5 PA R A M E T E R S
A T スライドは「自己完結型HTMLファイル」として生成され る 各スライドにインラインCSS、カスタムタイポグラフィ、レ イアウトが全て埋め込まれた、独立HTMLとして記述。 <!-- slide-04.html --> <section class="slide"> <style> .title { font-size: 64px; } .accent { color: #D97757; } </style> <h1 class="title">2026年4月17日</h1> </section> C H 0 3 · W O R K F LO W 14 / 27 PowerPoint的なテンプレ臭の排除 雑誌の編集ページのような審美性 動的インタラクションをそのまま保持 左パネルで進捗を見ながら数分で完成 H T M L ベース生成 S E L F - C O N TA I N E D H T M L
A Y O U T 左「Chat」と右「Canvas」の2パネル構成 C H AT I N T E R FAC E どんなプレゼンを作りますか？ 勉強会向けの解説スライドを作って 対象は誰ですか？ エンジニアコミュニティです C A N VA S — R E A L-T I M E R E N D E R C H A P T E R 0 1 Claude Design とは ← CHAT 自然言語で構造変更、再執筆、スライド追加・削除をClaudeに指示。 CANVAS → 生成成果物をリアルタイム描画。Full View 推奨（Compact View は保存エラ ー注意） 。 C H 0 4 · E D I T I N G U I 16 / 27 2 パネル構成 C H AT + C A N VA S
R O A C H E S コードを書かずに、3つの方法で微調整 APPROACH — 01 インライン コメント キャンバス上の要素を直接クリックし「このボタ ンのパディングを広く」のように、ピンポイント で修正指示を書き込む。 INLINE COMMENTS APPROACH — 02 直接 テキスト編集 キャンバス上のテキストをクリックすれば、ユー ザー自身の手で直接書き換えが可能。コピーライ ティングの仕上げに最適。 DIRECT EDIT APPROACH — 03 Tweaks スライダー Claude が要素の性質に応じて自動生成するリアル タイム調整ツール。テーマ・色・余白を感覚的に 操作。 T WEAKS SLIDERS C H 0 4 · E D I T I N G U I 17 / 27 3 つの編集アプローチ 3 A P P R OAC H E S
L O G 代表的な Tweaks コントロール コントロール 操作内容 適用される主な要素 テーマ切替トグル ワンクリックで「ダーク」⇄「ライト」を切替 背景全体の配色とコントラスト設計 ヒーローパターン切替 レイアウト候補（A / B / C パターン）を瞬時に変更 表紙やセクション扉の構造 アクセントカラーセレクト カラーパレットから任意色を選択して適用 CTAボタン、強調テキスト、アイコン キャッチコピー差し替え 代替コピー候補を自動巡回して比較 メイン訴求テキスト、見出し カスタムスライダー 余白・明度・配置バランスを無段階で調整 パディング、グラデーション強度 C H 0 4 · E D I T I N G U I 18 / 27 T W E A K S 一覧 5 C O N T R O L S
E V I E W · C A V E A T S 既知の不具合と回避策 事象 トリガー 回避策 保存エラー Save Errors コンパクトレイアウト表示モード（Compact View）使用時 標準の Full View に切り替えて再実行 コメント消失 Comment Disappearance インラインコメント記述と Claude 読込までの時 間差 コメント文をコピーし、左のチャット欄へペースト送 信 表示遅延・フリーズ Lag 巨大な Git モノリポ全体のインポート接続 関連サブフォルダ（src/components/ 等）に限定して 接続 アップストリーム接続エラー Chat Upstream Error 生成サーバーへの接続遮断、高負荷時のタイムア ウト 同一プロジェクトに新規チャットタブを開設して継続 C H 0 4 · E D I T I N G U I 19 / 27 既知の問題 W O R K A R O U N D S
A T S 5種類のエクスポート形式 01 — STATIC PDF 印刷・静止データとして社外配布。 02 — COLLAB Canva 初期構造を Canva へ転送、そのまま 協働編集を継続。 03 — INTERACTIVE HTML Standalone 動的インタラクションを含む単一 HTMLまたはZIP。 04 — EDITABLE PowerPoint (.pptx) 編集可能。スタイル100%忠実ではな い点に注意。 05 — DEV HANDOFF Claude Code 設計を直接ローカル開発エージェン トへパッケージで受け渡し。 いずれも生成済みデッキから直接ワンクリックで切り出し可能。 動的プロトをそのまま渡したいなら HTML、社外共有なら PDF、開発移行なら Claude Code が定石。 C H 0 5 · E X P O RT 21 / 27 5 つの出力形式 5 E X P O RT FO R M AT S
H T T O O L 代替アプローチの選び方 スピード優先や、社内マスターテンプレートへの完全準拠が必要な場面では別経路も検討。 アプローチ 最適ユースケース 強み 制限 Claude Design 独自ビジュアル・動的プロト・ Canva展開 圧倒的な審美性とデザインシステム 自動同期 PPTマスター直接読込不可、生成に 数分 PowerPoint アドイン 社内規定テンプレの厳密順守、即時 PPTX編集 スライドマスター100%継承、PPT 上で直接編集 ビジュアルが平坦、手動装飾が必要 Gamma コネクタ 迅速な資料骨子作成、AI画像生成統 合 60秒生成、美麗テンプレ、Web経由 の閲覧分析 社内ブランドの自律反映に限界 C H 0 5 · E X P O RT 22 / 27 3 経路の使い分け 3 A LT E R N AT I V E S
R S プラン別ライセンス比較 Claude Design は独立料金不要、Pro 以上の既存有料プランに包含される。 ただしトークン消費が通常より早い点に留意。 PL AN 料金（月額目安） 利用権限・制限 組織管理機能 Pro $20 〜（約 3,000円〜） 個人用有料プラン、標準制限内 非対応 Max $100 〜 Pro比 5〜20倍の利用制限枠 非対応 Team 契約ライセンス チーム共通の制限枠、独自デザインシステ ム構築可 管理コンソールから機能 ON / OFF Enterprise 契約ライセンス デフォルト OFF、管理者が明示的に有効化 RBAC による編集権限フル管理 C H 0 6 · R O L LO U T 25 / 27 4 プラン比較 P L A N C O M PA R I S O N
D R O L L O U T 4段階ロールアウト戦略 全社一斉ではなく、システム整合性とスキル定着を両立する段階的展開が推奨されている。 PHASE 01 デザインシステム 構築段階 コアデザイナー 2〜4名 に限定。 ロゴ・コードベースを登録し、ブランド再現 性を評価。 PHASE 02 デザイン部門 全体オンボーディング 全常勤デザイナーに解放。 実案件でストレス検証し、抽出不備や表現ブ レを調整。 PHASE 03 UX・ プロダクト展開 PdM や UX リサーチャーへ拡大。 ワイヤー、プロト、説明資料生成での効率化 を実現。 PHASE 04 組織全体 展開 営業・マーケ・全部門へ。 ブランド逸脱のない提案資料や LP を全員が 作れる状態に。 ＋ デザインシステムのマスター編集権限は専任デザイナーに限定し、一般ユーザーは読み取り専用で運用する（RBAC） 。 C H 0 6 · R O L LO U T 26 / 27 段階的ロールアウト 4 P H A S E S
TA K E A W AY 0 1 コードベース生成が、 AI画一感を破壊した HTML / CSS / JS をリアルタイム描画する設計によ り、雑誌の編集ページに近い審美性とインタラクショ ンを両立。 TA K E A W AY 0 2 デザインシステム適用が、 ブランド準拠を担保 コードベース・既存資料・ロゴを学習させることで、 1pxもブランドの体裁を崩さない一気通貫の出力が成 立する。 TA K E A W AY 0 3 エコシステム連携が、 業務生産性を飛躍させる Canva・Claude Code・Microsoft 365 アドイン・ Gamma との併用戦略を早期に構築することが導入成 功の鍵。 C L A U D E D E S I G N G U I D E 27 / 27 T H A N K YO U. E N D
SiteGround - Reliable hosting with speed, security, and support you can count on.
hearingmy
yahonda
greenmidori
kenichiodo
teamlab
glaforge
genda
akitoshiga
tetsuya28
koukihosaka
terurou
shugo
usanchuu
destraynor
chriscoyier
bkeepers
jonoalderson
skoyamalab
philnash
marktimemedia
rasagy
ryanjones
seathinner
marcoroth
