Prototype Designer

プロトタイプデザイナー

コードを書く前に、インタラクティブなプロトタイプでアイデアを検証します。

基本原則

作る前にテストしましょう。

プロトタイプを使うと、次のことができます。

• 前提を検証する
• 実際のユーザーを対象にテストする
• コードを書くよりも速く反復する
• アイデアを明確に伝える
• 開発の無駄を減らす

---

フェーズ 1：プロトタイピングツールの選択

ツールの比較

ツール	最適な用途	学習曲線	再現度
Figma	全体的なデザイン、共同作業	中	高
Framer	コードベース、高度なインタラクション	高	非常に高い
ProtoPie	複雑なインタラクション、センサー	中	非常に高い
Adobe XD	Adobe エコシステムのユーザー	低	高
InVision	デザインの引き継ぎ、シンプルなクリック操作	低	中
Axure	複雑なロジック、ドキュメント	高	高

クイックスタートのおすすめ

初心者： Figma から始めましょう

• デザインツールに組み込まれています
• 別のアプリは必要ありません
• 直感的なインタラクション
• 個人利用は無料です

上級者： Framer または ProtoPie に進みましょう

• より複雑なインタラクション
• 変数のサポート
• 条件分岐ロジック
• センサー連携（モバイル）

---

フェーズ 2：ユーザーフローの設計

ユーザーフローとは？

ユーザーフローは、ユーザーがタスクを完了するためにアプリ内を進む経路を示します。

例：ユーザー登録フロー

Start
  ↓
Landing Page
  ↓
Click "Sign Up"
  ↓
Email Entry → Validation
  ↓ [Valid]
Password Entry → Validation
  ↓ [Valid]
Success Screen
  ↓
Onboarding Flow

Figma でユーザーフローを作成する

1. フローのフレームを作成します：

Frames needed:
├── 01-landing
├── 02-signup-form
├── 03-email-verification
├── 04-success
└── 05-onboarding-step-1

2. インタラクションを追加します：

Click "Sign Up" button → Navigate to 02-signup-form
Click "Submit" → Navigate to 03-email-verification
Click "Continue" → Navigate to 04-success

3. オーバーレイを追加します：

Error states:
- Show "Error: Invalid email" overlay
- Show "Error: Password too weak" overlay

ユーザーフローのテンプレート

// user-flows.ts

interface UserFlow {
  id: string
  name: string
  description: string
  steps: FlowStep[]
  alternativePaths: AlternativePath[]
}

interface FlowStep {
  id: string
  screen: string
  action: string
  nextStep: string
  conditions?: string[]
}

interface AlternativePath {
  trigger: string
  steps: FlowStep[]
  destination: string
}

export const signupFlow: UserFlow = {
  id: 'signup',
  name: 'User Registration',
  description: 'User signs up for an account',
  steps: [
    {
      id: '1',
      screen: 'Landing Page',
      action: 'Click "Sign Up"',
      nextStep: '2'
    },
    {
      id: '2',
      screen: 'Sign Up Form',
      action: 'Enter email and password',
      nextStep: '3',
      conditions: ['Email valid', 'Password strong']
    },
    {
      id: '3',
      screen: 'Email Verification',
      action: 'Enter verification code',
      nextStep: '4',
      conditions: ['Code valid']
    },
    {
      id: '4',
      screen: 'Success',
      action: 'Click "Get Started"',
      nextStep: '5'
    }
  ],
  alternativePaths: [
    {
      trigger: 'Invalid email',
      steps: [
        {
          id: 'error-1',
          screen: 'Sign Up Form',
          action: 'Show error message',
          nextStep: '2'
        }
      ],
      destination: 'Step 2'
    }
  ]
}

---

フェーズ 3：インタラクティブなプロトタイピング

Figma プロトタイピングの基本

1. 基本的なクリックによる画面遷移：

Select element → Prototype panel → Add interaction
- Trigger: On click
- Action: Navigate to
- Destination: Screen name
- Animation: Instant / Dissolve / Slide / Push

2. ホバー状態：

Button → Prototype panel
- Trigger: While hovering
- Action: Change to
- Destination: Button-hover variant

3. スクロールの動作：

Frame → Prototype panel
- Overflow behavior: Vertical scrolling
- Set scroll position (optional)

4. スマートアニメート：

Two frames with matching layer names
- Animation: Smart animate
- Easing: Ease out
- Duration: 300ms

高度なインタラクション

条件分岐ロジック（変数）：

// Figma Variables (Beta)
Variables:
  - isLoggedIn: Boolean
  - userType: String
  - itemCount: Number

Conditional:
  IF isLoggedIn = true
    THEN Navigate to Dashboard
  ELSE
    THEN Navigate to Login

複数ステップのフォーム：

Step 1 (Name) → Validation
  ↓ [Valid]
Step 2 (Email) → Validation
  ↓ [Valid]
Step 3 (Password) → Validation
  ↓ [Valid]
Success Screen

状態管理：

Component: Button
States:
  - Default
  - Hover
  - Pressed
  - Disabled
  - Loading

Prototype:
  On click → Change to "Loading"
  After delay → Navigate to next screen

---

フェーズ 4：Framer によるプロトタイピング

Framer を使う場面

次のような場合は Framer を使います。

• 複雑なアニメーション
• コード主導のインタラクション
• 実データとの連携
• 高度なロジック
• 本番環境で使えるコンポーネント

Framer のコードコンポーネントの例

// components/Counter.tsx

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 16
      }}
    >
      <h1 style={{ fontSize: 48 }}>{count}</h1>
      <div style={{ display: 'flex', gap: 8 }}>
        <button
          onClick={() => setCount(count - 1)}
          style={{
            padding: '12px 24px',
            fontSize: 16,
            borderRadius: 8,
            border: 'none',
            cursor: 'pointer',
            background: '#0066cc',
            color: 'white'
          }}
        >
          -
        </button>
        <button
          onClick={() => setCount(count + 1)}
          style={{
            padding: '12px 24px',
            fontSize: 16,
            borderRadius: 8,
            border: 'none',
            cursor: 'pointer',
            background: '#0066cc',
            color: 'white'
          }}
        >
          +
        </button>
      </div>
    </div>
  )
}

Framer Motion のアニメーション

// components/AnimatedCard.tsx

import { motion } from 'framer-motion'

export function AnimatedCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      style={{
        width: 300,
        height: 200,
        background: 'white',
        borderRadius: 16,
        padding: 24,
        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        cursor: 'pointer'
      }}
    >
      <h2>Card Title</h2>
      <p>Hover or click me!</p>
    </motion.div>
  )
}

---

フェーズ 5：プロトタイプのテスト

ユーザビリティテスト計画

1. 目標を定義します：

• 何を知りたいですか？
• ユーザーにどのタスクを完了してもらいますか？
• どの指標を測定しますか？

2. 参加者を募集します：

• 参加者は 5～8 人（主な問題を見つけるのに十分な人数）
• ターゲットオーディエンスに合致する人
• 多様な背景を持つ人

3. テスト用スクリプトを作成します：

# Prototype Usability Test Script

## Introduction (2 min)

"Thank you for helping us test this prototype. There are no wrong answers - we're testing the design, not you. Please think aloud as you complete tasks."

## Tasks (20 min)

### Task 1: Sign Up

"Imagine you want to create an account. Show me how you would do that."

Success criteria:

- [ ] Found sign up button
- [ ] Entered email
- [ ] Entered password
- [ ] Completed verification
- [ ] Reached dashboard

### Task 2: Find Settings

"You want to change your notification preferences. Show me how you would do that."

Success criteria:

- [ ] Navigated to settings
- [ ] Found notifications section
- [ ] Changed setting
- [ ] Saved changes

## Questions (5 min)

1. What was the easiest part?
2. What was the hardest part?
3. What would you change?
4. Would you use this? Why/why not?

4. テストを実施します：

• 許可を得てセッションを録画する
• メモを取る
• 行き詰まらない限り、手助けしない
• 追加の質問をする

5. 結果を分析します：

// test-results.ts

interface TestResult {
  participant: string
  task: string
  completed: boolean
  timeSeconds: number
  errors: string[]
  feedback: string
}

const results: TestResult[] = [
  {
    participant: 'User 1',
    task: 'Sign up',
    completed: true,
    timeSeconds: 45,
    errors: ['Missed verification step'],
    feedback: 'Form was clear but verification was confusing'
  }
  // ...
]

// Calculate metrics
function analyzeResults(results: TestResult[]) {
  const completionRate = results.filter(r => r.completed).length / results.length
  const avgTime = results.reduce((sum, r) => sum + r.timeSeconds, 0) / results.length
  const commonErrors = findCommonErrors(results)

  return {
    completionRate: `${(completionRate * 100).toFixed(0)}%`,
    avgTime: `${avgTime.toFixed(0)}s`,
    commonErrors
  }
}

リモートテストツール

非モデレーター型：

• UserTesting.com - 参加者の募集とテスト
• Maze - プロトタイプの分析
• Lookback - セッションの録画

モデレーター型：

• Zoom - 画面共有
• Google Meet - 録画機能を内蔵
• Loom - 非同期のフィードバック

---

フェーズ 6：開発者への引き継ぎ

引き継ぎ用にプロトタイプを準備する

1. ドキュメント：

# Prototype Documentation

## User Flows

- [Sign Up Flow](figma-link)
- [Purchase Flow](figma-link)

## Interactions

- Button hover: Scale 1.05, 200ms ease-out
- Page transition: Slide right, 300ms ease-in-out
- Error shake: Translate X ±10px, 3 times, 100ms

## States

- Default
- Hover
- Active
- Disabled
- Loading
- Error

## Animations

- Fade in: opacity 0→1, 300ms
- Slide up: translateY 20px→0, 400ms ease-out

## Breakpoints

- Mobile: 375px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px+

2. プロトタイプに注釈を付ける：

Figma では、次のことを行います。

• 複雑なインタラクションを説明するメモを追加する
• エッジケースを記録する
• エラー状態を表示する
• タイミングを明確にする

3. 仕様をエクスポートします：

// specs/interactions.ts

export const interactions = {
  button: {
    hover: {
      scale: 1.05,
      duration: 200,
      easing: 'ease-out'
    },
    click: {
      scale: 0.95,
      duration: 100,
      easing: 'ease-in'
    }
  },
  page: {
    transition: {
      type: 'slide',
      direction: 'right',
      duration: 300,
      easing: 'ease-in-out'
    }
  },
  modal: {
    open: {
      backdrop: { opacity: 0.5 },
      content: { scale: 0.9, opacity: 0 },
      to: { scale: 1, opacity: 1 },
      duration: 200
    },
    close: {
      backdrop: { opacity: 0 },
      content: { scale: 0.9, opacity: 0 },
      duration: 200
    }
  }
}

4. 実装ガイドを作成します：

# Implementation Guide

## Tech Stack Recommendations

### Animations

- **Framer Motion** - React animations
- **GSAP** - Advanced animations
- **CSS Transitions** - Simple effects

### State Management

- **useState** - Local component state
- **Zustand** - Global state
- **React Query** - Server state

### Forms

- **React Hook Form** - Form validation
- **Zod** - Schema validation

## Code Examples

### Button with Hover Effect

\`\`\`tsx
import { motion } from 'framer-motion'

export function Button({ children, onClick }) {
return (
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
transition={{ duration: 0.2 }}
onClick={onClick}
style={{
        padding: '12px 24px',
        borderRadius: 8,
        border: 'none',
        background: '#0066cc',
        color: 'white',
        fontSize: 16,
        fontWeight: 600,
        cursor: 'pointer'
      }} >
{children}
</motion.button>
)
}
\`\`\`

---

ベストプラクティス

1. 低忠実度から始める

高忠実度のプロトタイプに取りかかる前に、スケッチやワイヤーフレームから始めましょう。

進め方：

1. 紙のスケッチ（1～2 時間）
2. ワイヤーフレーム（半日）
3. 高忠実度のデザイン（1～2 日）
4. インタラクティブなプロトタイプ（1 日）
5. ユーザーテスト（2～3 日）
6. 反復（1～2 日）

2. 重要な経路に集中する

最も重要なユーザーフローからプロトタイプを作成します。

• サインアップ／ログイン
• 主要機能の利用
• 購入／チェックアウト
• オンボーディング

次の項目は省略します。

• 設定ページ
• 管理パネル
• エッジケース（最初の段階では）

3. 実際のコンテンツを使う

「Lorem ipsum」は避け、現実的な内容を使います。

• テキストの長さ
• 画像の寸法
• データのばらつき
• エラーメッセージ

4. 早くテストし、何度もテストする

• デザイン前にワイヤーフレームをテストする
• 構築前にプロトタイプをテストする
• 5 人のユーザーでテストし、改善して、もう一度テストする

5. プロトタイプを最新の状態に保つ

次のような変更に合わせて、プロトタイプを更新し続けます。

• デザインの変更
• フィードバックの追加
• 機能の追加
• バグの発見

---

よくあるパターン

パターン 1：読み込み状態

// Loading state progression
1. Button: "Submit" (clickable)
2. Button: "Loading..." (disabled, spinner)
3. Button: "Success!" (green, checkmark)
4. After 2s: Back to "Submit"

パターン 2：フォームの入力検証

// Real-time validation
1. User types in field
2. On blur: Validate
3. Show error if invalid
4. Disable submit until all valid
5. Show success after submit

パターン 3：モーダルのフロー

// Modal interaction
1. Click trigger → Open modal (backdrop + animation)
2. User interacts with modal content
3. Click outside / X button → Close modal
4. Prevent scroll on body when open

---

ツールとリソース

プロトタイピング：

• Figma - オールインワンのデザインツール
• Framer - コードベースのプロトタイピング
• ProtoPie - 高度なインタラクション

テスト：

• Maze - プロトタイプのテスト
• UserTesting - ユーザー調査
• Hotjar - ヒートマップと録画

アニメーション：

• Lottie - アニメーションライブラリ
• Principle - アニメーションツール
• Jitter - モーションデザイン

関連スキル：

• ux-designer - ユーザーエクスペリエンスのデザイン
• frontend-builder - プロトタイプの実装
• user-researcher - テストと検証

---

素早くプロトタイプを作り、早期に検証し、適切に構築しましょう。 🚀