【Tips】PTDオススメのデザインプロセス💁‍♀️

こんにちは！PLAY THE DESIGNERメンター兼SNS担当おかちゃん ( @okbchyk ) です🐧Twitterで紹介したTipsをnoteでもご紹介💁
今回は「PTDオススメのデザインプロセス」です👀

デザインってどう進めてる？

デザインするとき、みなさんはどうやって進めていますか？特に正解も決まりもないので、その時々に合った形で進めている方が多いと思います。

中の人も決まったプロセスがあるわけではないのですが、汎用的な「型」みたいなものを応用しています！ライブデザインの時は、その「型」に則ってデザインを進めていますよ〜！

他のメンター達にも共通していたので、今回はそのプロセスをご紹介します💁‍♀️

1️⃣ リサーチする

作りたいアプリに似ているものがないか調べます。また、作りたいトンマナのイメージに近いものも調べます。
アプリのスクショを保存したり、Pinterestにある画像をPinしたりしています。
中の人は、集めたリサーチ画像をEagleに保存して、いつでも見返せるようにしていますよ💁‍♀️

【デザイン勉強法】自分が好きな画像を集める！
🔖好きなトンマナがわかる
🔖好きな理由をメモに残して言語化の練習
🔖制作する時の参考になる
中の人も、新人時代からずっと続けてます👀#PTDデザインTips pic.twitter.com/kp9pe0akZ4

— PLAY THE DESIGNER｜デザイナーに関する情報発信📣 (@ptd_school) June 6, 2020

2️⃣ ユーザーが欲しいものをリストにする

ユーザーが欲しい！と思うであろう機能や要素をひたすらリストアップします！
ライブデザインでよく「要件リスト」という言葉が挙がっていると思いますが、それがこちらに該当します。
アカウント登録したい・ログインしたい・かわいい見た目で人に自慢したいなどなど...
粒度はいったん忘れて、なんでもリストアップしましょう！抜け漏れがないようにすることがポイントです👀

3️⃣ ユーザーの体験フローを視覚化する

ユーザーがどういった行動をするのかを視覚化します。ライブデザインではmiroやFigmaを使ってアクションを視覚化することが多いのですが、紙でもなんでもOKです！
すごろくのイメージで、ユーザーがどういったフローで行動するのかを図式化します。

4️⃣ ワイヤーを描く

みなさんワイヤーって書いていますか？
慣れてくると書かない方が増えるのですが、ワイヤーはとっても大切です...！思わぬところに抜け漏れがあったりするので、まずはササッと手書きでワイヤーを書いてみましょう！中の人はワイヤーで確認を進めることも多いですよ！

5️⃣ 色・形やイラストを当てていく

ワイヤーを書いてみて、抜け漏れやミスがないことが確認できてから、いよいよ色・形やイラストを当てていくプロセスです！
想像していたよりも前段階が長〜く感じたかもしれませんが、普段もこのように事前準備をしっかりするようにしています。こうすることで、手戻りやプロジェクト終盤で明らかになるミス！が減るという利点があるのです...😏

しっかりコンポーネントを作り始めるのも、このタイミングからです👀

あとがき

慣れてくると、事前準備をスキップしていきなりFigma！に入ってしまう方も多いです。それでも問題ないのですが、中の人的には事前準備をしっかりした方が進捗が良いまま制作を進めることができるので、なるべく厚めに準備することがオススメです💁‍♀️

※2021/3/1追記： 新規受付は停止いたしました。