Claude Designでクラスメソッド社内用のテンプレートを作ってみた
リテールアプリ共創部のるおんです。
先日、Anthropic から Claude Design が発表されました。早速試してみたく、ちょうど直前に控えていた以下のセミナーの登壇の資料を Claude Design で作ってみることにしました。
実際に作ってみた感想としては、 "スライドが組み上がるスピード自体は爆速" 。ただし、 "クラスメソッドふうに仕上げるところで結構時間が溶ける" という体験でした。ブランドガイドを毎回ダウンロードしてきて、配色・フォント・ロゴの位置を Claude にすり合わせて……というやり取りに、地味に時間を取られたのです。
「この調整、毎回やるのは絶対しんどい」と思ったので、登壇後にクラスメソッド ブランド準拠のスライドテンプレートとして切り出し、Claude Designのテンプレート機能 を活用して、クラスメソッドの Organization に登録しました。本記事ではそのテンプレートの紹介と、社内での使い方を共有します。
先にまとめ
クラスメソッドのブランドカラーに準拠した登壇資料等を生成するスライドテンプレートを作成しました。
内容としては3 行でまとめると、以下です。
| # | ポイント | 内容 |
|---|---|---|
| 01 | ブランド準拠の HTML スライドキット | 1920×1080・Noto Sans JP・ブランドカラーを固定。出力は常にクラスメソッド準拠 |
| 02 | 16 種類の雛形を同梱 | 表紙・章扉・3 カード・比較表・Q&A まで、登壇資料 1 本に必要な雛形を網羅 |
| 03 | CLAUDE.md 同梱で雛形ベースの作り方を強制 |
Claude が勝手に色やフォントを差し替えたりせず、必ず雛形からスライドを組む |
内容を考えるのは人間、レイアウトと装飾は Claude 。これを社内全員ができる状態にしたい、というのが今回作ったテンプレの目的です。
Claude Design とは
Claude Design は、Anthropic が提供する Claude を使ったデザイン・プロトタイピング環境 です。
ざっくり言うと、Claude にチャットで「こういうスライドが作りたい」「こういう UI のプロトタイプが欲しい」と伝えると、HTML・CSS・JS を組み合わせた成果物を直接ファイルに書き出してくれる、というツールです。
特徴をいくつか挙げると、こんな感じです。
- HTML がそのまま成果物 になる（スライドも、Web サイトも、プロトタイプも、全部 HTML）
- 作ったものは そのままブラウザで開ける／PDF に印刷できる／スタンドアロン HTML としてダウンロードできる
- テンプレート として保存しておくと、別プロジェクトから何度でも再利用できる
- 既存プロジェクトを Asset や UI キットの参照元として読み込ませられる ので、「うちのブランドに合わせて」と指示しやすい
特に最後の「テンプレート機能」と「ブランド準拠」をうまく使うと、 「内容を考えるのは人間、レイアウトと装飾は Claude」 というワークフローが組めるようになります。今回作ったのはその土台になるものです。
テンプレート機能とは
Claude Design の中で、今回特に活用したのが テンプレート機能 です。
ざっくり言うと、 "よく使う初期構成をまるごと保存しておいて、新規プロジェクトを作るときにそこから始められる" 機能です。Git の Template Repository を Claude Design 上でやっているイメージに近いです。
テンプレートを保存すると、以下の画像のようにテンプレートからプロジェクトを作成することができます。
ポイントは以下の 3 つです。
| # | ポイント | 内容 |
|---|---|---|
| 01 | ファイル構成ごと保存できる | HTML・CSS・画像・CLAUDE.md などをセットで保存。新規プロジェクトはこの状態からスタート |
| 02 | Organization 単位で共有できる | 個人の Workspace だけでなく、Organization（社内）に登録すれば メンバー全員から使える |
| 03 | Form Template から再利用できる | 新規プロジェクト作成時に「Form Template」を選ぶと、登録済みテンプレ一覧から選んで起動できる |
つまり、 クラスメソッドの Organization にテンプレを登録しておけば、社員なら誰でも「Form Template → クラスメソッドスライドテンプレート」を選ぶだけで、ブランド準拠の初期状態からスライドを作り始められる ということです。
「ブランドガイドを毎回ダウンロードして Claude に渡す」という手順そのものを、組織レベルで省略できるのが大きな利点です。
スライドテンプレートの紹介
作ったテンプレートは 「クラスメソッドスライドテンプレート」 という名前で、クラスメソッドのブランドガイド準拠の HTML スライドキットです。テンプレート自体も一つのプロジェクトで、実際のテンプレートの中身は以下のようになっています。
例えば、クラスメソッドのロゴや、ブランドカラーのCSSをアセットとして用意している感じです。
設計上のポイントはこんな感じです。
- 解像度は 1920×1080 固定 （16:9）
- フォントは Noto Sans JP のみ
- 色は
cmBluecmRedcmGreenなどブランドカラーの CSS 変数だけ を使う - 各スライドはただの
<section>要素。<deck-stage>という Web Component で包むと、自動でスケーリング・キーボードナビ・PDF 印刷に対応する CLAUDE.mdを同梱 しているので、Claude が勝手に「このプロジェクトでは雛形ベースで作る」と理解してくれる
このテンプレを Claude Design で開くと、Claude は 必ずカタログにある雛形をベースにスライドを組み立てる ようになります。色をでっち上げたり、フォントを差し替えたりはしません。
スライド一覧
雛形は全部で 16 種類用意しました。
| No. | 雛形名 | 用途 |
|---|---|---|
| 01 | Title | 表紙 |
| 02 | Section Divider | 章扉 |
| 03 | TOC | 目次 |
| 04 | Pain (2-Col + Quote) | 課題提起・Before |
| 05 | Ideal (3 Cards) | 主張＋3 つの根拠 |
| 06 | 3 Cards (Tools) | 3 要素並列・ツール紹介 |
| 07 | Step | 手順・ステップ |
| 08 | Big Number | インパクトある数字 |
| 09 | 2-Col Intro | 何かの紹介・スペック |
| 10 | Close | 締めスライド |
| 11 | Table | 比較表・一覧 |
| 12 | Quote | 引用 |
| 13 | Image 3-up | 画像 3 枚並び |
| 15 | Q&A | 質疑応答 |
| 16 | Chart | 棒グラフ |
| 17 | Thanks | 裏表紙・ご清聴 |
「登壇資料を 1 本作る」のに必要な要素はだいたい網羅してあるはずです。「足りない！このパターンが欲しい！」というのがあれば、近い雛形を改造してもらってもいいですし、ぜひお声がけください（社内向け）。
使い方
実際にテンプレを使ってスライドを作る流れを紹介します。
STEP 01 : Form Template から「クラスメソッドスライドテンプレート」を選択
Claude Design のホーム画面から、新規プロジェクト作成時に 「Form Template」 を選び、クラスメソッドスライドテンプレート を選択します。
Project Name にプロジェクトの名前を入れます。今回は 「最近の AI 事情について」 にしました。
そのまま Create を押すと、テンプレが読み込まれた状態でプロジェクトが立ち上がります。cm-deck-system/ 配下に雛形・CSS・ロゴが全部入っている状態です。
STEP 02 : Claude にお願いする
あとはチャットで Claude に話しかけるだけ。検証のため、雑に以下の感じで投げました。
「最近の AI 事情について」というタイトルでスライドを作って。
これだけで、Claude は同梱の CLAUDE.md を読んで、
new-deck.htmlをルートにコピー- 16 種の雛形から最適なものを選んで
<section>を貼り付け - ブランドカラーと Noto Sans JP の範囲内で組む
という動きをしてくれます。 ゼロから書こうとしません 。これによりトークンの節約を図っています。
また、Claude Designは様々なコンテキストを入れることができるので、提案資料や、登壇資料として作成する場合は、その元となる資料等を入れることも可能です。
実際に作られたスライドは以下のような形です。（検証のためなので内容の正確性については触れません）
STEP 03 : Claude Designで修正する
Claude DesignではEdit機能やコメント機能、Draw機能を使って自由にスライドを編集することができます。
例えば、Edit機能ではそのまま文字を編集したり、色やフォントを変更したりすることが可能です。
コメント機能では、修正したい点にコメントをつけてAIにフィードバックを送信することができます。これにより該当箇所を修正することが可能です。
Draw機能では、お絵かきをしてClaudeにやりたいことを伝えることが可能です。「Send」ボタンを押すとClaudeが修正を開始してくれます。
これまでAIでスライド生成等をすると柔軟性があまりなかったですが、これなら誰でも簡単に編集ができます。
何が嬉しいか
このテンプレを使うと何が嬉しいか、を一言でいうとこうです。
内容を自分で考えて、レイアウトは AI に任せる。
これに尽きます。
スライド作成って、本来やりたいのは「何を伝えるか」を整理することなんですが、実際には「箇条書きをどこに置くか」「フォントサイズをどうするか」「この余白おかしくない？」みたいな レイアウト調整 にめちゃくちゃ時間を取られます。
雛形が型として用意してあると、Claude に渡す情報は 「この章のメッセージはこれ、根拠はこの 3 つ」 みたいなテキストだけで十分になります。あとは Claude が「メッセージ＋3 つの根拠なら 05-ideal-3cards だな」と判断して組んでくれる。
実際、今回のテンプレで 10 枚クラスのスライドなら 数分で初稿が組み上がります 。あとは細部の言い回しを直すだけです。
きっかけ
このテンプレを作ったきっかけは、別の登壇でした。
この回で使った登壇資料は、その場で クラスメソッドの Google ドライブからブランドガイド一式をダウンロードしてきて、Claude に渡して作らせたもの でした。完全にゼロから「ブランドガイドを参照しながら登壇資料を作って」とお願いした初稿です。
これが思ったより悪くない出来だったので、
「これ、毎回ブランドガイドをダウンロードして渡すんじゃなくて、 最初からテンプレにしておけば社内全員が爆速で資料作れるんじゃない？ 」
と思って、雛形を切り出して整理し直したのが今回のテンプレートです。
なので、 「実戦で使った資料 → 汎用テンプレ化」 という出自を持っています。最初から「テンプレを作るぞ」と意気込んで作ったわけではなく、 既に動いていたものを社内インフラに昇華させた という流れです。
とはいえこのテンプレートは数時間で作った荒削りなものなので、社内の皆さんと育てていければと思います。
まとめ
今回の要点は以下の通りです。
- Claude Design に クラスメソッド ブランド準拠のスライドテンプレート を作って登録した
- 16 種類の雛形・ブランドカラー・Noto Sans JP・1920×1080 で固定してあるので、出力が常にブランド準拠になる
CLAUDE.mdを同梱しているので、Claude が自動で雛形ベースの作り方をしてくれる- 「内容は人間、レイアウトは AI」 というワークフローで、登壇資料の初稿が数分で出る
- まだ荒削りなので、 社内の有志で育てていきたい
登壇資料・社内勉強会・お客様向けのちょっとしたピッチなど、「ブランドガイドに沿ったスライドを爆速で作りたい」全員にオススメです。
おわりに
このテンプレ自体は数時間で作った荒削りなものですが、 実戦で使った登壇資料を起点に汎用化した ので、初稿としてはそれなりに使える出来になっていると思います。
AI 時代において、デザイナー以外のメンバーが "0 → 1 のレイアウト作業" から解放されることの意味は大きいです。これまで「資料作成、苦手だな」と感じていた方こそ、ぜひ一度触ってみてほしいです。
ぜひ使ってみて、フィードバックください！
以上、どなたかの参考になれば幸いです。
お知らせ
クラスメソッドのリテールアプリ共創部 ビルドチーム ではエンジニアを募集しています。
Claude Code や Cursor などの AI エージェントを業務に組み込み、プロジェクトの立ち上げから本番開発までを高速に回しているチームです。AI 駆動開発・プリセールス・顧客折衝・要件定義までフルスタックに踏み込んでみたい方は、ぜひ以下をご覧ください。
参考
