theme-factory

このスキルを使う場面

次のような要望があった場合は、いつでもこのスキルを使ってください。

• スライドデッキ、ドキュメント、レポート、ランディングページに統一感のある配色やフォントを適用する
• テーマを選ぶ前に、利用可能なテーマをプレビューする
• 説明（例：「温かみのある企業向け」や「遊び心のあるスタートアップ風」）をもとにカスタムテーマを作成する
• 既存の成果物を別のビジュアルアイデンティティに合わせてテーマ変更する

このスキルの使い方

ワークフロー

1. テーマ一覧を表示する - theme-showcase.pdf を表示し、ユーザーが10種類のテーマを視覚的に比較できるようにします
2. 希望を尋ねる - ユーザーにテーマを選ぶか、カスタムテーマを説明してもらいます
3. 確認を待つ - 適用する前に、明示的な承認を得ます
4. テーマを適用する - themes/ からテーマファイルを読み込み、色とフォントを一貫して適用します

利用可能なテーマ

#	テーマ	スタイル	メインカラー
1	海の深み	プロフェッショナル、落ち着いた雰囲気	海を思わせる青
2	サンセット・ブールバード	温かみのある、鮮やかな雰囲気	オレンジ／コーラル
3	森の樹冠	自然な、落ち着いた雰囲気	大地を思わせる緑
4	モダン・ミニマリスト	すっきりとした、現代的な雰囲気	グレースケール
5	ゴールデンアワー	豊かで、温かみのある雰囲気	秋を思わせるゴールド
6	アークティック・フロスト	涼やかで、すっきりとした雰囲気	冬を思わせる青
7	デザートローズ	柔らかく、洗練された雰囲気	ダスティピンク
8	テック・イノベーション	大胆で、モダンな雰囲気	エレクトリックブルー
9	ボタニカルガーデン	みずみずしく、有機的な雰囲気	庭を思わせる緑
10	ミッドナイト・ギャラクシー	ドラマチックで、宇宙的な雰囲気	深い紫

テーマの適用（例）

/* Example: Ocean Depths theme applied via CSS variables */
:root {
  --color-primary: #1B4F72;
  --color-secondary: #2E86C1;
  --color-accent: #AED6F1;
  --color-background: #EBF5FB;
  --color-text: #1C2833;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Source Sans Pro', sans-serif;
}

カスタムテーマの作成

既存のテーマが合わない場合は、カスタムテーマを作成します。

1. ユーザーにムードや説明（例：「活気のあるテック系スタートアップ風」）を尋ねます
2. 調和の取れた4〜5色のカラー パレットを作成します
3. 見出し用と本文用に、相性の良いフォントを選びます
4. テーマの特徴を表す名前を付けます
5. 確認用に提示してから、適用します

ベストプラクティス

1. コントラストの確認 - テキストと背景の組み合わせが、WCAG AA のコントラスト比を満たすようにします
2. 一貫性 - すべてのスライド／ページに同じテーマトークンを適用し、テーマを混在させないでください
3. フォントの組み合わせ - 見出しにはディスプレイフォントを1種類、本文には読みやすいフォントを1種類使用します
4. アクセントカラーは控えめに - アクセントカラーは、大きな面ではなく、強調箇所やCTAに使用します

キーワード

テーマ、スタイリング、カラーパレット、フォントの組み合わせ、スライド、プレゼンテーション、デザイン、ビジュアルアイデンティティ、主题、配色、样式