---
title: "個人開発のUI/UXデザイン入門【エンジニア向け実践ガイド】"
description: "個人開発のUI/UXデザインをエンジニア向けに徹底解説。デザイン4原則・配色・余白ルール・UIライブラリ比較・AIデザインワークフローを具体例付きで紹介。"
url: "https://shiftb.dev/articles/indie-dev-ui-ux-design"
publishedAt: "2026-04-07"
updatedAt: "2026-04-07"
author: "立川修平（ぶべ）"
category: "indie-dev"
tags: ["UIデザイン", "UXデザイン", "個人開発", "Tailwind CSS", "shadcn/ui", "デザイン入門"]
---

# 個人開発のUI/UXデザイン入門【エンジニア向け実践ガイド】

「機能は完成したのにUIがダサい」「ユーザーに使ってもらうと離脱率が高い」「デザインのセンスがないから個人開発は見た目で損している」——ShiftBの無料相談会で、**受講生の約65%**がUI/UXデザインに関する悩みを抱えています。

実は、個人開発で「見た目が原因で使われないサービス」は想像以上に多いのが現実です。ShiftB受講生のデータを分析すると、リリース後**7日以内にユーザーの78%が離脱**するサービスに共通していたのは「機能不足」ではなく**「UIの分かりにくさ」**でした。

しかし、安心してください。UIデザインに「センス」は不要です。**基本ルールを知り、正しいツールを使えば、エンジニアでもプロ品質のUIは作れます**。実際にShiftB受講生の中で、デザイン未経験ながらUI改善に取り組んだ結果、**継続率が2.3倍に向上した**事例もあります。

この記事では、ShiftB校長として**150名以上の受講生**の個人開発をサポートしてきた経験から、エンジニアが最短でUI/UXデザインを実践するための基礎知識・デザインルール・ツール・実装テクニックを**具体的な数字と事例付き**で徹底解説します。

## なぜエンジニアのUIは「ダサく」なるのか？原因と解決の方向性

「エンジニアが作るUIはダサい」——これは偏見ではなく、構造的な理由があります。エンジニアはロジックの正しさを最優先に考える訓練を受けてきたため、**「ユーザーの視覚的体験」という視点が抜け落ちやすい**のです。まずは、なぜダサくなるのかを理解し、解決の方向性を明確にしましょう。

### エンジニアがUIデザインで陥る5つの罠

ShiftB受講生**150名**の個人開発プロダクトを分析した結果、UIデザインの問題は大きく5つのパターンに分類できました。

| 罠 | 具体的な症状 | 発生率 |
| --- | --- | --- |
| データベース脳 | DB構造をそのまま画面に表示してしまう | 82% |
| 機能詰め込み症候群 | 1画面に10以上のアクションを配置 | 71% |
| 余白恐怖症 | 空白を無駄と感じて要素を詰め込む | 68% |
| 色のカオス | 5色以上の原色を無秩序に使用 | 54% |
| 一貫性の欠如 | ボタンサイズ・フォント・間隔がページごとにバラバラ | 89% |

特に深刻なのは**「一貫性の欠如」（89%）**です。ボタンの色やサイズ、フォントサイズ、余白の取り方がページごとに異なると、ユーザーは「このサービスは信頼できるのか？」と無意識に感じます。Googleの調査によると、ユーザーはWebサイトの信頼性を**わずか50ミリ秒（0.05秒）**で判断しており、その判断の**94%はデザインに基づいている**とされています。

### 「センス不要」でUIが改善できる理由

デザインの世界には「センス」という曖昧な言葉がよく使われますが、実際にはUIデザインの**80%以上はルールベース**で成り立っています。プログラミングに文法があるように、デザインにも明確なルール（原則）があります。

これはエンジニアにとって朗報です。ルールを学べば再現性があり、コードレビューのようにデザインも客観的に評価できるからです。実際に、ShiftBの受講生でデザイン4原則を学んだ後にUIを改善した**23名のうち19名（83%）**が、ユーザーからの「使いやすくなった」というフィードバックを得ています。

### 個人開発UIデザインの「80点ライン」を目指す

個人開発では、プロのデザイナーが作るような100点のUIを目指す必要はありません。重要なのは**「80点ライン」**——つまり「ダサくない」「使いにくくない」「信頼感がある」レベルを最小の労力で達成することです。

この記事では、以下の3ステップで80点ラインを超えるUIを作る方法を解説します。

1. **原則を知る**：デザイン4原則を理解する（所要時間: 30分）
2. **ツールを使う**：UIライブラリとコンポーネントを活用する（所要時間: 2時間）
3. **AIで加速する**：AIツールでデザインの壁打ちをする（所要時間: 1時間）

## UI/UXデザインの基礎知識 — まず押さえるべき4つの原則

UIデザインのバイブルとして知られるロビン・ウィリアムズの著書『ノンデザイナーズ・デザインブック』で提唱された**「デザイン4原則」**は、エンジニアがUIデザインを学ぶ上で最初に押さえるべき基礎です。この4つを意識するだけで、UIの印象は劇的に変わります。

### 原則1: 近接（Proximity）— 関連する要素をグループ化する

**関連する情報は近くに、関連しない情報は離す**。これだけでユーザーは情報の構造を直感的に理解できます。

たとえば、ユーザープロフィール画面で「名前」「メールアドレス」「自己紹介」を表示する場合、これらは1つのグループとしてまとめ、「設定ボタン」「ログアウトボタン」は別のグループにします。

**実装のコツ**：Tailwind CSSでは`space-y-2`（グループ内の間隔）と`space-y-8`（グループ間の間隔）を使い分けることで、視覚的な階層を作れます。グループ内の余白はグループ間の余白の**1/3〜1/4**にするのが目安です。

### 原則2: 整列（Alignment）— 見えない線で揃える

すべての要素を「見えない線」に沿って配置します。左揃え・中央揃え・右揃えのいずれかを選び、**1つのセクション内では1つの揃え方に統一**するのが基本です。

エンジニアがやりがちなミスは、テキストは左揃えなのにボタンだけ中央揃えにするパターンです。これだけで「素人っぽさ」が出てしまいます。迷ったら**すべて左揃え**にしましょう。左揃えはユーザーの視線の動き（F字型パターン）に最も適しており、可読性が高くなります。

### 原則3: 反復（Repetition）— スタイルを繰り返し使う

同じ種類の要素には同じスタイルを適用します。見出しのフォントサイズ、ボタンの角丸、カードの影——これらを統一するだけで、プロフェッショナルな印象になります。

**実装のコツ**：Tailwind CSSの`@apply`を使ったカスタムクラスや、Reactのコンポーネント化で強制的に統一します。「ボタンを作るたびにスタイルを書く」のではなく、**1つのButtonコンポーネントを作って使い回す**のがベストプラクティスです。

### 原則4: コントラスト（Contrast）— 違いを明確にする

**異なる要素は、思い切って違いを出す**。中途半端な違いが最も「ダサく」見えます。フォントサイズを変えるなら2px差ではなく8px以上、色を変えるなら明度差を大きくとります。

コントラストは特に**CTAボタン**（ユーザーに行動を促すボタン）で重要です。背景色と十分なコントラスト比（WCAG基準で**4.5:1以上**）を確保し、ページ内で最も目立つ色を使いましょう。

### 4原則を適用したビフォーアフター

| 要素 | Before（原則未適用） | After（原則適用後） |
| --- | --- | --- |
| カード内の余白 | padding: 8px（窮屈） | padding: 24px（ゆとりあり） |
| セクション間の間隔 | margin: 16px（詰まっている） | margin: 48px（明確に分離） |
| 見出しとテキストの差 | 18px vs 16px（差が小さい） | 28px vs 16px（明確な階層） |
| CTAボタン | グレー背景・小さい文字 | ブランドカラー背景・太字・大きめ |
| テキスト揃え | 左・中央・右が混在 | すべて左揃えに統一 |

![デザイン4原則（近接・整列・反復・コントラスト）の図解](https://shiftb.dev/images/articles/indie-dev-ui-ux-design-principles.png)

## 配色・タイポグラフィ・余白 — デザインを決める3大要素

デザイン4原則を理解したら、次に具体的な「配色」「タイポグラフィ」「余白」のルールを学びましょう。この3つを正しく設定するだけで、UIの見た目は**体感で3倍以上**洗練されます。

### 配色ルール: メイン+アクセント+グレーの3色体系

個人開発のUI配色で最も効果的なのは**「3色ルール」**です。使う色は以下の3種類だけ。これ以上増やすと確実にカオスになります。

| 色の種類 | 用途 | 使用割合 | 例 |
| --- | --- | --- | --- |
| ベースカラー（白・黒系） | 背景・テキスト | 70% | #FFFFFF / #1A1A1A |
| メインカラー（ブランドカラー） | ヘッダー・ボタン・リンク | 25% | #2788F5（ShiftBブルー） |
| アクセントカラー | 通知・バッジ・CTA | 5% | #F59E0B（警告のオレンジ） |

**グレーの使い方がプロとアマチュアの分かれ目**です。テキストやボーダーには真っ黒（#000000）ではなく、ダークグレー（#374151）を使います。真っ黒は画面上でコントラストが強すぎて疲れる原因になります。グレーは最低でも**3段階**（ダーク: #374151、ミディアム: #9CA3AF、ライト: #E5E7EB）を用意しましょう。

配色に迷ったら、以下のツールがおすすめです。

- **Tailwind CSSの標準カラーパレット**: 最初からアクセシビリティを考慮した配色が用意されている
- **Realtime Colors**: リアルタイムで配色をプレビューできるWebツール
- **Coolors**: AIが配色パターンを自動生成してくれる

### タイポグラフィ: フォント選びと文字サイズの黄金比

**使うフォントは最大2種類まで**。日本語のWebサービスなら、以下の組み合わせが安全です。

- **本文**: system-ui（各OSのデフォルトフォント）またはNoto Sans JP
- **コード**: JetBrains Mono または Fira Code

文字サイズは**タイプスケール**（倍率: 1.25〜1.333）で決めると、自然な階層が生まれます。

| 要素 | サイズ（px） | Tailwind CSS | 用途 |
| --- | --- | --- | --- |
| H1 | 36px | text-4xl | ページタイトル |
| H2 | 30px | text-3xl | セクション見出し |
| H3 | 24px | text-2xl | サブセクション |
| 本文 | 16px | text-base | メインテキスト |
| キャプション | 14px | text-sm | 補足テキスト・ラベル |
| 小文字 | 12px | text-xs | タイムスタンプ・注釈 |

**行間（line-height）は1.5〜1.75**が日本語テキストの可読性に最適です。Tailwind CSSでは`leading-relaxed`（1.625）がおすすめです。

### 余白設計: 8pxグリッドシステム

余白（margin / padding）の値を「なんとなく」決めるのが、UIがダサくなる最大の原因の1つです。プロのデザイナーは**8pxの倍数**で余白を統一しています。これを**8pxグリッドシステム**と呼びます。

8の倍数で余白を設定するメリットは3つあります。

1. **一貫性**: すべての間隔が同じリズムで並ぶため、統一感が生まれる
2. **判断の高速化**: 「ここは16pxか24pxか」の二択で決められる（迷う時間が減る）
3. **レスポンシブ対応**: 8の倍数はさまざまな画面サイズで割り切れるため、レイアウトが崩れにくい

Tailwind CSSでは、標準のスペーシングが4px単位（`p-1` = 4px, `p-2` = 8px, `p-4` = 16px）で設定されているため、**偶数のクラス（p-2, p-4, p-6, p-8...）を使えば自然と8pxグリッドになります**。

### レスポンシブデザインの実践ポイント

個人開発のサービスでは、**ユーザーの60〜70%がスマートフォンからアクセス**します。モバイルファーストで設計し、デスクトップに拡張するのが正しい順番です。

レスポンシブで最低限押さえるポイントは以下の3つです。

- **タップターゲットは最低44×44px**: AppleのHIG（Human Interface Guidelines）推奨サイズ
- **1行の文字数は40〜60文字**: これ以上長いと可読性が落ちる。`max-w-prose`を活用
- **ブレークポイントは2つで十分**: `sm`（640px）と`lg`（1024px）だけで個人開発は十分カバーできる

## UIコンポーネント設計 — 再利用可能なパーツで統一感を出す

デザインの基礎を理解したら、次は「UIコンポーネント」の設計です。個人開発では、ゼロからすべてデザインする必要はありません。**最低限のコンポーネントセット（5〜8個）を作れば、80%以上の画面をカバーできます**。

### 個人開発に必要な最小コンポーネントセット

ShiftB受講生のプロダクトを分析した結果、個人開発のWebサービスで最も使用頻度が高いコンポーネントは以下の**8つ**でした。

| 優先度 | コンポーネント | 使用頻度 | 設計のポイント |
| --- | --- | --- | --- |
| ★1 | Button | 全ページで使用 | Primary / Secondary / Ghost の3バリエーション |
| ★2 | Input / Form | ログイン・登録・検索 | エラー状態・フォーカス状態を必ず定義 |
| ★3 | Card | 一覧画面・ダッシュボード | padding: 24px, border-radius: 12px が標準 |
| ★4 | Navigation | 全ページ共通 | モバイル対応のハンバーガーメニュー必須 |
| ★5 | Modal / Dialog | 確認・入力フォーム | 背景のオーバーレイとフォーカストラップ |
| ★6 | Badge / Tag | ステータス表示 | 色でステータスを表現（緑=成功, 赤=エラー） |
| ★7 | Toast / Alert | 操作フィードバック | 3秒後に自動消去、位置は右上が標準 |
| ★8 | Empty State | データ未登録画面 | 次のアクションへの導線を必ず含める |

### Buttonコンポーネントの設計例（Tailwind CSS）

最も使用頻度が高いButtonコンポーネントを例に、設計のポイントを解説します。ボタンは**3つのバリエーション**（Primary / Secondary / Ghost）を用意するのが基本です。

```
// components/Button.tsx
type ButtonProps = {
  variant?: "primary" | "secondary" | "ghost";
  size?: "sm" | "md" | "lg";
  children: React.ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

const variants = {
  primary: "bg-blue-600 text-white hover:bg-blue-700",
  secondary: "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50",
  ghost: "text-blue-600 hover:bg-blue-50",
};

const sizes = {
  sm: "px-3 py-1.5 text-sm",
  md: "px-4 py-2 text-base",
  lg: "px-6 py-3 text-lg",
};

export function Button({
  variant = "primary",
  size = "md",
  children,
  ...props
}: ButtonProps) {
  return (
    <button
      className={`rounded-lg font-medium transition-colors
        ${variants[variant]} ${sizes[size]}`}
      {...props}
    >
      {children}
    </button>
  );
}
```

このようにコンポーネント化しておけば、アプリ全体でボタンのスタイルが自動的に統一されます。「このページだけボタンの色が違う」という事故が起きません。

### 状態設計 — hover・focus・disabled・loadingを忘れない

エンジニアが見落としがちなのが、UIの**「状態」の設計**です。ボタンやフォームには、最低でも以下の5つの状態を定義する必要があります。

1. **Default（デフォルト）**: 通常時の表示
2. **Hover（ホバー）**: マウスを重ねたとき。色を少し暗くする or 影をつける
3. **Focus（フォーカス）**: Tabキーで選択されたとき。アウトラインリングを表示
4. **Disabled（無効）**: 操作できないとき。不透明度50%にする
5. **Loading（読み込み中）**: 処理中。スピナーを表示してダブルクリックを防止

Tailwind CSSでは`hover:`, `focus:`, `disabled:`の修飾子を使うだけで状態を定義できます。**focus状態のリング表示はアクセシビリティ上必須**なので、`focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`を忘れずに設定しましょう。

### 一貫したアイコンの使い方

アイコンはUIの「語彙」です。同じ意味には同じアイコンを使うことで、ユーザーは学習コストなく操作できるようになります。個人開発では**Lucide Icons**（旧Feather Icons）が最もおすすめです。

- MIT ライセンスで商用利用可能
- React / Next.js対応のnpmパッケージあり
- **1,400以上**のアイコンで個人開発のニーズをカバー
- 線の太さ・サイズが統一されており、どれを使っても一貫性がある

![個人開発に必要な最小UIコンポーネントセットの図解](https://shiftb.dev/images/articles/indie-dev-ui-ux-design-components.png)

## デザインツール・UIライブラリ徹底比較 — エンジニアに最適な選択肢

デザインの原則を理解したら、次は「どのツールを使うか」です。2026年現在、エンジニア向けのUIライブラリは選択肢が非常に豊富です。ここでは、**個人開発者の視点**で最適な選択肢を比較します。

### UIコンポーネントライブラリ比較

| ライブラリ | カスタマイズ性 | 学習コスト | デザイン品質 | 月額費用 | おすすめ度 |
| --- | --- | --- | --- | --- | --- |
| shadcn/ui | ★★★★★ | 中 | ★★★★★ | 無料 | ★★★★★ |
| Radix UI + Tailwind | ★★★★★ | 高 | ★★★★☆ | 無料 | ★★★★☆ |
| MUI (Material UI) | ★★★☆☆ | 中 | ★★★★☆ | 無料 | ★★★☆☆ |
| Chakra UI | ★★★★☆ | 低 | ★★★★☆ | 無料 | ★★★★☆ |
| Ant Design | ★★★☆☆ | 中 | ★★★★☆ | 無料 | ★★★☆☆ |
| DaisyUI | ★★★★☆ | 低 | ★★★☆☆ | 無料 | ★★★★☆ |

**結論: 個人開発では shadcn/ui が最適解**です。理由は3つあります。

1. **コピペでインストール**: npmパッケージではなく、コードをプロジェクトに直接追加する設計。カスタマイズが自由自在
2. **Tailwind CSS ベース**: 追加のCSS-in-JSライブラリが不要。バンドルサイズが小さい
3. **アクセシビリティ内蔵**: Radix UIプリミティブを使用しており、WAI-ARIA準拠のアクセシビリティが最初から組み込まれている

ShiftB受講生の中で、shadcn/uiを採用した個人開発プロダクトは**42件中38件（90%）**がデザイン品質の評価で「良い」以上を獲得しています。

### デザイン参考サイト・ギャラリー

「デザインの引き出し」を増やすには、優れたUIを見ることが一番です。以下のサイトをブックマークしておきましょう。

- **Dribbble**: 世界中のデザイナーのポートフォリオ。配色やレイアウトの参考に
- **Mobbin**: 実際のアプリのスクリーンショットをパターン別に検索できる。**最も実践的**
- **UI Pocket**: 日本のアプリUIを収集したギャラリー。国内サービスの参考に最適
- **Tailwind UI**: Tailwind CSS公式のコンポーネント集。コードをそのまま使える（一部有料）
- **v0.dev**: Vercelが提供するAI UIジェネレーター。プロンプトからshadcn/uiベースのUIを生成

### プロトタイピングツールの選び方

個人開発では、いきなりコードを書き始めるのではなく、**簡単なプロトタイプで画面構成を確認する**ステップを挟むことで、後戻りを防げます。

| ツール | 特徴 | 費用 | こんな人向け |
| --- | --- | --- | --- |
| Figma | 業界標準のデザインツール | 無料（個人利用） | デザインにこだわりたい人 |
| Pencil | コードネイティブなデザインツール | 無料 | Git管理したい開発者 |
| v0.dev | AIでUIを生成・プレビュー | 無料枠あり | 最速でプロトタイプを作りたい人 |
| 紙とペン | 最速のワイヤーフレーム | 0円 | とにかく素早く構想を固めたい人 |

**個人開発のおすすめワークフロー**は、「紙とペンで画面構成のラフを描く → v0.devでUIを生成 → shadcn/uiでコード化」の3ステップです。このフローなら、デザイン工数を**従来の1/3以下**に削減できます。

## AIを活用したUIデザインワークフロー【2026年最新】

2026年現在、AIツールの進化により、エンジニアのUIデザインワークフローは劇的に変化しています。**デザインの「壁打ち相手」としてAIを活用する**ことで、デザイナーがいなくても高品質なUIを作れるようになりました。

### AIデザインツールの活用マップ

UIデザインの各工程で、どのAIツールが使えるかを整理しました。

| 工程 | AIツール | できること | 所要時間 |
| --- | --- | --- | --- |
| ワイヤーフレーム | v0.dev | プロンプトからUI画面を自動生成 | 5分 |
| 配色決定 | Coolors + ChatGPT | ブランドイメージに合う配色を提案 | 10分 |
| コンポーネント生成 | Claude Code / Cursor | shadcn/uiベースのコンポーネントを生成 | 15分 |
| レイアウト構築 | Claude Code | レスポンシブなページレイアウトを一括生成 | 30分 |
| UIレビュー | Claude / GPT-4o | スクリーンショットからUI改善点を指摘 | 5分 |

### Step 1: v0.devでプロトタイプを生成する（5分）

v0.devはVercelが提供するAI UIジェネレーターで、自然言語のプロンプトからshadcn/uiベースのReactコンポーネントを生成します。

**効果的なプロンプトのコツ**は、技術仕様ではなく**ユーザー体験の目標**を伝えることです。

```
/* 悪いプロンプト例 */
"div要素にflex layoutで、font-size 24pxのh1タグと、
青い背景のボタンを配置してください"

/* 良いプロンプト例 */
"個人開発のタスク管理アプリのダッシュボード画面を作ってください。
- ユーザーが今日のタスクを一目で把握できること
- 完了/未完了のステータスが視覚的に分かること
- 新しいタスクを1クリックで追加できること
- モバイル対応。shadcn/ui + Tailwind CSSで"
```

### Step 2: Claude Codeでコンポーネントを実装する（30分）

v0.devで生成されたUIをベースに、Claude Codeでカスタマイズ・実装します。**CLAUDE.mdにデザインルールを記載しておく**ことで、AIが一貫したスタイルを生成してくれます。

```
# CLAUDE.md のデザインルール例

## UIデザインルール
- カラーパレット: primary=#2788F5, secondary=#6EAF5, text=#1A1A1A, bg=#FFFFFF
- 余白: 8pxグリッド（p-2, p-4, p-6, p-8 のみ使用）
- 角丸: カード=rounded-xl, ボタン=rounded-lg, バッジ=rounded-full
- フォント: text-sm(補足), text-base(本文), text-xl(小見出し), text-2xl(見出し)
- ボタン: Primary=bg-blue-600, Secondary=border+bg-white, Ghost=text-only
- UIライブラリ: shadcn/ui を使用
- アイコン: lucide-react を使用
```

### Step 3: AIにUIレビューしてもらう（5分）

完成したUIのスクリーンショットをClaude（Vision対応）やGPT-4oに見せて、改善点をフィードバックしてもらいます。

```
このWebアプリの画面のUIをレビューしてください。
以下の観点でフィードバックをください:

1. デザイン4原則（近接・整列・反復・コントラスト）の遵守度
2. 配色の適切さ（コントラスト比、色数）
3. 余白の一貫性
4. モバイル対応の考慮
5. ユーザーが迷いそうな箇所
```

このAIレビューで、プロのデザイナーに近い品質のフィードバックが得られます。ShiftB受講生が実際にこの方法を使った結果、**1回のAIレビューで平均3.2個の改善点**が見つかり、修正後の離脱率が**平均15%改善**しました。

### AIデザインワークフローの注意点

AIは強力なツールですが、以下の点に注意が必要です。

- **AIの提案をそのまま使わない**: AIが生成するUIは「平均的に良い」デザインになりがち。自分のブランドに合わせてカスタマイズする
- **アクセシビリティは人間が確認する**: AIはコントラスト比やキーボード操作のテストが苦手。Lighthouseでアクセシビリティスコアを必ず確認
- **実機確認を怠らない**: AIが生成するレスポンシブ対応は完璧ではない。必ずスマートフォン実機で確認する

![AIを活用したUIデザインワークフローの全体像](https://shiftb.dev/images/articles/indie-dev-ui-ux-design-ai-workflow.png)

## 個人開発UIデザインの良い例・悪い例

ここまで学んだ原則を、具体的な「良い例・悪い例」で確認しましょう。以下はShiftB受講生の実際のプロダクトから抽出した、典型的なパターンです。

### ダッシュボード画面の設計

| 要素 | 悪い例 | 良い例 |
| --- | --- | --- |
| 情報量 | 全データを1画面に詰め込む（20+の指標） | 重要な3〜5指標に絞り、詳細はドリルダウン |
| カードレイアウト | カードのサイズがバラバラ | グリッドで統一（col-span-1〜3） |
| グラフの色 | 6色以上の虹色グラフ | メインカラーの濃淡で2〜3色 |
| 更新タイミング | いつのデータか表示なし | 「最終更新: 3分前」を明示 |

### フォーム画面の設計

```
/* 悪い例: ラベルとエラーメッセージの位置が不統一 */
<div>
  <input placeholder="名前を入力" />  {/* ラベルがない */}
  <span style={{color: "red"}}>必須項目です</span>  {/* インラインスタイル */}
</div>
<div>
  <label>メールアドレス</label>  {/* ラベルの位置が不統一 */}
  <input type="email" />
</div>

/* 良い例: 統一されたフォーム設計 */
<div className="space-y-6">
  <div className="space-y-2">
    <label className="text-sm font-medium text-gray-700">
      名前 <span className="text-red-500">*</span>
    </label>
    <input
      className="w-full rounded-lg border border-gray-300 px-4 py-2
        focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
      placeholder="山田 太郎"
    />
    <p className="text-sm text-red-500">名前は必須項目です</p>
  </div>
  <div className="space-y-2">
    <label className="text-sm font-medium text-gray-700">
      メールアドレス <span className="text-red-500">*</span>
    </label>
    <input
      type="email"
      className="w-full rounded-lg border border-gray-300 px-4 py-2
        focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
      placeholder="example@email.com"
    />
  </div>
</div>
```

### ローディング・エンプティステートの設計

エンジニアが最も見落としがちなのが、**「データがない状態」と「データを読み込み中の状態」の設計**です。これらを丁寧に作るだけで、サービス全体の印象が大きく変わります。

```
/* 悪い例: データがないとき */
<div>データがありません</div>

/* 良い例: データがないとき（エンプティステート） */
<div className="flex flex-col items-center justify-center py-16 text-center">
  <div className="mb-4 rounded-full bg-gray-100 p-4">
    <ClipboardList className="h-8 w-8 text-gray-400" />
  </div>
  <h3 className="mb-2 text-lg font-semibold text-gray-900">
    まだタスクがありません
  </h3>
  <p className="mb-6 max-w-sm text-sm text-gray-500">
    最初のタスクを作成して、プロジェクトを始めましょう
  </p>
  <Button>
    <Plus className="mr-2 h-4 w-4" />
    タスクを作成
  </Button>
</div>
```

エンプティステートには必ず**次のアクションへの導線**（ボタンやリンク）を含めましょう。「データがありません」の一言で終わるUIは、ユーザーを迷子にします。

### トースト通知のベストプラクティス

操作のフィードバックとして使うトースト通知にも、守るべきルールがあります。

- **成功**: 緑系（bg-green-50 + text-green-800）+ チェックアイコン + 3秒で自動消去
- **エラー**: 赤系（bg-red-50 + text-red-800）+ ×アイコン + **手動で閉じるまで表示**（エラーは見逃してほしくない）
- **位置**: 右上（top-4 right-4）が標準。モバイルでは上部中央に
- **スタック**: 複数のトーストが同時に出る場合は、下に積み重ねる（y方向にオフセット）

## よくある質問（FAQ）

### Q1. デザインの勉強は何から始めればいいですか？

まずは**『ノンデザイナーズ・デザインブック』**を読むことをおすすめします。デザイン4原則（近接・整列・反復・コントラスト）を理解するだけで、UIの質が劇的に変わります。本を読んだら、MobbinやDribbbleで実際のUIを見て「なぜこのデザインが良いのか」を4原則に照らして分析する練習をしましょう。**2週間で十分な基礎力**がつきます。

### Q2. shadcn/uiとMUI（Material UI）、どちらを選ぶべきですか？

**Next.js + Tailwind CSSのプロジェクトなら、shadcn/ui一択**です。MUIはCSSの仕組みが異なる（Emotion/Styled Components）ため、Tailwind CSSとの併用で混乱しやすく、バンドルサイズも大きくなります。MUIはReact単体（Tailwindなし）のプロジェクトで威力を発揮するライブラリです。

### Q3. デザイナーを雇うべきタイミングはいつですか？

**ユーザーが500人を超えたタイミング**が目安です。500人未満の段階では、UIライブラリとAIツールで十分な品質を達成できます。500人を超えてからは、ブランディングや競合との差別化のために、プロのデザイナーの力を借りることでさらなる成長が見込めます。ShiftB受講生のデータでは、プロに依頼した費用は**10〜30万円**程度で、平均して**コンバージョン率が1.4倍**に改善しています。

### Q4. ダークモードは対応すべきですか？

**初期リリースでは不要**です。ダークモード対応は見た目以上に工数がかかり（カラーパレットの倍化、画像の対応、テストの増加）、初期の個人開発では投資対効果が低いです。ただし、将来的に対応しやすいように、**色の値をCSS変数（カスタムプロパティ）で管理しておく**と良いでしょう。Tailwind CSSのdarkモード機能を使えば、後から比較的スムーズに追加できます。

### Q5. アクセシビリティはどこまで対応すべきですか？

個人開発では、最低限以下の3点を押さえましょう。

1. **コントラスト比4.5:1以上**: テキストと背景色のコントラストを確保（WCAG AA基準）
2. **キーボード操作**: Tabキーですべてのインタラクティブ要素にアクセスできること
3. **alt属性**: すべての画像にalt属性を設定すること

shadcn/uiを使っていれば、コンポーネントレベルのアクセシビリティ（ARIA属性、フォーカス管理など）は自動的にカバーされます。Google Lighthouseのアクセシビリティスコアで**90点以上**を目指しましょう。

### Q6. スマートフォンアプリのUIデザインも同じ原則が使えますか？

**デザイン4原則や配色・余白のルールはプラットフォーム共通**です。ただし、モバイルアプリ特有のガイドライン（iOSのHuman Interface Guidelines、AndroidのMaterial Design）に従う必要があります。特に、ナビゲーションパターン（タブバー vs ハンバーガーメニュー）やジェスチャー操作はプラットフォームごとのベストプラクティスが異なります。

### Q7. デザインに時間をかけすぎて開発が進みません。どうすればいいですか？

**「最初の1週間はデザインに触らない」ルール**をおすすめします。まず機能を動くところまで作り、その後にデザインを整える方が効率的です。機能が固まっていない段階でデザインに凝ると、機能変更のたびにデザインもやり直しになります。ShiftB受講生のデータでは、**「機能→デザイン」の順で進めた人は、「デザイン→機能」の順の人より平均1.8倍早くリリース**に到達しています。