MyVault

Claude Designで作るWebサイト・スライド・プレゼン（チャエン解説動画）

Properties1
tagsclaude-design, anthropic, ai-tools, slide-creation, web-design, powerpoint, pdf-export, non-engineer

6 min read

概要

Anthropic が2026年4月17日にリリースした Claude Design の機能・使い方・活用事例を、チャエン（デジライズ代表 茶圓将裕）がレビュー解説した YouTube 動画。日本語1行プロンプトでプロ級のWebサイト・スライド・LP（ランディングページ）を生成し、PowerPoint / PDF 出力や Claude Code との連携まで実践検証している。

タイムスタンプ要約

時刻内容
01:32Claude Design の機能概要
02:26実践レビュー：日本語プロンプトで資料を自動生成
03:53驚愕の5つのポイント（クオリティ・共同編集・出力先）
05:10Tweaks機能でデザインを直感的に微調整する方法
07:12爆速で成果を出すためのプロンプト入力のコツ
09:30PowerPoint・PDF出力の検証と注意点
11:10Claude Code との連携でWEB制作を完結させる
13:16結論：デザイナーの仕事とAIの共存はどうなる？

Claude Designとは

  • cloud.ai/design からアクセス（通常の Claude トップページからも入れる）
  • 利用可能プラン：Pro / Team / Enterprise（要課金、追加費用なし）
  • 日本語1行プロンプトで「提案書・スライド・LP・Webサイト・ピッチデック」を生成

チャエンが挙げた5つのポイント

  1. デザインの質が高い — 競合AIと比較してワンプロンプトのアウトプット品質が突出している
  2. チーム共同編集 — Figmaのようにシェア・コメント・共同編集が可能。Figma株価下落の一因
  3. 事前の深掘り機能 — 最初の軽い入力に対してAIが詳細条件を質問してくれる
  4. Tweaks機能 — ライトモード切り替え・ヒーローセクションのA/Bパターン生成・カラーアクセント選択など直感的な微調整
  5. 多彩な出力先 — PDF・PowerPoint・Canva送信・HTML・Claude Code ハンドオフの5経路

プロンプト入力のコツ

スライドデック作成時の具体的プロンプト例（動画内実演）：

チーム向けのAIリスキリングプログラムを紹介する提案書を作ってください
会社名：デジライズ
提案先：OpenAI
料金レンジ：高め
カリキュラム：4ヶ月、エージェント・ビジュアル・コンサル風
企業ロゴ：ダミー
最終的にパワーポイントで出力。グラフ・帯効果付き

深掘り質問に回答するとより精度の高いアウトプットが得られる。

PowerPoint・PDF出力の検証

  • PDF出力 → 安定して動作。Universal Fonts オプション推奨
  • PowerPoint出力 → 10ページ超で詰まる場合あり（検証時に 20分以上待機・失敗）。チャエンは「何回か試したが10何ページで結構詰まる印象」と言及。プレゼンはClaude Design上のフルスクリーン表示を直接使う方法を推奨

Claude Code との連携

  1. Claude Design でフロントエンドデザインを完成させる
  2. エクスポートメニューから「Handoff to Claude Code」を選択
  3. コードをコピーして Claude Code に貼り付け
  4. バックエンド（DB・ログイン等）は Claude Code で追加実装

ワンクリック移管でフロントエンド→バックエンド開発を一気通貫で完結できる。

チャエンのコメント（transcript）

「ワンクリックでClaude Codeに移管できるのはめちゃくちゃいい。チームでワイヤーフレームを作る用途に向いている。個人開発パは最初からClaude Codeでデザインも作り込む方がシンプル」

用途別推奨度（チャエン評価）

用途推奨度理由
提案書・ピッチデック◎ワンプロンプトで業務レベルの品質
チームコメント・レビュー◎Figma的共同編集が強み
LP・Webサイト（フロントのみ）○見た目の質は高い
フルスタックWebアプリ開発△Claude Code 直接がシンプル
YouTube スライド（個人制作）△Notion × Claude Code の方が使いやすい（チャエン個人の場合）

チャエン本人の個人開発実例

動画内で言及されたチャエン自身の個人開発事例（Claude Code 単体で作成）：

  • スキルシェア販売プラットフォーム — スキルを簡単にシェア・販売できるサービス。デザインを含めすべて Claude Code のみで実装（ローカルホスト:300X で動作確認済み）。Claude Design は使用せず。
  • チャエンのコメント: 「個人開発パは最初からClaude Codeでデザインも作り込む。チームでワイヤーフレームやコメントを使いながら進める用途にClaude Designが向いている」

デザイナーの仕事への影響（結論）

「デザイナーはなくなりはしない。ただし優秀な層は残り、駆け出しは危なくなる」

  • Figma の株価下落の一因にも
  • AIとデザイナーの共存が基本シナリオ

関連ページ

Graph View

バックリンク