デザインシステム

全プロジェクト共通のデザインシステム（デジタル庁デザインシステム参考）

カラーシステム

基本方針

primary カラーを50〜950のスケールで定義
プロジェクトごとに tailwind.config.js で primary の値を変更することでテーマカラーを一括切替
セマンティックカラー（success, error, warning）は固定

Tailwind 設定例

javascript

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        // プロジェクトのテーマカラーを設定（Blue の例）
        primary: {
          50:  '#EFF6FF',
          100: '#DBEAFE',
          200: '#BFDBFE',
          300: '#93C5FD',
          400: '#60A5FA',
          500: '#3B82F6',
          600: '#2563EB',
          700: '#1D4ED8',
          800: '#1E40AF',
          900: '#1E3A8A',
          950: '#172554',
        },
        // 以下はプロジェクト共通
        success: colors.green,
        error: colors.red,
        warning: colors.yellow,
        neutral: colors.gray,
      },
    },
  },
}

プリセットカラー

プロジェクトに応じて primary に設定する色の候補：

プリセット名	500の値	用途例
Blue	#3B82F6	ビジネス系、信頼感
Green	#22C55E	環境、健康、成功
Purple	#A855F7	クリエイティブ、高級感
Orange	#F97316	エネルギー、親しみやすさ
Cyan	#06B6D4	テック、清涼感

カラーの使い分け

用途	推奨クラス	説明
メインアクション	`primary-600`	ボタン、リンク
ホバー状態	`primary-700`	インタラクティブ要素のホバー
背景ハイライト	`primary-50`	選択状態、フォーカス背景
テキストアクセント	`primary-600`	強調テキスト
ボーダーアクセント	`primary-500`	フォーカスリング

セマンティックカラー

名前	クラス	用途
Success	`success-600`	成功、完了、安全
Error	`error-600`	エラー、削除、危険
Warning	`warning-500`	警告、注意

Neutral（グレースケール）

用途	クラス
本文テキスト	`neutral-900`
補足テキスト	`neutral-600`
無効テキスト	`neutral-400`
ボーダー	`neutral-200`
背景	`neutral-50`
カード背景	`white`

タイポグラフィ

フォント（デジタル庁準拠）

javascript

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: ['Noto Sans JP', 'Hiragino Sans', 'sans-serif'],
      mono: ['Noto Sans Mono', 'monospace'],
    },
  },
}

フォントウェイト

名前	Tailwind	値	用途
Normal	`font-normal`	400	本文
Bold	`font-bold`	700	見出し、強調

テキストスタイル

名前	クラス	サイズ	行間	用途
Display	`text-4xl md:text-5xl`	36-48px	140%	ヒーロー、大見出し
Heading 1	`text-2xl md:text-3xl`	24-30px	140%	ページタイトル
Heading 2	`text-xl`	20px	140%	セクション見出し
Heading 3	`text-lg`	18px	150%	サブ見出し
Body	`text-base`	16px	175%	本文（読みやすさ重視）
Small	`text-sm`	14px	150%	補足テキスト
Caption	`text-xs`	12px	150%	ラベル、注釈

注意: 14px未満のテキストは使用しない（アクセシビリティ）

スペーシング

基準単位

8px を基準とし、その倍数でスペーシングを設定（デジタル庁準拠）

名前	Tailwind	サイズ	用途
1	`1`	4px	極小間隔
2	`2`	8px	密接した要素間
3	`3`	12px	関連要素間
4	`4`	16px	標準間隔
6	`6`	24px	グループ内
8	`8`	32px	セクション内
12	`12`	48px	セクション間
16	`16`	64px	大きなセクション間

コンポーネント

ボタン

html

<!-- Primary -->
<button class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors">
  保存する
</button>

<!-- Secondary -->
<button class="px-4 py-2 bg-white hover:bg-neutral-50 text-neutral-700 font-medium border border-neutral-300 rounded-lg transition-colors">
  キャンセル
</button>

<!-- Danger -->
<button class="px-4 py-2 bg-error-600 hover:bg-error-700 text-white font-medium rounded-lg transition-colors">
  削除する
</button>

<!-- Disabled -->
<button class="px-4 py-2 bg-neutral-300 text-neutral-500 font-medium rounded-lg cursor-not-allowed" disabled>
  保存する
</button>

<!-- Ghost -->
<button class="px-4 py-2 text-primary-600 hover:bg-primary-50 font-medium rounded-lg transition-colors">
  詳細を見る
</button>

入力フィールド

html

<!-- 通常 -->
<input type="text" class="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-shadow" />

<!-- エラー -->
<input type="text" class="w-full px-3 py-2 border border-error-500 rounded-lg focus:ring-2 focus:ring-error-500 focus:border-error-500 outline-none" />
<p class="mt-1 text-sm text-error-600">エラーメッセージ</p>

<!-- ラベル付き -->
<div>
  <label class="block text-sm font-medium text-neutral-700 mb-1">メールアドレス</label>
  <input type="email" class="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-shadow" />
</div>

カード

html

<div class="bg-white rounded-lg shadow p-6">
  <h3 class="text-lg font-bold text-neutral-900 mb-4">カードタイトル</h3>
  <p class="text-neutral-600 leading-relaxed">カードの内容がここに入ります。</p>
</div>

テーブル

html

<div class="bg-white rounded-lg shadow overflow-hidden">
  <table class="w-full">
    <thead class="bg-neutral-50">
      <tr>
        <th class="px-4 py-3 text-left text-sm font-bold text-neutral-700">名前</th>
        <th class="px-4 py-3 text-left text-sm font-bold text-neutral-700">メール</th>
        <th class="px-4 py-3 text-right text-sm font-bold text-neutral-700">操作</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-neutral-200">
      <tr class="hover:bg-neutral-50">
        <td class="px-4 py-3 text-sm text-neutral-900">山田 太郎</td>
        <td class="px-4 py-3 text-sm text-neutral-600">yamada@example.com</td>
        <td class="px-4 py-3 text-right">
          <button class="text-primary-600 hover:text-primary-800 text-sm font-medium">編集</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

アラート / メッセージ

html

<!-- 成功 -->
<div class="p-4 bg-success-50 border border-success-200 rounded-lg">
  <p class="text-success-800">保存が完了しました。</p>
</div>

<!-- エラー -->
<div class="p-4 bg-error-50 border border-error-200 rounded-lg">
  <p class="text-error-800">エラーが発生しました。</p>
</div>

<!-- 警告 -->
<div class="p-4 bg-warning-50 border border-warning-200 rounded-lg">
  <p class="text-warning-800">この操作は取り消せません。</p>
</div>

<!-- 情報 -->
<div class="p-4 bg-primary-50 border border-primary-200 rounded-lg">
  <p class="text-primary-800">ヒント: ここに補足情報を表示します。</p>
</div>

バッジ / ステータス

html

<span class="px-2 py-1 text-xs font-medium rounded-full bg-success-100 text-success-800">完了</span>
<span class="px-2 py-1 text-xs font-medium rounded-full bg-warning-100 text-warning-800">処理中</span>
<span class="px-2 py-1 text-xs font-medium rounded-full bg-neutral-100 text-neutral-800">下書き</span>
<span class="px-2 py-1 text-xs font-medium rounded-full bg-primary-100 text-primary-800">新規</span>

レイアウト

ページ構成

html

<div class="min-h-screen bg-neutral-50">
  <!-- ヘッダー -->
  <header class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-4 py-4">
      <!-- ナビゲーション -->
    </div>
  </header>

  <!-- メインコンテンツ -->
  <main class="max-w-7xl mx-auto px-4 py-8">
    <h1 class="text-2xl md:text-3xl font-bold text-neutral-900 mb-8">ページタイトル</h1>
    <div class="space-y-6">
      <!-- コンテンツ -->
    </div>
  </main>
</div>

サイドバーレイアウト

html

<div class="flex min-h-screen">
  <!-- サイドバー -->
  <aside class="w-64 bg-neutral-900 text-white">
    <div class="p-4">
      <h1 class="text-lg font-bold">アプリ名</h1>
    </div>
    <nav class="p-4 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-lg bg-primary-600 text-white">ダッシュボード</a>
      <a href="#" class="block px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800">設定</a>
    </nav>
  </aside>

  <!-- メインエリア -->
  <div class="flex-1 bg-neutral-50">
    <main class="p-8">
      <!-- コンテンツ -->
    </main>
  </div>
</div>

アイコン

Heroicons（https://heroicons.com）を使用

html

<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary-600" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>

レスポンシブ

ブレークポイント	Tailwind	幅
Mobile	デフォルト	< 640px
Tablet	`sm:`	>= 640px
Desktop	`md:`	>= 768px
Large	`lg:`	>= 1024px
XL	`xl:`	>= 1280px

基本方針

モバイルファーストで設計
タッチターゲットは最低44x44px
テキストは最低14px
コントラスト比 4.5:1 以上（WCAG AA準拠）

アクセシビリティ

フォーカス状態を明確に表示（focus:ring-2 focus:ring-primary-500）
色だけに依存しない情報伝達（アイコン + テキスト）
適切なaria属性の使用
キーボード操作のサポート

デザインシステム ​

カラーシステム ​

基本方針 ​

Tailwind 設定例 ​

プリセットカラー ​

カラーの使い分け ​

セマンティックカラー ​

Neutral（グレースケール） ​

タイポグラフィ ​

フォント（デジタル庁準拠） ​

フォントウェイト ​

テキストスタイル ​

スペーシング ​

基準単位 ​

コンポーネント ​

ボタン ​

入力フィールド ​

カード ​

テーブル ​

アラート / メッセージ ​

バッジ / ステータス ​

レイアウト ​

ページ構成 ​

サイドバーレイアウト ​

アイコン ​

レスポンシブ ​

基本方針 ​

アクセシビリティ ​

デザインシステム

カラーシステム

基本方針

Tailwind 設定例

プリセットカラー

カラーの使い分け

セマンティックカラー

Neutral（グレースケール）

タイポグラフィ

フォント（デジタル庁準拠）

フォントウェイト

テキストスタイル

スペーシング

基準単位

コンポーネント

ボタン

入力フィールド

カード

テーブル

アラート / メッセージ

バッジ / ステータス

レイアウト

ページ構成

サイドバーレイアウト

アイコン

レスポンシブ

基本方針

アクセシビリティ