こんにちは。ChatWork Advent Calendar 2017のトップバッター、@cw-takeです。
今回は僕がデザイン作業の中でペーパープロトタイプを必要とした背景と、プロトタイプをつくるにあたって検討したツールの紹介をしたいと思います。
なぜペーパープロトタイプが必要？
ペーパープロトタイプは、大まかな配置や簡単な遷移を開発チーム内で共有して、メンバーから出たフィードバックをその場で修正し、プロジェクトの早い段階でデザインの合意を取るために必要です。
Sketchなどのデザインツールを使わなかったのは、ペーパープロトタイプに以下のような利点があると考えたからです。
- 手描きのラフなデザインは相手からのフィードバックを引き出しやすい
- 誰でも触れるキャンバスは誰もが簡単にアイデアを形にできる
- デザイナーは制作環境を分けることで、デザインの段階ごとに達成したい目的に集中できる
僕がペーパープロトタイプをつくる段階で目的としているのは「デザインの骨格」を決めることです。これは主にUIパーツの選択と配置で、多くのデザインツールに備わっている色や細かい数値の調整、レイヤーといった機能はそれほど重要ではありません。
以降では、これらの背景をもとに検討したツールの紹介をおこないたいと思います。
「Linea」を選ぶまで
順番に3つのツールを試しました。
1. 紙とペン
紙の良いところはペーパープロトタイプをつくる作業だけに集中できるところです。PCやiPadはつい他のタスクや物事に目移りしてしまう瞬間がありますが、紙であれば目の前の作業だけに集中できます。
逆に課題となったのは、やりたいことを考え始めると紙とペンだけでは足りなくなったこと、同じ部品を何度も描く手間がかかったこと、つくったデザインを共有するのに多くの作業が必要になったことです。
2. UID8
UID8は、手描きのスケッチと遷移のつなぎこみができるiPadのデザインアプリです。ツールをまたがずにプロトタイプの作成が完結する点や、プレビューや共有機能が備わってる点が魅力で試してみました。
使ってみると、Undo・Redoの操作ができないのが少し不便に感じたのと、一番魅力に感じていたプレビュー機能が思うように動かなかったので、別のツールを検討してみることにしました。
3. Linea
出典：Linea - Sketch Simply on the App Store
Lineaは、制限した機能とシンプルなインターフェースが特徴的なiPadのお絵かきアプリです。今回はApple Pencilを使って試してみました。
このアプリは画面を指でなぞると消しゴムになり、Apple Pencilで描くと線が描画されるようになっています（設定で変更できます）。よく使う2つの機能を切り替える必要がなくなるので、絵を描く作業が非常に直感的に感じます。
共有についてはiCloudを使っておこなうことができます。遷移をつけることはこのアプリでできないので、プロトタイプの作成はInVisionなどを使っておこなうことになります。
結果
いまは操作感が気に入ったLineaで画面をつくり、InVisionで画面の遷移を繋いでいます。
また、それほど試さなかったのですが、画面作成には以下のアプリも候補としてあげていました。Lineaに何か課題を感じたときは再度検討してみたいと思います。
最後に
この記事を書いたことや、ちょうど同時期に参加したイベントでAdobe XD のセッションを聞いたことで、デザインのワークフローを考え始めるきっかけになりました。ペーパープロトタイプをつくることで何が達成したいのか、プロトタイプを完成させたあとはどうするのか、少しずつ見え始めてきたような気がします。
プロトタイピングツールは気づけば新しいものがでてきているのでどれを使うか悩みますが、これからも少し立ち止まって考えを整理しながら選んでいきたいと思います。
ChatWork Advent Calendar 2017、明日は@kyo_agoです。
