claude designを使ってみた
導入：AIが「デザイン」まで踏み込んできた
これまで私は、Claude Code を中心に「設計駆動開発（SDD）」の実践を重ねてきました。設計書を書き、AIにコードを書かせ、レビューで質を担保する——このスタイルはすでに自分の中で馴染んだものになっています。
しかし本日、Anthropic 社から「Claude Design」（Claude.ai の Web 上で使える、デザイン・プロトタイプ生成に特化したモード） がリリースされました。これまでの Claude といえば「チャット」と「Claude Code」の二刀流でしたが、そこに「デザインを生み出す Claude」 が加わった格好です。
ちょうど、MBA のクラスメート向けに「Claude 勉強会」の資料を作る機会があり、この Claude Design をフル活用してスライドデッキを作ってみたので簡単にまとめます。結論から言うと、「非デザイナーが『デザインっぽいもの』を作る」という世界が、また一段深いところに来たなと感じた実践でした。
スライド作成は、GoogleとClaude の二強になりそうですね。
１．なぜ Claude Design だったのか
ちょうど来月のGWにMBA のコミュニティ向けにClaudeの勉強会を企画中です。90分、非エンジニア中心、ハンズオンあり。
こういう条件で勉強会をやるとき、私がいつも最後まで手を抜けないのが「スライドデッキ」です。内容は頭に入っていても、それを「伝わる形」にするのが意外と難しい。
私はスライドにデザインをあしらうのが苦手て、かっこいいスライドが作れないので、いつも苦労します。
これまでなら、PowerPoint や Google Slides でゴリゴリと作り、デザインは「崩れていなければ OK」という妥協点で落ち着かせていました。しかし今回は、せっかく題材が「Claude」そのものなのだから、資料作成のプロセス自体を Claude に任せてみようと思い立ったわけです。
選択肢としては、Gemini でプロトタイプを作るパターンもあり得ました。ただ今回は、「20枚規模のスライドを、統一感あるデザインで、スピーカーノート付きで一気に作る」という要件だったので、HTML ベースで吐き出せる Claude Design の方が後工程（PPTX 出力・PDF 化・Canva 連携）の自由度が高いと判断しました。
２．最初のつまずき：「AI にデザインを任せる」の誤解
プロジェクトを始めるにあたり、最初に Claude Design から返ってきたのは大量の質問でした。
誰向けの資料か？
トーンは？（フォーマル？カジュアル？）
ビジュアルの方向性は？（ミニマル？装飾的？）
どんなタイプのバリエーションが欲しいか？
正直、最初は「いいからサッと作ってよ」と思ったのが本音です。しかしこれ、Claude Code で散々経験してきた「設計駆動開発」とまったく同じ構造でした。
AI に「丸投げ」ではなく、「前提を揃える対話」から始める。
この原則がデザインにもそのまま適用される、というのが最初の気づきです。私が Gemini で UI プロトタイプを作ったときも、結局は「何度もプロンプトを書き直して画面構成を練り上げる」という地道な工程が必要でした。Claude Design も例外ではなく、「設計ドキュメントの代わりに、質問票で前提を揃える」というアプローチを採っていたわけです。
ここで私が入力したのは、だいたいこんな情報でした。
対象：MBA クラスメート、非エンジニア中心
時間：90分、ハンズオンあり
雰囲気：社内勉強会っぽく、親しみやすく
ビジュアル：ミニマル・モダン、余白たっぷり
言語：日本語
スピーカーノート：各スライドに原稿を入れてほしい
この「要件定義」がしっかりできた瞬間から、Claude Design の出力精度は明らかに変わりました。
３．デザインシステムから組み立てるという発想
もうひとつ驚いたのは、Claude Design がいきなり完成品のスライドを作り始めなかったことです。
まず最初に提案されたのは、「デザインシステム」でした。
カラーパレット（メインのテラコッタ、紙っぽいクリーム色の背景、墨色のテキスト）
タイポグラフィ（日本語用・英語用・コード用のフォント指定）
角丸・余白・アクセント要素のルール
スライドレイアウトのパターン集（タイトル、セクション区切り、並置比較、ハンズオン手順）
これ、プロのデザイナーがクライアントワークで最初にやる「トーン＆マナー設計」そのままなんですよね。非デザイナーの私は、これまで「なんとなくこの色で」「なんとなくこのフォントで」と場当たり的に決めていた部分が、きちんと「システム」として先に定義されたわけです。
そのおかげで、20枚のスライドを作る途中で「ブレない」のです。3枚目と15枚目で色味が違う、フォントが違う、という非デザイナーあるあるの事故が起きない。これは自分ひとりで PowerPoint を開いて作っていたら、絶対にここまで徹底できなかったと思います。
ここでの気づきは、「デザインの質は、最後の見た目ではなく、最初のシステム設計で決まるということ。プレゼン資料作成における「1スライド1メッセージ」の鉄則と同じで、上位のルールが揃っていれば、下位の個別スライドは自然と整うのです。
４．ハンズオンの流れをデザインに落とし込む
スライドの中身で特に工夫したのが、「3つのClaude（チャット／Web / Design / Code）の違いと使い分け」を視覚的に伝えるパートです。
非エンジニア向けの勉強会では、ここが一番「？」になりやすい。文章でダラダラ説明するのではなく、「それぞれ何ができて、どう使い分けるのか」を1枚で表現する必要があります。
Claude Design に対して、私はこう伝えました。
「チャットは会話、Web（Design）は作る、Code は作り込む。この3つの役割分担が一目でわかる図を、複数パターン提案してほしい」
すると、Claude Design は3〜4種類のレイアウトパターンを同時に提案してきました。横並びの比較表、用途別のアイコンマップ、ユースケース別のフロー図——どれも方向性が違って、選ぶ楽しさがあります。
これ、人間のデザイナーに発注したら、2〜3回の打ち合わせを経てようやく出てくるレベルのアウトプットが、プロンプト1回で出てくる感覚です。もちろんそのまま使えるわけではなく、「このパターンのここを、こう調整して」というレビューと対話の往復は必要ですが、それはまさに Claude Code との開発プロセスと同じ構図でした。
５．出力フォーマットとの格闘：PPTX・PDF・Canva
完成したデッキは HTML ベース。ブラウザで開けばアニメーション付きで美しく動きます。しかし、勉強会の現場では PowerPoint か PDF が求められるのが現実。ここで、出力フォーマットとの戦いが始まりました。
Claude Design からは、「編集可能な PPTX」と「スクリーンショット版 PPTX」の2種類が出力できます。
編集可能な PPTX：テキストや図形が PowerPoint のネイティブオブジェクトとして出力される。編集はしやすいが、HTML で使っていた独自フォントや細かいレイアウトは再現しきれない。
スクリーンショット版 PPTX：各スライドが画像として埋め込まれる。デザインは100%保持されるが、テキスト編集は不可。
それぞれに一長一短があり、「デザインの完成度を取るか、編集の柔軟性を取るか」のトレードオフがここにもあります。今回、私は「Canva に取り込んで軽く調整したかった」ので、Google Fonts 互換のフォント指定で編集可能 PPTX を出力し、Canva にアップロードしました。
ちなみに、Canva は PPTX のアップロードとダウンロードの両方に対応しているので、Claude Design で作った HTML → PPTX → Canva というパイプラインが成立します。HTML を Canva に直接アップロードすると PNG/JPG でしか共有できなくなるので、PPTX を経由するのが現状のベストプラクティスでした。
ここはもう少し研究の余地ありとも感じます。
６．AI 時代の「非デザイナーの役割」とは
今回の取り組みで改めて感じたのは、AI によって「デザインの参入障壁」が一気に下がっているという実感です。かつてなら、「スライド20枚を統一感あるデザインで、スピーカーノート付きで作る」という作業は、週末まるごと潰れるボリュームでした。
それが今回、実質的に30分で「ほぼ完成形」にまで到達しています。しかもアウトプットの質は、自分で手作りしたものより明らかに上です。
（上の挿絵もclaude designで作っていますが、なぜか「半日」となった）
ただし、「AI に任せれば全部うまくいく」というわけではありません。Claude Code での開発と同様、人間側の役割は明確に残っています。
要件を言語化する（誰に、何を、どう伝えたいか）
デザインシステムに合意する（AI の提案を受け入れるかどうかの判断）
出力フォーマットのトレードオフを理解する（HTML / PPTX / PDF / 画像の使い分け）
レビューして微調整する（「このスライドの余白、もう少し広げて」）
これらは、言い換えると「プロジェクトマネジメント」と「編集者」の能力です。コードを1行も書かずに開発を回す SDD の経験が、そのまま「デザインを1ピクセルも自分で描かずにデッキを作る」というスタイルに転用できたのは、自分でも面白い発見でした。
７．まとめ：次は「動く」デッキへ
Claude Design を使ってみて、「非デザイナーが、デザインっぽいものではなく、ちゃんとデザインされたものを作れる」時代が来たと強く感じました。これは、Gemini で UI プロトタイプを作ったときの感動と似ていますが、「プレゼン資料」という、非エンジニアでも日常的に使うアウトプットで体験できた意味は大きいです。
次のステップとしては、「動くデッキ」への挑戦を考えています。HTML ベースで出力されるということは、インタラクティブな要素（クリックで切り替わるデモ、埋め込みデモ、アニメーション）をそのまま組み込める、ということでもあります。勉強会の途中で「ちょっと触ってみましょう」とデッキの中で Claude を動かす、みたいな体験が作れたら面白いはずです。
そしてもうひとつ。今回のプロセス自体をテンプレート化して、次の勉強会・次のプレゼンでも同じ品質を再現できるようにしたい。「デザインシステム × Claude Design」の組み合わせは、再利用性が非常に高い資産になり得ると感じています。
Claude Code でコードを磨き、Claude Design でデッキを磨き、Claude（チャット）で日々の思考を磨く。AI 時代の個人の発信力は、こうした「AI スタック」の組み合わせ方で大きく変わっていきそうです。
