frontend-design-system

フロントエンドデザインシステム

業界をリードするデザインシステムとベストプラクティスを活用して、モダンでアクセシブル、かつレスポンシブなウェブアプリケーションを構築します。

主な機能

1. デザインシステムの選定

ユーザーから「どの UI ライブラリを使うべきか」と尋ねられた場合や、デザインシステムに関するガイダンスが必要な場合：

比較ガイドを確認します：

references/design-system-comparison.md

選定の手順：

1. プロジェクトの要件を特定します（バンドルサイズ、カスタマイズ性、速度）
2. 比較表を確認して最適なものを選びます
3. インストールコマンドを提示します
4. ユースケースに合ったコンポーネントセットを推奨します

すぐに使える推奨例：

• Todo アプリ／モダンな SaaS： shadcn/ui + Tailwind
• 素早いプロトタイプ作成： Chakra UI または Mantine
• エンタープライズ向けダッシュボード： Material UI または Ant Design
• カスタムデザイン： Headless UI + Tailwind
• TypeScript を多用する場合： Mantine

2. レスポンシブレイアウトの設計

モバイル対応のレイアウトやレスポンシブコンポーネントが必要な場合：

パターンガイドを確認します：

references/responsive-design-patterns.md

基本原則：

• 常にモバイルファーストのアプローチを採用します
• 標準のブレークポイントに従います：sm（640px）、md（768px）、lg（1024px）、xl（1280px）
• カードレイアウトにはグリッドを使用します：grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
• ナビゲーションにはフレックスボックスを使用します：flex flex-col md:flex-row
• タイポグラフィのサイズを調整します：text-sm md:text-base lg:text-lg

3. Tailwind CSS のパターン

Tailwind CSS を使用して構築する場合：

Tailwind のパターンを確認します：

references/tailwind-patterns.md

適用する一般的なパターン：

• カード： rounded-lg border bg-card text-card-foreground shadow-sm p-6
• ボタン： inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90
• 入力欄： flex h-10 w-full rounded-md border border-input bg-background px-3 py-2
• ダークモード： bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-50

4. shadcn/ui コンポーネント

shadcn/ui を使用する場合（ほとんどのプロジェクトにおすすめ）：

コンポーネントリファレンスを確認します：

references/shadcn-components.md

Todo アプリに不可欠なコンポーネント：

npx shadcn-ui@latest add button card input form dialog badge tabs checkbox

用意されているテンプレートを使用します：

• タスクカード：assets/todo-card-template.tsx
• タスクフォーム：assets/task-form-template.tsx

パターン：コンポーネントを組み合わせる

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Content</p>
    <Button>Action</Button>
  </CardContent>
</Card>

5. Material UI の実装

ユーザーが Material UI を選んだ場合：

MUI のパターンを確認します：

references/material-ui-patterns.md

まずテーマを設定します：

import { ThemeProvider, createTheme } from '@mui/material/styles'

const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
  },
})

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

スタイル設定には sx プロパティを使用します：

<Box sx={{ p: 2, mt: 4, borderRadius: 2 }}>

6. Chakra UI の実装

ユーザーが Chakra UI を選んだ場合：

Chakra のパターンを確認します：

references/chakra-ui-patterns.md

主な利点：

• スタイルプロパティ：<Box bg="blue.500" p={4} borderRadius="md">
• ダークモードを標準搭載：useColorMode()、useColorModeValue()
• レスポンシブ配列：<Box w={['100%', '50%', '33%']}>

Stack を使ったレイアウト：

<VStack spacing={4} align="stretch">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
</VStack>

7. フォームの設計とバリデーション

バリデーション付きのフォームを構築する場合：

テンプレートを使用します：

assets/task-form-template.tsx

パターン：React Hook Form + Zod

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"

const schema = z.object({
  title: z.string().min(3),
})

const form = useForm({
  resolver: zodResolver(schema),
})

必ず含める項目：

• フィールドラベル（<FormLabel>）
• エラーメッセージ（<FormMessage>）
• 補足テキスト（<FormDescription>）
• 読み込み中は無効状態にする
• 適切なアクセシビリティ属性

8. アクセシビリティのパターン

必ず適用します：

• セマンティック HTML：<div onClick> ではなく <button>
• ARIA ラベル：aria-label="Delete task"
• スクリーンリーダー用テキスト：<span className="sr-only">Hidden</span>
• キーボード操作：フォーカス状態、タブ順序
• 色のコントラスト：WCAG AA の最小基準（4.5:1）
• タッチターゲット：最小 44x44px

9. ダークモードの実装

Tailwind の方法：

<div className="bg-white dark:bg-slate-950">
<p className="text-slate-900 dark:text-slate-50">

// Theme toggle
import { useTheme } from "next-themes"
const { theme, setTheme } = useTheme()

Chakra UI の方法：

const { colorMode, toggleColorMode } = useColorMode()
const bg = useColorModeValue('white', 'gray.800')

Material UI の方法：

const theme = createTheme({
  palette: {
    mode: prefersDarkMode ? 'dark' : 'light',
  },
})

10. コンポーネントテンプレート

Todo アプリや類似の UI を構築する場合：

利用可能なテンプレート：

1. タスクカード（assets/todo-card-template.tsx）

   • 含まれる要素：チェックボックス、優先度バッジ、タグ、期限、ドロップダウンメニュー
   • バリエーション：カード表示、リスト項目表示
   • 特長：ホバー状態、アクセシビリティ

2. タスクフォーム（assets/task-form-template.tsx）

   • 含まれる要素：タイトル、説明、優先度、期限、タグ
   • バリデーション：React Hook Form + Zod
   • バリエーション：ダイアログフォーム、インラインフォーム

使用方法：

# Read template
Read: assets/todo-card-template.tsx

# Adapt to project's design system
# Modify imports and styling as needed

ワークフローガイド

新規プロジェクトの場合

1. デザインシステムを選択する

   • 参照：references/design-system-comparison.md
   • 検討事項：バンドルサイズ、カスタマイズの必要性、チームの経験
   • 根拠を添えて推奨案を提示する

2. テーマ／設定をセットアップする

   • 依存関係をインストールする
   • テーマ（色、タイポグラフィ、間隔）を設定する
   • 必要に応じてダークモードをセットアップする

3. コアコンポーネントを構築する

   • レイアウト（Container、Grid）から始める
   • ナビゲーションを追加する
   • フォームを実装する
   • カード／リストコンポーネントを作成する

4. レスポンシブパターンを適用する

   • 参照：references/responsive-design-patterns.md
   • モバイルファーストのブレークポイント
   • 主要なビューポートでテストする

5. アクセシビリティを追加する

   • セマンティック HTML
   • ARIA ラベル
   • キーボードナビゲーション
   • スクリーンリーダーのサポート

Todo アプリの場合

1. デザインシステムを選択する（shadcn/ui を推奨）
2. コアコンポーネントをインストールする：

   npx shadcn-ui@latest add button card input form dialog badge tabs checkbox
   

3. テンプレートを使用する：
   • assets/todo-card-template.tsx をコピーする
   • assets/task-form-template.tsx をコピーする
4. ブランドに合わせて色や間隔をカスタマイズする
5. references/responsive-design-patterns.md のレスポンシブレイアウトを追加する
6. ダークモードを実装する

既存のプロジェクトの場合

1. 現在のデザインシステムを監査する
2. 課題（バンドルサイズ、カスタマイズの制限など）を特定する
3. 移行する場合：
   • 代替案について比較ガイドを読む
   • 段階的な移行を計画する
   • 新しいコンポーネントから着手する
4. 最適化する場合：
   • 参考資料のパターンを適用する
   • レスポンシブ対応を改善する
   • アクセシビリティ機能を追加する

クイックリファレンス

よくあるタスク

「これをレスポンシブにする」 → 参照：references/responsive-design-patterns.md → モバイルファーストのブレークポイントを適用する → グリッド／フレックスボックスのパターンを使用する

「ダークモードを追加する」 → Tailwind の場合：dark: プレフィックスを使用する → Chakra の場合：useColorMode() を使用する → MUI の場合：テーマのパレットモードを設定する

「どの UI ライブラリがよいか？」 → 参照：references/design-system-comparison.md → 要件に基づいて推奨案を提示する

「バリデーション付きのフォームを構築する」 → 使用：assets/task-form-template.tsx → プロジェクトのデザインシステムに合わせて調整する → 必要に応じてカスタムフィールドを追加する

「タスクカードを作成する」 → 使用：assets/todo-card-template.tsx → 特定の機能に合わせて変更する

デザイントークンのリファレンス

間隔のスケール： 2、4、6、8、12、16、24、32、48、64（px、4px 刻み）

タイポグラフィのスケール： xs（12px）、sm（14px）、base（16px）、lg（18px）、xl（20px）、2xl（24px）、3xl（30px）

ブレークポイント： sm（640px）、md（768px）、lg（1024px）、xl（1280px）、2xl（1536px）

角丸： sm（4px）、md（8px）、lg（16px）、full（9999px）

避けるべきアンチパターン

❌ デスクトップファーストのレスポンシブデザイン（必ずモバイルから始める） ❌ 色のハードコード（デザイントークン／テーマを使用する） ❌ div だらけの構造（セマンティック HTML を使用する） ❌ アクセシビリティの欠如（必ず ARIA とフォーカス状態を含める） ❌ 間隔の不統一（デザインシステムのスケールを使用する） ❌ onClick を持つ非インタラクティブ要素（button／a を使用する） ❌ モバイルでの小さすぎるタッチターゲット（44px 未満）

リソースの概要

• Tailwind のパターン： references/tailwind-patterns.md
• shadcn/ui コンポーネント： references/shadcn-components.md
• Material UI のパターン： references/material-ui-patterns.md
• Chakra UI のパターン： references/chakra-ui-patterns.md
• デザインシステムの比較： references/design-system-comparison.md
• レスポンシブパターン： references/responsive-design-patterns.md
• タスクカードのテンプレート： assets/todo-card-template.tsx
• タスクフォームのテンプレート： assets/task-form-template.tsx