Visual Designer

ビジュアルデザイナー

優れたデザインは目に留まりません。悪いデザインは気づかれますが、良いデザインは気づかれないものです。

基本原則

創造性より一貫性を重視します。

ビジュアルデザインはユーザー体験を支えるものです。色、フォント、余白の選択には、すべて目的が必要です。

---

フェーズ 1：カラーシステム

色彩理論の基本

色相環：

• 補色： 反対色（青＋オレンジ）— 高いコントラスト
• 類似色： 隣接する色（青＋緑＋ティール）— 調和のとれた配色
• 三色配色： 均等な間隔で配置した 3 色 — バランスのとれた配色
• モノクロマティック： 1 色の濃淡 — 安全でミニマル

カラーパレットの作成

60-30-10 ルール：

• 60％ プライマリカラー（支配色）
• 30％ セカンダリカラー（補助色）
• 10％ アクセントカラー（行動喚起）

パレットの例：

/* Primary (60%) - Backgrounds, large areas */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-500: #3b82f6; /* Main brand color */
--color-primary-600: #2563eb;
--color-primary-900: #1e3a8a;

/* Secondary (30%) - Complementary elements */
--color-secondary-500: #8b5cf6;
--color-secondary-600: #7c3aed;

/* Accent (10%) - CTAs, highlights */
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;

/* Neutrals - Text, borders */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-700: #374151;
--color-gray-900: #111827;

/* Semantic colors */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #3b82f6;

アクセシブルな色のコントラスト

WCAG の要件：

• 通常のテキスト（18pt 未満）：コントラスト比 4.5:1
• 大きなテキスト（18pt 以上、または 14pt の太字）：コントラスト比 3:1
• UI コンポーネント：コントラスト比 3:1

/* ✅ Good: Sufficient contrast (8:1) */
.text {
  color: #111827; /* gray-900 */
  background: #ffffff;
}

/* ❌ Bad: Insufficient contrast (2.1:1) */
.text-bad {
  color: #d1d5db; /* gray-300 */
  background: #ffffff;
}

ツール：

• Coolors.co - パレットを生成
• Color Contrast Checker
• Adobe Color

ダークモードの方針

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
  }
}

ダークモードのチェックリスト：

• 純白（#fff）の使用を減らし、オフホワイト（#f9fafb）を使用する
• 純黒（#000）の使用を減らし、ダークグレー（#111827）を使用する
• 暗い背景でコントラストを高める
• 実際のダークモードユーザーでテストする
• システム設定に対応する

---

フェーズ 2：タイポグラフィ

フォントの組み合わせの原則

基本ルール： フォントは最大 2 種類

• 見出し用フォント： 個性的で、人目を引くもの
• 本文用フォント： 読みやすく、ニュートラルなもの

よく使われる組み合わせ：

/* Modern & Clean */
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;

/* Classic & Professional */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;

/* Tech & Minimal */
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'IBM Plex Sans', sans-serif;

/* Creative & Friendly */
--font-heading: 'Poppins', sans-serif;
--font-body: 'Open Sans', sans-serif;

文字サイズのスケール（モジュラースケール）

基本サイズ： 16px（1rem） スケール比： 1.25（長三度）

--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.83px */
--text-5xl: 3.815rem; /* 61px */

/* Font weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

行の高さと間隔

/* Headings: Tighter line-height */
h1,
h2,
h3 {
  line-height: 1.2;
}

/* Body text: Comfortable reading */
p {
  line-height: 1.6;
  max-width: 65ch; /* 65 characters max for readability */
}

/* Small text: More line-height */
.text-sm {
  line-height: 1.8;
}

/* Letter spacing */
.heading {
  letter-spacing: -0.02em; /* Tighter */
}

.uppercase {
  letter-spacing: 0.05em; /* Wider for all-caps */
}

レスポンシブタイポグラフィ

/* Fluid typography */
h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

/* Or breakpoint-based */
h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3.5rem;
  }
}

---

フェーズ 3：スペーシングシステム

8pt グリッドシステム

なぜ 8pt なのか？

• ほとんどの画面の寸法は 8 で割り切れる
• 視覚的なリズムを生み出す
• 一貫性を保ちやすい

--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */

使用方法：

/* Component padding */
.button {
  padding: var(--space-3) var(--space-6); /* 12px 24px */
}

/* Section spacing */
.section {
  padding: var(--space-16) 0; /* 64px top/bottom */
}

/* Element margins */
.heading {
  margin-bottom: var(--space-4); /* 16px */
}

.paragraph {
  margin-bottom: var(--space-6); /* 24px */
}

垂直方向のリズム

/* Consistent vertical spacing */
* + * {
  margin-top: var(--space-4);
}

/* Specific overrides */
h1 + p {
  margin-top: var(--space-6);
}

p + p {
  margin-top: var(--space-4);
}

---

フェーズ 4：レイアウトと構成

視覚的階層

次の要素で重要度を表現します：

1. サイズ： 大きいほど重要
2. ウェイト： 太いほど重要
3. 色： 明るいほど重要
4. 間隔： 余白が広いほど重要

/* Primary heading */
h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-8);
}

/* Secondary heading */
h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

/* Body text */
p {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* Supporting text */
.caption {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

グリッドシステム

12 カラムグリッド：

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

/* Full width */
.col-12 {
  grid-column: span 12;
}

/* Half width */
.col-6 {
  grid-column: span 6;
}

/* Third width */
.col-4 {
  grid-column: span 4;
}

/* Responsive */
@media (max-width: 768px) {
  .col-6 {
    grid-column: span 12; /* Stack on mobile */
  }
}

ホワイトスペース（ネガティブスペース）

/* ❌ Cramped */
.card-bad {
  padding: 8px;
}

/* ✅ Breathing room */
.card-good {
  padding: var(--space-8); /* 32px */
}

/* Content spacing */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4); /* Side padding */
}

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

/* Mobile first */
:root {
  --breakpoint-sm: 640px; /* Small devices */
  --breakpoint-md: 768px; /* Tablets */
  --breakpoint-lg: 1024px; /* Laptops */
  --breakpoint-xl: 1280px; /* Desktops */
  --breakpoint-2xl: 1536px; /* Large screens */
}

/* Usage */
@media (min-width: 768px) {
  .container {
    padding: var(--space-8);
  }
}

---

フェーズ 5：ビジュアルの仕上げ

シャドウとエレベーション

/* Elevation levels */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

/* Usage */
.card {
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

角丸

--radius-sm: 0.25rem; /* 4px - small elements */
--radius-md: 0.5rem; /* 8px - buttons, inputs */
--radius-lg: 0.75rem; /* 12px - cards */
--radius-xl: 1rem; /* 16px - modals */
--radius-full: 9999px; /* Fully rounded */

/* Usage */
.button {
  border-radius: var(--radius-md);
}

.avatar {
  border-radius: var(--radius-full);
}

トランジションとアニメーション

/* Transition timing */
--transition-fast: 150ms;
--transition-base: 200ms;
--transition-slow: 300ms;

/* Easing functions */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

/* Button hover */
.button {
  transition: all var(--transition-base) var(--ease-in-out);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn var(--transition-slow) var(--ease-out);
}

---

デザイン原則

1. コントラスト

要素同士を明確に区別します

/* ✅ Good contrast */
.hero {
  background: var(--color-primary-600);
  color: white;
}

/* ❌ Poor contrast */
.hero-bad {
  background: #ddd;
  color: #aaa;
}

2. 整列

要素を整列して秩序を生み出します

/* ✅ Aligned */
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

3. 反復

視覚要素を繰り返して一貫性を保ちます

/* Consistent button styles */
.button {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
}

4. 近接

関連する要素をグループ化します

/* Form fields grouped */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

---

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

ボタン

/* Primary button */
.btn-primary {
  background: var(--color-primary-600);
  color: white;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-primary:hover {
  background: var(--color-primary-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Secondary button */
.btn-secondary {
  background: transparent;
  color: var(--color-primary-600);
  border: 2px solid var(--color-primary-600);
}

/* Ghost button */
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
}

.btn-ghost:hover {
  background: var(--color-gray-100);
}

カード

.card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

フォーム

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color var(--transition-base);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input:invalid {
  border-color: var(--color-error);
}

---

デザインツール

カラーツール

• Coolors - パレットを生成
• Color Hunt - 厳選されたパレット
• Adobe Color - 色相環
• Contrast Checker

タイポグラフィツール

• Google Fonts
• Font Pair - フォントの組み合わせ
• Type Scale - 文字サイズのスケールを生成

デザインシステム

• Tailwind CSS - ユーティリティファーストの CSS
• Radix Colors - カラーシステム
• Open Color - カラースキーム

---

ビジュアルデザインのチェックリスト

色

• プライマリ、セカンダリ、アクセントカラーを定義する
• ニュートラルグレー（50-900）を定義する
• セマンティックカラー（成功、警告、エラー）を定義する
• すべてのテキストが WCAG のコントラスト要件を満たしている
• ダークモード用の色を定義する

タイポグラフィ

• フォントは最大1〜2種類
• 文字サイズのスケールを定義（8〜10段階）
• フォントの太さを指定
• 適切な行の高さを設定
• 読みやすさのための最大幅を設定（65ch）

余白

• 8pt グリッドシステムを使用
• 余白のスケールを統一
• 十分なホワイトスペースを確保
• 垂直方向のリズムを維持

コンポーネント

• ボタンのスタイルを統一
• フォーム入力欄のスタイルを統一
• カードに適切な浮き上がりを設定
• ホバー時の状態を定義
• フォーカス時の状態を明確に表示

レスポンシブ対応

• モバイルファーストのアプローチ
• ブレークポイントを定義
• タッチターゲットは44px以上
• テキストサイズを適切に拡大・縮小

---

関連リソース

スキル：

• design-system-architect - デザインシステムの構築
• ux-designer - ユーザーエクスペリエンスのデザイン
• accessibility-engineer - 色のコントラスト、読みやすさ

外部リソース：

• Refactoring UI
• Design Systems Repo
• Laws of UX

---

優れたデザインは製品を使いやすくします。卓越したデザインは、その存在を意識させません。 🎨