Claude Media
Claude theme-factoryスキルで10種のテーマを資料に当てる手順

Claude theme-factoryスキルで10種のテーマを資料に当てる手順

theme-factoryは、色とフォントを組にした既製10テーマを選んでスライドや資料に当てるAnthropicのサンプルスキルです。導入、全テーマの配色、日本語フォントの注意点、自作テーマの作り方を扱います。

theme-factoryは、Anthropicがanthropics/skillsリポジトリで公開しているサンプルスキルの1つです。色とフォントを組にした「テーマ」が10種類入っていて、選んだテーマをスライドや文書、HTMLのランディングページに当てられます。

資料の中身は作れても、見た目が毎回ばらつく。そんな悩みに向く仕組みです。この記事では、導入方法、10テーマの配色とフォント、頼み方、日本語を載せるときの注意、自作テーマの作り方を順に説明します。

theme-factoryスキルとは何か

theme-factoryは、成果物に統一感のある配色とフォントを与えるためのAgent Skillです。SKILL.mdのdescriptionには、スライド、文書、レポート、HTMLのランディングページなどに使えること、既製の10テーマに加えて新しいテーマをその場で作れることが書かれています。

フォルダの構成は次のとおりです。

  • SKILL.md: 作業手順の本体
  • theme-showcase.pdf: 全テーマを並べた見本のPDF
  • themes/: テーマごとのMarkdown(配色、フォント、向く用途)
  • LICENSE.txt: ライセンス文書

テーマの定義は、色のコードとフォント名が書かれた短いMarkdownです。画像素材やテンプレートファイルは含まれていません。スライドそのものを作るスキルではなく、作った成果物に見た目の約束事を当てる補助役と捉えると、役割がつかめます。

リポジトリのREADMEには、これらのスキルは実演と学習が目的で、Claudeが実際に返す挙動は異なることがある、と書かれています。業務で使う前に自分の環境で試すのが前提です。

導入手順:Claude CodeとClaude.aiの違い

Claude Codeでは、リポジトリをプラグインのマーケットプレイスとして登録します。theme-factoryはexample-skillsプラグインに含まれています。

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

導入後は、スキル名を文中に出すだけで呼び出されます。スキルの置き場所や仕組みの全体像はClaude Code Skills完全ガイドにまとめています。

Claude.aiでは、READMEによるとこれらのサンプルスキルは有料プランで最初から使えます。同じリポジトリのcanvas-designは、ポスターを1枚絵として作るスキルです。見た目を扱うスキル同士の違いはcanvas-designスキルの解説にあります。

10テーマの配色とフォント一覧

各テーマは4色で構成されます。ここでは、themesフォルダの定義にある16進コードをそのまま載せます。

テーマ4色(役割の説明は定義側の記述)見出し/本文のフォント
Ocean Depths4色(役割の説明は定義側の記述)#1a2332 #2d8b8b #a8dadc #f1faee見出し/本文のフォントDejaVu Sans Bold / DejaVu Sans
Sunset Boulevard4色(役割の説明は定義側の記述)#e76f51 #f4a261 #e9c46a #264653見出し/本文のフォントDejaVu Serif Bold / DejaVu Sans
Forest Canopy4色(役割の説明は定義側の記述)#2d4a2b #7d8471 #a4ac86 #faf9f6見出し/本文のフォントFreeSerif Bold / FreeSans
Modern Minimalist4色(役割の説明は定義側の記述)#36454f #708090 #d3d3d3 #ffffff見出し/本文のフォントDejaVu Sans Bold / DejaVu Sans
Golden Hour4色(役割の説明は定義側の記述)#f4a900 #c1666b #d4b896 #4a403a見出し/本文のフォントFreeSans Bold / FreeSans
Arctic Frost4色(役割の説明は定義側の記述)#d4e4f7 #4a6fa5 #c0c0c0 #fafafa見出し/本文のフォントDejaVu Sans Bold / DejaVu Sans
Desert Rose4色(役割の説明は定義側の記述)#d4a5a5 #b87d6d #e8d5c4 #5d2e46見出し/本文のフォントFreeSans Bold / FreeSans
Tech Innovation4色(役割の説明は定義側の記述)#0066ff #00ffff #1e1e1e #ffffff見出し/本文のフォントDejaVu Sans Bold / DejaVu Sans
Botanical Garden4色(役割の説明は定義側の記述)#4a7c59 #f9a620 #b7472a #f5f3ed見出し/本文のフォントDejaVu Serif Bold / DejaVu Sans
Midnight Galaxy4色(役割の説明は定義側の記述)#2b1e3e #4a4e8f #a490c2 #e6e6fa見出し/本文のフォントFreeSans Bold / FreeSans

SKILL.mdの説明では、Ocean Depthsは落ち着いた海のテーマ、Sunset Boulevardは暖色、Forest Canopyは自然な土の色、Modern Minimalistはグレースケール、Golden Hourは秋の暖色、Arctic Frostは冷たく澄んだ色、Desert Roseはくすんだ上品な色、Tech Innovationは大胆な技術系、Botanical Gardenは庭の有機的な色、Midnight Galaxyは深い紫の劇的な色とされています。

表を見ると、フォントの選択肢は実質4種類です。DejaVu SansとDejaVu Serif、FreeSansとFreeSerifで、10テーマの差は主に色で出ます。見出しがDejaVu Sans Boldなのは4テーマ、FreeSans Boldが3テーマ、DejaVu Serif Boldが2テーマ、FreeSerif Boldが1テーマです。

用途で絞り込む

各テーマ定義の「Best Used For」には、向く用途が書かれています。迷ったときの入口になります。

用途の例定義側が挙げるテーマ
企業向け、金融、コンサル定義側が挙げるテーマOcean Depths
医療、製薬、クリーンテック定義側が挙げるテーマArctic Frost
環境、サステナビリティ、アウトドア定義側が挙げるテーマForest Canopy
テック系の発表、AI/ML、製品ローンチ定義側が挙げるテーマTech Innovation
建築、デザイン、データの見せ方定義側が挙げるテーマModern Minimalist
飲食、ホスピタリティ定義側が挙げるテーマGolden Hour
ファッション、美容、ウェディング定義側が挙げるテーマDesert Rose
ゲーム、エンタメ、クリエイティブ定義側が挙げるテーマMidnight Galaxy
園芸、食品、ファーム系定義側が挙げるテーマBotanical Garden
広告、マーケ、イベント定義側が挙げるテーマSunset Boulevard

これは定義側の記述であって、業界ごとに「このテーマでなければならない」という規則ではありません。社内の報告資料にMidnight Galaxyを当てても動作上の問題はなく、判断は見る人への伝わり方で決まります。

頼み方:選ばせる手順を前提にする

SKILL.mdの使い方は4段階です。まずtheme-showcase.pdfをそのまま見せ、次にどのテーマにするかを尋ね、明確な返事を待ち、最後に選ばれたテーマの色とフォントを成果物へ当てます。見本のPDFには手を加えず、見せるだけと指定されています。

手順

theme-factoryが踏む順序

  1. 1

    見本を見せる

    theme-showcase.pdfを加工せずに表示し、全テーマを見比べられるようにします。

  2. 2

    テーマを尋ねる

    どのテーマを当てるかを質問し、答えを待ちます。

  3. 3

    選択を確認する

    選ばれたテーマを明示的に確認してから進みます。

  4. 4

    テーマを当てる

    themesフォルダの該当ファイルを読み、色とフォントを成果物全体に当てます。コントラストと読みやすさも保つ指示です。

途中で人の返事を待つ設計なので、対話の場では見本を見てから選べる反面、一括実行では止まりやすくなります。あらかじめテーマ名を伝えれば、1往復を省けます。

theme-factoryスキルを使って、さっき作った5枚のスライドに
Ocean Depthsテーマを当てて。見出しの色は背景とのコントラストを
崩さないようにして、当てた色とフォントを最後に一覧で教えて。

これは頼み方の一例で、返ってくる出力を保証するものではありません。スキルの手順どおりなら、themesフォルダのOcean Depthsの定義が読まれ、4色とDejaVu Sansが全スライドに当たります。

毎回のテーマ指定をプロジェクトに固定する

同じプロジェクトで資料を何度も作るなら、テーマ名をCLAUDE.mdに書いておく方法があります。次は書き方の例です。

## 資料のスタイル
- スライドと報告書には theme-factory の Arctic Frost を使う
- テーマの色とフォントは themes/ の定義に従い、独自に色を足さない
- 日本語の文字が出る箇所は、Arctic Frost のフォントではなく Noto Sans JP を使う

2行目は、成果物ごとに色が増えていくのを防ぐ目的です。3行目は次の節で説明するフォントの問題に対応します。

日本語を載せるときのフォントの注意

テーマ定義が指定するフォントは、DejaVu Sans、DejaVu Serif、FreeSans、FreeSerifの4系統です。themesフォルダの記述には日本語向けのフォントが含まれていません。欧文向けのフォントに日本語の文字が当たると、実行環境によっては四角(豆腐)で表示されたり、別のフォントに置き換わったりします。

日本語の資料に当てるときは、配色だけをテーマから取り、フォントは日本語対応のものを指定するのが現実的です。

前と後

日本語資料でのテーマの頼み方

BEFORE

そのまま当てる

Golden Hourテーマを当てて。

AFTER

色だけ使う

Golden Hourの4色だけを使って。フォントはNoto Sans JPにして。

指定したフォントが手元の環境にあるか、取得できるかは実行環境次第です。表示後に文字化けがないかを確かめ、直らない場合はフォント名を明示して頼み直します。

既製の10種に合わないときは新しいテーマを作る

SKILL.mdには、既製のテーマが合わない場合の手順もあります。入力された内容をもとに、既製のテーマに似た形で新しいテーマを作り、既製のものと同じ要領で、色とフォントが何を表すかが分かる名前を付けます。作ったあとはいったん見せて確認を取り、了承されたら通常の手順で当てます。

頼むときは、雰囲気を言葉で渡します。

theme-factoryで新しいテーマを作って。社内の防災訓練の資料向けで、
落ち着いた印象。蛍光色は使わず、背景は明るく、見出しだけ濃い色にして。
色は4色、フォントは日本語対応のものを選んで。

出力される形式は、既製のテーマと同じ「名前、説明、4色、見出しと本文のフォント、向く用途」が目安です。次は出力の形の例で、実際の出力ではありません。

# Calm Harbor
 
落ち着いた配色で、訓練や安全に関する資料に向く。
 
## Color Palette
- **Deep Slate**: `#2f3e4e` - 見出しと強調
- **Soft Blue**: `#8fb3c9` - 補助の色
- **Warm Gray**: `#d9d4cc` - 区切りや帯
- **Off White**: `#fbfaf7` - 背景
 
## Typography
- **Headers**: Noto Sans JP Bold
- **Body Text**: Noto Sans JP

作ったテーマは、そのままでは会話の中にしか残りません。繰り返し使うなら、テーマの定義を自分のスキルのフォルダに保存しておきます。Claude Codeでの自作スキルの置き場所は、個人用が~/.claude/skills/、プロジェクト用が.claude/skills/です。

brand-guidelinesスキルとの使い分け

見た目を揃えるスキルは、theme-factory以外にもあります。同じリポジトリのbrand-guidelinesは、Anthropicのブランドカラーとタイポグラフィを成果物に当てるスキルです。つまり、特定ブランドの色とフォントをスキルにした実例になっています。自社のブランドを固定したいなら、これを手本に自作する使い方になります。手順はブランドガイドラインをSkill化して資料に自動適用する記事で扱っています。

状況theme-factoryブランドのスキル化
見た目の選択肢から選びたいtheme-factory向くブランドのスキル化
会社の色とフォントに固定したいtheme-factoryブランドのスキル化向く
短時間で統一感を出したいtheme-factory向くブランドのスキル化

PowerPointを作る手順そのものはClaude for PowerPointの導入手順や、PDF・Excel・Word・PowerPointを生成する標準スキルをまとめたAgent SkillsのAPI標準スキル一覧が扱っています。theme-factoryは、そうして作った資料に見た目を当てる後工程の位置にあります。

つまずきやすい点

テーマを当てたあとに崩れが出たら、次の順に見ます。

  1. 文字が背景に溶ける: Tech Innovationの#00ffffを白地の文字に使うなど、明るい色どうしの組み合わせになっていないかを見る。コントラストを保つよう再指定する
  2. 日本語が四角になる: 日本語対応フォントを明示する
  3. テーマが途中で変わる: 当てるのは資料全体と指定する。スキルは全スライドへ一貫して当てる指示を持つ
  4. 色が増えていく: 「テーマの4色だけを使う」と制限する
  5. 選択待ちで止まる: 依頼文にテーマ名を入れる

まとめ

theme-factoryは、4色とフォントの組を10種類から選んで資料に当てるスキルです。スライドの中身を作る力はなく、見た目の約束事を成果物に被せる役割に絞られています。

日本語の資料では、フォントの指定が実質的な最初の作業になります。配色だけをテーマから借りる使い方なら、既製の10種は色見本としても使えます。合うものがなければ、新規テーマを作って確認を取ってから当てる手順が用意されています。

この記事を共有:XはてブLinkedIn