ペーパープロトタイピングとモックアップはどう使い分ける？

こんにちは！ドリーム・アーツのデザイナーです。

今回のテーマ「ペーパープロトタイピングとモックアップはどう使い分ける？」です。
なぜこのテーマかというと、デザインチームの一つの目標として「UIデザインを効率的につくること」があります。
現状、それぞれのプロダクトでUIデザインをつくる過程がさまざまで、エンジニアとのやりとりの仕方も人によって違います。
デザイナーがお互いにいいところを吸収しあっていけないか？と考え、UIデザインをつくる過程で発生する制作物に着目しました👀

ドリーム・アーツのデザイナーがUIデザインをつくる過程で製作するものは主に4つでした。
・画面遷移図
・ペーパープロト
　画面内にラフに要素をレイアウトに入れたもの
・モックアップ
　xdなどのプロトタイピングツールを使って配色やスタイルの指定ができるもの
・デモ画面
　実際に利用しているシーンが思い浮かぶような名称などが入ったもの

このペーパープロトとモックアップの使い分けが人によってかなり違っていたのでそれについて話し合いをしました。

UIデザイナーたちが話をした結果、
「ペーパープロトやモックアップは結局のところ、エンジニア、デザイナーのそれぞれの解像度を足並み揃えるためのツールで、
それが揃っていれば必ずしもペーパープロトやモックアップをつくる必要はない」
ということになりました。

解像度というのは、
・どんな要素がどんな動きで入るのか
・要素はそれぞれどれくらいの量が入るのか
・どんな色や余白、タイポグラフィーなどのスタイリングが取られるのか
・上記がUXに問題ないか想像できる
です。

解像度が足並み揃っていない状態ですと、このような状態になってしまいます。

なので、ツールの具体的な使い分けは
モックアップは、スタイリングやUXの観点で足並みが揃っていなければつくる
ペーパープロトは、どんな要素でどれくらいの量で入るか足並みが揃っていなければつくる
になりそうです。


しかし、解像度が低いまま足並みが揃っていても良いデザインが生まれず
意味がないですよね？
そこで、デザイナー、エンジニアそれぞれが高解像度でいられるための自主練はどうしたら良いのかアイデアを出しました。

例えば、デザイナー🎨は
・スタイリングの部分はあらかじめライブラリやパーツとして作っておく
・イメージボードや、参考にしたUIデザインを共有しておく
・要素の抜け漏れをしない

一方エンジニア💻は
・今作られている画面のスタイリングルールを理解しておく
・要素の抜けもれがないか確認しておく
・UXの視点を忘れないようにしておく
みたいなことができそうです。

ドリーム・アーツではUIデザインをエンジニアと一緒に相談しながら作り上げていくスタイルだからこそ、一般的なUIデザイン製作過程とは合わないことがあります。
無理に全ての製作過程を踏むのではなく、目的に立ち返って順番を飛ばしたり途中でやめたりすることで効率的にUIデザインができるように今後も試行錯誤していきます。

また何か進展がありましたら発信しますのでお楽しみしてください！