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

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

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

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

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

特に深刻なのは「一貫性の欠如」（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原則を適用したビフォーアフター

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

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

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

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

グレーの使い方がプロとアマチュアの分かれ目です。テキストやボーダーには真っ黒（#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）で決めると、自然な階層が生まれます。

行間（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つでした。

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ライブラリ徹底比較 — エンジニアに最適な選択肢

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

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

結論: 個人開発では 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を生成

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

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

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

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

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

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

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

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が生成するレスポンシブ対応は完璧ではない。必ずスマートフォン実機で確認する

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

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

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

フォーム画面の設計

/* 悪い例: ラベルとエラーメッセージの位置が不統一 */
<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倍早くリリースに到達しています。