デザインシステム

デザインシステムの原則を理解することで、ClaudeCodeは一貫性のあるUIコンポーネントとスタイルを自動生成できます。弊社では、Tailwind CSSとshadcn/uiを基盤としたシステムを構築します。

弊社の推奨ルール

Tailwind CSSの標準クラスをそのまま使用し独自変数は定義しない
shadcn/uiのコンポーネントを継承して拡張
色やスペーシングはTailwindの既存スケールを活用
Atomic Designは採用せず、既存のデザイン言語を活用
WCAG 2.1 AA準拠を最低基準としたアクセシビリティ対応

ClaudeCodeでの利用

「このボタンコンポーネントにvariant propを追加して、default/secondary/ghost」
「Tailwindの標準色でダークモード対応を実装」
「shadcn/uiのCardコンポーネントを拡張して商品カードを作成」
「WAI-ARIA対応のモーダルコンポーネントを作成」

固定値ではなくTailwindクラスを使う

ハードコードされた値は変更が困難で一貫性が失われます。Tailwindの標準クラスを使用することで統一性を保ちます。

// 推奨しない：固定値の使用
style={{ padding: '16px', margin: '8px' }}

// 推奨：Tailwindクラス
className="p-4 m-2"

Tailwindの標準スケールを使用することで、一貫したスペーシングとサイジングを実現します。

CSS-in-JSではなくTailwind CSSを使う

Tailwind CSSはClaudeCodeが理解しやすく、独自の変数定義が不要です。標準クラスを使用することで一貫性のあるスタイリングが可能です。

// 推奨：Tailwind CSS - ClaudeCodeが理解しやすい
function Button({ children, variant = 'primary' }) {
  const variants = {
    primary: 'bg-blue-500 hover:bg-blue-600 text-white',
    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900',
  };
  
  return (
    <button className={`px-4 py-2 rounded-md ${variants[variant]}`}>
      {children}
    </button>
  );
}

TailwindクラスはClaudeCodeにとって予測可能で、一貫性のあるコードを生成できます。

shadcn/uiのデザイン言語を継承する

shadcn/uiはコピー&ペースト方式ですが、variant名などのデザイン言語はそのまま継承します。PrimaryをMainに変えるような独自の変更は避けます。

// shadcn/uiのvariant名をそのまま使用
<Button variant="default">デフォルト</Button>
<Button variant="secondary">セカンダリ</Button>
<Button variant="destructive">削除</Button>
<Button variant="ghost">ゴースト</Button>

// 独自にvariant名を変更しない
// ❌ variant="primary" → variant="main" 
// ❌ variant="destructive" → variant="danger"

既存のデザイン言語を尊重することで、ドキュメントやコミュニケーションの一貫性を保ち、新規メンバーの学習コストも削減できます。

Tailwindの標準色を活用する

Tailwind CSSの標準色（slate、blue、green、red等）を使用し、独自カラーの定義は避けます。

// 推奨：Tailwindの標準色を使用
<button className="bg-blue-500 hover:bg-blue-600">
  送信
</button>

// システムカラーもTailwindの標準色で表現
<div className="text-red-600">エラーメッセージ</div>
<div className="text-yellow-600">警告メッセージ</div>
<div className="text-green-600">成功メッセージ</div>

標準色を使用することで、ダークモード対応もdark:プレフィックスで簡単に実装できます。

Atomic Designは採用しない

shadcn/uiのButtonやCardといった既存の言語を、atoms/molecules/organismsに分解する必要はありません。既に確立されたデザイン言語をそのまま使います。

// 推奨：既存のデザイン言語をそのまま使用
components/
  ui/           // shadcn/uiの基本コンポーネント
    button.tsx
    card.tsx
  product/      // ビジネスドメインごと
    product-card.tsx

アクセシビリティライブラリを活用

アクセシビリティ要件は複雑なため、Radix UIやReact Ariaを活用します。

// Radix UIでWAI-ARIA準拠のコンポーネント
import * as Dialog from '@radix-ui/react-dialog';

function AccessibleModal({ children, ...props }) {
  return (
    <Dialog.Root {...props}>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>{children}</Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

よくある問題

レスポンシブデザインの実装

ブレークポイントごとの調整が複雑になる場合は、Tailwindのレスポンシブユーティリティでモバイルファーストに実装します。

コンポーネントバリアントの管理

バリアントが増えると条件分岐が複雑になる場合は、CVAライブラリやバリアントマップで整理します。

Interactive, inc.Developer Guidelines

Interactive