プロトタイプとモックアップの目的
ところがそれらの目的について言及した情報は少ない。皆が前提としている目的は違っているのにも関わらず、その精査がないままにツールの良し悪しが語られているように思う。 ここで目的を整理してみる。
目的
①自分自身の検証用
① -１文脈の検証
要素の表示順
文言
画面の遷移
etc...
① -２動的コンテンツの検証
数が変化するコンテンツ表示方法
見た目やサイズが変化コンテンツ表示方法
etc..
① -３振る舞いの検証
視認性（気づくか？ 邪魔にならないか？）
操作性（ストレスなしにクリックできるか？）
etc..
① -４価値の検証
プロダクトそのものの検証
使い手にとって価値を感じるか
②他者に対するデモ用
② -１クライアントや上司に対するデモンストレーション
② -２実装担当者に対する説明
etc..
目的は大きく分けて2つに分けられる。1つ目は検証用。自分自身やチーム内での検証のために料理でいうところの「味見用」として作るもの。２つ目はデモ用。他社に対してアイデアをプレゼンテーションするために作るもの自社サービスの事業者でデザイナーをやってる自分は圧倒的に１つ目の用途が多い。
世の中のツールの多くは２つのデモ用を意識して作られているように思う。綺麗なグラフィックを滑らかに動かし、「かっこいいでしょ？」とアピールするためのもののように感じてしまう。
目的に沿ったツール
主観ではあるが、それぞれの目的に沿ったツールを挙げてみる。
① -１文脈の検証
ユーザーが目的を達成するために必要な情報や、フローを検証する。
例：サインアップの動線、商品購入のフロー など。
ツール
テキスト → Scrapbox、Notion、メモ帳など ① -２動的コンテンツの検証
数や見た目が変化するコンテンツを抱える部品の検証をする。
例：記事一覧、インクリメンタルサーチなど。
ツール
（実装が厳しければ）グラフィックソフト → Figmaでパターンを全て洗い出し
① -３振る舞いの検証
小さな部品の単独での触り心地や視認性を検証する。
例：ボタン、ドロップダウンなど。
ツール
グラフィックツール → FigmaでVariantsなどの機能を駆使
② -１クライアントや上司に対するデモンストレーション
② -２ 実装担当者に対する説明
すでに決まった振る舞いや動作を人に説明するための用途。
範囲は画面遷移から部品の振る舞いまで色々
ツール
グラフィックツール → FigmaのPrototypeを使って「動いてるように見せる」