あるきっかけから、ちゃんと画面デザインは目的とコスト天秤にかけて、どのイメージまでやるとか決めたほうがいいんだ...と思うようなった。要求整理/要件定義で進めていくポイントに合わせていい感じに使い分けたい。

久しぶりにそのことを思い出していたのだが、すっかり自分的な整理を忘れていたので覚書。

（途中からめんどうくさくなってきて　TBD ( To Be Defined, 後で書く）状態です）

手書き（ラフ / スケッチ / ペーパーワイヤーフレーム）

・変にツールの使い方に目が言ってしまうことがあるので、まず手書きするのが最小限のスタート

使うツール

・紙とペン

メリット

・最小限のコスト
・ツールの使い方とか覚えなくて良い
・アイデアと発想力で思うままにかける

デメリット

・書き直しが面倒になる
・たいてい後で書き始めのものは読めないレベルにぐちゃる
　（とはいえ何度も書き直すのがブラッシュアップにつながる）
・他人と共有するのが写真を取ってアップロードして...とちょっとだけステップが増える

活用方法

・まずは自由に書く。参考に何も見ない。
・徐々に参考用の図をいくつか見繕って模写っぽくはじめる。直感的にアイデアがこの図の形っぽいんじゃね？を集めていく。
・アイデアフレームワークの図形パターンも眺めたりしながらも書く。
・プロダクト画面とかの用途なら、参考サイトのペルソナも自分なりに読み解いて、落とし込む。

低忠実度ワイヤーフレームと画面遷移図

・主だった要素のコメントもいれながら書きつつ、画面一覧とその遷移イメージを書く。

使うツール

・紙とペン
・もしくは使い慣れているデザインツール
　・個人的にはwhimsicalとかdraw.ioとか

メリット

・画面遷移も合わさることで、チームが持っているイメージを合わせやすくなる。
　・単体の１画面だけだとイメージがつきずらいこともある。話に追いついていけてない人も巻き込みできる

デメリット

・議論が細かいポイントに行ってしまうこともある。「その要素はこのXX画面なんでしょうか？」みたいな。

活用方法

・個々の画面のラフ図だけを書くわけじゃないので、いうたらラフ図（全体画面版）みたいな位置づけ
・他者とのすり合わせするほどではなくとも、一旦自分整理用に書くといい。
・場合によってはカスタマージャーニーマップや業務フロー図と合わせて使う。

高忠実度ワイヤーフレーム

・「高忠実度」と名前付けしたが、「中忠実度」と言ったほうがよいかもしれない。
・このフェーズ感では、画面におかれる要素を明確にコンポーネントレベルで書いたり、画面のどこを押すとどうなるのかというインタラクションもある程度明らかにする。
・デザイン的な要素（色とかサイズ感とか）はここでは着目しない。

使うツール

・使い慣れているデザインツール
　・個人的にはwhimsicalとかdraw.ioとか

メリット

TBD

デメリット

TBD

活用方法

TBD

モックアップ

・ワイヤーフレームにデザイン用途を追加して、より実際の画面デザインのイメージの形にしていく
・よりユーザーのインタラクションをイメージして、場合によってはフォントのイメージ感やこんな画像イメージを置く、みたいな要素まで置く。

使うツール

・使い慣れているデザインツール
　・個人的にはFigmaとか

メリット

TBD

デメリット

TBD

活用方法

TBD

プロトタイプ

・これまでの成果物をもとに、実際に画面インタラクション・アニメーションを再現できるツールに落とし込み、使い勝手を実際に検証する
・このフェーズではデザインは完成形ではないものの、ある程度の具体的な部分が出ている

使うツール

・使い慣れているデザインツール
　・個人的にはFigmaとか

メリット

TBD

デメリット

TBD

活用方法

・参考デザインをより深く探求しておく。
　・このフェーズでは様々な要求要件の解像度が上がっているタイミングで、解像度も高い。
　・これを具現化するためにゼロから考えるより、たいていすでに世の中に優れたものがある。
・ある程度画面はこうしたいというアイデアを持っている人や、後々画面について意見を言ってきそうな人にはこの段階でしっかり目に見てもらう。（どちらかというと感覚派の人はここで押さえる）
・場合によっては、より上流のプロダクトの目的、ユーザーペルソナ、ニーズを書いておきつつ、各画面について解説コメントも添える。（どちらかというとロジカルシンキング要素強めの人にはこれがあったほうがよい）
・デザイナーやUXに強い人もここで是非巻き込み見てもらう。
　・たいてい素人が作ったものなのでプロが色々指摘してくれる。
　・逆にこのフェーズより前にプロを巻き込むと、んーどうコメントすればいいだろうか...みたいになっちゃう気がするのでこのフェーズで巻き込むのが良い気がしている。

デザインカンプ

・最終形として、デザイン性も完全に落とし込む。
・開発者に渡してお願いしますを完全に言える状態

使うツール

・使い慣れているデザインツール
　・個人的にはFigmaとか

メリット

TBD

デメリット

TBD

活用方法

・デザイン感性強いセンスの良い人には再度見てもらう。
　・すごく細かいボタンのデザイン、アイコンがどう思う、とかめちゃくちゃ細部もコメントくださいってする。
　　・参考になるし、このセンスのいい人を置き去りにすると出来上がった後に、すごく言いづらそうにコメントさせることになるので、実装前に見せる

参考記事