# tweakcn

shadcn/ui向けのビジュアルテーマエディター兼ジェネレーター。Tailwind CSSとAIに対応

- Findings24: <https://findings24.com/ja/tools/tweakcn>
- ウェブサイト: <https://tweakcn.com>
- 料金: Freemium
- カテゴリー: AIおもしろツール

## tweakcnとは？

tweakcn は shadcn/ui 向けのビジュアルテーマエディター兼ジェネレーターです。色、タイポグラフィ、その他のテーマプロパティをライブプレビューで変更しながら、開発者がカスタムテーマを作成・調整できるようにします。

この製品は Tailwind CSS v4 と v3 をサポートし、shadcn/ui およびカスタムスタイルで動作します。また、CSS 変数または Shadcn Registry コマンドをプロジェクトへコピーしてエクスポートする経路を提供します。ホームページでは、サインアップ不要で始められることに加え、コミュニティテーマや AI 支援のテーマ作成も打ち出されています。

## tweakcnでできること

### カラーコントロール

テーマトークンを手作業で編集する代わりに、ビジュアルインターフェースで背景、テキスト、境界線、アクセント、チャート、サイドバーの色を調整できます。

### タイポグラフィ設定

フォントサイズ、ウェイト、テキスト変換を調整して、テーマを UI のトーンや階層に合わせられます。

### Tailwind バージョンサポート

OKLCH や HSL などの対応カラーフォーマットを使いながら、Tailwind v4 と v3 を切り替えて作業できます。

### 詳細なプロパティ編集

角丸、余白、影、その他のテーマプロパティを編集して、コンポーネントの見た目をより細かく制御できます。

### コントラストチェッカー

編集しながらコントラスト比を確認し、エクスポート前にアクセシビリティ上の問題を見つけられます。

### AI テーマ生成

AI フローで画像やプロンプトからテーマを作成し、その後エディタで微調整できます。

## 利用シーン

### カスタムアプリテーマを作成する

プリセットやコミュニティテーマから始めて、色、角丸、タイポグラフィを調整し、デザインを特定の製品ブランドに合わせます。

### アイデアからテーマを生成する

AI テーマフローを使って画像やプロンプトから出発点を生成し、エディタで結果を微調整します。

### 実装可能なテーマをエクスポートする

結果をプレビューしたあと、CSS 変数または Shadcn Registry コマンドで書き出して、テーマ設定をプロジェクトに取り込みます。

### コミュニティデザインを探索して再利用する

公開コミュニティテーマを閲覧してインスピレーションを得たり、minimal、professional、dashboard、cyberpunk などのタグでスタイルを比較したりします。

### デザイン中にコントラストを検証する

色を調整しながらコントラスト比を確認し、アクセシブルな UI に近いテーマを保ちます。

## よくある質問

### tweakcn とは何ですか？

tweakcn は shadcn/ui 向けのビジュアルテーマエディター兼ジェネレーターです。色、タイポグラフィ、レイアウト関連のプロパティをカスタマイズし、変更内容をリアルタイムでプレビューして、結果をコードまたは CSS 変数としてエクスポートできます。

### tweakcn は無料ですか？

はい。料金ページには Free プランと Pro プランがあります。Free プランには、完全なテーマカスタマイズ、AI 生成テーマ 5 件、最大 10 件までのテーマ保存と共有、CSS 変数によるインポート/エクスポート、Shadcn Registry コマンドによるエクスポート、コントラストチェッカーが含まれます。

### Pro には何が含まれますか？

Pro では、保存および共有できるテーマが無制限になり、AI 生成テーマも無制限、画像ベースのテーマ生成、優先サポート、独自のフォントとカラーを保存できる機能が追加されます。

### tweakcn は Tailwind v4 をサポートしていますか？

ソースでは tweakcn が Tailwind CSS v4 をサポートしていることが明記されており、エディタページでは Tailwind v3 も参照されています。料金ページとホームの説明でも、shadcn/ui とカスタムスタイルに対応していることが示されています。

### 既存のプロジェクトで tweakcn を使えますか？

はい。ホームページにはサインアップなしですぐにカスタマイズを始められるとあり、料金ページには完全なテーマカスタマイズに対応した Free プランがあります。エディタは shadcn/ui プロジェクト向けに位置づけられており、CSS 変数または Shadcn Registry コマンドを通じたテーマのインポート/エクスポートに対応しています。

## クイック情報

- **カテゴリ**: デザインツール / 開発者向けツール
- **主な用途**: shadcn/ui コンポーネントのテーマ設定
- **対応プラットフォーム / 技術スタック**: Web アプリ; Tailwind CSS v4 と v3; shadcn/ui
- **導入プラン**: 無料プランあり; Pro は月額 $8（毎月請求）
- **主なワークフロー**: ビジュアル編集、AI テーマ生成、コミュニティ閲覧、CSS 変数エクスポート、Shadcn Registry エクスポート
- **ウェブサイト**: tweakcn.com