和風テーマファクトリー

概要

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

プリセットテーマ一覧

テーマ名	ファイル	雰囲気	キーカラー
桜	themes/sakura.md	春の柔らかさ、優美	ピンク・ラベンダー
藍染	themes/aizome.md	伝統・信頼・誠実	インディゴ・ブルー
紅葉	themes/momiji.md	秋の豊穣、情趣	レッド・ゴールド
雪月花	themes/setsugekka.md	冬の静寂、雅	シルバーブルー・ゴールド
茶室	themes/chashitsu.md	侘寂・静寂・自然	アース・抹茶
浮世絵	themes/ukiyoe.md	大胆・芸術・江戸	ブルー・朱赤
禅	themes/zen.md	ミニマル・静謐	グレー・苔緑
祭	themes/matsuri.md	活気・祝祭・躍動	赤・金
未来	themes/mirai.md	サイバー・近未来	ネオンパープル・シアン
和紙	themes/washi.md	自然・有機的・温もり	ベージュ・モスグリーン

用途別テーマ選択ガイド

ビジネス用途

シーン	推奨テーマ	理由
コーポレートサイト	藍染	信頼感と誠実さを表現。落ち着いた配色がプロフェッショナルな印象を与える
コンサルティング	茶室	侘寂の美学が知性と落ち着きを伝える。クライアントへの安心感
士業・金融	禅	ミニマルで格式ある印象。情報の可読性を最大化

カジュアル用途

シーン	推奨テーマ	理由
ブログ・メディア	桜	柔らかい色調が読者に親しみを与える。長時間の閲覧に適した配色
イベント・キャンペーン	祭	活気と祝祭感でユーザーの注目を集める。期間限定の華やかさ
ポートフォリオ	和紙	自然な温もりが作品を引き立てる。クリエイターの個性を表現

クリエイティブ用途

シーン	推奨テーマ	理由
アート・ギャラリー	浮世絵	大胆な配色が芸術性を強調。視覚的インパクトが強い
ハンドメイド・クラフト	和紙	有機的な質感が手仕事の温かみと共鳴する
デザインスタジオ	禅	作品を際立たせる余白重視のデザイン

季節テーマ

季節	推奨テーマ	活用シーン
春	桜	入学・入社シーズン、新生活キャンペーン
夏	祭	夏祭り、サマーセール、花火大会
秋	紅葉	紅葉狩り、収穫祭、秋の味覚フェア
冬	雪月花	クリスマス、年末年始、冬のギフト

モダン・テック用途

シーン	推奨テーマ	理由
テックスタートアップ	未来	サイバーパンク調の配色が革新性を表現。ダークテーマで没入感
SaaS ダッシュボード	藍染 or 禅	長時間使用に耐える落ち着いた配色。データの視認性を確保
ゲーム・エンタメ	未来	ネオンカラーが躍動感とワクワク感を演出

テーマの使い方

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 変数の命名規則

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

変数名	説明
--wa-primary	メインカラー
--wa-primary-light	メインカラーの明るいバリエーション
--wa-primary-dark	メインカラーの暗いバリエーション
--wa-accent	アクセントカラー
--wa-bg	背景色
--wa-surface	カード・パネルの背景色
--wa-text	メインテキスト色
--wa-text-muted	補助テキスト色
--wa-border	ボーダースタイル
--wa-radius	角丸の大きさ
--wa-shadow	ボックスシャドウ
--wa-font-heading	見出し用フォント
--wa-font-body	本文用フォント
--wa-spacing-sm	小さい余白
--wa-spacing-md	中程度の余白
--wa-spacing-lg	大きい余白
--wa-spacing-xl	特大余白
--wa-transition	トランジション設定

生成時の確認事項

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

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