MyVault

Claude Design

Properties1
tagsclaude-design, web-design, lp-制作, anthropic, ai-ツール, slide-creation, design-system, animation, non-engineer

9 min read

Claude Design

Anthropic が提供する Web サイト・ランディングページ（LP）をプロンプトで生成するAIデザインツール。2026年4月頃にプレビュー版として登場。

概要

  • デザインの指示（テキスト）と素材画像を渡すことで、HTML/CSS のウェブページを自動生成
  • 生成結果はリアルタイムプレビューで確認できる
  • コメント機能で特定箇所の修正指示を直接付けられる
  • 「Share → Hand to Claude Code」 機能で Claude Code に一発エクスポート可能

特徴と制約

できること

  • LPデザインモック画像から忠実な HTML/CSS 実装を生成
  • 渡した素材（画像・アイコン・背景図形）を活用したデザイン
  • セクションの追加・変更・微修正（コメント指示）
  • レスポンシブ対応のコード出力

制約（プレビュー版 2026年5月時点）

  • 週次利用制限が厳しい（超過すると1週間ロック）
  • デザイン素材が自前でないと「AI感」のある汎用的な見た目になりやすい
  • 大幅なカスタマイズは Claude Code 連携が推奨

推奨ワークフロー（高品質LP制作）

Claude Design 単体ではなく、GPT image 2 → Claude Design → Claude Code の3段階ワークフローが効果的。

1. GPT image 2 でLPデザインモック生成
2. GPT image 2 でウェブデザイン素材（グリッド形式）生成
3. Claude (Web) で素材を切り抜き・透過処理
4. Claude Design にモック + 素材を渡してLP実装
5. Claude Code にエクスポートして微修正・追加セクション・デプロイ

→ 詳細ワークフロー: 【激震】外注なら30万のWebサイト、Claude Design × GPT image 2で作ってみた！

ポイント：素材がデザイン品質を決める

Webデザインの品質を決めるのはコーディング能力よりも素材（背景図形・アイコン・人物画像等）の質と個性。 GPT image 2 で柔らかい抽象形状・ブランド感のある素材を生成することで、Claude Design の出力が差別化される。

Claude Code との連携

  • Claude Design で生成したコードを「Share → Hand to Claude Code」でコピー
  • Claude Code でセクション追加・スキル呼び出し（例: /frontend-design）でブラッシュアップ
  • デプロイも Claude Code が担当

→ Claude Code / Vibe Design

テンプレート化 → Claude Code HTML化ワークフロー

Claude Design を「完成品を作る場所」ではなく「テンプレート生成機」として使うアプローチ。

1. Claude Design に既存サイトのデザインを投入
   → テンプレートだけを生成させる
2. 各セクション（見せ方のパターン）をページごとに出力
3. DL して Claude Code でローカル HTML として作り込む

利点: 週次制限の激しい Claude Design の消費を最小化しつつ、Claude Code の強力な編集機能でブラッシュアップできる。

Tweaks（微調整機能）

生成後にGUI操作でデザインを直感的に微調整できる機能。

  • ライトモード / ダークモード切り替え（ワンクリック）
  • ヒーローセクションのA/B/C複数パターン自動生成（キャッチコピー付き）
  • カラーアクセント選択（赤・緑など）
  • グリッド線の表示/非表示

チーム共同編集

Figmaに近い共同作業体験を提供。Figma株価下落の一因とも評される。

  • URLシェアによる閲覧・コピー
  • チームメイトによるコメント追記（「Team Comment」モード）
  • チームメイトによる直接編集（「Team Edit」モード）

エクスポート先（5経路）

出力先備考
PDF安定動作。Universal Fonts推奨
PowerPoint（PPTX）10ページ超で失敗する場合あり（2026-04月チャエン検証）
CanvaCanvaへ送信して追加編集
HTMLそのままWeb公開可能
Claude Code（Handoff）フロントエンドをワンクリックでClaude Codeに移管

利用対象プラン

  • Pro / Team / Enterprise（追加課金なし）
  • 利用開始：cloud.ai/design または Claude UI のトップページから

利用条件（2026年4月〜5月時点）

Web 版 Claude のみで利用可能。デスクトップ版 Claude には未搭載（KEITO（AI&WEB ch） 2026-04-18 動画で確認）。週次利用制限あり。

デザインシステム（KEITO による詳細解説）

Claude Design の核心機能。ブランドのデザインルール（カラー・フォント・コンポーネント・レイアウトパターン・ロゴ）をセットとして登録・再利用できる。

作成方法

  1. トップページで「デザインシステム」→「Create」を開く
  2. 名前を入力し、参考情報を提供（自然言語 / GitHub URL / ZIP ファイル / Figma ファイル / 参考サイト URL）
  3. フォントは別途アップロード（Google フォント等を推奨）
  4. Claude がコンポーネント等を生成 → 良し悪しをフィードバックしながら調整
  5. 完成後「公開」ボタンをオンにして利用可能にする

活用法・実践例

  • コーポレートサイトの ZIP を読み込み → 同一ブランドトーンで Web サイト・スライドを生成
  • スライドデザインルールを登録 → 毎回同じフォーマットで再現性高くスライド生成
  • 非デザイナーにとっての最大価値: 毎回決まったフォーマットで高品質な成果物を再現できること

スライド資料生成の特徴（KEITO 解説）

  • 生成前に Claude がヒアリング（想定オーディエンス・目的・枚数・内容の深さ・トーン）
  • 生成後に自動でレイアウト確認ループが走り崩れを自己修正してから完成通知
  • 所要時間の目安: 8枚で約 15分
  • 完成後は Canva エクスポートまたは PowerPoint ダウンロードで続きの編集が可能

アニメーション動画生成

  • 「From Template」→「Animation」からアニメーション動画プロジェクトを開始
  • Web ページ URL や業務効率化シナリオをプロンプトに含めることでサービス紹介動画を自動生成
  • 生成した動画はテンプレート化（右上シェア → テンプレート作成）で再利用可能

AI感排除テクニック（KEITO 提案）

Claude Design 単体では動きがしょぼく「AI感」が出やすい。対策として：

  1. 公開 JS フレームワーク（Particles.js・HyperFrame Launch Video 等）の GitHub URL をデザインシステムに組み込む
  2. デザインシステム編集で「派手めなアニメーション」指示を追加する
  3. または Claude Code に Handoff してアニメーション追加を依頼する

利用対象プラン

  • Pro / Team / Enterprise（追加課金なし）
  • 利用開始：cloud.ai/design または Claude UI のトップページから

まさお（AI駆動開発）による補足視点

まさおAIじっくり解説ch による解説（2026-04-18）では、Claude Design の差別化を「制作ワークフロー化」と表現。「企画 → 可視化 → 共有 → 実装」の連鎖を Claude 単一エコシステム内で完結できる点を最大の強みとして挙げている。また、初期入力に対して AI が動的な質問票を生成する点を「面白さの核心」と評価している。

詳細: 【神機能】Claude Designが登場！会話をしながらデザイン世界観を作り込める（まさおAIじっくり解説ch）

関連概念

Graph View

バックリンク