Tech Do | メディアドゥの技術ブログ 

株式会社メディアドゥのエンジニアによるブログです。

デザインの着想を集めよう。ペーパープロトタイピングをした話

f:id:hrk02:20200227145629j:plain

こんにちは、UXリサーチャーの吉永です。

メディアドゥにてUXリサーチをプロジェクトを横断して行なっています。

さて、みなさんは、あるプロダクトのデザインをしていて、他のデザイナーならどうデザインするかな、と思ったことはありませんか?

実は弊社でも、あるプロダクトのデザインにおいて、適したデザインにたどり着くためにいくつかのUIパターンを検討しようとした際に同じことが起こりました。

始まりはパターンが必要になったこと

弊社では当時、あるプロダクトのリニューアルに際し、そのデザインが進んでいました。

しかしその時の計画ではいわゆるウォーターフォールなやり方に則っており、ドメインに、そしてユーザーに適したUIを追求・探求するイテレーティブなアプローチが不足していました。

それに気づいたメンバーの提案により、このプロダクトについてデザインチーム主導でいくつかのUIパターンを検討することに。この時できればユーザビリティテストを経てデザイン提案もしましょう、ということになりました。

ペーパープロトタイピングをチーム全員で

複数、それも4つも5つもUIパターンを作るのは、なかなか骨が折れます。作る工程には実はそれほど時間はかかりませんが、着想を引き出すのにかかる時間がかかるためです。

ですが、弊社には複数のデザイナーが所属しているため、全員の力を借りれば、着想を引き出すくらいならすぐに出来そうでした。そこで、毎週1時間開かれているデザイン定例の時間を使い、ペーパープロトタイピング会を開くことに。

ペーパープロトタイピングの実施

f:id:uxman:20200101191055j:plain

会のはじめ、会議室のモニターにその対象の画面を映しつつ(リニューアルのプロジェクトだったため、対象となる画面はすでに存在していました)、ホワイトボードにプロダクト・ユースケース・想定のユーザーシナリオを書き説明しました。

説明の時間と量は、いくつかQ&Aを想定し、少し余裕をもって設定。

会の内ほとんどの時間は個人ワークですが、最後に全員に共有するための時間を設けることにしました。

当日の1時間をまとめるとこうですね。

  • プロダクト・ユースケースと対象ページの説明(10分)
  • 描く!(35分)
  • 1人2分で発表(15分)

ちなみに、ペーパープロトタイピングに使う紙は、Marvelの出しているSketchPadsが便利です(少し古いですが)。

Sketchpad - Download device templates for prototype sketches

ペパプロ会の細かいコツ

ワークを開くにあたり、細かいコツが3つあります。

1点目は、対象となるプロダクト・そのペルソナ・ユースケース・対象画面の具体的な使われ方などの説明を欠かさないことです。

メインで付いているデザイナーやPOへのQ&Aタイムを設けるのもよいでしょう。

この時は説明がやや不足しており、序盤に少し混乱を招いてしまいました。それでも大変充実した会になったのは、ひとえにデザイナー陣の協力とスキルの高さに支えられたと思います🙏🙏

2点目は、発表の時、1人の発表が終わったら必ず拍手で終わることです。議論は後にしましょう。

区切りが付いて素早く次の人の発表を聞く準備が出来ますし、なにより、笑顔で終われると参加者の満足度が高まり、次回もまた開きやすくなります。終わりよければすべてよし、です。

3点目は、とにかく折りに触れて時間を宣言することです。

たとえば、

  • 会の時間割をはじめに説明する
  • 描いている間に「10分経過しました」といった風に経過時間や残り時間を繰り返し宣言する
  • タイマーを鳴らす
  • 発表の時は発表者にタイマーを持たせる

といった具合。

普段違うプロダクトに関わっているデザイナー同士で1行うペーパープロトタイピングを1時間で収めるのは、本来そこそこ難易度が高いものです。

参加者が時間を意識することで短時間に集中できるよう、サポートしてあげましょう。

作ったペパプロは実際にちょっとだけ動かす

ペーパープロトタイピングは、チームビルディングにも効果があるためそれ単体でも有用です。

それに、イテレーティブなサイクルを維持する上で、作ったペパプロが採用されなくてもよいという前提で定期的に開催するチームもあります。

しかし、せっかく作ったのですから、より具体的に実務に活かしたいところですよね。

弊社ではプロトタイピングのその後、デジタルなプロトタイピングを行う際に具体的に活用しました。

会後のペーパープロトの活用

まず、アウトプットを写真に撮ってMarvelに移して管理しました。さらに、Marvel上でほんの少しだけ動くようにして触ってみます。

ペーパープロトを管理
ペーパープロトはMarvelで管理

その中からメインのデザイナーとリサーチャー間でディスカッションしながら部分部分をいいとこ取りしていき、今度はデジタルなプロトタイプに仕上げました。

次回は、そのプロトタイピングとそれを使ったユーザビリティテストのお話です。

まとめ

  • チームに複数デザイナーがいて、あるプロジェクトに複数パターンの着想を集めたかった
  • ペーパープロトは1時間集中でチーム全員で実施
  • 撮影してMarvelで管理・ちょっとだけ動かす
  • いいとこ取りしてデジタルなプロトタイプに

──────

メディアドゥでは、引き続きデザイナーを募集しています

マンガを扱う上場企業で、幅広くデザインやりませんか? WEB・アプリ・ブロックチェーンなど、既存事業も新規事業も、そしてゼロイチもカイゼンもあります。

あなたはどの領域のデザインをしたいですか?

話を聞きたい方も一緒に働きたい人も、業務委託希望の方も正社員希望の方も、奮ってご応募ください!

www.wantedly.com www.wantedly.com www.wantedly.com