MyVault

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

Properties1
tagsclaude-design, anthropic, ai-tools, design-system, non-engineer, slide-creation, prototype, claude-code

7 min read

概要

まさおAIじっくり解説ch（開発歴14年・個人開発で累計3000万人利用サービスを持つエンジニア「まさお」のYouTubeチャンネル）による Claude Design の機能・差別化ポイントを解説した YouTube 動画（2026-04-18公開）。

Anthropic の新製品として登場した Claude Design を「単なる画像生成ではなく、制作ワークフロー化ツール」と位置づけ、デザインシステム作成からワイヤーフレーム・リッチ化・Claude Code への引き継ぎまでの一連の流れを実演している。

タイムスタンプ要約

時刻内容
00:00オープニング・Claude Design登場
00:08Claude Designとは？一言まとめ（対話ベースのデザイン・プロトタイプ・スライド生成）
00:45対話で深掘りできるという価値
01:06単なる生成AIではなく「製作ワークフロー化」
01:51非デザイナーとデザイナー、それぞれの恩恵
02:31デザインシステムで統一感を担保
03:31実演：デザインシステム作成から始める
04:15サウナタイマー（Apple Watch）アプリの例
04:46スライドモードとプロトタイプモードの使い分け
05:14森林浴LPを対話で作ってみる
07:24Tweak/Editモードで細部を調整
08:11共有・コメント・Send to Claude
08:34Canva連携・PDF・PPTX・ZIPエクスポート
09:04Claude Codeへの引き継ぎ
10:01「AIくさいUI」への一つの解
11:10質問票が動的に生成される面白さ
11:33まとめ：Claude Designの差別化ポイント
13:00現時点の限界とこれから
13:23まさおの開発フローへの組み込み

Claude Designとは（まさお解説）

  • Claude Code と同じ cloud.ai ドメイン上のWebサービス。Claude Code のメニューから直接アクセス可能
  • 利用対象プラン：Pro / Team / Enterprise（追加課金なし）
  • スマートフォンからもアクセス可能（Webアプリ）

3つの主要機能

1. デザインシステム作成

あらかじめブランドルール（カラー・タイポグラフィ・コンポーネントルール）を定義して登録できる。

  • 作成場所：Organization Settings → デザインシステム
  • 一度作成したデザインシステムをプロジェクトに適用することで、毎回統一感のある成果物が再現できる
  • ユーザーが「良い・良くない」とフィードバックしながら調整するインタラクティブフロー

動画内での実演

「森林テーマ」のデザインシステムを作成し、それをサウナタイマー（Apple Watch）アプリのワイヤーフレームに適用。Claude Code に引き継いでの実装まで繋げる流れを実演。

2. スライドモード・プロトタイプモード

モード用途
スライドモードプレゼン資料・LP 完成図の生成
ワイヤーフレームモード画面の骨組み・アイデア段階の整理

ワイヤーフレーム → リッチ化という順番が、頭の中がまだ整理できていない段階に最適。

3. Tweak / Editモード

  • 気に入らない箇所を対話で修正指示
  • Tweakモードで部分的な依頼
  • Editモードでフォント変更など直接編集
  • スケッチ（お絵かき）で「ここをこうしてほしい」と図示も可能

差別化ポイント（まとめ）

まさおが強調した Claude Design の差別化：

  1. Claude からシームレスに始められる — Claude サブスクに含まれており、追加課金・別サービス登録不要
  2. Claude Code にそのまま引き継げる — デザインから実装まで同一エコシステムで完結
  3. 対話でどんどん深掘りできる — 作って終わりでなく、修正を重ねて満足するまで詰められる
  4. 動的な質問票 — 最初の入力に対してAIが動的に質問リストを生成し、回答で精度向上
  5. 統一感の確保（デザインシステム） — AIが毎回バラバラな見た目を出す問題を解消

2種類のユーザーへの価値

ユーザータイプ主な価値
非デザイナー頭の中の案を整った形で可視化できる
デザイナー探索を大量に出す・モックをプロトタイプ化・叩き台を高速生成する

エクスポート先

  • ZIP / PDF / PPTX
  • Canva 連携（X で話題になった機能）
  • Claude Code へのコマンドコピー（「Send to Claude」）

現時点の限界（2026-04月時点）

  • エディター機能の物足りなさ → デザイナーが実務で本格移行するには課題あり
  • 「Claude感（AIくさいUI）」が出やすい → デザインシステムの設計で対処可能
  • 週次利用制限の存在（動画内で言及）

まさおの開発フローへの組み込み

1. Claude Design でデザインシステム作成（世界観を決める）
2. ワイヤーフレームで脳内を整理
3. Claude Code に引き継いで実装

「個人開発でまずデザインシステムを作り、世界観を固めてからClaude Codeに渡す」流れが特に推奨。

著者プロフィール（まさお）

同名クリエイターとの区別

「まさお」という発信者は複数存在する。このチャンネルは YouTube @ai_masaou が中心。note @masa_wunder でのコミュニティ（AI駆動開発研究部）も同一人物が運営しており、まさお@未経験からプロまでAI活用（Agent Skills解説記事の著者）と同一人物の可能性が高い。

関連ページ

Graph View

バックリンク