業務画面UIチューナー

業務システムの一覧画面と入力フォームを実物さながらのプレビューで見ながら、余白・文字サイズ・配色をまとめて調整し、そのまま使える CSS と HTML を持ち帰れるツールです。デザイナーがいない現場で、プログラマーが手早くまともな画面に整えるために作りました。

プレビューを開いてはじめる

特徴

• 個別の数値をちまちま弄らない — 基準サイズと比率からタイプスケールを、基準単位と密度から余白を、ブランド色 1 色から配色一式を一括生成します。
• 業務画面そのもので確認 — 高密度な受注一覧（固定ヘッダ・ゼブラ・選択行・ステータスバッジ）と請求フォーム（必須・エラー・ヘルプ）を見ながら調整できます。
• 読める配色を機械的に保証 — 本文・ボタン・リンクなど文字系の組み合わせは WCAG AA を満たすまで自動調整。色覚多様性（P型・D型）で判別しづらいステータス色や、ゼブラと hover の明度差不足は生成時に警告します。
• ダークテーマ込み — OS 追従（prefers-color-scheme）と明示切替（data-theme）の両対応で出力します。
• 持ち帰りやすい出力 — CSS 変数だけ / CSS 全体 / HTML の 3 形式と、適用例付きの zip ダウンロード。クラス名のプリフィックスは変更でき、フラットな単一クラスのみで既存アプリの CSS と競合しません。
• チームで共有 — 設定はすべて URL に載るので、「このテーマで行きます」を URL 1 本で共有できます。設定は端末内（localStorage）にも保存され、外部には送信しません。