スキル自身の言葉で
このスキルは、タイポグラフィスケール、カラー理論、スペーシングシステム、アイコノグラフィの基礎を用いて、一貫性のあるアクセシブルなビジュアルシステムを構築する方法を教えます。モジュラー方式のタイプスケール、8ポイントグリッドのスペーシング、WCAG コントラスト要件を満たすセマンティックなカラーパレット、アイコンサイズシステムによるデザイントークンの確立をカバーしています。
このスキルは、Tailwind CSS、レスポンシブな流動的タイポグラフィ、セマンティックトークンを用いたダークモードテーマ、アクセシビリティ検証のための具体的な実装パターンを提供します。比率に基づくスケールと再利用可能なトークンシステムを定義することで、不揃いなスペーシング、コントラスト不足、場当たり的な数値といった、よくあるビジュアルデザインの課題に対応します。
生成されるもの
- CSS のカスタムプロパティまたは Tailwind の config によるデザイントークンの定義
- サイズバリアントを持つアイコンコンポーネント
仕組み
- 01モジュラーなデザイントークンを確立する
比率に基づくサイズ設定（0.75rem から 3rem）のタイポグラフィスケール、8ポイントグリッドのスペーシング（4px から 64px）、ブランド・状態・ニュートラル用のセマンティックカラートークンを定義します。
- 02レスポンシブなタイポグラフィを適用する
clamp() を用いた流動的タイポグラフィでビューポートに応じたサイズ設定を行い、最適な読みやすさのために行の幅を最大65文字に保ちます。
- 03アクセシブルなカラーパレットを実装する
WCAG のコントラスト比を満たすカラーシステムを構築します。本文テキストは 4.5:1、大きいテキストと UI コンポーネントは 3:1 とし、プログラムによるコントラストチェックを行います。
- 04一貫したアイコンシステムを作成する
12px から 32px までのアイコンサイズスケールを定義し、size プロパティを受け取り flex-shrink-0 の挙動を維持する再利用可能なコンポーネントを用意します。
- 05セマンティックトークンでダークモードを設計する
見た目ではなく用途に基づいたセマンティックトークンの命名を使用し、コンポーネントを変更せずに data 属性でテーマ切り替えができるようにします。
- 06垂直方向のリズムを維持する
定義済みのスケール値を使って隣接要素に一貫したスペーシングルールを適用し、インターフェース全体に視覚的な調和を生み出します。