【コピペOK】個人開発でApple風デザインルールを作ったら統一感のあるカッコいいUIにできた話

Last updated at 2025-06-18Posted at 2025-06-18

こんにちは、とまだです。

先日、こんな記事を書かせていただきました。

【AI 駆動開発】Cursor を使いこなして 1 ヶ月でプログラミング学習サイトを作ったのでノウハウを伝えたい

Cursor と Claude を使った AI 駆動開発で、1 ヶ月でプログラミング学習サイトを作ったという内容でした。

おかげさまで多くの方に読んでいただけたようで、お役に立てて嬉しいです。

ただ、前回の記事では 「デザインの統一感で苦労した」 という反省点もお伝えしていました。

今回はその続編として、Apple 風のデザインルールを策定することで UI 調整が劇的に改善した 経験をお伝えしたいと思います。

※「デザインルール」「デザインルール」「デザインシステム」など、同じような意味で使われる言葉ですが、ここでは「デザインルール」と呼ぶことにします。

この記事でわかること

Claude を使ったデザインルール策定の具体的な手順
Apple のデザインルールを個人開発に活用する方法
AI エージェントにデザイン調整を任せるためのコツ
実際に使えるデザインルール（コピペ可）
デザイン統一で得られる効果と注意点

忙しい人のために要約

前回の AI 駆動開発でデザインの統一感に苦労した
Claude にサイトのテーマカラーとデザインルールを策定してもらった
Apple のデザインルールを参考に、より洗練されたルールを作成
デザインルールファイルを作って Cursor に渡すだけで統一感のある UI が完成
結果的に Core Web Vitals も改善し、UX も向上
記事内で実際のデザインルールを公開（コピペ利用 OK）

最初にデザインルールの効果を見てもらう

デザインルールの大事さを実感してもらいましょう。

新たに全くゼロから適当な 1 枚ページを Cursor に一発勝負で作ってもらい、デザインルールを使わない場合と使う場合でどれだけ違いが出るかを比較してみます。

デザインルールを使わない場合

まずは、デザインルールを使わずに Cursor に適当にページを作ってもらいます。

定番のレイアウトということもあり、雑な指示でもそれなりに見栄えのするページが生成されます。

（正直もう少し雑な UI になるかと思っていましたが、さすが Cursor です）

技術ブログ風のページ

技術ブログサイトの UI を Tailwind CSS（CDN）で作ってください。

SNS アプリ風のページ

SNS アプリの UI を Tailwind CSS（CDN）で作ってください。

ダッシュボード風のページ

ダッシュボードの UI を Tailwind CSS（CDN）で作ってください

デザインルールを使う場合

次に、後ほどご紹介するデザインルールを Cursor に渡して、同じようなページを作ってもらいます。

今回は DESIGN_RULE.md というファイルにデザインルールをまとめて、Cursor に渡しました。

目指している Apple 風を完全再現とまではいかないまでも、ハッキリとしていて見やすく、統一感のあるデザインが生成されます。

技術ブログ風のページ

DESIGN_RULE.md に従って、技術ブログサイトの UI を Tailwind CSS（CDN）で作ってください。

SNS アプリ風のページ

DESIGN_RULE.md に従って、SNS アプリの UI を Tailwind CSS（CDN）で作ってください。

ダッシュボード風のページ

DESIGN_RULE.md に従って、ダッシュボードの UI を Tailwind CSS（CDN）で作ってください。

比較結果

どちらも、ページそれぞれ単品で見るとそれなりに見栄えのする UI が生成されています。

ページごとに見る分には、デザインルールを使わない場合でもそれなりに良い感じに見えます。

ただ、全体の統一感 という観点ではいかがでしょうか？

よく見ないと分かりづらいかもしれませんが、デザインルールを使った場合の 3 枚について、以下の観点で見ると特にわかりやすいかと思います。

テーマカラー（メインカラーが青系統で統一、かつサブカラーも緑・オレンジ系統で統一）
カードの形状（角丸のサイズや影の有無）
タイポグラフィ（文字サイズや行間の統一感）

また、今回はページを一気に作ったため、「ページ内」の統一感という意味でいうと、そこまで差は出ていないかもしれません。

ただ、実際のコーディングでは「コンポーネントごと」など、少しずつ作っていくことが多いと思います。

その場合、デザインルールを使わないと以下のような問題が発生しやすいです。

ボタンの色が微妙にバラバラ
カードの角丸サイズが統一されていない
余白の取り方に一貫性がない
文字サイズの階層が曖昧
リンクのホバー効果がバラバラ
アイコンのサイズや余白が統一されていない
フォーム要素のスタイルがバラバラ

たとえば、以下のように部分ごとにバラバラなデザインが生成されてしまうことがあります。

上記の例は大袈裟かもしれませんが、AI エージェントにお任せで「継ぎ足し」で機能を追加していくと、どうしてもこのような デザインの統一感がなくなる という問題が発生しやすいです。

今回は、この問題を解決するために、デザインルールを策定して Cursor に渡す という方法を取りましたので、その具体的な手順と効果についてお伝えします！

前回の反省：デザイン地獄に陥った理由

前回の記事でも触れましたが、AI 駆動開発で一番苦労したのが デザインの統一感 でした。

機能開発と UI 作成を同時並行してしまった

「動く機能を作りながら見た目も整えていこう」という考えで進めたんですが、これが めちゃくちゃ大変 でした。

Cursor に「この機能を追加して」とお願いするたびに、微妙に違う色使いや余白設定のコンポーネントが生成されてしまうんです。

結果として、以下のような問題が発生しました。

ボタンの色が微妙にバラバラ
カードの角丸サイズが統一されていない
余白の取り方に一貫性がない
文字サイズの階層が曖昧

これでは、ユーザーにとって使いづらいサイトになってしまいます。

後から調整するのは本当に大変

「まあ、後でまとめて調整すればいいか」と思っていたんですが、これが大きな間違いでした。

機能が完成してから全体のデザインを調整しようとすると、以下のような問題に直面します。

どのコンポーネントがどこで使われているか把握しきれない
一箇所修正すると、別の場所で表示が崩れる
AI エージェントに依頼しても、既存のコードとの整合性が取れない

特に、Cursor が生成したコードが壊れやすい という問題もありました。

大幅なリファクタリングを依頼すると、動いていた機能が急に動かなくなったり、全然違うデザインになってしまったりと、手戻りが多発していました。

そこで、実務ではデザイナさんがデザインルールを作っていたな〜とふと思い出し、最初にデザインルールを策定することにしました。

デザインど素人がデザインルールを作成してみる

とはいえ、私の専門はエンジニアリングで、デザインの専門家ではありません。

一応、デザインカンプに基づいてコーディングしてきたので「なんとなく良い UI」というのは見ればわかりますが、自分でゼロからデザインするのはかなりハードルが高いです。

だったら、AI に任せてしまおうというのが今回の発想です。

Claude にサイトのテーマを決めてもらう

まずは Claude に、サイト全体のテーマカラーとデザインの方向性を決めてもらいました。

プロンプトはこんな感じです。

# 役割

優秀な UI/UX デザイナー

# 背景

プログラミング学習サイト「Learning Next」のデザインテーマを決めたいと思います。
主なユーザーはプログラミング初心者から中級者で、練習問題やテキスト学習ができるサイトです。

# 命令

サイトのテーマカラーとデザインの方向性を提案してください。
以下の要素を含めて考えてください。

- メインカラー（プライマリカラー）
- サブカラー
- 全体的なデザインの印象（清潔感、信頼性、親しみやすさなど）
- ターゲットユーザーに適したデザインの特徴

もはや、イメージカラーの決定すら Claude に任せてしまいます。

その結果、ざっくりですが以下のようなテーマが決まりましたので、これをベースにしていきます。

Claude の回答では、青系統のカラーパレット を提案してもらい、「清潔感」「信頼性」「学習への集中しやすさ」を重視した方向性となりました。

Learning Next のデザインテーマ（折りたたみ）

# Learning Next デザインルール

## 前提・基本方針

### 技術前提

- CSS フレームワーク: Tailwind CSS（デフォルトクラスのみ使用）
- カスタマイズ: 独自 CSS 定義なし、Tailwind 標準クラスで完結
- ダークモード: 対応不要

### デザイン基本方針

- 目的志向: 学習効率とユーザビリティを最優先
- 統一性: Tailwind の制約内で一貫したデザインシステム
- アクセシビリティ: 色のみに依存しない情報伝達
- レスポンシブ: モバイルファーストの縦並びレイアウト

## 配色システム

### ブランドカラー（ロゴベース）

- メインブランド: `blue-600`
- サブブランド: `sky-300`
- テキスト: `slate-700`

### 基本配色構成（3 色ルール準拠）

- ベース色（70%）: `white`、`slate-50`、`slate-100`
- メイン色（25%）: `blue-600`、`blue-700`
- アクセント色（5%）: `sky-300`、セマンティックカラー

### セマンティックカラー

- 成功: `green-500`、`green-50`、`green-700`
- 警告: `amber-500`、`amber-50`、`amber-700`
- エラー: `red-500`、`red-50`、`red-700`
- 情報: `blue-500`、`blue-50`、`blue-700`

### テキスト階層（真っ黒回避）

- 見出し: `slate-900`（#000 回避）
- 本文: `slate-700`
- 補足: `slate-500`
- 無効: `slate-400`

## インタラクション原則

### クリッカブル要素の必須条件

1. カーソル変更: `cursor-pointer` 必須
2. ホバー反応: 必ず視覚的フィードバック提供
3. 状態変化: 色・透明度・その他の明確な変化

### ホバー効果パターン

- 色変化: `blue-600` → `blue-700`
- 透明度: `hover:opacity-80`
- 背景追加: `hover:bg-slate-50`
- アンダーライン: `hover:underline`

## UI 要素別ルール

### ボタン設計

- プライマリ: `blue-600` + `hover:blue-700` + `cursor-pointer`
- セカンダリ: `white` + `blue-600` ボーダー + ホバー反応
- テキストボタン: `blue-600` テキスト + `hover:underline`

### リンク設計

- 通常: `blue-600` + `hover:blue-800` + `underline`
- ナビゲーション: `slate-600` + `hover:blue-600`
- 現在ページ: `blue-600` + `font-semibold`

### ステータス表示（色+形状での判別）

- 成功: `green-50` 背景 + アイコン + `green-700` テキスト
- エラー: `red-50` 背景 + アイコン + `red-700` テキスト
- 警告: `amber-50` 背景 + アイコン + `amber-700` テキスト
- 情報: `blue-50` 背景 + アイコン + `blue-700` テキスト

## コンテンツ別配色

### コース識別（色+アイコン併用）

- Ruby: `red` ファミリー + Ruby アイコン
- Rails: `blue` ファミリー + Rails アイコン
- RSpec: `green` ファミリー + テストアイコン

### 練習問題・インタラクティブ要素

- 未選択: `white` + `slate-200` ボーダー + `hover:bg-slate-50`
- 選択済み: `blue-50` + `blue-300` ボーダー
- 正解: `green-50` + チェックアイコン + `green-700`
- 不正解: `red-50` + バツアイコン + `red-700`

### ランキング表示

- 1 位: `yellow-50` + 🥇 + `yellow-700`
- 2 位: `slate-50` + 🥈 + `slate-700`
- 3 位: `orange-50` + 🥉 + `orange-700`

## レイアウト原則

### 4 原則適用

- 近接: 関連情報のグループ化（`space-y-4`など）
- 整列: グリッドシステム活用
- 反復: 同機能要素の統一デザイン
- 対比: 重要度による視覚的差別化

### 余白設定

- セクション間: `py-8`、`py-12`
- 要素間: `space-y-4`、`gap-4`
- 内部余白: `p-4`、`px-6 py-4`
- 画面端: `px-4`（圧迫感回避）

### レスポンシブ考慮

- 基本: モバイル縦並びレイアウト
- 横幅: `max-w-4xl mx-auto`で中央寄せ
- 余白: 4 の倍数単位（`p-4`、`m-8`など）

## アクセシビリティ

### 色覚配慮

- 色のみ禁止: 必ずアイコン・テキスト・形状で補完
- コントラスト: 白背景に`slate-600`以上使用
- リンク: `underline`で視覚的区別

### ユーザビリティ

- フォーカス: `focus:ring-2 focus:ring-blue-500`
- タッチターゲット: 最小`h-12`（48px）確保
- 読みやすさ: `text-base`以上、`leading-relaxed`

## 統一性確保ルール

### 優先順位

1. ブランドカラー: 最重要アクション
2. セマンティック: 状態・フィードバック
3. ニュートラル: ベース・テキスト・構造

### 一貫性チェックポイント

- 同機能: 同じホバー効果適用
- カーソル: クリッカブルに`cursor-pointer`必須
- 状態表示: 色+アイコンのセット使用
- テキスト階層: `slate`ファミリーで統一

### 禁止事項

- 原色使用: `red-500`の代わりに`red-600`等
- 真っ黒白: `#000`/`#fff`の代わりに`slate-900`/`slate-50`
- 色のみ判別: 必ずアイコン・形状で補完
- 4 色以上: 基本 3 色+セマンティックカラーまで

このガイドラインにより、Tailwind CSS の制約内で統一感があり、アクセシブルで直感的な Learning Next プラットフォームを実現します。

これだけでも、それなりに統一感のあるデザインができると思います。

ただ、せっかくならば企業のデザインルールも参考になるんじゃないかと思い、次のステップに進むことにしました。

Apple のデザインルールを参考にする

みなさんは好きなサイトってありますか？

私はデザインには疎いのですが、普段は Apple 製品をよく使っているからか「なんとなく Apple 風のデザインってかっこいいよな」と思っています。

実は Apple は Human Interface Guidelines など、公式のデザインルールを公開しています。

ざっくりいうと、Apple 製品の UI/UX デザインに関するベストプラクティスをまとめたもので、個人開発者でも参考になる内容が盛りだくさんです。

こんなものが無料で使えるなら！ということで、早速これを参考にしたデザインルールを作成することにします。

方法は簡単で、以下の URL を Claude に渡すだけです。

こちらは、Apple が公開しているデザインルールのリンクです。

https://developer.apple.com/design/
https://developer.apple.com/design/human-interface-guidelines

そして、こんなプロンプトを投げました。

# 役割

優秀な UI/UX デザイナー

# 背景

先ほど提案していただいたプログラミング学習サイトのデザインテーマをベースに、
さらに洗練されたデザインルールを作成したいと思います。

# 命令

Apple のデザインルールがあります。

- https://developer.apple.com/design/human-interface-guidelines
- https://developer.apple.com/design

以下の要素を含むデザインルールを策定してください。

- カラーシステム
- タイポグラフィ
- 余白・間隔
- 角丸
- 影の効果
- ボタンやカードなどのコンポーネント設計
- アクセシビリティ配慮

特に、Tailwind CSS での実装を前提として、具体的なクラス名も含めて提案してください。

大事なのは、まとめてほしい観点を明確に伝えることです。

その結果、まとめてくれたのがこちらです。

ご自身のサイトに応用したい方は、こちらをそのまま使っても良いかと思います。

Apple 風デザインルール（折りたたみ）

# Apple 風デザイン完全実装ガイド

Apple の Human Interface Guidelines と Apple 公式サイトの実装値を徹底分析し、完全に再現可能なレベルでのデザインルールを構築しました。以下のルールに従うことで、**確実に Apple 風の Web サイトデザインを実現**できます。

## 1. 配色システム（カラーパレット・使用場面・HEX コード）

### メインカラーパレット

**プライマリカラー**

- **ブラック**: `#000000` - メインテキスト、ナビゲーション、アイコン
- **ホワイト**: `#FFFFFF` - 背景、カード背景、逆転テキスト
- **グレー**: `#A3AAAE` - セカンダリテキスト、境界線

**システムカラー（iOS 準拠）**

- **システムブルー**: `#007AFF` - リンク、主要アクション、選択状態
- **システムレッド**: `#FF3B30` - エラー、削除、警告アクション
- **システムグリーン**: `#4CD964` - 成功、確認、正常状態
- **システムオレンジ**: `#FF9500` - 警告、注意喚起
- **システムパープル**: `#5856D6` - 創造性、プレミアム機能

**グレースケール（24 段階システム）**

- **テキスト用**: `#1D1D1F` (メイン), `#666666` (セカンダリ), `#979797` (キャプション)
- **背景用**: `#F5F5F7` (ライトグレー背景), `#EEEEEE` (分割線)
- **インタラクティブ**: `#0088CC` (ホバー用ブルー)

### カラー使用ルール

**テキストカラー適用**

```css
/* メインテキスト */
color: #000000; /* 主要コンテンツ */
color: #1d1d1f; /* 本文テキスト */
color: #666666; /* セカンダリ情報 */
color: #979797; /* キャプション・注釈 */
```

**アクションカラー適用**

```css
/* プライマリアクション */
background-color: #007aff;
color: #ffffff;

/* セカンダリアクション */
background-color: transparent;
color: #007aff;
border: 1px solid #007aff;
```

## 2. 角丸（border-radius）設定

### コンポーネント別角丸値

**ボタン系**

- **小さなボタン**: `border-radius: 8px` (高さ 32px 以下)
- **標準ボタン**: `border-radius: 12px` (高さ 44px)
- **大きなボタン**: `border-radius: 16px` (高さ 56px 以上)

**カード・コンテナ系**

- **小さなカード**: `border-radius: 12px` (幅 200px 以下)
- **標準カード**: `border-radius: 16px` (幅 200-400px)
- **大きなカード**: `border-radius: 20px` (幅 400px 以上)

**フォーム要素**

- **入力フィールド**: `border-radius: 8px`
- **テキストエリア**: `border-radius: 12px`
- **セレクトボックス**: `border-radius: 8px`

**モーダル・オーバーレイ**

- **モーダル**: `border-radius: 20px` (iOS 風)
- **ポップオーバー**: `border-radius: 16px`
- **ツールチップ**: `border-radius: 8px`

### 角丸実装の注意点

**連続的な角丸（Continuous Corners）**

```css
/* iOS風の滑らかな角丸を再現 */
border-radius: 16px;
/* フィグマの場合: Corner Smoothing 60-61% を適用 */
```

## 3. 余白システム（margin・padding）

### 基本スペーシングユニット

**8px ベースシステム**

- **極小**: `4px` - アイコンと文字の間隔
- **小**: `8px` - 関連要素間の最小間隔
- **標準**: `16px` - 一般的な要素間隔、カード内 padding
- **中**: `24px` - セクション間の区切り
- **大**: `32px` - メジャーセクション間
- **特大**: `48px` - ページ最上部・最下部の余白

### コンポーネント別余白設定

**ボタン**

```css
/* 標準ボタン */
padding: 12px 24px; /* 上下12px, 左右24px */
min-height: 44px; /* タッチターゲット最小サイズ */

/* 小さなボタン */
padding: 8px 16px;
min-height: 32px;

/* 大きなボタン */
padding: 16px 32px;
min-height: 56px;
```

**カード内部**

```css
/* カード内padding */
padding: 20px; /* 標準カード */
padding: 16px; /* 小さなカード */
padding: 24px; /* 大きなカード */
```

**レイアウト余白**

```css
/* ページレベル */
margin: 0 16px; /* モバイル水平マージン */
margin: 0 24px; /* タブレット水平マージン */
margin: 0 auto;
max-width: 1200px; /* デスクトップ中央寄せ */

/* セクション間 */
margin-bottom: 32px; /* セクション区切り */
margin-bottom: 48px; /* メジャーセクション区切り */
```

## 4. コントラストの考え方

### テキストコントラスト規則

**WCAG 2.1 準拠コントラスト比**

- **通常テキスト**: 4.5:1 以上
- **大きなテキスト**: 3:1 以上
- **UI コンポーネント**: 3:1 以上

**推奨テキスト組み合わせ**

```css
/* 高コントラスト（メインテキスト） */
background: #ffffff;
color: #000000; /* 21:1 ratio */
background: #f5f5f7;
color: #1d1d1f; /* 16.8:1 ratio */

/* 中コントラスト（セカンダリテキスト） */
background: #ffffff;
color: #666666; /* 5.74:1 ratio */
background: #f5f5f7;
color: #979797; /* 4.54:1 ratio */

/* アクションカラー */
background: #007aff;
color: #ffffff; /* 4.5:1 ratio */
```

### UI 要素のコントラスト

**インタラクティブ要素**

- **ボタン**: 背景色とテキストで 4.5:1 以上
- **リンク**: 周囲のテキストと 3:1 以上の差
- **フォーム**: 境界線と背景で 3:1 以上

**状態による色の変化**

```css
/* 通常状態 */
background-color: #007aff;

/* ホバー状態 */
background-color: #0056cc; /* 20%暗く */

/* 無効状態 */
background-color: #007aff;
opacity: 0.3; /* 30%透明度 */
```

## 5. カードデザインの使い方

### カードの基本スペック

**標準カード**

```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: none; /* 影でのみ区別 */
}
```

**影（Shadow）の設定**

```css
/* 軽い影（標準） */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

/* 中程度の影（ホバー時） */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

/* 強い影（モーダル・重要要素） */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
```

### カードサイズバリエーション

**小カード（モバイル）**

```css
.card-small {
  min-width: 280px;
  max-width: 320px;
  padding: 16px;
  border-radius: 12px;
}
```

**標準カード**

```css
.card-standard {
  min-width: 320px;
  max-width: 400px;
  padding: 20px;
  border-radius: 16px;
}
```

**大カード（デスクトップ）**

```css
.card-large {
  min-width: 400px;
  max-width: 600px;
  padding: 24px;
  border-radius: 20px;
}
```

### カード内レイアウト

**コンテンツ構造**

```css
.card-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eeeeee;
}

.card-body {
  margin-bottom: 20px;
  line-height: 1.5;
}

.card-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eeeeee;
}
```

## 6. スペースの使い方（要素間距離・グリッドシステム）

### 要素間距離の体系

**関連度による間隔**

- **密接関連**: `4px` - ラベルと値、アイコンとテキスト
- **関連**: `8px` - 同じグループ内の要素
- **やや関連**: `16px` - 異なるグループの要素
- **独立**: `24px` - セクション内の区切り
- **完全分離**: `32px` - セクション間の区切り

### グリッドシステム

**12 カラムフレキシブルグリッド**

```css
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px; /* モバイル */
  padding: 0 24px; /* タブレット */
  padding: 0 32px; /* デスクトップ */
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px; /* モバイル */
  gap: 20px; /* タブレット */
  gap: 24px; /* デスクトップ */
}
```

**レスポンシブブレークポイント**

```css
/* モバイル */
@media (max-width: 767px) {
  .container {
    padding: 0 16px;
  }
  .grid {
    gap: 16px;
  }
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding: 0 24px;
  }
  .grid {
    gap: 20px;
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  .container {
    padding: 0 32px;
  }
  .grid {
    gap: 24px;
  }
}
```

### タイポグラフィスペーシング

**SF Pro フォントシステム**

```css
/* システムフォント指定 */
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;

/* サイズ階層 */
.text-large-title {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 24px;
}
.text-title-1 {
  font-size: 28px;
  line-height: 1.25;
  margin-bottom: 20px;
}
.text-title-2 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 16px;
}
.text-headline {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 12px;
}
.text-body {
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.text-caption {
  font-size: 12px;
  color: #666666;
  margin-bottom: 8px;
}
```

## 実装チェックリスト

### 必須要件

- [ ] 最小タッチターゲット 44px×44px 確保
- [ ] コントラスト比 4.5:1 以上維持
- [ ] システムフォント（SF Pro）使用
- [ ] 8px ベースのスペーシング遵守
- [ ] 角丸値の統一（8px、12px、16px、20px）
- [ ] 影の一貫性確保

### 推奨事項

- [ ] ダークモード対応の色設計
- [ ] アクセシビリティ対応
- [ ] レスポンシブデザイン実装
- [ ] 滑らかなアニメーション追加
- [ ] セマンティックカラー使用

このガイドラインに従うことで、**Apple 公式サイトと同等の品質とデザイン一貫性**を持つ Web サイトを構築できます。各数値は実際の Apple の実装値に基づいており、そのまま適用することで確実に Apple 風のデザインを実現できます。

正直、パッと見ではどれが Apple のデザインルールに基づいているのかはわかりませんが、細かい数値やルールがしっかりと定義されていることがわかります。

完全に Apple のデザインを再現するのは難しいですが、これを参考にすることで、かなり洗練されたデザインが実現できると思います。

では、これを Learning Next のデザインルールに組み込んでいきます。

サイトイメージと Apple 風ルールを統合

Claude が提案してくれた内容をベースに、最終的に Learning Next 専用のデザインルール を作成しました。

その際も、2 つのデザインルールをチャットで Claude に渡し、以下のようなプロンプトを投げました。

# 役割

優秀な UI/UX デザイナー

# 背景

事前に、以下の 2 つのデザインルールを作成しました。

1. Learning Next のデザインテーマ
2. Apple 風デザインルール

# 命令

「Learning Next のデザインテーマ」と「Apple 風デザインルール」を統合し、以下の要素を含むデザインルールを作成してください。

# 補足

もし、2 つのデザインルールに矛盾がある場合は、Apple 風のルールを優先してください。
ただし、色などサイトイメージに影響する部分は Learning Next のデザインテーマを優先してください。

上記のプロンプトでは、2 つのデザインルールを統合することと、矛盾がある場合は優先順位を明確にすることを伝えています。
これにより、Learning Next のイメージを保ちながら、Apple 風の洗練されたデザインルールを取り入れることができます。

実際のデザインルール（コピペ利用可）

せっかくなので、今回作成したデザインルールの全文を公開します。

サイトの目的などの部分だけはカスタマイズした上で、ご自身のサイトに応用していただければと思います。

Learning Next Apple 風デザインルール（全文）

# Learning Next Apple 風デザインルール

## 1. 基本理念

Learning Next は、Apple Human Interface Guidelines の洗練されたデザイン哲学を基盤としつつ、教育プラットフォームとしての独自性を表現します。ブランドカラーの青を軸に、清潔感・明瞭性・直感性を追求し、アクセシビリティを最優先に考慮したユーザー体験を提供します。

## 2. 配色システム

### プライマリカラー（WCAG 適合）

メインブルー: blue-500 (#3B82F6) - 主要アクション、選択状態
ダークブルー: blue-600 (#2563EB) - ホバー状態、強調
強調ブルー: blue-700 (#1D4ED8) - テキスト用、高コントラスト
超強調ブルー: blue-800 (#1E40AF) - 白背景でのテキスト、AAA 対応
ライトブルー: blue-50 (#EFF6FF) - 背景、選択エリア（使用は最小限に）
ミドルブルー: blue-100 (#DBEAFE) - アイコン背景（使用は最小限に）


### グレースケール（アクセシビリティ最適化）

テキストメイン: gray-900 (#111827) - 主要テキスト（コントラスト比 21:1）
テキストサブ: gray-700 (#374151) - 補助テキスト（コントラスト比 12.6:1）
テキストキャプション: gray-600 (#4B5563) - 注釈、説明文（コントラスト比 7:1）
薄めテキスト: gray-500 (#6B7280) - 非重要テキスト（コントラスト比 4.5:1）
境界線: gray-300 (#D1D5DB) - 区切り線、カード境界
薄境界線: gray-200 (#E5E7EB) - 軽い区切り線
背景: white (#FFFFFF) - 基本背景（薄色背景は極力避ける）
セクション背景: gray-50 (#F9FAFB) - 必要な場合のみ使用


### システムカラー（コントラスト配慮）

成功: green-600 (#059669) - コントラスト比 7:1 確保
警告: amber-600 (#D97706) - コントラスト比 7:1 確保
エラー: red-600 (#DC2626) - コントラスト比 7:1 確保
情報: blue-700 (#1D4ED8) - コントラスト比 7:1 確保


### カラー使用ルール

白背景でのテキスト色は gray-700 以上を使用
青背景でのテキスト色は常に白色（#FFFFFF）
同色系の組み合わせは避ける（青背景に青ボタンなど）
薄色背景（-50, -100 系）は極力使用しない
UI コンポーネントの境界は 3:1 以上のコントラスト確保


## 3. 角丸システム

### コンポーネント別設定

小ボタン: rounded-lg (8px 相当)
標準ボタン: rounded-xl (12px 相当)
大ボタン: rounded-2xl (16px 相当)
カード: rounded-2xl (16px 相当)
モーダル: rounded-3xl (24px 相当)
入力フィールド: rounded-lg (8px 相当)
アイコンボタン: rounded-full（円形）


### 角丸使用原則

同一コンポーネント内では統一の角丸値を使用
親子関係にあるコンポーネントは角丸値を階層化
過度に大きな角丸値は避ける


## 4. 余白体系

### 基本単位（8px ベース）

極小: 2px (0.5rem)
最小: 4px (1rem)
小: 8px (2rem)
標準: 16px (4rem)
中: 24px (6rem)
大: 32px (8rem)
特大: 48px (12rem)
最大: 64px (16rem)


### ボタン内余白（タッチターゲット 44px 確保）

小ボタン: px-3 py-2.5 (12px 10px) - 最小 44px 高さ
標準ボタン: px-6 py-3 (24px 12px) - 48px 高さ
大ボタン: px-8 py-4 (32px 16px) - 56px 高さ
アイコンボタン: p-3 (12px) - 48px x 48px


### カード内余白

小カード: p-4 (16px)
標準カード: p-5 (20px)
大カード: p-6 (24px)
特大カード: p-8 (32px)


### セクション間隔

要素間: space-y-2 (8px)
コンポーネント間: space-y-4 (16px)
セクション内: space-y-6 (24px)
セクション間: space-y-8 (32px)
ページセクション間: space-y-12 (48px)


## 5. 影の適用

### 標準影設定

ボタン標準影: shadow-sm (0 1px 2px rgba(0, 0, 0, 0.05))
ボタンホバー影: shadow-md (0 4px 6px rgba(0, 0, 0, 0.07))
プライマリボタン影: shadow-md (常時適用)
カード標準影: shadow-sm
カードホバー影: shadow-md
モーダル影: shadow-xl (0 20px 25px rgba(0, 0, 0, 0.1))
ドロップダウン影: shadow-lg (0 10px 15px rgba(0, 0, 0, 0.1))


### 影の使用原則

全てのインタラクティブ要素（ボタン、リンク）には必ず影を付与
ホバー時は影を一段階強化してフィードバックを提供
非インタラクティブ要素の影は控えめに（shadow-sm 程度）
重要度の高い要素ほど強い影を使用
同一画面内で影の強度は最大 3 段階まで


## 6. タイポグラフィ

### フォントウェイト

大見出し: font-bold (700)
見出し: font-semibold (600)
強調テキスト: font-semibold (600)
ボタンテキスト: font-semibold (600) - 視認性重視
本文: font-normal (400)
キャプション: font-normal (400)
軽いテキスト: font-light (300) - 使用は最小限


### フォントサイズ階層

大見出し: text-4xl (36px) + font-bold + leading-tight
見出し 1: text-3xl (30px) + font-semibold + leading-tight
見出し 2: text-2xl (24px) + font-semibold + leading-snug
見出し 3: text-xl (20px) + font-semibold + leading-snug
見出し 4: text-lg (18px) + font-semibold + leading-normal
本文: text-base (16px) + font-normal + leading-relaxed
小さい本文: text-sm (14px) + font-normal + leading-relaxed
キャプション: text-xs (12px) + font-normal + leading-normal


### コントラスト要件（WCAG 2.1 準拠）

通常テキスト: 4.5:1 以上（gray-600 以上推奨）
大きなテキスト（18px 以上または太字 14px 以上）: 3:1 以上
白背景の青テキスト: blue-700 以上を使用（7:1 以上）
青背景の白テキスト: 常に白色（#FFFFFF）
重要な情報: 7:1 以上（AAA 対応）


### 行間・文字間隔

見出し: leading-tight (1.25)
本文: leading-relaxed (1.625)
長文: leading-loose (2)
文字間隔: tracking-normal（特別な場合のみ調整）


## 7. コンポーネント設計

### ボタン設計原則

全てのボタンに影を付与（押せることを明示）
最小タッチターゲットサイズ 44px x 44px を確保
フォントウェイトは semibold 以上で視認性向上
同一画面内での色の重複を避ける
disabled 状態は明確に区別（透明度 0.5 など）


### プライマリボタン

背景色: bg-blue-500
テキスト色: text-white
フォント: font-semibold
影: shadow-md
ホバー: bg-blue-600 + shadow-lg
フォーカス: ring-2 ring-blue-500 ring-offset-2
無効化: opacity-50 + cursor-not-allowed


### セカンダリボタン

背景色: bg-white
テキスト色: text-blue-700
ボーダー: border-2 border-blue-700
フォント: font-semibold
影: shadow-sm
ホバー: bg-blue-50 + shadow-md
フォーカス: ring-2 ring-blue-500 ring-offset-2


### 危険ボタン

背景色: bg-red-600
テキスト色: text-white
フォント: font-semibold
影: shadow-md
ホバー: bg-red-700 + shadow-lg


### カード設計

背景: bg-white
境界線: border border-gray-300（視認性確保）
影: shadow-sm
ホバー: shadow-md + border-gray-400
角丸: rounded-2xl
内余白: p-5 または p-6


### 入力フィールド

背景: bg-white
境界線: border border-gray-300
フォーカス: border-blue-500 + ring-2 ring-blue-500 ring-opacity-20
エラー: border-red-500 + ring-2 ring-red-500 ring-opacity-20
プレースホルダー: placeholder-gray-500
最小高さ: h-12（48px）


### ナビゲーション

アクティブ状態: bg-blue-700 + text-white
ホバー状態: bg-blue-50 + text-blue-700
非アクティブ: text-gray-700
フォーカス: ring-2 ring-blue-500 ring-inset


## 8. レイアウトシステム

### コンテナ

最大幅: max-w-4xl (常に w-full と併用し、固定の横幅として使用)
中央寄せ: mx-auto
水平余白: px-4 sm:px-6 lg:px-8
垂直余白: py-8 sm:py-12 lg:py-16


### グリッドシステム

1 カラム: grid-cols-1
2 カラム: grid-cols-1 md:grid-cols-2
3 カラム: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
4 カラム: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
間隔: gap-4 sm:gap-6 lg:gap-8


### フレックスレイアウト

水平配置: flex items-center justify-between
垂直配置: flex flex-col items-center
中央寄せ: flex items-center justify-center
間隔: space-x-4 / space-y-4


## 9. インタラクション

### ホバー効果

ボタン: 色の深化 + 影の強化 + scale-105（わずかな拡大）
カード: 影の強化 + 境界線の濃化
リンク: 色の変化 + underline
アイコン: 色の変化 + rotate-12（わずかな回転）


### フォーカス状態（アクセシビリティ重要）

入力要素: ring-2 ring-blue-500 ring-opacity-50
ボタン: ring-2 ring-blue-500 ring-offset-2
リンク: ring-2 ring-blue-500 ring-offset-1
コントラスト比: 3:1 以上確保


### アクティブ状態

ボタン: scale-95（わずかな縮小）
リンク: 色の更なる深化
入力要素: ring-2 ring-blue-600


### トランジション

標準: transition-all duration-200 ease-in-out
色のみ: transition-colors duration-150 ease-in-out
影のみ: transition-shadow duration-200 ease-in-out
変形: transition-transform duration-150 ease-in-out


### ローディング状態

スピナー: animate-spin
パルス: animate-pulse
背景: bg-gray-100（コンテンツ部分）
透明度: opacity-50


## 10. アクセシビリティ

### キーボード操作

Tab 順序の論理的な設定
Enter/Space キーでのボタン操作
Escape キーでのモーダル終了
矢印キーでのナビゲーション


### スクリーンリーダー対応

適切な aria-label 設定
heading 階層の正しい使用
フォーム要素の label 関連付け
状態変化の音声通知（aria-live）


### 視覚的配慮

色のみに依存しない情報提示
十分なコントラスト比の確保
文字サイズの可変性
動画・アニメーションの制御オプション


### モーション配慮

prefers-reduced-motion メディアクエリ対応
必要最小限のアニメーション
自動再生の回避
点滅・フラッシュの制限


## 11. レスポンシブデザイン

### ブレークポイント

sm: 640px 以上
md: 768px 以上
lg: 1024px 以上
xl: 1280px 以上
2xl: 1536px 以上


### レスポンシブ調整

フォントサイズ: text-sm md:text-base lg:text-lg
余白: p-4 md:p-6 lg:p-8
グリッド: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
表示・非表示: hidden md:block / block md:hidden


## 12. 実装チェックリスト

### 必須項目（アクセシビリティ）

- [ ] WCAG コントラスト要件の遵守（4.5:1 以上）
- [ ] キーボードナビゲーション対応
- [ ] 適切な aria 属性設定
- [ ] フォーカスインジケーターの視認性（3:1 以上）
- [ ] 最小タッチターゲット 44px 確保
- [ ] スクリーンリーダー対応のテキスト

### 必須項目（デザイン）

- [ ] グレースケールの使用（真っ黒・真っ白の適切な使用）
- [ ] 8px ベースの余白システム
- [ ] 角丸の一貫性（lg, xl, 2xl, 3xl）
- [ ] 全インタラクティブ要素への影付与
- [ ] スムーズなトランジション（200ms 以下）
- [ ] ボタンテキストは font-semibold 以上
- [ ] 白背景の青テキストは blue-700 以上
- [ ] カードには明確な境界線（border-gray-300）

### 推奨項目（UX 向上）

- [ ] ホバー効果の統一（影の強化）
- [ ] フォーカス状態の明確化
- [ ] ローディング状態の実装
- [ ] エラーメッセージの親切な表示
- [ ] 成功フィードバックの実装
- [ ] プログレッシブエンハンスメント
- [ ] パフォーマンス最適化

### 色使いの注意点

- [ ] 同色系の組み合わせ回避
- [ ] 薄色背景の使用制限
- [ ] システムカラーの適切な使用
- [ ] 無効状態の明確な表示
- [ ] 色盲への配慮（形・テキストでの補完）

### 品質保証

- [ ] 複数ブラウザでの動作確認
- [ ] 複数デバイスでの表示確認
- [ ] アクセシビリティツールでの検証
- [ ] パフォーマンス測定
- [ ] ユーザビリティテスト実施

## 13. 禁止事項

### 絶対に避けるべき要素

- [ ] 薄すぎる色の使用（コントラスト不足）
- [ ] 同色系の重複（青背景に青ボタンなど）
- [ ] 不要な薄色背景の多用
- [ ] 影のないインタラクティブ要素
- [ ] 44px 未満のタッチターゲット
- [ ] キーボード操作不可能な要素
- [ ] 色のみに依存した情報提示
- [ ] 自動再生される音声・動画
- [ ] 点滅・フラッシュ効果の使用

### 制限的使用項目

- [ ] 薄色背景（-50, -100 系）は目的が明確な場合のみ
- [ ] アニメーション効果は控えめに
- [ ] 装飾的要素は最小限に
- [ ] カスタムフォントは読みやすさ重視
- [ ] 影の多用は避ける（最大 3 段階）

運用方法：Cursor での活用法

デザインルールが完成したら、これを DESIGN_RULE.md というファイル名でプロジェクト内に保存しました。

基本的な使い方

使い方は本当にシンプルです。

Cursor で何かページやコンポーネントを作る際に、以下のようなプロンプトを投げるだけです。

src/app/company/page.tsx の UI について、DESIGN_RULE.md に従ってデザイン調整してください

たったこれだけで、デザインルールに従った統一感のある UI が生成されます。

新機能開発時の活用

新しい機能を追加する際も、最初から以下のようにお願いします。

練習問題の結果表示ページを作成してください。
DESIGN_RULE.md に従って、以下の要素を含めてください。

このように、最初からデザインルールありき で開発を進めることで、後からの調整作業がほとんど不要になりました。

既存コンポーネントの改善

既にあるコンポーネントの改善も簡単です。

src/components/QuizCard.tsx を DESIGN_RULE.md に従って改善してください。
特に、カードの影とボタンのスタイリングを統一してください。

Cursor は既存のコードとデザインルールを比較して、適切に調整してくれます。

今回学んだこと

デザインルール策定は「投資」

最初は「デザインルールを作るのって面倒くさいな」と思っていました。

でも実際にやってみると、最初の投資で後の工数が大幅に削減 されることがわかりました。

むしろ、デザインルールがないまま開発を進める方が、結果的に多くの時間を無駄にしてしまいます。

デザインで悩んでいる方は、ぜひ一度デザインルールを作成してみてください。

難しい、面倒だなと思う方は、私のデザインルールを参考にしていただければと思います。

AI エージェントには「明確な指針」が必要

Cursor や GitHub Copilot などの AI エージェントは、明確な指針があると本領を発揮 します。

「なんとなくかっこよく作って」では限界がありますが、「このデザインルールに従って作って」と伝えると、驚くほど統一感のある UI を生成してくれます。

人間も同じですが、明確な指針があると作業がスムーズに進むことを再認識しました。

Apple のデザインルールは本当に参考になる

Apple のデザインルールは、個人開発者にとっても非常に参考になります。

特に アクセシビリティ の観点では、多くの学びがありました。

適切なコントラスト比の確保
キーボード操作への対応
スクリーンリーダーへの配慮

これらの要素を最初から組み込んでおくことで、より多くの人に使ってもらえるサービスになります。

実はいろんな企業がデザインルールを公開している

最近では、Apple だけでなく、Google や Microsoft などもデザインルールを公開しています。

「デザインルール有名」というキーワードで Google 検索すると、いろんな企業のデザインルールが見つかります。

参考：有名企業を参考に学ぶ！デザインルール公開事例 10 選

海外企業のものが多いですが、実は日本企業も公開しているところがあります。

参考：日本・海外のデザインシステム総まとめ【56 事例＋ α】

他にも、ここ数年で話題になっているのがデジタル庁の デザインルール です。

とにかく見やすさと使いやすさを追求したガイドラインで、個人開発者にも非常に参考になります。

注意点

ここまででデザインルールの良さだけをお伝えしてきましたが、AI エージェントも 100% 反映してくれるわけではありません。

そのため、コードを書いてもらった後は、必ず自分で確認することが大切です。

私は以下のようなチェックリストを作成して、実装後に確認しています。

ホバー時に色が変わったり、カーソルが変わるなどのフィードバックがあるか
色が薄くてみにくい部分はないか
スマホサイズに切り替えたときに、レイアウトが崩れていないか
ボタンのサイズが小さすぎて、タップしづらくなっていないか
フォントサイズが小さすぎて、読みづらくなっていないか

人間としてデザインの感覚を養う意味でも、これらのチェックは習慣にしておくと良いでしょう。

とはいえ、デザインルールを策定しておくとほぼクリアしてくれるので、これらのチェックもかなり楽になります。

おわりに

今回は、デザインルールを事前に策定することで AI 駆動開発の UI 問題を解決した経験をお伝えしました。

デザインルールの策定は、最初は面倒に感じるかもしれません。

でも、一度作ってしまえば、その後の開発効率が劇的に向上します。

特に Cursor や GitHub Copilot などの AI エージェントを使う場合は、明確な指針があることで本来の力を発揮 してくれます。

今回公開したデザインルールは、Apple のデザインルール をベースにしているので、アクセシビリティや UX の観点でも安心して使えるはずです。

個人開発者の皆さん、ぜひ参考にしてみてください！

そして、もしプログラミング学習に興味がある方は、今回デザインルールを適用した Learning Next を試していただけると嬉しいです！

質問やフィードバックがあれば、ぜひコメントで教えてください。

X の DM でも受け付けていますので、お気軽にご連絡いただけると嬉しいです！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up