次世代のビジネスをつくる、実装と教育のメディア。
検索メニュー
キーワードで探す
「トンマナが毎回ズレる」——AIに資料やUIを作らせたことがある人なら、一度はぶつかる問題です。Claude Designは、そこを正面から解きにきたツールです。作り方を指示するのではなく、自社のデザインのルールそのものを覚えさせて、それに沿ったものを出させる。この記事では、何ができるのか、どう使うのか、そして「ルールを渡す」とは具体的に何をすることなのかを整理します。
Claude Designは、Claudeとの会話からデザイン・インタラクティブプロトタイプ・プレゼンテーションを作れるツールです。
入口は分かりやすいところにあります。Claudeの左サイドバー、いちばん下の「デザイン」。ここを押すと立ち上がります。
開くと左がチャット、右がキャンバスという構成になっていて、会話で指示を出しながら、右側で出来上がっていくものを見て直していきます。
ほかのAIによる資料作成と決定的に違うのが、デザインシステムを読み込ませられる点です。自社の色・フォント・コンポーネント・余白のルールを先に渡しておくと、以降の生成がそれに沿います。毎回「うちのコーポレートカラーは……」と説明し直す必要がなくなる、というのが一番の変化です。
公式に挙げられている用途は6つです。
| 用途 | 具体例 |
|---|---|
| プロトタイプ | 触れる状態のインタラクティブな試作 |
| ワイヤーフレーム・モックアップ | 画面構成の検討 |
| デザイン探索 | 方向性を複数出して比べる |
| ピッチデック | 提案・投資家向けの資料 |
| マーケティング資料 | LP・バナー・告知物 |
| ドキュメント | ワンページャー、履歴書など |
並べてみると、「デザイナーの仕事」と「非デザイナーが仕方なく作っている資料」の両方が入っているのが分かります。この記事では、多くの人に関係がある後者——資料づくりに絞って見ていきます。
ここは先に押さえておきたい点です。Claude DesignはPro・Max・Team・Enterpriseの各プランで使えます。無料プランには含まれません。またEnterpriseでは既定でオフになっているため、使うには組織の設定から有効化する必要があります。
各プランの価格はClaude Codeの料金——無料枠の有無とプラン比較・個人と法人で整理しています。
では無料プランだと画面上どうなるのか。実際に無料アカウントで確認しました。結論から言うと、メニューには出ます。押すと案内を経て、アップグレードに誘導されます。
| 無料プランでの挙動 | |
|---|---|
| 1 | 左サイドバーの最下段に「デザイン」が表示される（隠されてはいない） |
| 2 | 押すと紹介ページ「Claude でデザインする」が開く。ボタンは「Claude Design を入手する」 |
| 3 | 押すとアップグレード画面「Claudeでデザインするにはアップグレードしてください」へ |
紹介ページの説明文は「インタラクティブなプロトタイプ、ワイヤーフレーム、スライドなど、作りたいものを何でも作成できます。既存のファイルから始めるか、必要なものを説明するだけで始められます」。機能の入口自体は無料でも見えるが、キャンバスには入れないという設計です。
この記事の中心になる言葉なので、先に整理しておきます。デザインというと感覚的なものに聞こえますが、デザインシステムはルールの集まりです。作例集ではありません。
いちばん短く言うなら、「次に誰かがこの会社の資料を作るとき、迷わずに済むように決めておいたこと」です。
抽象的に聞こえるかもしれないので、実物を出します。弊社がClaude Designに持っているデザインシステムは、この構成です。
| 区分 | 中身 |
|---|---|
| Readme | このデザインシステムの説明書き |
| Templates | 元になった資料のテンプレート |
| Brand | 斜めの背景、ロゴ、ロゴ脇のマーク、イラストとアイコン |
| Colors | ブランドカラー、グレーの段階、文字の役割ごとの色 |
| Components | 本文のブロック、スライドの枠まわり、文字 |
| Shape | 角丸、奥行きの出し方 |
| Slides | 表紙・目次・締めなど、スライドの型 |
区分の名前は英語ですが、決めているのは色・文字・部品・余白の4つです。「デザインシステム」という言葉の中身は、突き詰めるとここに落ち着きます。
AIは、指示がない部分を毎回その場で判断します。「見やすい提案書を作って」と頼めば見やすいものが出てきますが、次に頼んだときの「見やすい」は前回と違います。悪気があるわけではなく、判断の基準を持っていないからです。
デザインシステムを渡すというのは、この「その場の判断」を先回りして潰しておくことです。色を4つに限定しておけば、5つ目は出てきません。見出しのサイズを3段階に決めておけば、中途半端な大きさは生まれません。
つまりデザインシステムとは、選択肢を減らす仕組みです。そしてAIに対しては、これが一貫性を担保する最も現実的な方法になります。
デザインシステムと聞くと、専任のデザイナーがいる会社の話に思えるかもしれません。ですが、ゼロから作る必要はほとんどありません。すでにある資産の中に、事実上のルールが埋まっているからです。
Claude DesignがPowerPointやPDF、スクリーンショットを入口として認めているのは、まさにこの状況を前提にしているからです。整備されたドキュメントがなくても、「これがうちらしい資料です」と実物を渡すところから始められます。
ここがこのツールの肝です。いま使っているスライドやWebサイトを渡すと、そこから要素を抜き出してデザインシステムを組み立ててくれます。こちらでルールを書き出す必要はありません。
公式の説明はこうです。アップロードした資料に対して「Claudeはそれらを分析し、再利用可能なデザインシステムを抽出します」。過去の提案書やコーポレートサイトを渡せば、そこから色・文字・部品・レイアウトの規則が引き出され、以降はそのルールで生成されるようになります。
流れはこうです。
| やること | 補足 | |
|---|---|---|
| 1 | 手元の資料を渡す | 最低1つあればよい |
| 2 | Claudeが抽出する | 「分析し、再利用可能なデザインシステムを抽出します」 |
| 3 | できたものを検証する | 作成したデザインシステムを使ってみる |
| 4 | 直す | Claudeと会話しながら変更する |
| 5 | 既定として設定する | 既定として設定することで、毎回同じ見た目の生成になる |
ちなみに、直し方がフォーム入力ではなくチャットなのも特徴的です。「アクセントカラーをもう少し落ち着かせて」「見出しと本文の差をはっきりさせて」といった、数値に落とす前の言葉のまま調整できます。
実際にやってみます。用意するのはいま使っている資料だけで、ルールを考える作業はありません。
入口はホーム画面のプロンプト欄で、「Design system」の欄からその場で使うものを選びます。既定はNoneで、選ばなければ何も適用されません。新しく作るときは、開いたパネルの「＋」から進みます。
この画面で分かることが3つあります。
そして選択は生成のたびに切り替えられます。一度決めたら固定、ではありません。社内向けと社外向けでトンマナを変える、といった使い分けが前提の作りです。
では新規作成を選ぶとどうなるか。「＋」を押すと、入口を2つ提示されます。
ここでは「Create here」を押して進みます。手元にあるのがスライドやPDFという、いちばん多いケースです。
押すと設定画面に切り替わります。会社の説明を書く欄と、素材を渡す欄が並んでいます。
素材の渡し口は4つあって、すべて任意です。GitHubのリポジトリをリンクする／自分のPCのフォルダをリンクする／.figファイルを上げる／フォント・ロゴ・アセットを上げる。上に「Company name and blurb」という自由記述の欄があり、いちばん下には「Any other notes?」もあります。素材だけでなく、言葉でも説明を足せる作りです。
今回渡したのは、弊社の生成AI研修 DAY 1「AI概論」のスライド92枚を、Googleスライドからpptxで書き出したものです。デザインシステムの資料ではなく、実際に研修で使っている資料そのものです。「Add fonts, logos and assets」に入れて、Continue to generationを押します。
出典：渡した資料：生成AI研修 DAY 1「AI概論」（Googleスライド）
画面には「このタブを開いたまま、5分後に戻ってきてください」と出ます。
5分ほどで出来上がりました。
左の目次が、そのまま中身の一覧です。前章で挙げた区分がそのまま並んでいます。研修用のデッキを1本渡しただけで、ここまで分解されました。
Readmeの冒頭には何をどこから取ったのかの表があり、続けてこう書かれています。
コードベースもFigmaファイルもリポジトリも渡されていない。ここにあるものはすべて、あの1本のデッキから導かれている。デッキが答えを持たない部分については、推測せず、その旨をこのReadmeに記す。
チャット側でも「ブラッシュの背景だけは推測です」と自己申告していました。分かることと分からないことを分けて書いているのは、素材が1本しかない状況では重要な性質です。
Diagonal fields——表紙・章扉に使う斜めの背景が4種（title・cover／section・orange／section・navy／section・blush）。説明には「4つの作り込まれた全面背景。再着色も切り直しもしないこと」とあります。
そして、この記事でずっと言ってきたことの答えがここにありました。
色が、色名だけで登録されていません。ひとつずつ用途が添えられています。
| 色 | 登録された用途 |
|---|---|
| Navy #19216E | chrome（画面の枠まわり） |
| Navy / theme #2D296B | fills（塗り） |
| Navy / panel #2A3990 | headers（見出し帯） |
| Orange #FD7E38 | emphasis（強調） |
| Orange light #FFAB40 | 演習 |
題材にしたのは、弊社のオウンドメディアに載っている「Gemini Canvasの使い方」という記事です。約1万字、画像10点。これをまるごとスライドにするところまでをやります。
出典：素材にした記事：Gemini Canvasの使い方——文章から資料・Webページ・音声まで一気に作る
いきなり「記事をスライドにして」と投げてはいません。先に、1枚ごとに何を載せるかを書き出したMarkdownを1本作りました。見出し・本文・画像・出典・備考を、43枚ぶん並べただけのファイルです。
本文は記事の文章をそのまま置いています。要約すると、スライドにした時点で情報が落ちてしまうからです。逆に、記事にない数字や主張は足していません。
この工程を挟むかどうかで結果が変わります。デザインシステムが担保するのは見た目の一貫性であって、何を載せるかは担保しません。中身は人間が決める必要があります。
出典：実際に使った構成書：structure.md
プロジェクトにデザインシステム（PanHouse Design System）とstructure.mdを添えて、指示は一文だけです。
structure.mdを元にスライドを作成してデザインは何も指定していません。色もフォントもレイアウトも、渡してあるデザインシステムに任せています。
表紙を見ると、ネイビーの背景、タイトル上のオレンジの小見出し（TOOL GUIDE）、右上のロゴ、斜めの背景パターン——弊社の資料の体裁がそのまま出ています。指定していないのに、です。デザインシステムが効いていることが、この1枚で分かります。
ここからが調整です。表紙の紺が重かったので、チャットにこう書きました。
表紙の1ページ目について、背景色が深すぎるので、もうすこし淡い色にして
背景を淡くすると白の文字が見えづらくなるので調整して
返ってきた説明はこうです。
表紙を淡い背景（白パターン＋オフホワイト）に変更し、文字はネイビー系に、ロゴも明背景用に差し替えました。オレンジのアイキャッチはそのままです。
頼んだのは背景の色だけです。ところが実際には3つが連動して変わっています。
デッキが仕上がったら、最後は配る形に落とします。
書き出しは、PDF・HTML・PowerPoint、およびその他の形式に変換できます。
出典：書き出したPDF：Gemini Canvasの使い方（43枚・PDF）
気になるのはPowerPointの中身です。NotebookLMのスライドは、pptxとして書き出せるのに、開いてみると中身は画像で編集できませんでした（2026年8月時点で確認した限り）。同じ罠がないかを確かめました。
結論から言うと、編集できます。文字は選択して打ち替えられ、図形も個別に動かせます。画像を貼っただけのスライドではありません。書き出したあと、いつも使っているPowerPointやGoogleスライドで数字を差し替えたり、1枚足したりできるということです。
出典：書き出したPPTX：Gemini Canvasの使い方（43枚・PowerPoint） ※ Googleスライドで開くとそのまま閲覧・編集できます。ダウンロードする場合は「ファイル」→「ダウンロード」→「Microsoft PowerPoint（.pptx）」から。
共有については、Teamプランであれば、Claude上で同じOrganizationに属している人にリンクを共有できます。
作ったデザインシステムは、Claude Designの中だけのものではありません。HTMLとして落として、Claude Codeのスキルに固定することができます。弊社がやったのは、それだけです。
| やったこと | |
|---|---|
| 1 | ロゴと研修資料（pptx・pdf）を渡して、デザインシステムを作らせる |
| 2 | できたものをHTMLで書き出す |
| 3 | 中身のCSSと使い分けルールを、Claude Codeのスキルとして置く |
3番目は、フォルダにファイルを置くだけの作業です。新しくルールを考えてはいません。抽出されたものを、別の場所でも読める形にしただけです。
中身は色や文字の定義と、その使い分けのルールです。ルールのほうを日本語に直すと、こうなります。
| 決めていること | ルール |
|---|---|
| オレンジの量 | 1スライドに1〜3箇所まで。ネイビーが構造をつくり、オレンジは注意を引く一点だけに使う |
| 文字の色 | 役割ごとに決まっている。見出し／本文／補足／キャプションの4段階で、書き手が選ぶ余地はない |
| ロゴ | 背景が濃ければ白、淡ければネイビーを使う |
| 背景の柄 | 薄く敷く。文字が乗る側には一枚かぶせて読みやすさを確保する |
あわせて、スライドの型を7つに限定しています。新しい型を作る前に、この7つの組み合わせで足りないか考える、というルールも書いてあります。
| 型 | 用途 |
|---|---|
| Title | 表紙 |
| Section | 章扉。巨大なオレンジの章番号 |
| Features | 3カラムのカード |
| Stats | 大数字3つ＋出典 |
| Quote | 明朝の引用。デッキに1〜2枚まで |
| Compare | 良い例／悪い例、Before／After |
| Closing | 締め |
和文フォントも同梱してあるので、スキルを読ませれば、色もフォントも型も決まった状態から書き始められます。Claude Codeに「スライドにして」と言うだけで、Claude Designで出したものと同じ体裁のデッキが出てきます。
デザインシステムは、作った場所に縛られません。Claude Designで抽出させ、HTMLで持ち出し、Claude Codeで使う。同じルールが2つの道具にまたがって効きます。
そして、渡しているものの正体は結局制約の一覧です。「かっこいいスライドを作って」と頼むと毎回違うものが出てきますが、「オレンジは1スライドに1〜3箇所まで」と決まっていれば、何度作らせても同じ顔になる。ブランドの一貫性は、表現の自由度を削ることで生まれます。
Claude Designは、AIにデザインの作り方ではなくルールを渡すツールです。色・文字・部品・余白を先に覚えさせておくと、そこから出てくるものが毎回同じ顔になる。「トンマナが毎回ズレる」問題への、正面からの回答になっています。
実際に試して分かったのは、渡す材料は整っていなくていいということでした。使ったのは、研修で普段どおり使っているスライド1本です。そこから出てきたデザインシステムには、色のコードだけでなく「どの色を、何に使うか」が入っていて、「再着色も切り直しもしないこと」といった禁止のかたちのルールまで含まれていました。整備してから使い始める必要はありません。
そのぶん、人間の仕事は中身を決めるほうに寄ります。記事1本をスライド43枚にしたとき、こちらが用意したのは「1枚ごとに何を載せるか」を書いた構成書だけで、デザインには一切触れていません。直すときも「背景をもう少し淡く」と言えば、文字色もロゴも連動して整いました。
そして、できたデザインシステムはその場に縛られません。HTMLとして持ち出せば、Claude Codeでも同じルールで作れます。
使うにはPro以上のプランが必要です。無料プランでもメニューには出ますが、押すとアップグレードの案内に進みます。手元にPowerPointやPDFしかない状態からでも始められる設計なので、整備が追いついていない会社ほど試す価値があると思います。
この記事を書いた人
パンハウスインサイト編集部
PanHouse Insight Editorial Team
生成AI・DX領域の最新トレンドや実践ノウハウ、企業導入事例などを、わかりやすくお届けする編集チームです。
お役立ち資料 