用語集は行

プロトタイピング

本実装前に動作する試作品(プロトタイプ)を作って検証する手法。Figma・Adobe XD・InVision・Marvel などのツールでクリック動作可能なモックアップを作成し、ユーザーテスト・社内合意・業者への仕様伝達で活用する。

Web 担当者にとっては、WF と本実装の間に挟む有効な工程。文書だけの仕様より、プロトタイプを触ってもらう方が認識違いを早期発見できる。

本書のスタンスは「プロトタイピングは『手戻り削減投資』」。WF だけでは伝わらない動作・遷移・タイミングが、プロトタイプで初めて見える。実装前の認識合わせコストは、後の手戻りコストより圧倒的に安い。

担当者が陥りやすいのは、プロトタイプの完成度を上げすぎて、本実装と同じ時間を使ってしまうこと。「動きが見える程度」が目的、見た目の完成度は本実装で。

言葉をよく利用する人

  • デザイナー
  • ディレクター
  • Web 担当者(発注側)
  • プロデューサー

会話上での使用例

新規機能の設計

  • デザイナー
    WF 完成しました
  • Web 担当者
    プロトタイピング で Figma に動作付けてユーザーテストしましょう。実装前に問題発見したい

社内合意の進め方

  • プロデューサー
    経営層の合意取りたい
  • Web 担当者
    プロトタイピング で触れる形を見せましょう。WF だけより理解されやすいです

関連 Lesson(本書本文)

Lesson 4-2 ワイヤーフレーム