user【週刊】今日から始めるAI生活

Claude DesignでCanvaのスライドを投げるだけでデザインシステムができた。MBA50フレームワーク・スライド60レイアウト・マッキンゼー型コンサルテンプレをまるごと配布します

「AIスライドデザインって毎回バラバラになるんだよな」という方に届けたい号です。Claude Designを3日間の試行錯誤で見えたのは、先に「型」を作るという逆転発想でした。完成したMBA50フレームワーク・60レイアウト・マッキンゼー型コンサルスライドの3種、オマケでHTMLビュワーSkillsを今回まるごと配布します
user
テツメモ｜tetumemo
2026/06/24

こんにちは！テツメモです。

今回のテーマはClaude Design。6月20日から22日の3日間、使い倒した全記録と、その過程で完成させた3種のデザインシステムを今回まるごと配布します。

前回はClaude Fable 5を特集した号でした。Fable 5はまだ使えませんがAnthropicと米国政府の話は順調に進んでいそうですので、それまでにコツコツ記事を読み進めていざ使う時のために”備えて”いただければと思います。

ちょっと聞いていいですか。

「AIでスライドを作ってみたけど、なんかそれっぽいだけだった」という経験、ありませんか？

「いい感じに作って」と指示して出てきたものを見るたびに、センスが良すぎるというか、どこかで見た感じというか…とモヤっていたんですよね。

Anthropic公式も、AIが作りがちなデザインを「AI slop（AIゴミ）」という言葉で表現しています。紫のグラデーション、どこかで見たフォント、中央揃えのカード、白黒モダン風レイアウト。AIに何も渡さないと、そっちへ引き寄せられていくんです。

じゃあどうするかというと、答えは「自分のデザインの型を先に作る」でした。今回の記事はその話です。

この記事で解決したいこと

「Claude Designって最近聞くけど、何者かよくわからない」という方、ゼロから丁寧に解説するのでご安心ください。

「使ってみたけど、毎回デザインがバラバラになってしまう」という方、それはデザインシステムなしで使っているからです。

「AIスライドってきれいなんだけど、自社らしさがゼロなんだよな」という方、今回の型があれば、そこが変わります。

ここが一番重いんですよね。デザインの一貫性は、型を用意してからAIに渡して初めて生まれます。毎回「いい感じに」とお願いしても、毎回違うものが出てくるのは当然なんです。

この記事を読み終えた頃には、Claude Designが何者かがわかって、「スライドより先に型を作る」という逆転の発想が手に入って、今日から使える3種のデザインシステムが手元にある状態になっています。この記事が、そのための最初のひと漕ぎになれば嬉しいです。

💡デザインシステムって何？という方は、こちらの記事でChatGPTの画像生成で自分のデザインシステムを作る方法を紹介しています

💡 この記事で手に入るもの

  • Claude Designが何者か、他のAIツールとの違いがゼロからわかる
  • 「スライドを作る前に型を作る」という逆転発想と具体的なフローが手に入る
  • ClaudeとCodexの比較検証（同じ素材でファイルサイズが約8倍違った）の実測結果がわかる
  • MBA級ビジネスフレームワーク50種・60種レイアウトテンプレ・マッキンゼー型コンサルスライドの3種のデザインシステムを受け取れる（有料）

🎯 この記事を読んでほしい人

👑 AIでスライドやデザイン資料を作ろうとしているが、毎回「それっぽいだけ」で終わっている人

「Canva or PowerPointでいいじゃない」からAIスライド作成に一歩踏み出したいけど、どこから始めればいいか迷っている人

ビジネス資料・提案書・セミナー資料に「自社らしさ」と「デザインの一貫性」を出したい人

🎙️ニュースレターの内容をAI音声でキャッチアップ！

記事の内容を、有料購読エリアの概要も含めて紹介しています。　

ぜひこちらも一緒にフォローしていただき、”ながら聴き”も楽しんでみてください♪

spotify show

🎨 Claude Designって何者か

画像

Claude Designを一言で言うと「言葉でデザインを作れるAI」です。

「画像を生成するAI」でも「テンプレートを選ぶCanvaのようなツール」でもありません。言葉で指示すると、HTML・PDF・PPTXという実際に使えるファイルが出てきます。これがポイントです。

他のAIツールとの立ち位置を整理するとこうなります。

ChatGPTやNano Bananaは画像を生成します。Canvaはテンプレートを選んで編集します。対してClaude Designは、言葉だけで、動くUIやスライドを構築します。

「画像ではなくファイルが出てくる」というのが、デザイン系AIの中での立ち位置です。

私の直近のポストを見た方は「スライド専用ツール」と思われがちですが、Claude Designが実際に作れるものはもっと幅広いです。

ランディングページ（LP）も作れます。テキストで要件を伝えると、そのまま公開できるレベルのWebページが出てきます。アプリの画面モック（iOSやAndroidのUIプロトタイプ）も、ゲームのメニュー画面やスコアボードも、分析ツールの管理画面（ダッシュボード）の設計も、広告バナーやメールのデザインテンプレートも、言葉で指示するだけで出てきます。

「デザインが必要な場所ならどこにでも使えるツール」という実感が、海外での広がり方を見ると伝わってきます。

誕生の背景

Claude Designは2026年4月にAnthropicが発表した機能です（Anthropic Labsのリサーチプレビュー）。

対応しているプランはPro・Max・Team・Enterpriseです。無料プランでは使えません。アクセス方法は claude.ai/design、またはClaude Desktopのサイドバーから入れます。

🔗Claude Designを始める（Anthropic公式ヘルプ）

デザイン業界への衝撃

Anthropic promotional image for Claude Opus 4.7

発表直後、Figmaの株価が約7%下落したと複数のメディアが報じました。

🔗Anthropic Launches Claude Design, Figma Stock Immediately Nosedives（Gizmodo, 2026年4月17日）

"Figma's stock fell about 7% on Friday following the announcement."
（日本語訳：「Anthropicの発表があった金曜日、Figmaの株は約7%下落した」）

Figma以外にも、Adobeの株価も同日に下がったと同記事では報じられています。デザインツール市場全体に与えた衝撃の大きさがわかります。

「なぜFigma？」という方に説明します。Figmaはプロのデザイナーが使う設計ツールで、デザイナーが手作業でボタン・レイアウト・配色を作り込む場所です。Claude Designが出てきたことで、「AIに言葉で指示するだけで同じことができてしまうなら、Figmaは必要なくなるのでは」という懸念が広がったわけです。

「作り方を覚えるツール」から「意図を伝えれば完成するツール」へのシフトが起きているという見方が、この株価の反応に表れていると思います。

🧱 デザインシステムとは何か

この記事で一番重要な概念です。「デザインシステム」という言葉で離脱しないでください。要するに「自分のブランドのルールブック」です。

具体的に言うと、こういうものです。

使う色（コーポレートカラー、アクセントカラー）、使うフォント（見出し用・本文用・サイズのルール）、ボタンや余白のルール、スライドレイアウトのパターン集。これが定義されていると、「いい感じに」と指示しても一貫したデザインが出てきます。定義されていないと、毎回バラバラになります。

デザインシステムがないとどうなるか

ちょっとイメージしてみてください。

AIに「提案書を作って」と言います。出てきたのは紫のグラデーションと白抜き文字のスライドでした。次に「報告書を作って」と言います。今度は青と白のシンプルな資料が出てきました。

どちらもきれいです。でも並べると、同じ会社の資料に見えません。

「それっぽいだけでブランドがない」の正体はここです。

Claude Designに渡せるもの

公式情報によると、Claude Designには以下のものを渡せます。既存のスライド（PowerPoint・Canva・スクリーンショット）、ロゴ（SVGが理想）、コーポレートカラーのカラーコード、GitHubリポジトリ（エンジニア向け）。

「既存のスライド」が使えるのが大きいです。過去に作ったスライドを1枚渡すだけで、色・フォント・レイアウトパターンを読み取ってデザインシステムを作ってくれます。

💡デザインシステム「DESIGN.md」を公開しているサイトもあります　↓

実は「画像のデザインシステム」という選択肢もあります。私が過去にAI画像生成を通じて自分のブランドカラーや雰囲気を画像として整理していたことがあるので、それを投げるだけでも自分らしいデザインシステムが作れます。

デザインシステムの画像バージョンの作り方はこちらの記事で解説しています　↓

この記事で「自分のブランドイメージを画像として持つ」という意識が生まれていたので、そのイメージ画像をClaude Designに投げるだけで「これがtetumemoのスタイルです」と伝えられました。デザインシステムは、スライド・ロゴ・画像、どれから渡しても機能します。自分が持っているものから始めていただければ大丈夫です。

私が発見した「逆転のフロー」

ここからが今回の記事の核心です。

私がこの記事で紹介するClaude Designの使い方には「スライドを量産する」と「型を作る」の2種類があります。多くの人は、スライドを直接作ろうとします。私も最初はそうでした。ただ、毎回トークン（AIの処理量）が大量に消費されて、効率が悪いと感じていました。

試行錯誤の末にたどり着いたのは逆のフローです。

まずClaude Designでスライドの型（フレームワーク集）を先に作ります。その型をデザインシステムとして保存します。あとはCodexやClaude Codeにそのデザインシステムを渡して、スライドを量産します。

最初に型を作る投資をするだけで、あとは何枚でも同じ世界観で作れるようになります。

このフローが変わることは大きく3つです。「毎回AIに指示してスライドを作る」という状態から、「型というデザインシステムを呼び出してスライドを量産する」という状態に変わります。「それっぽいだけのデザイン」ではなく「ブランド一貫性のあるデザイン」が出てくるようになります。

詳細な作業手順は有料エリアでお伝えしますが、大きな発想はこれです。

🛠️ デザインシステムの公式の作り方

image.png.webp

「デザインシステムを追加する」画面を開くと、最初に2つの選択肢が出てきます。

選択肢1：「ここで作成」（ほとんどの方向け）

FigmaまたはGitHubと接続するか、スライドやアセットをアップロードする方法です。Figmaを日常使いしているデザイナーの方や、GitHubにコードがある方、スライドなど素材がある場合はこちら。エンジニアではない方もこの選択肢でOKです。

選択肢2：「Claude Codeを使用して作成する」（エンジニア向け）

image.png.webp

Reactコンポーネントを持っている開発者向けのオプションです。「ベスト・フィデリティ」というバッジがついていて、忠実度が最も高いとされています。コードベースがある場合はこちらの方が精度が出ますが、非エンジニアの方には不要です。

セットアップフォームの中身

image.png.webp

「ここで作成」を選ぶと、設定フォームが出てきます。

「会社名と概要」でブランドの簡単な説明を入れます。GitHubのリポジトリがある方はリンクコードを入力します。手元にFigmaの.figファイルがあればアップロードできます。フォント・ロゴ・アセットの画像もここで追加します。最後のメモ欄には「ブランドボイスは親しみやすくプロフェッショナル」のような方向性メモを自由に書けます。

すべて入力する必要はありません。私が試した中で一番手軽だったのは、「フォント、ロゴ、アセットを追加する」のフィールドに自分のブランドイメージ画像を1枚投げるだけ、という方法です。完成後にはチャット欄やマークアップ、コメント等で微修正して詰めていくほうが効率が良い気もします。

✒️ デザインシステムの反映

Untitled_Clipping_062326_104034_PM.jpg.webp

デザインシステムの画面では①デザインシステム、②Template、③モデルの3点設定できます。

まず①のデザインシステムは自分で作ったものを「公開」したものしか選択できません。

image.png.webp
image.png.webp
デザインシステムは複数選択することも可能です

公開方法はシンプルです。デザインシステムを開いて「公開済み（published）」のチェックを入れればデザインシステムの一覧に表示されます。

Untitled_Clipping_062326_104332_PM.jpg.webp

②このTemplateにはアウトプットの形式に合ったSkillsなど内部で最適化されています。スライドを作成する場合は必ず「Slide」を選んでください。

image.png.webp

③モデルは基本的にClaude Opus 4.8（最高モデル）を選択してください。Sonnet等でも可能ですが、Opus 4.8の仕上がりのほうが明らかに良いです。

image.png.webp

デザインシステムでスライド生成

image.png.webp

Claude Designでできることをすべて説明するととんでもない量の内容になってしまうので、この記事では「スライド生成」や「デザインシステム」作りに特化した内容とします。

Untitled_Clipping_062226_111417_PM.jpg.webp

Claude Designの画面は左右に分かれています。左がChat（ここで指示する、資料を添付する）、右がCanvas（ここにデザインが出てくる、編集する）です。「Chatでしゃべる → Canvasに出てくる」という直感的な構造になっています。

Chat入力は基本的なClaudeと一緒ですが、一番大きく違うのが右側のCanvasで、プレビューだけではなく「編集」も画面を見ながら詳細にできるという点です。

今回は楽天の決算書を添付して以下のプロンプトで実行しました。

添付のPDFを元に株主総会向けのスライドを作成してください

凄くシンプルな指示ですよね。Claude Designの醍醐味はここからです。提供したプロンプト情報が不足している場合、基本的にユーザーへヒアリングを行ってくれます。要するに中途半端な情報ではスライドを作らず、必ず一緒にアウトプットのゴール設定を詰めていくことができます。

image.png.webp
プロンプト入力後にCanvasへ表示されるヒアリング表

このヒアリングシートに回答していきます。

image.png.webp

後は数分放置しておくだけでデザインを反映させたクオリティの高いスライドが完成します。

image.png.webp
image.png.webp
image.png.webp
image.png.webp

色やレイアウト構成も含めて忠実にデザインシステムを反映してくれました。

完成したスライドのカスタマイズ方法

デザインをカスタマイズする方法は5種類あります。
※ここでは楽天カラーのデザインシステムで作ったスライドで説明します。

1つ目：Chatで全体を直す

image.png.webp

「色テーマをより暗く」「メトリクスを上の行に移して」のように、全体的な変更をChatで指示する方法です。

2つ目：メイクアップで範囲指定して直す

Untitled_Clipping_062226_112746_PM.jpg.webp

変更したい範囲をペイントツールのように自由に囲って指示文を書けばOKです。

image.png.webp
注釈の画像を付けて指示文を送ってくれる

例えばスライド内のグラフの表示範囲やレイアウトを変更したいとき、その部分を範囲指定して指示するとピンポイントで修正できてかなり便利。

３つ目：インラインコメントでピンポイントに直す

Screenshot_062226_113728_PM.jpg.webp

Canvasの直したい部分をクリックしてコメントを入れる方法です。特定の要素だけを変えたい時に使います。また、コメントを複数残すことができるので、一気にまとめてコメントを指示として投げることもできます。

Claudeのチームプランの人は作ったデザインを共有できますのでメンバーからコメント付きでレビューを受けることもできます。

4つ目：Canvasで直接触る（2026年6月アップデートで追加）

Untitled_Clipping_062326_051623_AM.jpg.webp

フォントサイズ、加筆修正、色の変更など自由に変更可能。

アプリやLPなら2026年6月アップデートでドラッグ・リサイズ・整列が直接できるようになりました。

5つ目：インタラクティブに動かせる機能を追加（Tweaks）

例えばスライド全体の雰囲気を赤、青、緑に変えたい。フォントを大、中、小で変更したいなど、インタラクティブな機能の追加も可能です

Untitled_Clipping_062326_052323_AM.jpg.webp

✅️プロンプト例

Rakuten AGM Deck.htmlに調整可能なコントロールを追加する：このデザインを参考に、単一のプロパティのピクセル操作ではなく、見た目を一新する2つか3つの表現力豊かなコントロールを備えた調整パネルを追加する。

自由にスライドの雰囲気の変化を確認できるので便利です。

Untitled_Clipping_062326_052419_AM.jpg.webp
ブランドカラーを青に変更

エクスポートできる形式

image.png.webp

出力できる形式はHTML・PDF・PPTX・ZIPの4種類です。

image.png.webp

2026年4月にCanvaとの提携が発表されており、「Canvaに送信」のワンクリック連携も使えます。

どの形式が一番いいかは用途によって変わりますが、私の経験ではHTML形式がデザイン再現性で一番優れていました。ただし、HTMLをそのままブラウザで開くと表示が崩れる問題があります。これについては有料エリアで詳しくお伝えします。

🖼️ Canvaのデザインを投げるだけでも作れる

image.png.webp

使い方もザッと理解できたと思いますので、Claude Designの醍醐味であるデザインシステムの色々な作り方を紹介します。

私が実際に試して一番お手軽だったのは、Canvaにあるお気に入りのテンプレートをダウンロードしてClaude Designにアップする方法です。

手順はこれだけです。Canvaにはデザインあ優れているスライドが多数あるのでお気に入りを選んでPDFやPowerPoint形式でダウンロードします。それをClaude Designのセットアップフォームの「フォント、ロゴ、アセットを追加する」に投げます。

すると、そのスライドからClaudeが「この色を使っている」「このフォント」「このレイアウトのパターン」という情報をすべて読み取って、デザインシステムを構築してくれます。

GitHubもFigmaも不要です。Canvaのスライドがあれば今日から始められます。

「Canvaはもうすでに使っている」という方にとって、これが一番ハードルの低い入口です。ぜひ一度、お気に入りのスライドを投げてみてください。「あ、ちゃんと自分のカラーで読んでくれた」という感覚を最初の5分で体験できます。

ただ、Canva内のデザインは公式だけではなく作成者の出品しているデザインもありますので、デザインシステム化する場合はベースを読み込ませた後、自分の好みにカスタマイズしてオリジナリティを加える点をオススメします。

📣 私が3日間でポストした8本の変遷

この章では、6月20日から22日にかけて私がポストした8本を時系列で解説します。ただリストアップするだけでなく、「この時点で何を考えていたか」「何に気づいたか」という思考の変化も一緒に読んでいただけると、Claude Designの習得イメージが掴みやすいと思います。

ポスト1

「Claude Design面白いっ！けど使い方にコツがいる気がする、慣れればデザインを"資産"にして流用可能！」

最初に気づいたことは、「直接スライドを生成しようとするとトークンを消費しすぎる」ということでした。

代わりに発見したフローがこれです。claude.ai/design にアクセスして、「Create here」から過去のPowerPointを添付します。約5分でデザインシステムが完成します。ShareボタンからZIPダウンロードして、そのZIPをCodexに渡すだけで過去のPowerPointにほぼ準じたスライドの生成ができました。

ポスト2

「Claude Designヤバいな、Canva等からお気に入りのスライドを投げればテンプレ化できる」

さらに発見が続きます。Canvaで作ったスライドをClaude Designに投げると、即座にデザインシステム化できることが分かりました。

記事でも「過去のスライドを添付すれば、、、」と何度か説明していますが、そもそも過去のスライドが無い人。あっても納得の行くデザインじゃない人も多いのではないかと。

で、実際にやってみたことは、Canvaのスライドを元にしたデザインシステムを作り、そのデザインシステムを元にCodexでHTML形式のスライドを作ってもらいました。

色も配置も忠実に再現しており、Canvaにあるハイクオリティなデザインをたった1ファイルで再現できてしまうのには感動しました。

実はClaude Designで作ったスライドはCanva側にエクスポートもできるのですが、「わざわざCanvaに持っていかなくても、Claude CodeやCodex上でも近しいクオリティが出せる」という確信が生まれました。

ポスト3

「地味に便利なのがClaude in PowerPoint」

深夜から朝にかけて使い続けて気づいたことがあります。Claude Designで出力したPPTXをClaude上でそのまま修正しようとするとトークンを使いすぎる。そこで有効だったのが、PowerPointに組み込まれた「Claude in PowerPoint」で修正する方法です。

スライドの中身を”点”で修正するより、フォント統一（Noto Sans JP）やスライドマスターの修正などがローカルで完結できます。「大枠はAIに、細部はローカルで」というハイブリッド編集の進め方が効率良かったです。

ポスト4

「先日からClaude Designを使い込んでいるけど、、、これはかなり沼る」

正直に報告です。本格的に使い込んでみると、構築・確認作業でトークンが大量消費されることがわかってきました。これは標準モデルがClaude Opus 4.8になっていて、これをSonnetやHaikuに切り替えても良いのですが、クオリティが下がってしまって結局Opusに戻す、、、もうこの時点で面倒。

そこで見えてきた分業がこれです。デザインを固める作業はClaude Design、アウトプットを突き詰める作業はCodexと分けました。Codexは画像生成もできるため、スライドの中に画像素材を入れたい場合はCodexの方が向いています。

ただ、スライドをHTML形式で作ってもらっていたのですが、完成後のスライドをプレビューするUIが依頼するたびに違うので修正の手間がかかっていました。この辺は試行錯誤して完成後のHTMLスライドを安定したビュワーで見れるSkillsを作りましたので、有料エリアで提供します。

ポスト5

【保存版】Anthropicが発表した「Claude Design」公式ドキュメントを図解

Claude Designの連続ポストを繰り返していると、「Claude Designなんて便利なのあったんですね！」という声もちらほらコメントにいただくようになったので、Claude Designの公式ドキュメントをわかりやすく説明するポストを投稿しました。

やはり何事も公式ドキュメントから理解するのが鉄則ですよね。

🔗Claude Design公式ドキュメント

ポスト6

「Claude Designって、スライドを作らせるより、スライドを作るための"型"を作らせると流用しやすそう」

ここが今回の記事の核心です。

直接スライドを生成するとトークン消費が激しく、毎回使い捨てになる。ならば「スライドの型（フレームワーク集）を先に作る」方が長く使い回せる資産になるのでは、という発想に至りました。ビジネスフレームワーク集をClaude Designで作成して、デザインシステム化する実験を開始しました。

📢ここ、試行錯誤したポイントです。最初から「フレームワーク集を作ろう」と思っていたわけではありません。「なぜこんなにトークンが溶けるのか」「毎回デザインのブレが気になる」という問いを追いかけていたら、たどり着いたのがこの逆転のフローでした。

ポスト7

「Claude Designでビジネスフレームワーク集の他に、グリッド型レイアウト集も作った」

2つ目のデザインシステム（59グリッドレイアウト集）が完成した報告です。深津さんが4月くらいのポストでグリッドシステムを作っており、真似して私も作成。「この2つさえあれば大抵のスライドは作れる」という見通しがつきました。

完成したデザインシステムは有料エリアでまるごと配布します。

ポスト8

「デザインシステムとして読み込ませて楽天の決算書をスライド化してみた」

完成した”型”の2つのデザインシステムを実際に使って、楽天グループ2026年第1四半期決算短信をスライド化しました。Claude CodeとCodexの比較検証も行い、どちらが上かが明らかになりました。比較結果は次の章でお伝えします。

ポスト7・8で紹介したビジネスフレームワーク集とグリッドシステム、ちょっとだけ見てもらえますか

8本のポストの中で登場したビジネスフレームワーク集とグリッドシステムが、どんなものか少しだけご覧ください。（この後の章でお伝えするStrategy Deck Systemも加えて、今回は3種まるごと配布します。）

■V0_Design System（MBA級50フレームワーク収録・54スライド）の代表スライド

image.png.webp
tetumemoカラーやロゴをあえて入れてデザインシステムの完成形をイメージしやすくしています
画像
画像
画像
画像
■V0_59 Grid Layout System（60レイアウトテンプレ収録）の代表スライド

image.png.webp
スライドのデザインに最適なグリッドシステムを採用
画像
画像
画像
画像
■Strategy Deck System（マッキンゼー・BCG型コンサルスライド・9テンプレ）の代表スライド

「こういうものが有料エリアでまるごと手に入るんだ」というイメージが伝わると思います。

デザインシステムはZIPファイル形式で提供しますので、デザインシステムを新規作成する際にZIPを添付して「Create」を押すだけで完成します。

あとのスライド量産はClaude CodeやCodexが担います。

ただ、お渡しするのは私のブランドカラーなどを設定していますので、ぜひご自身のお気に入りのカラーやフォント等に変更してお使いください。

🗂️ 完成したスライドから設計書を逆引きする

画像
image.png.webp

これは「Canvaのデザインを投げるだけでも作れる」でも説明していますがあらためて整理します。

V0_Design SystemとV0_59 Grid Layout Systemは「Claude Designでスライドを作る → デザインシステムとして保存する」という順序でした。これは逆です。「先に完成したスライドがある → Claude Designにそのスライドを渡す → 設計書として逆引きしてもらう」という流れです。

渡したのは、一流の戦略コンサルティングファーム（McKinsey/BCG）のスライドに仕上がるプロンプトで作成したスライドでした。

ネイビー × コンサルティングブルーの配色で、データテーブルとKPIコールアウトが中心の構成で、ビジネスシーンにとても使いやすい、アレンジしやすいデザインシステムです。

このPPTXをClaude Designに渡して「このスライドのデザインシステムを作って」とお願いしたところ、Claudeはスライドのファイル構造を解析して設計値を一覧にして返してきました。

image.png.webp

メインカラー（ネイビー #1B2A4A）、コンサルティングブルー（#4472C4）、ゴールド（#FFD700、KEY INSIGHTのみ）という3色体系、アクションタイトルのパターン（日本語で結論を先出しする書き方）、英語の見出し語（STRATEGIC ANALYSIS・KEY INSIGHT・CONFIDENTIAL）のスタイルまで、すべてスライドから読み取っていました。

完成したのが「Strategy Deck System」です。※デザインシステムの使い方で楽天の決算書をスライド化した時のデザインです。

9種のスライドテンプレート（表紙・経営サマリー・競合比較マトリクス・3機能タイル・Before/After比較・プロセスフロー・セクション区切り・インサイト・結論）と8つのコンポーネントが入っています。

V0_Design SystemのtetumemoブランドでもなくV0_59 Grid Layout Systemのミニマル路線でもない、「コンサルファーム資料」の独特の重さと説得力を持つデザインシステムが出来上がりました。

「完成したスライドを渡すだけで、その逆引きで設計書が生まれる」という発見は、3日間で一番意外な気づきでした。

詳細なセッション記録と3つ目のデザインシステム一式の配布は、有料エリアでお渡しします。

⚡ ClaudeとCodex、どちらが上か

同じデザインシステム＋同じ素材（楽天グループ2026年第1四半期決算短信）で、ClaudeとCodexの両方を試しました。

Claude（claude.ai）

Codex（Claude Code）

ファイルサイズ

773KB

96KB

スライド枚数

25枚

22枚

デザイン品質

明らかに上

Claudeに及ばない

画像生成

できない

できる

背景除去

できる

できる

画像生成から背景除去の一連フロー

できない

連続してできる

試しに楽天の決算書PDFを添付してスライドを作成

📸Codex製スライド

image.png.webp
比較的あっさりしたデザインで仕上がっています

📸Claude製スライド

image.png.webp
グラフ等、定量的な情報が入念に組み込まれています

好みもあるので”どちらが上か”とあえて判断するのが難しいと思いますがClaude Designの方がリッチに仕上がりました。

補足

ファイルサイズの差について補足します。

773KBと96KBという差は、「どちらが良いか」という単純な話ではありません。Claudeが作ったスライドはスタイルが豊かで表現力が高いため、情報量が多くなります。Codexが作ったスライドはよりコンパクトです。デザインの表現力という観点では、私の体験ではClaudeの方が明らかに上でした。

背景除去についての正確な理解も補足します。

Claudeは背景除去自体はできます。ただし、Claude Designには画像生成機能がないため、「Canvasで生成した画像の背景をそのまま除去してスライドに組み込む」という連続フローができません。Codexはこの画像生成→背景除去→スライドに組み込む流れを1つのセッションで完結できます。

3日間で確立した分業パターンはこれです。

デザインもスライドもトークンに余裕があるならすべてClaude Designで完結させたほうが良い。スライドに入れる画像素材の生成・加工はCodexで行います。

この分業が今のところベストだと思っています。

🌍 海外でも熱量が高い理由

日本でも話題になっていますが、海外での熱量はさらに高い印象があります。私が実際に収集した高インプレッションポストをもとに、使われ方の幅広さと熱量の正体を紹介します。

① Anthropicデザイナーによる公式解説（Views 312,445）

Anthropic公式デザイナーの@nateparrottさんによるポストが、調べた中で最も多くのViewを集めていました（312,445 Views）。6月の大型アップデートをスレッドで詳細解説したもので、WYSIWYG編集・デザインシステムインポート・Claude Code双方向連携・デスクトップ対応の4点がまとめられています。「公式が一番詳しく教えてくれている」という感覚で読んでおくといいと思います。

② アニメーション付きヒーローセクションがプロンプト1本で出てきた（Views 60,566）

デザイン専門家の@viktoroddyさんによるポスト（60,566 Views）。Claude Opus 4.8をClaude Designで使い、シンプルなプロンプトだけでアニメーション付きヒーローセクションを生成した実演です。

Figmaの代替として「瞬時に動くビジュアルが作れる」点を短い動画で証明しており、「マーケティング・ランディングページ用途で特に有効」というコメントと共に拡散されていました。非デザイナーがプロ級のLP素材を作れることを示した事例として印象に残っています。

③ 「33歳女性が7時間でサイトを8,000ドルで売った」（Views 28,206）

月20ドルのサブスクから使えるClaude Designですが、これだけでレストラン向けのサイト全体を設計して、7時間で完成させ、クライアントに8,000ドルで納品したという事例（28,206 Views）。プロセスは「広告掲載 → 依頼受注 → プロンプトでデザイン生成・詳細編集 → 7時間で完成」という流れです。「AIフリーランス革命」の象徴として拡散されていました。

月20ドルのツールで8,000ドルの案件を完成させるという数字のインパクトが広がった理由だと思います。

④ 「1週間かかっていた作業が1午後で完了」（Julian Goldie）

AI・SEO系インフルエンサーのJulian Goldie（@JulianGoldieSEO）さんが、自身のワークフロー革命を動画で解説したポストです。

従来の苦痛をこう描写しています。「カラーの推測 → コーダーの推測 → 何度もやり直し → 数週間かかる」。

アップデート後の新フローはこれです。ブランドキット（色・フォントなど）を一度アップロードして、プレーンテキストで要件を伝える。Claudeがキャンバス上に直接ページを構築して、ドラッグ＆ドロップで編集する。そのままClaude Codeにハンドオフ（スクリーンショット不要）。

このフローで「1週間かかっていた作業が1午後で完了」という発言が出てきました。Canva・Adobe・Wixなど既存ツールとの連携も言及しており、既存環境を置き換えるのではなく上位レイヤーで指示する存在として位置付けています。

⑤ Stripe・Linear・Vercelのデザインシステムをオープンソース化した人（Views 48,097）

2,000以上のプロダクト（Stripe・Linear・Vercelなど）のデザインシステムをDESIGN.md形式で公開し、Claude Designで誰でも読み込めるようにしたサイトを紹介したポスト（48,097 Views）です。これをClaude Designにアップロードするだけで、そのプロダクトのブランドスタイルで設計できます。「デザインシステムを自前で作らなくても、有名サービスのものを借りれば良い」という発想が広がっている様子で、特にプロダクト開発者・デザイナー層に刺さっていました。

⑥ 「エージェンシーに数週間・数千ドルかけていた作業が数分で完成」（Views 41,599）

DTCブランド（直接販売型ブランド）向けのメールキャンペーン設計に使ったという事例（41,599 Views）。Claude Fable 5のビジョン能力をClaude Designと組み合わせ、ブランドシステムを読み込ませてメールセクションを生成→インライン編集という流れです。「従来のエージェンシー委託（数週間・数千ドル）から数分で完成へのシフト」というメッセージが刺さり、ワークフロー動画を無料で提供したことでマーケティング担当者の間に広く拡散されていました。

海外で共通して言われていること

私が収集した高インプレッションポストに共通していたメッセージが3点ありました。

1つ目は、デザインから開発へのハンドオフが不要になったということです。デザイン指示をClaude Codeに直接コードで同期できるため、デザイナーからエンジニアへの受け渡し工程が省けます。細かい仕様書を書かなくていいというのがかなり良いです。

2つ目は、非デザイナーでもブランド遵守のデザインが作れるということです。専門知識なしに自分のブランドに沿ったものが作れることへの驚きが、どのポストにも共通していました。

3つ目は、FigmaやCanvaの「代替」ではなく「上位レイヤー」として使うという見方です。既存ツールを置き換えるのではなく、指示を受けてそれらのツール向けのアウトプットを生成する存在として位置付けています。

🔐 ここからのコンテンツ

ここまで、Claude Designが何者かと、基本的な使い方と、3日間で発見したことをお伝えしました。

「Claude Designって面白そう」
「デザインシステムを作ってみたい」
「でも、実際にどうやって作るの？という手順がまだわからない」

ここなんですよね。発想の転換はわかっても、「じゃあ具体的にどう作るか」が一番気になるところだと思います。

実は私も、最初からうまくいったわけではありませんでした。

デザインシステムを作ろうとして、最初に試みたコマンドが動きませんでした。数往復の会話の末にClaudeが「先ほどの説明は間違いでした。失礼しました。」と謝ってきたこともありました。HTMLで出力したスライドをブラウザで開いたら、完成直前にレイアウトが全崩れしたこともありました。

こういう躓きを全部経験した上でたどり着いたのが、有料エリアでお伝えするフローです。

ちょっとだけイメージしやすいように、私が最初にデザインシステムの元となるフレームワークを作るために使った指示文をシェアしますね。

tetumemo_デザインシステム.png（添付）
フォントはNoto Sans JPファミリーで統一
資料とかで使われそうなフレームワークのページをひたすら作ってください。

これだけです。

image.png.webp

この指示1つで、私のブランドカラー（青・黄・グレー）とフォントを読み取って、最初のデッキが完成しました。

image.png.webp
最初の指示だけではこの仕上がりにはなりませんでした

ただし、最初の指示だけでは「MBA級50フレームワーク」にはなりません。「どこまで拡張するか」「2つ目のデザインシステムはどう作るか」「完成したスライドから3つ目のデザインシステムを逆引きするにはどうするか」という過程が全部あります。

有料エリアでは、この作業の全記録を出します。使ったプロンプト全文・Claudeとのやり取り・失敗した場面・どう乗り越えたかそのまま出します。そして完成した3種のデザインシステムと、HTMLを正しく表示するためのSkillをまるごと配布します。

まずは無料エリアで話した逆転のフローを頭に入れた上で、有料エリアの手順を見てみてください。「あ、あの話はここのことか」という感じで、実際の作業がイメージしやすくなると思います。

デザインシステム作りは大量のトークンを消費します、皆さんもゼロから試すのは大変だと思いますので、私の作成したデザインシステムをGETして時短＆アレンジを楽しんでいただければ嬉しいです。

それではここから先で、ファイル一式をお渡しします！

購読中

📝 発行者

📝テツメモ｜tetumemo（Xアカウント）

📝テツメモ｜tetumemo（Xのハイライト）

📝テツメモ｜tetumemo（リンク集）

🔗tetumemo：非エンジニアのためのAI活用ニュースレター

📝テツメモのSubstack：SNS版

📝Substack版ニュースレター：「テツメモ｜AI時代の仕事と発信メモ」

🎤Spotify：AI QUEST（今日から始めるAI生活）

🎤Apple Podcasts：AI QUEST（今日から始めるAI生活）

📹️YouTube：AI QUEST（今日から始めるAI生活）

📝noteでも、たまにAIなどの記事を書いています。

🎟️お得な招待コード

💡Manus（1,000クレジットが獲得できる限定招待コード）

💡AIエージェント「Felo」（月額100円引きの招待コード）

💡Perplexity Pro（初月10ドルの招待コード）

💡Genspark

💡Lovartの招待コード

💡LilysAI（7日間有料プランが使える招待コード）

💡YouWare（アプリを作ってUPして稼ぐ新しい仕組み）

💡リアルタイム翻訳「Felo字幕」（15分無料で試せる招待コード）

💡便利なAI音声入力ツール「Typeless」（5ドルのクレジットがもらえます）

ここから先は有料コンテンツです
この続き：14,375文字 / 画像36枚
2026年06月のバックナンバー
¥1,176 / 税込み
収録されている記事
¥980 / 月額 (税込み)
購読を開始すると有料記事が閲覧できるようになります。バックナンバーは別途購入が必要です。
今月の記事

6,900人以上の方達が購読中

いつでも購読解除可能です

PREVIOUS
Claude Fable 5の公式ガイドで、AIの使い方が根本から変わった。6つのコツとOpusでも使える「司令塔Skill」を全部シェアします
NEXT
【コピペで終わらせない】9日でインスタ+3万人・600万再生を生んだ「AIアニメの教科書」を、"自分だけの量産システム"に育てる方法