「要件とデザインの間にあるもの」とは↓
① デザイン仕様 (詳細度高い要件) が言語化されたもの
② ①を粗めに可視化したもの。これを「ワイヤー」と定義する
③ ②を動的に動くようにしたもの。これを「プロトタイプ」と定義する
④ より詳細度を上げた状態のアウトプット。これを「モックアップ」と定義する
⑤ そのまま実装されるレベルのもの。これを「UI」と定義する
今回は、②と③について考察する
先ず、プロダクトデザインはPdM含め、コアメンバー（非デザイナー）と共に作り上げていくもの。そして、非デザイナーはデザインリテラシーが無い (と定義した方が良い。リテラシーが一定ある人もいるが) ので、Figmaデータを見てもデザインのイメージを掴めない。ので、「可視化されたアウトプット（目に見えるもの）」を作りながらデザインを進めていかないと、デザインは進まない
デザイナーの仕事は、「目に見えるアウトプットを作りながら、皆でデザインを形作っていける環境を作り、デザインを作っていくこと」
ここで言う「目に見えるアウトプット」とは、上記で挙げた②と③になる
②と③とは？
「ワイヤー（②）」
※ワイヤーとは、一言で言うと「白黒の静的な (実際には動かない) デザイン」のこと
以下の要件を満たすもの
Top画面のレイアウトが分かる、画面内に何が配置されるのか？が分かる
画面内のラベル、文言がある
画面遷移が実現されている。遷移先がある
Top以外の画面（遷移先）も同様に上記要件が満たされている
〜〜〜
要は詳細度の低い = 粒度の粗いデザインを指す
カラーセットやコンポーネントは反映しなくても良い
反映してしまうと詳細度が上がってしまい、構造部分が分からなくなってしまう
コンテンツもなくて良い
Instagramで言う所の「写真」とか
SUUMOで言う所の「物件情報」とか
そういったコンテンツは未だ無くて良い
「ここにコンテンツが入る」ということが分かれば良い
「プロトタイプ（③）」
ワイヤーを繋いて動くようにしたもの
クリックしたときに画面遷移し、次の画面に移動する（仕様になっていること）
画面遷移時のtransitionが再現されていること
URLをクリックすると直ぐにプロトタイプを確認できるようになっていること
アプリを入れないと見れないとか、アカウント登録しないと見れないとかがあるとプロトタイプを見る障壁が上がってしまい、見られなくなってしまう
非デザイナーが簡単に確認できるようになっていること、が重要
「ワイヤーとプロトタイプ」
これら2つが合わさったものを作れると良い
要件を形にし、それを見ながら（レビューしながら）ステークホルダー間で議論し、デザインを形作っていくフローを確立できると、デザインは進む
プロトタイプを作った後で詳細度の高いデザインを当てれば良い
カラーとかコンポーネントとか
コンテンツを入れ込んで見るとか