theme-factory を使ってみた ― ui-memo を1つの「テーマ」に畳む

このスキルは何か

theme-factory は、配色＋フォントペアの完成テーマを当てるスキル。Ocean Depths / Modern Minimalist など10のプリセットがあり、各テーマは「役割つきの配色（hex）」と「見出し/本文のフォントペア」で定義される。showcase PDF で一覧を見せ → 選ばせ → 適用、という流れ。プリセットが合わなければカスタムテーマを生成できるのが肝。

どう使ったか

プリセットは“スライド向けの汎用配色”で、ui-memo の既存ブランド（赤×クリーム×Arial）に塗り替えるのは違う（frontend-design の「自分のブランド優先」）。そこでカスタム生成を使い、ui-memo 自身をテーマ仕様に畳んだ。テーマの書式（役割つきパレット＋タイポペア）が、そのままデザイントークンの“契約”になる。

生成したテーマ：UI Memo

brand-guidelines 回で見えた“役割の抜け”（二次グレー・控えめ背景）を、ここでテーマの欄として正式に埋めた。スキルを跨いで設計が繋がった。

ダークモードの対テーマを「検証して」下書きした

theme-factory の「テーマ＝役割つきパレット」という形は、ダークモードに最適。UI Memo の各トークンに暗色版を1:1で当てるだけで、役割を崩さず dark 版が作れる。ただし色を置いただけでは不十分なので、全ペアの WCAG コントラストを実測した。

実測でわかった一番大事な点：ダークではアクセント赤を1色で兼用できない。

• リンク/アイコンなど“文字として”暗背景に乗せる赤は明るくないと読めない。旧 #cc0000 は 3.13:1 でAA落ち、明るい #ff5a5a なら 6.02:1 で AA。
• 一方ボタンの塗り＋白文字は、明るい赤だと白が 3.06:1 で落ちる。塗りは濃い #cc0000（白文字 5.89:1）が要る。
• つまりアクセントを2役に分ける（text=#ff5a5a / fill=#cc0000）。または「明るい赤ボタン＋暗い文字（#141413、6.02:1）」でも可。

生成したテーマ（検証済み）：UI Memo Dark

「色を置く」で止めず実測まで通したことで、ダークモード対応がそのまま実装できる出発点になった。役割を1:1で割り当てる＋アクセントだけ2役に割る、が結論。

使ってみて効いた／注意したこと

• 効いた：テーマの書式が、そのままトークンの契約になる。色とフォントを“役割で縛って”一覧化できた。
• 効いた：ダークモードを「もう1つのテーマ」として捉えられた。役割を1:1で割り当て、アクセントだけ2役に割れば設計が明快。
• 効いた（検証）：色を置くだけで終えず WCAG を実測したことで、旧アクセント #cc0000 が暗背景で AA 落ちすること、ボタン塗りと文字で必要な赤が逆になることが数値でわかった。
• 効いた：プリセット10種は、配色＋フォントペアの参照ライブラリとして眺める価値がある（自分で組むときの引き出し）。
• 注意（誠実）：プリセットはスライド向けの汎用フォント（DejaVu Sans 等）が前提で、ブランドサイトにそのまま塗ると identity が消える。借りるのは“仕組み（役割つきテーマ）”で、プリセットそのものではない。

ui-memo での使いどころ

• トークンの単一の真実：UI Memo テーマ仕様を、配色・タイポの“元”として保持。
• ダークモード対応：UI Memo Dark を起点に、--color-* の dark 変数を1:1で定義。
• デザイン底上げ：見出し書体役の追加など、テーマ欄を埋める形で底上げを進める。

まとめ

theme-factory は「テーマ＝役割つきパレット＋タイポペア」という形を与えるスキルだった。ui-memo ではプリセットを塗るのではなく、自分自身をテーマに畳み、ダークの対テーマを下書きする使い方が一番効いた。配色を借りるのではなく、テーマという“器”を借りる——それが正しい使い方だと感じた。これで Claude公式スキルのデザイン・ビジュアル系6つ、すべて実際に使って体験談にできた。

よくある質問