🎨

なぜスライド作りはClaude Designでやるべきなのか?

に公開1

デザインは本職ではないのに、見た目の調整で時間だけが溶けていく。

そんな経験ありませんか?

私はこれまで、Google Slidesで一枚ずつ手作業していましたが、先日 Claude Design を使ってみたところ、その「溶けていた時間」がほぼ消えました。

今日はそんな話をしたいと思います。

タイトルの問いに先に答えておきます。
スライド作りをClaude Designでやるべき理由は、単に「きれいなスライドが速く出てくるから」ではありません。

一度ブランドを「デザインシステム」として覚えさせれば、デザイナーでなくても、デザインツールの使い方を知らなくても、統一されたデザインの資料を短時間で作れるようになる からです。

今回作成したスライド

今回Claude Designで作成した会社紹介資料がこちらです。

この記事で分かること

  • Claude Designで、既存資料から「デザインシステム」を作り、ブランドの揃ったスライドを生成するまでの具体手順(スクリーンショット付き)
  • 手作業で数日かかっていた資料が、約1時間でできたビフォーアフター
  • AIに任せきれず、人間が手を入れた部分
  • 複雑な図を一発で出す「下絵」のコツ(ChatGPT × Claude Design)

私は自社サービスを開発する組織でAIを組織導入・運用し、生産性向上を推進する仕事をしています。

今回作ったのはエンジニア・デザイナー向けの「採用情報」スライドですが、会社紹介・サービス紹介・提案資料など、ブランドが決まっている資料すべてに同じ話が当てはまります。

Claude Designとは

Claude Designは、Anthropicが2026年4月に発表したビジュアル制作ツールです。左にチャット、右にキャンバスという画面で、「作りたいもの」を説明するとキャンバス上にデザインが生成され、対話しながら仕上げていきます。

Claude Designの画面。左に「Start with context」のチャットパネル、右のキャンバスにブランドに沿ったスライドが並ぶ

特徴をざっくり挙げると、こんな感じです。

  • 入力が柔軟:テキストのほか、画像・DOCX・PPTX・XLSX・Webキャプチャを渡せる
  • 既存資料からデザインシステムを作れる:ロゴ・既存スライド・配色などから、色・文字まわり(フォントや見出しの大きさ)・パーツのデザインを読み取って「デザインシステム」を作れる
  • エクスポートが豊富:PDF・PPTX・HTML・Canva送信・共有リンクに対応

Before:Google Slidesで一枚ずつ手作業だった

これまでの会社紹介・採用資料は、Google Slidesで手作業でした。

テンプレートをコピーして、見出しを書いて、ブランドカラーを指定して、図を置いて、余白を整えて……という作業を、ページ数ぶん繰り返します。やっかいなのは「統一感」で、後から1ページ足すと、フォントサイズや行間、カードの角丸が前のページと微妙に合わない。気づくと細部の調整に時間が溶けていきます。

結果として、ちゃんとした資料を1本作るのに数日かかっていました。デザインの良し悪し以前に、「ブランドを毎回手で再現する」コストが重かったのです。

STEP1:既存資料からデザインシステムを抽出する(約15分)

まずやったのは、手持ちの会社説明資料(PPTX)をそのまま渡して、デザインシステムを抽出させる ことです。

操作自体はシンプルです。Claude Designを開き、「Design systems」から新規作成して、ブランドの説明と参考アセット(既存スライド・ロゴ・GitHubリポジトリ・Figmaファイルなど)を渡すだけ。実際の画面は次のような流れです。

デザインシステム作成の手順(6ステップ・スクリーンショット)

STEP1 claude.ai/design を開く
STEP2 右上タブから「Design systems」を選択
STEP3 「Create」をクリック
STEP4 デザインシステムの説明と、参考アセット(GitHubリポジトリ・Figma・フォント・ロゴ等)を入力
STEP5 「Continue to generation」をクリックして作成
STEP6 完了すると、Colors・Typography・Spacing などが言語化されて表示される

ポイントはステップ4です。ブランドの説明文だけでなく、参考になる実物(既存資料・ロゴ・コードベース)をできるだけ渡す ほど精度が上がります。文章より、完成した実物のほうが多くの情報を含むからです。

しばらく待つと、Claude Designがアップロードした資料を解析し、ブランドの構成要素を1つずつ形にしてくれます。実際に生成されたのは、たとえばこんな要素でした。

見出しの文字サイズの段階(大見出しから小見出しまで)。游ゴシックBoldを基準に大きさが統一されている

カードの3バリエーション(白/淡い青/ダーク)。用途ごとの使い分けまで定義される

余白(スペーシング)のスケール。4pxを基準に、統一された間隔が並ぶ

サービスごとのマスコット(ラッコ)アイコン一覧。7サービス+新規+ヘリテージまで整理されている

文字サイズ・色・カード・余白・マスコットアイコンといった見た目の要素がひと通り揃っています。それだけではなく、「3つの言葉を (中黒)でつなぐ見出しのリズム」「絵文字は使わない」「数字は具体的に出す」といった 言葉づかいのトーンまで言語化 されていて、自分でもうまく説明できていなかったブランドの"らしさ"が、そのまま再現可能なルールになっていました。

そして、ここが今回いちばん価値を感じた点です。このデザインシステムを一度作っておけば、今後は誰がスライドを作るときも、同じ統一されたデザインのまま、短時間で形にできます。デザイナーでなくても、です。 ブランドを「その場限りの出力」で終わらせず、チームで使い回せる土台にできる。

組織の生産性を向上させるには、こういった「再現性の高さ」が大事だと考えています。

ここまで約15分でした。

STEP2:原稿を渡してスライドを生成する(約30分)

デザインシステムができたら、あとは中身です。今回は「採用情報」の原稿テキストを渡し、それをスライドに起こしてもらいました。

スライド作成も操作はシンプルで、「Slide deck」で先ほどのデザインシステムを選んでプロジェクトを作り、チャット欄にスライドの構成を貼り付けるだけです。

スライド作成の手順(4ステップ・スクリーンショット)

STEP1 左上タブから「Slide deck」を選び、「Design system」のセレクトボックスをクリック
STEP2 Choose design systems モーダルで、先ほど作成した「Rakko Slide」を選択
STEP3 Project name を入力して「+ Create」をクリック
STEP4 チャット欄(Start with context)にスライド構成(Markdown)を貼り付け、または添付して待つ

ここで効いてくるのが、STEP1で作ったデザインシステムです。生成されるスライドは最初から、あの青いタイトルバー、ブランドカラー、マスコットアイコンを守った状態で出てきます。たとえば事業紹介のページはこうなりました。

Claude Designが生成した事業・プロダクト概要スライド。サービスごとにマスコットアイコンが並ぶ

サービスごとのマスコット(ラッコのキャラクター)を正しく出し分け、「共通基盤」をブランドの淡い青で囲む、といった細かい構造まで再現されています。技術スタックのページでは、技術名がタグ状のラベルに収まり、方針コメントが添えられました。

技術スタックのスライド。技術名がタグ状のラベルで整理されている

いちばん感心したのは、開発フローを「役割 × 工程」のマトリクスで表したこの図です。

役割×工程に、各フェーズで使うツール(Devin・Linear・Figma・Claude Code・GitHubなど)を重ねた「開発ツールとAIの関係性」のマトリクス図

縦に役割(PO・PdM/デザイナー/エンジニア)、横に工程(計画〜リリース)を取り、各工程で使用するツールとそのフローを表した図です。
手で作ると一番しんどいタイプの図表で、これがすぐに形になるのは手作業では得られなかった体験でした。

ただ、正直に言うと STEP2の30分のうち、20分近くはこの一枚の調整に費やしています。複雑な図解ほどAIへの言語化が難しく、ここには後述する「コツ」がありました。

これで約30分。STEP1とあわせても1時間かかっていません。

うまくいかなかったこと、人が手を入れたこと

ここまで読むと万能に聞こえるかもしれませんが、AIに丸投げで完成したわけではありません。

1. 余白・レイアウトの微調整

要素の間隔やカードの並びは9割は気持ちよく決まっていても、残り1割が惜しい。そこは自分の目で見て詰めました。
こういった微調整はAIに依頼するより、「Edit」機能を使って手作業で数値や色を指定した方が早いです。

画面右上の「Edit」ボタンを押すと、左側にpxや色などの数値を設定できるパネルが開き、手作業で微調整できる

2. 「原稿どおりすぎて、スライドにすると微妙」問題

原稿の構成をそのままスライドに落とすと、情報が詰まりすぎたり間延びしたりします。
原稿の段階でスライドの完成系をイメージするのは難しいので、ここは手作業で修正する必要があると思います。

3. 複雑な図解は、言葉だけでは指示しきれない

このマトリクス図がまさにそうでした。

役割×工程に、各フェーズで使うツール(Devin・Linear・Figma・Claude Code・GitHubなど)を重ねた「開発ツールとAIの関係性」のマトリクス図

非デザイナーだと、頭の中のレイアウトをAIに伝えるための「デザインの共通言語」のボキャブラリーが乏しく、「もう少し詰めて」「この列を揃えて」といった微調整の往復が増えてしまいます。
STEP2の時間の大半がここに溶けたのは、これが原因でした。

コツ:複雑な図は「下絵」を先に作ってから渡す

複雑な図解は、先にChatGPTの画像生成で一枚絵のラフ(下絵)を作り、それをClaude Designに渡して「これと同じ図を作って」と指示すると、ほぼ一発で完成形に近いものが出てきます。
文章で構図を説明するより、絵を見せたほうが速いわけです。

実際に、先ほどのマトリクス図はこの下絵から作りました。

ChatGPTで生成した「開発ツールとAIの関係性」の下絵。役割×工程のマトリクスにツールを配置したラフ

一枚絵の作り直しは画像生成のほうが速く、トークンコストも抑えられるので、ChatGPTで下絵 → Claude Designで清書 という分担が、時間・コストの両面で効率的でした。
言葉でうまく指示できない図ほど、この方法が効きます。

After:何が変わったか

ビフォーアフターを整理すると、こうなりました。

観点 Before(手作業) After(Claude Design)
制作時間 1本に数日 デザインシステム15分+生成30分
ブランド統一 ページごとに手で再現、ズレがち デザインシステムが自動で担保
複雑な図表 作る作業がしんどい 対話で形になる(下絵を渡せばほぼ一発)
更新のしやすさ 全ページ手で直す 原稿を渡し直すだけ
再利用性 テンプレを毎回コピー デザインシステムが土台として残る

時間が短くなったことより、「次回がもっと速くなる」構造 ができたことが大きいと感じています。資料を1本作るたびにブランドが資産として蓄積され、2本目以降は中身の原稿を用意するだけ。冒頭の「原稿を渡すだけ」は、ここから来ています。

どんな人・どんな場面で効くか

今回の体験を踏まえると、特に次のような人に効くと思います。

  • 非デザイナーで、資料作成を任されがちな人(広報・採用・営業・バックオフィス)
  • ブランドは決まっているのに、毎回ゼロから再現している組織
  • 資料作成が特定の人に属人化していて、誰が作っても同じ品質にしたい組織

ブランドがまだ固まっていない場合は、先に「お手本になる一枚」を用意するのが近道です。
ネット上から参考デザインを探してもいいし、ChatGPTでイメージ画像を生成してもらってもよいと思います。

Claude Designはテキストで仕様を羅列するより、完成した実物から多くを読み取ります。
公式ドキュメントでも「カラーパレットの仕様書より、完成したランディングページ1枚のほうが多くを伝える」と案内しています。

手元にある一番出来のいい資料を渡すところから始めるのがおすすめです。

まとめ

会社紹介資料を、もう手で一枚ずつ作る必要はなくなりました。

ブランドをデザインシステムとして覚えさせて、資産にする こと。一度それをやっておけば、あとは中身の原稿を渡すだけで、ブランドに沿った資料が立ち上がります。仕上げと事実確認だけ人間が握る。この分担が、いまのところいちばん心地よいと感じています。

最後まで読んでいただき、ありがとうございました!同じように「資料作りで時間が溶けている」方の、ヒントになればうれしいです。

ラッコ株式会社

Discussion

sarah_collinssarah_collins

Really interesting read. I’ve also noticed most of the time in design work goes into small adjustments rather than the actual content or structure. While working on my chronological age calculator project, I had a similar experience, keeping everything consistent across pages took more effort than building the core logic.
The idea of turning design rules into a reusable system makes a lot of sense.

1