和風テーマファクトリー

概要

日本の美意識に基づいた CSS テーマを生成するスキルです。10種類のプリセットテーマを提供し、CSS カスタムプロパティ（変数）と Tailwind CSS 互換の形式で出力します。各テーマは色彩・タイポグラフィ・余白・ボーダー・背景パターンを包括的に定義しています。

プリセットテーマ一覧

用途別テーマ選択ガイド

ビジネス用途

カジュアル用途

クリエイティブ用途

季節テーマ

モダン・テック用途

テーマの使い方

CSS カスタムプロパティの適用

各テーマファイルに定義された CSS カスタムプロパティを :root に設定します。

/* テーマファイルから CSS 変数をコピーして使用 */
:root {
  /* 各テーマの変数をここに貼り付け */
}

/* 変数の使用例 */
body {
  background-color: var(--wa-bg);
  color: var(--wa-text);
  font-family: var(--wa-font-body);
}

h1, h2, h3 {
  color: var(--wa-primary);
  font-family: var(--wa-font-heading);
}

.btn-primary {
  background-color: var(--wa-primary);
  color: var(--wa-bg);
  border-radius: var(--wa-radius);
}

.btn-accent {
  background-color: var(--wa-accent);
  color: var(--wa-bg);
}

.card {
  background-color: var(--wa-surface);
  border: var(--wa-border);
  border-radius: var(--wa-radius);
  padding: var(--wa-spacing-lg);
}

Tailwind CSS での使用

tailwind.config.js の extend にテーマの値を設定します。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // 各テーマファイルの Tailwind 設定をここにマージ
    }
  }
}

テーマの切り替え

複数テーマをサポートする場合は data-theme 属性で切り替えます。

[data-theme="sakura"] {
  --wa-primary: #FEDFE1;
  /* ... */
}

[data-theme="aizome"] {
  --wa-primary: #264348;
  /* ... */
}

// JavaScript でのテーマ切り替え
document.documentElement.setAttribute('data-theme', 'sakura');

CSS 変数の命名規則

すべてのテーマで共通の変数名を使用しています。

生成時の確認事項

テーマを選択・カスタマイズする前に、以下を確認してください：

1. 用途: ビジネス / カジュアル / クリエイティブ / テック
2. 季節性: 通年使用 / 季節限定
3. ダークモード: 対応が必要か
4. フレームワーク: 素の CSS / Tailwind / その他
5. カスタマイズ: プリセットそのまま / 色の調整が必要か