component-interface-design

Shadcn UI デザイナー

コアデザインプロンプト

UI をデザインする際は、次の理念を適用してください。

「Shadcn の原則に従い、モダンですっきりとした UI をデザインします。十分な余白とシンプルなサンセリフ書体でミニマリズムを取り入れ、奥行きと階層を表現するために控えめなシャドウを効果的に使用します。コントラストの高いニュートラルカラーと拡張可能な要素でアクセシビリティを確保し、モジュールとして組み合わせられる、美しいデフォルトのボタン、カード、フォームを用意します。流れるようで邪魔にならないアニメーションを取り入れ、柔らかなグレー、白、紫などの控えめなアクセントでプロフェッショナルな配色を保ちます。レスポンシブでカスタマイズ可能な React コードを Tailwind CSS で出力します。」

デザインルール

1. タイポグラフィのルール

• 画面ごとにフォントのウェイトとサイズを2～3種類に限定します
• 一貫性を保つため、Inter またはシステムフォントを使用します

<h1 className="text-2xl font-semibold">Title</h1>
<p className="text-sm text-muted-foreground">Description</p>

2. 余白のルール

• 4px ベースのスケール：4px、8px、16px、24px、32px
• Tailwind ユーティリティ：p-1、p-2、p-4、p-6、p-8

<div className="p-6 space-y-4">
  <div className="mb-8">...</div>
</div>

3. カラーのルール

• 知覚上の均一性を保つため、OKLCH をベースにします
• 50～950 のグレースケール（背景、前景、ミュート）を使用します
• 視覚的なノイズを避けるため、控えめなアクセントカラーを不透明度 10% で使用します

<Card className="bg-card text-card-foreground border-border">
  <Button className="bg-primary text-primary-foreground">Action</Button>
  <div className="bg-primary/10">Subtle accent</div>
</Card>

4. シャドウのルール

• 3段階のみ：
  • shadow-sm：控えめな浮き上がり（0 1px 2px）— カード向け
  • shadow-md：中程度の奥行き（0 4px 6px）— ドロップダウン向け
  • shadow-lg：高い浮き上がり（0 10px 15px）— モーダル向け

<Card className="shadow-sm hover:shadow-md transition-shadow">

5. アニメーションのルール

• 継続時間は 200～300ms
• トランジションには ease-in-out カーブを使用します
• 控えめなフィードバックのみ（ホバー、状態の変化）とし、装飾的な演出は加えません

<Button className="transition-colors duration-200 hover:bg-primary/90">
<Card className="transition-transform duration-200 hover:scale-105">

6. アクセシビリティのルール

• すべてのインタラクティブ要素に ARIA ラベルを設定します
• WCAG 2.1 AA のコントラスト比（最小 4.5:1）を確保します
• ホバー状態に対応するキーボードフォーカスのスタイルを設定します
• セマンティックな HTML 構造にします

<button
  aria-label="Submit form"
  className="focus:ring-2 focus:ring-primary focus:outline-none"
>
  Submit
</button>

ワークフロー

1. ユーザーへのヒアリング（詳細が提供されていない場合）

• 範囲：ページ全体、セクション、特定のコンポーネントのどれですか？
• 種類：ダッシュボード、フォーム、カード、モーダル、テーブルのどれですか？
• 対象ファイル：どこに実装しますか？
• 要件：必要な機能、インタラクション、表示するデータは何ですか？

2. デザインと実装

1. 既存のデザインに合わせる — アプリ内の現在の UI パターンに沿わせます
2. まず UI を構築する — ロジックを追加する前に、ビジュアルインターフェースを完成させます
3. モジュール化されたコンポーネント — 大きなページを、役割を絞った再利用可能なパーツに分割します
4. 上記の6つのルールをすべて厳守します
5. アクセシビリティを確認する — キーボード操作、コントラスト、ARIA ラベルを確認します
6. レスポンシブ対応をテストする — モバイル、タブレット、デスクトップを確認します

3. コンポーネント構造のパターン

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

export function MyComponent() {
  return (
    <div className="container mx-auto p-6 space-y-6">
      <header>
        <h1 className="text-2xl font-semibold">Page Title</h1>
      </header>

      <main className="grid gap-4">
        <Card className="shadow-sm">
          <CardHeader>
            <CardTitle>Section</CardTitle>
          </CardHeader>
          <CardContent>
            {/* Content */}
          </CardContent>
        </Card>
      </main>
    </div>
  )
}

4. 品質チェックリスト

完了前に、次の項目を確認してください。

• 該当する場合は shadcn/ui コンポーネントを使用している
• 画面ごとのフォントのウェイトとサイズが最大2～3種類である
• 全体で4pxベースの余白を使用している
• テーマカラー変数を使用している（色をハードコードしていない）
• シャドウは最大3段階で、効果的に適用されている
• アニメーションは200～300msで、ease-in-outを使用している
• インタラクティブ要素にARIAラベルが設定されている
• WCAG AA のコントラスト比（最小4.5:1）を満たしている
• キーボードフォーカスのスタイルが実装されている
• モバイルファーストのレスポンシブデザインである
• モジュール化された再利用可能なコード構造である

よくあるパターン

ダッシュボードページ

<div className="container mx-auto p-6 space-y-6">
  <header className="space-y-2">
    <h1 className="text-2xl font-semibold">Dashboard</h1>
    <p className="text-sm text-muted-foreground">Overview of metrics</p>
  </header>

  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
    {stats.map(stat => (
      <Card key={stat.id} className="shadow-sm">
        <CardHeader className="pb-2">
          <CardTitle className="text-sm font-medium text-muted-foreground">
            {stat.title}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-semibold">{stat.value}</div>
        </CardContent>
      </Card>
    ))}
  </div>
</div>

フォームのパターン

<form className="space-y-6">
  <div className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="name">Full Name</Label>
      <Input id="name" placeholder="John Doe" />
    </div>
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="[email protected]" />
    </div>
  </div>
  <Button type="submit" className="w-full transition-colors duration-200">
    Submit
  </Button>
</form>

データテーブルのパターン

<Card className="shadow-sm">
  <CardHeader>
    <CardTitle className="text-xl font-semibold">Recent Orders</CardTitle>
  </CardHeader>
  <CardContent>
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Order ID</TableHead>
          <TableHead>Customer</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {orders.map(order => (
          <TableRow key={order.id} className="hover:bg-muted/50 transition-colors">
            <TableCell className="font-medium">{order.id}</TableCell>
            <TableCell>{order.customer}</TableCell>
            <TableCell>
              <Badge variant="default">{order.status}</Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </CardContent>
</Card>

ベストプラクティス

• 既存のデザインに合わせる — 新しいデザインを、現在の UI 画面やコンポーネントに沿わせます
• UI を優先するアプローチ — ビジネスロジックを追加する前に、ビジュアルインターフェースを完成させます
• モジュール化されたコード — 小さく、役割が明確で、再利用可能なコンポーネントを使用します（巨大なページは避けます）
• トークン効率 — 簡潔で、適切に構成されたコードにします
• 一貫性 — 既存のカラー、余白、タイポグラフィのパターンに従います
• 組み合わせやすさ — 小さなコンポーネントを組み合わせる shadcn の理念に沿って構築します

よく使われる Shadcn コンポーネント

• レイアウト：Card、Tabs、Sheet、Dialog、Popover
• フォーム：Input、Textarea、Select、Checkbox、Radio、Switch、Label
• ボタン：Button、Toggle、ToggleGroup
• 表示：Badge、Avatar、Separator、Skeleton、Table
• フィードバック：Alert、Toast、Progress
• ナビゲーション：NavigationMenu、Dropdown、Command

References

• Shadcn UI
• Tailwind CSS v4
• WCAG 2.1