ui-ux-master

UI/UX マスタースキル

Apple ヒューマンインターフェイスガイドライン、モダンな Web デザインパターン、SuperDesign の原則、あらゆるプラットフォームで優れたユーザー体験を実現するための普遍的な UX のベストプラクティスを組み合わせた、究極のデザインスキルです。

デザイン哲学

基本原則

1. 巧妙さより明快さ

• 情報の階層がひと目でわかります
• 操作の結果を予測できます
• フィードバックがすぐに得られます
• 必要がないときは複雑さを隠します

2. 一貫性が親しみやすさを生みます

• インターフェイス全体でパターンを繰り返します
• 用語を統一します
• ビジュアルランゲージに一貫性を持たせます
• プラットフォームの慣習を尊重します

3. シンプルさから生まれる美しさ

• すべての要素に目的があります
• 余白がゆとりを生み出します
• 視覚的なノイズを最小限に抑えます
• 細部まで丁寧に仕上げます

4. アクセシビリティは妥協できません

• 能力にかかわらず、誰もが使えます
• キーボードで操作できます
• スクリーンリーダーに対応しています
• 高コントラストのオプションを用意します

プラットフォーム別のデザイン

Apple プラットフォーム（iOS、macOS、watchOS、tvOS、visionOS）

Apple HIG のパターンについて詳しくは、references/apple-platforms.md をご覧ください。

Apple の主な原則：

• 明快さ： 読みやすいテキスト、正確なアイコン、控えめな装飾
• 敬意： コンテンツを優先し、UI が邪魔にならないようにします
• 奥行き： 視覚的なレイヤー、自然な動き、空間認識

使用する場面： ネイティブの iOS、macOS、watchOS、tvOS、visionOS アプリ

モダンな Web デザイン

Web デザインのパターンについて詳しくは、references/web-design.md をご覧ください。

Web の主な原則：

• レスポンシブ： モバイルを優先し、あらゆる画面に適応します
• 高パフォーマンス： 読み込みを高速化し、アセットを最適化します
• プログレッシブ： どこでも動作し、可能な環境では機能を拡張します
• セマンティック： 適切な HTML 構造とアクセシブルなマークアップを使用します

使用する場面： Web サイト、Web アプリ、PWA、ランディングページ、ダッシュボード

デザインシステム

色彩理論

モダンなカラーシステム：

• oklch() 色空間（知覚的に均一でモダン）
• 手早い調整には HSL
• 旧式の環境との互換性には RGB/Hex

セマンティックカラー：

/* Light/Dark mode compatible */
--primary: oklch(0.649 0.237 267);
--secondary: oklch(0.556 0 0);
--background: oklch(0.145 0 0); /* dark */
--foreground: oklch(0.985 0 0); /* light text */
--muted: oklch(0.556 0 0 / 0.5);
--border: oklch(0.922 0 0 / 0.15);

避けるもの：

• 一般的な Bootstrap ブルー（#007bff）— 古く見えます
• 純粋な黒（#000000）— ダークグレーを使用します
• コントラストの低いテキスト（比率 <4.5:1）

カラーガイドライン： パレット、コントラスト比、色彩心理については、references/color-systems.md をご覧ください。

タイポグラフィ

システムフォント（推奨）：

• Apple： SF Pro（iOS/macOS）、SF Compact（watchOS）
• Web： Inter、Outfit、DM Sans、Plus Jakarta Sans
• 等幅： JetBrains Mono、Fira Code、Geist Mono
• フォールバック： -apple-system, system-ui, sans-serif

文字サイズのスケール：

Display: 72px / 4.5rem
Heading 1: 48px / 3rem
Heading 2: 36px / 2.25rem
Heading 3: 24px / 1.5rem
Body: 16px / 1rem
Small: 14px / 0.875rem
Caption: 12px / 0.75rem

行の高さ：

• 見出し：1.2 - 1.3
• 本文：1.5 - 1.6
• 小さいテキスト：1.4 - 1.5

フォントの組み合わせ： 組み合わせのルールと例については、references/typography.md をご覧ください。

余白とレイアウト

8 ポイントグリッドシステム：

• 基本単位：8px（0.5rem）
• 余白のスケール：8、16、24、32、40、48、56、64、80、96
• 微調整には 4px の倍数（4、12、20、28 など）を使用します

標準的なマージン：

• モバイル：16px
• タブレット：24px
• デスクトップ：32-48px
• 最大幅：1200-1400px

コンポーネントの余白：

XS:  4px  - Tight groups (icon + text)
S:   8px  - Related items
M:   16px - Standard spacing
L:   24px - Section spacing
XL:  32px - Major sections
2XL: 48px - Page sections

レイアウトパターン： グリッド、フレックスボックス、レスポンシブパターンについては、references/layout-patterns.md をご覧ください。

コンポーネントのデザイン

ボタン

階層：

1. プライマリ： 塗りつぶし、アクセントカラー、主要な操作
2. セカンダリ： アウトラインまたは淡い色、補助的な操作
3. ターシャリ： ゴーストまたはテキストのみ、最も控えめ

状態：

• デフォルト
• ホバー（浮き上がりまたは色の変化）
• アクティブ（押下、縮小）
• 無効（不透明度を下げ、操作不可）
• 読み込み中（スピナーを表示し、操作不可）

サイズ：

• 小：高さ 32-36px
• 中：高さ 40-44px（デフォルト）
• 大：高さ 48-56px

ベストプラクティス：

• タッチターゲットを最小 44×44px にします（モバイル）
• 明確で操作内容がわかるラベルを使用します（「OK」ではなく「変更を保存」）
• 非同期操作には読み込み状態を設けます
• わかりやすさのため、アイコンとテキストを併用します

フォーム

入力フィールド：

• フィールドの上に明確なラベルを配置
• プレースホルダーはラベルではなくヒントとして使用
• フォーカス状態を視認できるようにする
• インラインで入力を検証
• エラーメッセージはフィールドの近くに表示
• 成功状態を表示

フィールドのサイズ：

• 1行入力：高さ 40-48px
• テキストエリア：最小の高さ 80-120px
• 幅は想定される入力文字数に合わせる

フォームのレイアウト：

• シンプルにするため、1列に配置
• 関連するフィールドをグループ化
• 段階的開示（必要に応じて複雑さを表示）
• 保存ボタンを下部に配置し、キャンセルボタンは副次的にする

ベストプラクティス： 入力検証のパターンとアクセシビリティについては、references/forms.md を参照してください。

カード

構成要素：

• 角丸：8-12px（モダン）、0px（ブルータリスト）
• パディング：16-24px
• シャドウ：控えめにし、最大1～2層
• 背景：ページよりわずかに浮き上がった色

種類：

• フラット： シャドウなし、枠線のみ
• エレベーテッド： 控えめなシャドウ
• インタラクティブ： ホバー時に浮き上がり、クリック可能
• グラスモーフィック： ぼかし＋透明度

コンテンツ：

• 上部に画像／アイコン（任意）
• タイトル（見出しレベル）
• 説明／本文
• 下部にアクション

ナビゲーション

パターン：

• トップナビゲーション： グローバルで常時表示（Web）
• タブバー： 主要なセクションを3～5個表示（モバイル）
• サイドバー： 複雑なアプリ向け、折りたたみ可能（デスクトップ）
• ハンバーガーメニュー： モバイルでの代替手段。可能であれば避ける
• パンくずリスト： 階層的な現在位置を表示

モバイルナビゲーション：

• 下部のタブバー（親指で操作しやすい）
• その他の項目にはハンバーガーメニューを使用
• 戻るボタン付きの固定ヘッダー

デスクトップナビゲーション：

• トップバーまたはサイドバー
• 階層表示にはドロップダウンメニューを使用
• 検索を目立たせる

references/navigation-patterns.md を参照してください。

アニメーションとモーション

継続時間：

• 短い： 100-200ms（ボタンの押下、ホバー）
• 標準： 200-400ms（トランジション、シート）
• 長い： 400-600ms（ページ遷移、複雑なアニメーション）

イージング関数：

• ease-out： ほとんどのアニメーション向け（速く始まり、ゆっくり終わる）
• ease-in： 終了時のアニメーション向け（ゆっくり始まり、加速する）
• ease-in-out： バランス型（滑らかに始まり、滑らかに終わる）
• spring： 自然で遊び心のある動き（CSS または JS のスプリング）

アニメーションの原則：

1. 予兆： これから起きる変化をほのめかす
2. 余韻： 動きが自然に完了する
3. 連続性： 要素が滑らかに遷移する
4. 応答性： 操作に対して即座にフィードバックする

マイクロインタラクション：

button: 150ms [scale: 1→0.95→1] (press)
hover: 200ms [translateY: 0→-2px] + shadow↗
fadeIn: 400ms [opacity: 0→1, translateY: 20→0]
slideIn: 300ms [translateX: -100%→0]

モーションの低減：

• クロスフェードによる代替手段を用意する
• prefers-reduced-motion を尊重する
• 必須のアニメーションだけを使用する

アニメーションのパターン全般については、references/animation-guide.md を参照してください。

モダンなデザイントレンド

ダークモード

デザイン戦略：

• 両方のモードを同時にテストする
• セマンティックカラーを使用する（自動的に適応）
• 表面をわずかに明るくして高さを表現する
• 真っ黒（#000）は避け、濃いグレーを使用する

カラーのマッピング：

/* Light mode */
--background: oklch(1 0 0);
--surface: oklch(0.98 0 0);
--text: oklch(0.15 0 0);

/* Dark mode */
--background: oklch(0.145 0 0);
--surface: oklch(0.205 0 0);
--text: oklch(0.985 0 0);

references/dark-mode.md を参照してください。

グラスモーフィズム

設定例：

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
}

使用する場面：

• オーバーレイ（モーダル、ツールチップ）
• ナビゲーションバー
• 色彩豊かな背景上のカード
• モダンで高級感のある印象を与えたい場合

避ける場面：

• 過度な使用（ギミックのようになる）
• パフォーマンスに敏感なコンテキスト
• ブラウザーのサポートが不十分な場合

ネオブルータリズム

特徴：

• 強いシャドウ（4px 4px 0 black）
• 大胆で彩度の高い色
• 黒い枠線（2-3px）
• 角丸なし
• 飾らず、仕上げすぎない美しさ

使用する場面：

• 遊び心のあるクリエイティブなブランド
• 若年層を対象とする製品
• アート／デザインのポートフォリオ
• 「クリーン」なミニマリズムとの差別化

その他のトレンドについては、references/design-trends.md を参照してください。

レスポンシブデザイン

ブレークポイント：

Mobile:    < 640px
Tablet:    640px - 1024px
Desktop:   1024px - 1440px
Wide:      > 1440px

モバイルファースト戦略：

/* Base: Mobile */
.container { padding: 16px; }

/* Tablet */
@media (min-width: 640px) {
  .container { padding: 24px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { 
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

レスポンシブパターン：

• 縦積み → サイドバー： モバイルでは1列、デスクトップではサイドバー
• グリッド列数： 1 → 2 → 3 → 4列
• 表示／非表示： 段階的開示
• 並べ替え： 画面サイズに応じて優先順位を変更

references/responsive-design.md を参照してください。

アクセシビリティ

WCAG 準拠

レベル AA（最低限）：

• ✅ 通常のテキストで 4.5:1 のコントラスト比
• ✅ 大きなテキスト（18pt 以上）で 3:1 のコントラスト比
• ✅ キーボードで操作可能
• ✅ フォーカスインジケーターが見える
• ✅ 画像に代替テキストがある
• ✅ フォームラベルがある

レベル AAA（理想）：

• ✅ 通常のテキストで 7:1 のコントラスト比
• ✅ 大きなテキストで 4.5:1 のコントラスト比
• ✅ 音声のみのコンテンツがない
• ✅ 強化されたフォーカスインジケーター

スクリーンリーダー

ベストプラクティス：

• セマンティック HTML（<nav>、<main>、<article>）
• 必要に応じて ARIA ラベルを使用（aria-label、aria-labelledby）
• 論理的な見出し階層（h1 → h2 → h3）
• ナビゲーションをスキップするリンク
• 動的コンテンツを通知する（aria-live）

キーボードナビゲーション

必須事項：

• Tab の移動順序が論理的である
• フォーカスが見える（アウトラインまたはカスタム表示）
• Enter キーでボタンやリンクを有効化する
• Escape キーでモーダルを閉じる
• リストやメニューでは矢印キーを使用する

モーションとアニメーション

• prefers-reduced-motion に対応する
• 静的な代替手段を用意する
• 動画を自動再生しない
• 一時停止／停止コントロールを用意する

完全な WCAG チェックリストについては、references/accessibility.md を参照してください。

デザインツールとリソース

デザインシステム

• Material Design（Google）
• Human Interface Guidelines（Apple）
• Fluent Design（Microsoft）
• Lightning Design（Salesforce）
• Carbon（IBM）

アイコンライブラリ

• SF Symbols（Apple、6000 以上のアイコン）
• Lucide（オープンソース、すっきりとしたデザイン）
• Heroicons（Tailwind チーム）
• Phosphor（柔軟なウェイト）
• Feather（シンプルでミニマル）

カラーツール

• oklch.com - 最新のカラーピッカー
• coolors.co - パレットジェネレーター
• contrast-ratio.com - WCAG チェッカー
• color.adobe.com - Adobe Color

タイポグラフィツール

• Google Fonts - 無料の Web フォント
• fonts.google.com - フォントの閲覧と組み合わせ
• fontpair.co - フォントの組み合わせ候補
• typ.io - タイポグラフィの参考例

コンポーネントライブラリ

• Tailwind CSS（ユーティリティファースト）
• shadcn/ui（コピー＆ペーストで使えるコンポーネント）
• Flowbite（Tailwind コンポーネント）
• Radix UI（ヘッドレスプリミティブ）
• Chakra UI（アクセシブルな React）

包括的な一覧については、references/tools-resources.md を参照してください。

デザインワークフロー

1. 調査と発見

• ユーザーのニーズを理解する
• 競合を調査する
• 主要なユーザーフローを定義する
• 制約を特定する

2. ワイヤーフレーム作成

ASCII ワイヤーフレーム：

┌─────────────────────────────────────┐
│         HEADER / NAV BAR            │
├─────────────────────────────────────┤
│                                     │
│            HERO SECTION             │
│         (Title + CTA)               │
│                                     │
├─────────────────────────────────────┤
│   FEATURE   │  FEATURE  │  FEATURE  │
│     CARD    │   CARD    │   CARD    │
├─────────────────────────────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘

3. ビジュアルデザイン

• テーマ（色、フォント、余白）を定義する
• 主要な画面をデザインする
• コンポーネントライブラリを作成する
• デザインシステムを構築する

4. プロトタイピング

• インタラクティブなモックアップ
• ユーザーテスト
• フィードバックに基づいて反復する

5. 実装

• レスポンシブ開発
• アクセシビリティテスト
• パフォーマンス最適化
• クロスブラウザテスト

詳細なプロセスについては、references/design-workflow.md を参照してください。

プラットフォーム固有のリソース

Apple プラットフォーム

• Apple HIG 完全ガイド
• iOS パターン
• macOS パターン
• watchOS パターン
• SF Symbols ガイド

Web デザイン

• 最新の Web パターン
• CSS アーキテクチャ
• JavaScript インタラクション
• パフォーマンス最適化

モバイル Web と PWA

• レスポンシブパターン
• タッチインタラクション
• PWA のベストプラクティス

クイック判断ガイド

色を選んでいますか？ → references/color-systems.md

フォームをデザインしていますか？ → references/forms.md

ナビゲーションパターンが必要ですか？ → references/navigation-patterns.md

iOS 向けに開発していますか？ → references/apple-platforms.md

アニメーションを作成していますか？ → references/animation-guide.md

アクセシビリティについての質問がありますか？ → references/accessibility.md

レスポンシブレイアウトですか？ → references/responsive-design.md

---

デザインチェックリスト

✅ 視覚的な階層

• 最も重要な要素が目立っています
• 関連する項目がグループ化されています
• 余白によってゆとりが生まれています

✅ 一貫性

• コンポーネントの見た目と動作が統一されています
• 用語が全体を通して統一されています
• 視覚言語に一貫性があります

✅ フィードバック

• 操作に対して即座に反応があります
• 読み込み状態が明確です
• エラーが役立ち、対処可能です

✅ アクセシビリティ

• キーボードで操作できます
• スクリーンリーダーに対応しています
• 十分な色のコントラストがあります
• ユーザーの設定が尊重されます

✅ パフォーマンス

• 読み込みが速いです（<3s）
• アニメーションが滑らかです（60fps）
• 画像が最適化されています
• レイアウトのずれが最小限です

✅ レスポンシブ対応

• あらゆる画面サイズで動作します
• タッチ操作に適しています（44px のターゲット）
• コンテンツが適切に調整されます

✅ プラットフォームに適合

• プラットフォームの規約に従っています
• 可能な場合はネイティブコンポーネントを使用しています
• システム設定が尊重されます

---

Apple HIG、モダンなウェブデザイン、普遍的な UX 原則を組み合わせた、究極の UI/UX デザインリファレンスです。