デザイン・カラー
ビジュアル生成とカラーアクセシビリティを端末内で完結。
SVG 波形・シェイプディバイダー生成ツール
振幅・周波数・複雑さをスライダーで調整し、Webサイトの区切り線に使えるベクター波形を瞬時に生成。
CSS グラスモーフィズム＆多重シャドウ生成ツール
backdrop-filter のぼかし・透過度・光沢ボーダー・多重ボックスシャドウを視覚的にデザイン。
メッシュグラデーション＆壁紙生成ツール
4〜6個のカラー制御点を直感的にドラッグ配置し、CSSコードおよび4K高解像度壁紙PNGを書き出し。
WCAG 2.2 カラーコントラスト適合性チェッカー
前景色と背景色からコントラスト比を算出。AA/AAA合格判定と固定色を保った自動修正カラーを提案。
画像カラーパレット自動抽出ツール
画像をドロップするだけで K-Means 聚類アルゴリズムが主要な5〜8色を抽出。CSS変数とJSON出力に対応。
カラーシステムビルダー
ブランドカラーから primitive スケールとライト/ダーク意味役割をブラウザ内で構築。
カラーシステムチェッカー
sRGB/Display-P3 ガマット、WCAG 2.2 セマンティック対、スケール品質を監査し明示的修正を選択。
カラートークンジェネレーター
レビュー済みカラートークンを CSS 変数、Tailwind v4 @theme、DTCG JSON で書き出し。
ツール選定ガイド
セクション区切りなら SVG 波形、霜ガラスのカードなら Glassmorphism、流れる背景ならメッシュグラデを使います。問いが WCAG 2.2 のコントラストならチェッカー、写真からデザイントークンを取るならパレット抽出です。
ビジュアル生成と配色チェック
波形・ガラス・メッシュの各ツールは SVG や CSS を生成します。コントラストチェッカーは 2 色の組み合わせを WCAG 2.2 に照らして評価します。パレット抽出は画素をクラスタリングしますが、適合を保証するものではありません。
ベクトルの区切りと CSS 表現
波形ツールは SVG の形状を、グラスモーフィズムは backdrop-filter を使った CSS を、メッシュグラデーションは壁紙向けの放射状背景を生成します。