【2026年6月最新】Claude Designの使い方｜デザインシステムで資料を量産

この記事でわかること

Claude Designとは何か？スライド・ドキュメント・名刺・ワイヤーフレームまで、共通デザインで作れるClaudeの新機能
2026年アップデートで何が変わったのか｜以前の使いにくさが解消され、個人でもサクサク資料が作れるように
最重要の「デザインシステム」の作り込み方（会社名・参考データ・getdesign.md・Any Other Notesプロンプト・生成・Publish登録）
作ったデザインで台本を流し込み、おしゃれな資料を量産する手順と、編集・エクスポート・Claude Code連携のコツ（2026年6月時点）

「資料作成のたびにデザインがバラバラ…毎回ゼロから整えるのに時間がかかってしんどい」

プレゼン資料やドキュメントを作るたびに、配色やレイアウトを一から考え直していませんか。せっかく中身が良くても、デザインに時間を取られると本来やりたい作業が進みませんよね。今回はその悩みを根本から解決する、生成AI「Claude Design（クロードデザイン）」の2026年6月最新版を、実際に使い込んで分かった活用法まで丁寧に解説します。

Claude Designで作成したおしゃれなビジネススライド資料の例

こんにちは、AIツールやWebサービスが大好きなルーティンラボ（@rutinelabo）です。この記事では、Claudeに搭載されたデザイン作成機能Claude Designについて、その正体から核となる「デザインシステム」の作り込み方、台本を流し込んで資料を量産する具体的な手順まで、2026年6月現在の情報でまるっと解説します。

Claude Design自体は以前から提供されていましたが、今回のアップデートで大きく使いやすくなりました。前バージョンの基礎的な考え方は、こちらの記事でも詳しく解説しています：【2026最新】Claude Design完全ガイド｜デザインシステムでAI臭さを消す方法

: 【2026最新】Claude Design完全ガイド｜デザインシステムでAI臭さを消す方法

続きを見る

こんな方におすすめ

スライドや資料のデザインを毎回ゼロから整えるのに疲れている方
会社のロゴやテーマカラーを統一した資料を、AIでサクサク量産したい方
Webデザインの知識がなくても、おしゃれでビジネスライクな資料を作りたい方
Claude Designの「デザインシステム」の作り方が分からず、なんとなくで使ってしまっている方

無料で使えるAI搭載動画編集ソフト

初心者でもプロ級の動画編集ができる

AI搭載で他で最新の動画編集を体験

Filmora内に動画編集のための豊富な素材が充実

Filmora15を使ってみる

＼YouTube動画で見たい方はこちらから／

現在動画編集中です…しばらくお待ちください！

〜　動画・SNSでも情報発信中！！　AIとITスキルでキャリアUPと副業チャレンジ　〜

YouTube

Claude Designとは？スライド・名刺まで作れるClaudeのデザイン機能

Claude Designで作成したスライドデザインの作例画面

Claude Design（クロードデザイン）とは、ブラウザ版・アプリ版のClaudeに搭載された、スライドやドキュメント・名刺・ワイヤーフレームなどを作成できるデザインツールです。テキストで指示するだけで、おしゃれでかっこいいビジネス向けのデザインを、Claudeが自律的に組み立ててくれます。

作れるものはスライド資料だけにとどまりません。1ページのドキュメント（Webページのように見せられる構成）や、かっこいい名刺のデザイン、アプリ開発時の外枠となるワイヤーフレーム、アニメーション資料まで、共通のデザインで統一したコンテンツをまとめて作成できます。

Claude Designで作れるドキュメントや名刺など各種デザインの例

このツールの大きなメリットは、会社のロゴやテーマカラーをあらかじめ登録しておける点です。一度登録しておけば、それぞれの資料や生成物に対して、自動でロゴを埋め込んだ統一感のあるデザインを作れます。デザインを重視してコンテンツを作りたい方には、かなり有効な機能です。

1つのデザインで横断的に作れる：スライド・ドキュメント・名刺・ワイヤーフレーム・アニメーションを共通の世界観で統一
ロゴ・テーマカラーを登録できる：会社やブランドのロゴ・配色を埋め込んだ資料を自動生成
知識がなくてもOK：Webデザインの知識がなくても、Claudeが自律的にデザインを整え・修正してくれる

使えるのはPC（ブラウザ・アプリ版）から

Claude Designは、パソコンのブラウザ版、またはアプリ版のClaudeから利用します。ブラウザ版は「製品」→「デザイン」、アプリ版は左下の「デザイン」ボタンから開けます。スマホアプリ版のClaudeには、まだこの機能は搭載されていないので、その点だけ注意してください。一言で資料を作るという発想は、以前紹介したSkywork AIとも通じるものがあります。

2026年アップデートで何が変わった？使いやすさが大きく向上

2026年のアップデートで使いやすくなったClaude Designの操作画面

冒頭でも触れたとおり、Claude Design自体は以前からリリースされていました。ただ正直なところ、少し使いにくさがあったり、使い始めるまでのハードルが高かったりと、気軽に使える機能とは言いづらい部分がありました。

それが2026年のアップデートで、操作性が大きく改善され、個人でもサクサク資料を作れるレベルになりました。筆者自身もアップデート後にいろいろと使い込んでみましたが、基礎的な使い方さえ押さえてしまえば、あとはほぼ自動でデザインを仕上げてくれる印象です。Claude本体の進化については、Claude Opus 4.8の徹底解説記事もあわせて読むと、ここ最近の伸びがよく分かります。

: 【2026年最新】Claude Opus 4.8でゲームも動画編集ソフトも自作｜新機能を徹底解説

続きを見る

とはいえ、いくつかのコツを知らないまま使うと「なんとなく作れたけど、いまいち使いこなせていない」状態になりがちです。そこで本記事では、Claude Designでもっとも大事な「デザインシステム」を中心に、つまずきやすいポイントを押さえながら解説していきます。

最重要は「デザインシステム」｜作り込みが質と時短を決める

画面下部にプロジェクト・デザインシステム・テンプレッツの3項目が並ぶClaude Designの構成

Claude Designの画面は、下部に「プロジェクト」「デザインシステム」「テンプレッツ」という3つの項目が並んでいます。正直、最初は操作画面が少し分かりにくいのですが、それぞれの役割を整理すると一気に理解しやすくなります。

プロジェクト：実際に作ったデザイン（スライドや資料）が溜まっていく場所
デザインシステム：あなた自身が登録した「デザインの型」。配色・レイアウトの設計図にあたる
テンプレッツ：スライド・ドキュメント・名刺などを手早く作るためのひな形

この中でClaude Designの肝になるのが「デザインシステム」です。デザインシステムとは、たとえば「クリーム色の背景に黒と濃いオレンジを効かせたClaudeらしい配色」や「青をベースに薄いグレーの背景でまとめたバランスの良い配色」といった、あなた好みのデザインの型を登録しておく仕組みです。

デザインシステムに登録された配色デザインの例（クリーム背景にオレンジのClaude調）

一度デザインシステムを作っておけば、新しくプロジェクトを立ち上げたり台本を流し込んで資料を作ったりするときに、登録したデザインをワンタッチで割り当てられます。つまり、後から発生する配色の微調整や修正作業の時間を、大幅に削減できるということです。

まず最初に「デザインシステム」を作り込むのが正解

Claude Designで「なんとなく好きなスライドはできたけど、毎回バラつく」となる原因は、たいていデザインシステムを作らずにいきなり資料を作っているからです。遠回りに見えても、最初にデザインシステムをしっかり作り込むのが、結局いちばんの近道です。ここさえ整えれば、あとは台本を流し込むだけで安定した資料が量産できます。

デザインシステムの作り方｜参考データとプロンプトで安定させる

デザインシステムを新規作成するCreateボタンの選択画面

ここからは、実際にデザインシステムをゼロから作る手順を見ていきます。大きな流れは「クリエイト画面を開く → 会社名や参考データを入れる → メモ（プロンプト）を添えて生成する」の3ステップです。順番に進めれば難しくありません。

step
1デザインシステムの「Create」から作成を始める

「デザインシステム」のボタンをクリックすると、あらかじめ作ったデザインを選べる画面が開きます。ここで右上の「Create」をクリックし、何もない状態から作る場合は「Create Using Claude」を選びます。資料を元に作りたい場合は「Create Here」、Claude Codeと連携して作りたい場合は「Create Using Claude Code」を選びます。今回はイメージに近いデザインを安定して作れる「Create Here」で進めます。

Create Hereの設定画面でCompany Name（会社・ブランド名）を入力するところ

step
2Company Name（会社・ブランド名）を入力する

設定画面はほぼ英語ですが、難しい項目はありません。まず「Company Name & Blurb」に、運営している会社名や個人のプラットフォーム名を入力します。たとえば「Routine Labo」などです。ここで入れた名前がデザインシステムの登録名やロゴにも反映されるので、「ルーティンラボデザイン01」のように分かりやすい名前にしておくのがおすすめです。

step
3参考デザイン（PDF・Figファイル・getdesign.md）を読み込ませる

次の「Provide an example of your design system」では、あなたが持っているデザイン資料をアップロードすると、それを参考にデザインを作ってくれます。GitHubのURLを貼る方法もありますが、直感的に使いやすいのはPDFやスライドのファイルをアップロードする方法です。以前作った資料や、参考にしたいデータをアップすれば、その配色・レイアウトを読み取って整えてくれます。

参考にしたいデザイン資料やgetdesign.mdのブランド配色ファイルをアップロードする画面

Any Other Notesに作りたい資料の内容や対象を入力する画面

ブランド配色を手早く取り込める「getdesign.md」が便利

おすすめなのが「getdesign.md」というサイトです。Apple・Claude・Nikeなど、さまざまな企業のブランドデザイン（テーマカラー）を参考にできるサイトで、好きな配色があればマークダウン形式（.md）のファイルをダウンロードできます。それをそのままアップロード欄に読み込ませれば、そのブランドの世界観をデザインシステムに取り込めます。getdesign.mdのリンクは動画概要欄に貼っていますので、ぜひ参考にしてみてください。

step
4Any Other Notesに「何を・誰向けに作るか」を書く

最後の「Any Other Notes」は、どんな資料を作っていくかを伝える項目です。なくてもデザインはしてくれますが、書いておいた方が仕上がりが安定します。ポイントは、①どんな資料を作るのか、②レイアウト、③載せる情報、④対象（誰が見るか）の4点。ビジネスパーソン向けか小中学生向けかで、フォントの大きさや配色は大きく変わるので、ここを明確にしておくのが大切です。

デザインシステムを生成しているClaude Designの待機画面

このデザインシステムは、複数の成果物テンプレート（スライド／ドキュメント／
Webフレームワーク／名刺／アニメーション）を量産するための土台として使います。
以下を全成果物に共通する規律として、再利用可能なテンプレート前提で構築してください。

【ブランドの基本方針】
- ブランド名：【あなたのブランド名】
- 一言で言うと：【例：IT/AIの情報をやさしく深く届けるメディア】
- 与えたい印象：【例：知的・クリーン・信頼感／ミニマルだが冷たすぎない】
- 避けたい印象：【例：ごちゃごちゃ・チープ・派手すぎ】

【守ってほしい共通ルール】
- カラーは指定したブランドカラーのみを使用し、勝手に色を増やさない
- フォントは指定のものに固定し、見出し・本文の役割を明確に分ける
- 余白・行間は広めにとり、情報の階層（大見出し→小見出し→本文）を常に明確にする
- すべての成果物で、再利用しやすいよう「差し替え前提の要素」を意識して作る
（見出し・本文・画像・ロゴ位置などをパーツとして分けて配置する）
- アクセシビリティ（文字コントラスト・最小文字サイズ）に配慮する

【トーン＆ボイス】
- 文章は【例：丁寧だが堅すぎない、親しみのある専門家口調】
- 専門用語には簡潔な補足を添える方針で

各成果物の具体的なレイアウト指示は、その都度チャットで個別に指定します。
このNotesは全成果物に通底する「世界観の土台」として扱ってください。

※もし叩き台としてDESIGN.mdや既製のデザイン素材を取り込んでいる場合は、
　それを「出発点」として扱い、上の【ブランドの基本方針】の内容を優先して
　自分のブランドに合わせて上書き・調整してください。元素材の固有名や
　ロゴはそのまま流用せず、必ず私のブランド情報に置き換えてください。

step
5Continue to Generationで生成する（10〜15分）

設定が終わったら、右上の「Continue to Generation」をクリックします。画面には「5分程度」と表示されますが、実際には10〜15分ほどかかることが多いので、時間に余裕があるときに進めるのがおすすめです。生成が終わると、スライド・ドキュメント・名刺などのテンプレートが一気に出来上がります。

生成されたデザインシステムをPublishにチェックして登録する画面

step
6Publishにチェックを入れてデザインシステムに登録する

仕上がったデザインを使い回したい場合は、最初はチェックが外れている「Publish」にチェックを入れます。これでデザインシステムへの登録が完了し、スライド・ドキュメント・名刺・Webフレームワーク・アニメーションという全5種類のデザインを、この型で呼び出せるようになります。

登録されたデザインシステムが一覧に表示されたClaude Designの画面

作成したデザインシステムを資料に割り当てて選択する画面

作り直したいときは“書き出して再アップ”でOK

「なんとなく作って気に入ったデザインができたけど、デザインシステムに登録していなかった」という場合でも大丈夫です。右上の「シェア」→「エクスポート」からPDFやPowerPointで書き出し、それを再度デザインシステム作成時にアップロードすれば、同じ配色・レイアウトで作り直せます。少し手間はかかりますが、覚えておくと便利な裏ワザです。

作ったデザインで資料を量産する｜台本を流し込むだけ

台本を貼り付けてスライド資料を自動生成したClaude Designの画面

デザインシステムが完成したら、いよいよ資料作成です。ここからは驚くほど簡単で、作っておいたデザインを割り当てて、台本を流し込むだけです。今回はスライド資料を例に進めます。

まず作りたい資料の種類で「スライド」を選択します。すると、これは実際の生成物になるので「プロジェクト」の方に登録されていきます。あとは筆者がよく使う、こんなプロンプトを添えます。

「以下の台本を参考にしてスライド資料を作りたいです」とひと言添える
その下に、YouTubeやプレゼンで使う台本（セミナー原稿）をそのまま貼り付ける
あとは送信アイコンをクリックするだけ

台本はかなりの文字量でも問題なく貼り付けられます。生成に使うAIモデルはOpus 4.8・Sonnet 4.6・Haiku 4.5から選べますが、基本的には最新のOpus 4.8を選んでおけば間違いありません。

20枚作ってもレイアウト崩れゼロ。安定感が段違い

実際に台本を流し込んでみると、Claudeのテーマカラーを反映した、余白の取り方まで美しいスライドが一気に完成しました。今回は20枚のスライドを作ってもらいましたが、レイアウトがはみ出すようなエラーは一度もなし。最初にデザインシステムさえ作り込んでおけば、ここまで安定して資料を量産できます。ビジネスの現場でそのまま使えるクオリティです。

一言で資料一式を作る系のAIとしては、Skywork AIやNotebookLMも便利です。Claude Designはとくに「統一されたデザインで量産する」のが得意なので、用途で使い分けると効率がぐっと上がります。

: Skywork AIの使い方｜一言でスライド・資料・Excelが完成するスーパーAIを解説

続きを見る

編集・エクスポート・Claude Code連携｜仕上げのコツ

チャットやエディットでスライドを編集するClaude Designの操作画面

資料ができたら、あとは感覚的に編集を進めるだけです。Claude Designには、目的に応じた3つの編集方法が用意されています。これらを使い分けると、思い通りのデザインに仕上げやすくなります。

チャット：左側のチャットでClaudeと会話しながら、全体の方向性やデザインをまとめて変更する
エディット：右上の「エディット」から、テキスト・フォントの種類・配置（中央/右揃え）をピンポイントで修正。Word感覚で使える
コメント：デザインの特定箇所にコメントを付けて、修正の指示を残す

全体の雰囲気を変えたいときはチャット、細かい文字修正はエディット、という具合に使い分けるのがコツです。Webデザインの知識がなくても、対話と直感的な操作だけで整えられるのがClaude Designの魅力です。

まとめ：デザインシステムを作り込めば、資料作成は一気に時短できる

Claude Designで資料作成を効率化する記事のまとめイメージ

Claude Designは、スライド・ドキュメント・名刺などを共通のデザインで作れる、Claudeのデザイン作成機能です。2026年6月現在のポイントをまとめます。

Claude Design＝スライド・名刺・ワイヤーフレームを統一デザインで作れるClaudeの機能（PCのブラウザ・アプリ版で利用）
2026年アップデートで操作性が大幅改善。個人でもサクサク資料が作れるように
最重要は「デザインシステム」。会社名・参考データ・getdesign.md・Any Other Notesで作り込むほど質と時短が上がる
登録後は台本を流し込むだけでおしゃれな資料を量産。20枚でもレイアウト崩れなしの安定感
編集はチャット／エディット／コメントを使い分け、PDF・PowerPointで書き出し可能。Claude Code連携も対応

大事なのは、いきなり資料を作り始めるのではなく、最初に「デザインシステム」をしっかり作り込むことです。そこさえ整えれば、あとは台本を流し込むだけで、統一感のあるおしゃれな資料を何枚でも量産できます。資料作成に時間を取られている方は、ぜひ一度試してみてください。今回の記事が参考になった方は、ぜひYouTubeチャンネルの登録もお願いします。それではまた次の記事でお会いしましょう。