デザイン

UI 実装のためのツール群：カラーの相互変換とパレット生成、WCAG コントラスト比の確認、グラデーション・シャドウ・SVG 背景パターン、Flexbox と Grid のレイアウト、イージング曲線と CSS アニメーション、px と rem の換算。

10 個のツール

デザイン

すべてのツールを見る

このカテゴリーについて

現代の UI 業務はデザイントークンと実 CSS のあいだを行き来します。仕様は HEX で渡され、デザイナーは HSL で見たいと言い、コードは OKLCH を使い、アクセシビリティ監査はコントラスト比を要求する——どれも同じ色に対してです。色だけでなく、余白、奥行き、イージング、文字サイズも、カンプから実際に動く CSS へ翻訳しなければなりません。

これらのツールは、変換、生成、監査を一つの場所にまとめます。カラー形式を変換し、WCAG しきい値でコントラストを確認し、単一のブランド色から知覚的に均一なパレットを導いたうえで、グラデーションや多層シャドウを組み立て、Flexbox と Grid の各プロパティを試し、ベジェ曲線でイージングを整え、キーフレームアニメーションを組み、ルートのフォントサイズを基準に px を rem へ換算できます。どの段階でも、そのまま貼れる CSS が手に入ります。

できること

  1. カラー・パレット・コントラスト

    HEX、RGB(A)、HSL(A)、HSV、OKLCH のあいだで変換し、1 つのブランド色から知覚的に均一なスケールを導き、WCAG の AA・AAA しきい値で前景と背景を検証します。

  2. グラデーション・シャドウ・パターン

    線形、放射、円錐グラデーションと多層シャドウを視覚的に調整し、タイル可能な SVG 背景パターンを生成して、本番に投入できる CSS をコピーできます。

  3. レイアウトとモーション

    Flexbox と Grid のプロパティを調整しながら効果をその場で確認し、三次ベジェ曲線でイージングを整え、キーフレームアニメーションを組み立てて CSS をコピーできます。

  4. px と rem の換算

    ルートのフォントサイズを基準に px、rem、em を換算し、タイプスケールや clamp() による流体サイズを作り、CSS ブロックごと一括変換し、アクセシビリティのズーム時の挙動も確認できます。