iPad・Apple Pencil・Procreateで楽しくペーパープロトタイピング【UIデザイン】
自動家計簿・資産管理サービス「マネーフォワード ME」のデザイナー池内です。今回はiPad・Apple Pencil・Procreateを使ったペーパープロトタイピングの方法をご紹介します。この方法でペーパープロトタイピングの面倒さを減らし、UIデザインをより楽しくできるでしょう。
ペーパープロトタイピングって何って方はこちらの記事とか参考ください。
必要なもの
・iPad（Apple Pencil対応モデル）
・Apple Pencil
・Procreate（iPadアプリ）
iPadは最近のモデルならどれもApple Pencilに対応しています。ペーパープロトタイピングに使うだけなら安いモデルで十分です。念の為、購入前にApple Pencilに対応しているかご確認ください。
Apple Pencilは第1世代と第2世代があり、iPadのモデルによってどちらかしか使えません。こちらも購入前に自分のiPadがどのApple Pencilに対応しているかご確認ください。
Procreate (App Store)はお絵かき用のアプリですがUIデザインにも最適です。有料ですが買って損はないアプリだと思います。（個人の感想です）
iPad、Apple Pencil、Procreateでペーパープロトタイピングしてみよう
必要なものはすべて揃いましたか？では以下のステップに沿って、ペーパープロトタイピングをやってみましょう。
1. iPadのホーム画面を開く
2. Procreateを開く
3. キャンバスを作る
4. Apple PencilでキャンバスにUIを描く
はい、これだけです！特に難しい操作はありません。Procreateは触っていれば誰にでも使いこなせるアプリです。もう教えることはありません！
ちなみに、マネーフォワード MEで昨年改修したお知らせ画面はこのように描いてました。だいぶ雑ですが、プロトタイプだからいいんです！
この方法の便利な点
さすがにこれだけだと記事にならないので、この方法の便利な点を紹介します。
1. 高速で作れる
紙とペンを使ったプロトタイピングでは、定規を使って直線を引くのが結構面倒です。正直だるいです。
Procreateには線や図形をフリーハンドで描いてペン先を止めると、自動で直線やきれいな図形で描画してくれる機能があります。この機能だけでペーパープロトタイピングがめちゃくちゃ効率化します。これがProcreateを使う一番の理由です。
2. 量産できる
紙とペンを使ったプロトタイピングでは、似たようなUIを作るのにも1から描き直さなければいけません。大量に画面を描くときは大変です。腱鞘炎になりそうです。
Procreateではキャンバスやレイヤーをコピーする機能があります。一部分だけ変えたUIを描きたいときは、元のUIをコピーして一部分変えるだけなので、作業量が最小で済みます。
いい案もダメな案も思う存分量産できますね！
3. スムーズにシェアできる
紙とペンを使ったプロトタイピングでは、それをチームのメンバーにシェアするには一苦労です。写真を撮って、見やすく補正して、など面倒な作業が必要です。
Procreateで描いたプロトタイプは、AirDropで一旦Macに送るもよし、チャットアプリでチームメンバーに直接シェアするもよし、好きな方法ですばやくシェアできます。
最後に
お読みいただきありがとうございました。こんな方法みんなやってるのではと思いましたが、ググっても似たような情報はなかったので記事にしました。みなさんがUIデザインするときの参考になればうれしいです。
【マネーフォワードではデザイナー募集中】
マネーフォワード Home事業のデザイン部が気になる方、デザイナーとラフに話してみたい人は、こちらからご連絡ください！