ワイヤーフレーム・プロトタイピング

目次

• 概要
• 使用するタイミング
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

ワイヤーフレームとプロトタイプは、アイデアと実装のギャップを埋め、コストのかかる開発の前にコンセプトをテストし、フィードバックを得て、デザインを洗練させることができます。

使用するタイミング

• 初期段階のコンセプト検証
• ステークホルダーの合意形成
• ユーザーテストとフィードバック収集
• 開発チームへの引き継ぎ
• 機能の探索
• UX問題の解決
• 迅速なイテレーション

クイックスタート

最小限の動作例：

Wireframe Principles:

Low Fidelity (Sketches):
  Tools: Paper, whiteboard, Balsamiq
  Time: 30 minutes - 2 hours
  Detail: Basic layout, no colors/fonts
  Best For: Brainstorming, exploration
  Cost: Free

Medium Fidelity:
  Tools: Figma, Sketch, Adobe XD
  Time: 2-8 hours
  Detail: Layout, content, basic interaction
  Best For: Team alignment, feedback
  Cost: Low

High Fidelity:
  Tools: Figma, Framer, web dev tools
  Time: 8+ hours
  Detail: Visual design, interactions, animations
  Best For: Developer handoff, user testing
  Cost: Medium

---
## Wireframe Components
// ... (see reference guides for full implementation)

リファレンスガイド

references/ディレクトリにある詳細な実装：

ガイド	内容
プロトタイピングツール＆テクニック	プロトタイピングツール＆テクニック
ワイヤーフレーム例	ワイヤーフレーム例
プロトタイプテスト	プロトタイプテスト

ベストプラクティス

✅ するべきこと

• 低忠実度スケッチから始める
• 早期かつ頻繁にフィードバックを得る
• 実際のユーザーでテストする
• フィードバックに基づいてイテレーションを行う
• 一貫性のあるグリッドと間隔を使用する
• インタラクションフローをドキュメント化する
• エッジケース（空状態、エラー）を含める
• モバイルファーストのワイヤーフレームを作成する
• プロトタイプをシェアして協力する
• ワイヤーフレームはシンプルで焦点を絞ったものにする

❌ してはいけないこと

• 高忠実度に直接ジャンプする
• 検証前に過度なデザインを行う
• モバイル/レスポンシブ対応を無視する
• ユーザーインプットなしでワイヤーフレームを作成する
• インタラクションを未定義のまま残す
• ワイヤーフレームを細部まで詳細にしすぎる
• チームメンバーのみでテストする
• アクセシビリティを無視する
• デザインに早期にロックインする
• 現実的でないユーザーフローを作成する