ProttはUser Meetupを定期的に開催して、サービスの開発・改善に欠かせないユーザーの皆様の声を直接聞く機会を大切にしています。
またユーザー同士でProttの活用方法を共有することもUser Meetupの目的です。
2017年5月23日 (木) に開催したVol.20のイベントレポートをお届けします！
目次
イベントの概要について
本イベントのトークセッションは3つのパートに分かれています。
登壇者は転職サイト『Green』でおなじみの株式会社アトラエのデザイナー・紺谷さん、『UX Kokeshi』を開発した株式会社博報堂の岩嵜さん・鷹野さん、そしてグッドパッチのUIデザイナー/グラフィックレコーダーである香林でした。
博報堂のお二人には、グッドパッチと共同でおこなったワークショップの裏側について、パネルディスカッション形式でお話しいただきました。
この記事では、アトラエの紺谷さん・グッドパッチの香林のトークについてご紹介します！
今回のトークセッションは、リアルタイムでグラフィックレコーディングを行いながら開催されました！出来上がったものは記事の最後にご紹介します。
「事業会社が語る、ぶっちゃけProttってどうなの？」｜株式会社アトラエ 紺谷昌充さん
アトラエでUXデザイナーとして働く紺谷さんには、「Prottとの出会い」「Prottとの倦怠期」「Prottとのこれから」の3部構成で物語風にお話しいただきました！
Prottとの出会い
まずは出会う前のお話から。以前はチームでデザインを共有するときに、デザインだけを作って共有しても伝わらず、「どこを押したらどうなるの？」とよく聞かれていたそうです。そこで、画像の一部分にリンクを埋め込むイメージマップという、プロトタイプのようなものを作成し共有されていたようですが、コード書くのがめんどうくさいし結局口頭で伝えてしまい、効果を発揮しなかったんだとか。
「そこでProttと出会うわけですね。一目惚れしました。チームで使ってみると、プロトタイプを共有するだけで『ここってこうだよね』とコメントがもらえるんです。コメントをもらえた箇所に対して返信できるので、やりとりがスムーズになりました。勢いですぐに有料プランに申し込みましたね。つまりはProttと付き合うことになったんです」
Prottとの倦怠期
その後、チームで使っていくに従ってある問題が生じます。事業会社特有の“開発フェーズの違い”により、Prottが活躍する場面が限られてくるという問題です。
アトラエさんの場合は“大規模リリースフェーズ”と“グロースフェーズ”があり、前者の場合はProttをうまく活用できるそうですが、後者だと活用方法に悩んでいたそうです。というのも、後者だと文言を入れ替えてみたりページの1部分のデザインを変えたりとABテストがメインなので、Prottを使わない時期があったとのことでした。倦怠期の訪れです。
「デザインすらしないときもありました。気持ち的には会いたくて会いたくて震えているのに、会えないんです。そこで思いました。私はただ、Prottさんに貢いでいるだけなのかもしれないと…。Prottさん、距離をおきましょう、ということで無料プランに変更しました」
Prottと一時的に距離を置くことに決めた紺谷さん。
しかし、しばらく使わないうちに進化していることを耳にして、改めてProttを使ってみたそうです。
Prottとのこれから
「Prottさんのこと何も知らないまま一方的に距離をおいてしまったのかもしれない。そう思って本気で向き合ってみることにしました。改めて触ってみて、本当に良いなと思ったことがいくつかありました」
そこで、お気に入りの2つの機能と事業会社として役立ちそうな2つ機能、計4機能について紹介いただきました。
まずはSketchのプラグインについて。連携すれば自動で更新してくれるので、プロセスが楽になったそうです！最近リリースしたPrott Viewerも早速使っていただいたところ、Prottでデザインしたプロトタイプを共有するときにリンクひとつ送ればアプリで開いてくれるので、便利だったとのことでした。
また、事業会社として重要だと思う機能の一つに、画面遷移図作成の機能を挙げてくださいました。長いこと1つのサービスをやっていると時間が経つにつれ遷移図が複雑になるし、担当していたデザイナーが変わると当初の状態から大きく変わってしまいます。Prottを使うと人が変わってもずっと遷移図を保管してくれるのが便利だそうです！
あとは、Prottはデザインのバージョン管理にも活用できるとのことでした。以前はGitHubでデザイン管理しようとししていけれど、面倒くさくて長く続かなかったそうです。変遷を追うと、2,3年前の施策になんの意味があったのかわからなくなってしまいますが、Prottでできるので、バージョン管理をすれば何をどう変更したかを残しておけます。
「画面遷移図・バージョン管理ができるというのはとてもありがたく、お金を払う価値があると思いました」と話してくださいました。
「世界中の人々を魅了する会社を創る」
最後には1月にグッドパッチがリリースした『Balto』についても触れていただきました。
「Prottはまだ制作中のデザインを改善していくもので、Baltoは既に実装済みのものに対してフィードバックできるサービスのようです。動画を撮ってフィードバックできるところが良いですね。止まっている画だけ見ても動きがわからないことがある。動かしながら変なところに気付けるし、議論できるのは画期的ですね」
紺谷さんが働くアトラエさんは「世界中の人々を魅了する会社を創る」をビジョンに、転職サイト『Green』、ビジネスパーソン向けマッチングアプリ『yenta』、そして組織改善プラットフォーム『wevox』を展開する会社です。現在注力されているのはHRTechですが、これから色々なことを仕掛けていく可能性があるとのこと。気になる方はぜひHPをご覧になってみてください。
紺谷さん、ありがとうございました！
「Prottを活用したワークショップ 共同開発秘話」｜グッドパッチ 香林望
グッドパッチでUIデザイナーをしながら、グラフィックレコーダーとしても活躍している香林からは、「Prottを活用したワークショップ 共同開発秘話」と題して、博報堂さんと一緒におこなったワークショップ共同開発プロジェクトについてお話ししました。
グラフィックレコーダーとは、会議などの議論をリアルタイムで絵や図などのグラフィックに「可視化」して記録するコミュニケーション手段を行う人のことで、この行為と描き出されたものを含めて「グラフィックレコーティング」と呼ばれています。
参考：グラフィックレコーディングをやってみました！｜ほぼ日手帳 2017
今回のプロジェクトではグラフィックレコーディングが大活躍！グラフィックレコーディングをミーティングログとして共有することで両社間のコミュニケーションを円滑に行うことができました。
（グラフィックレコーディング事例）
主題であるワークショップ共同開発プロジェクトについての主なトピックはプロジェクトの概要と制作プロセス、そしてProttが果たした役割についてです。
どんなプロジェクト？
博報堂さんとグッドパッチが共同で1日完結型のワークショップを開発し、両社のお客様に提供する、というのがプロジェクトの輪郭です。
中身は以下の画像をご覧ください。
（ワークショップ内容）
今回のワークショップで特徴的だったのは、博報堂さんが開発されたUXデザインツール「UX Kokeshi」（後述）とプロトタイピングツールProttのコラボレーションでした！
お題に対してのペルソナとカスタマージャーニーマップを作成し、それを基にアイディエーション・プロトタイピングをし、ユーザーテストを行い改善します。このプロセスを踏むことで、プロダクト作り未経験者でも、その日の終わりにはモバイルアプリのプロトタイプを作れるような構成になっています。2社それぞれの強みを活かしたツールを活用したことで、参加者は実際に手を動かしながら効率的に学びを得ることができます。
※ UX Kokeshiとは？
こけしのような人形にユーザーの行動や感情を貼り付けていき、そこから提供価値を考えていくデザインツールです。これにより、カスタマージャーニーマップを紙に書いたりデジタルで記すよりも直感的に編集し全員が手を動かせるため、チームみんなで進めながら全体を立体的に俯瞰することができます。
どのように設計したの？
本プロジェクトは、午前は博報堂さん・午後はグッドパッチというように、担当パートを分担して進行しました。午後のグッドパッチのパートは、主に3つのステップを経て設計しました。
（3つのステップからなる制作プロセス）
ステップをもう少し噛み砕いて言うと、下記のようになります。
- 大枠の設計→ 骨組み
- 可視化→ 肉付け
- スライド化 → 完成
まずはワークショップの目的を達成するために必要な要素を洗い出し、全体の流れを大まかに組み立てて時間配分をします。
次に、イラストを用いてワークシナリオ（ワークショップにおけるユーザー体験）を時系列に描き出しました。これによって、懸念点の洗い出しや検討漏れ箇所の確認、新たなアイデアの追加を行うことができます。
（実際に行ったミーティングのホワイトボードの様子）
中心にあるのがワークシナリオで、周りには付随してアイデアや懸念点、細かい時間配分が書き込まれています。これにより、文字だけで見えなかった細かい箇所が見えてきました。
特に効果的だったのは、ホワイトボードの一番上の部分にある各プロセスの発散と収集の関係が明らかになったことです。ワークシナリオの可視化により、上流からワークショップを俯瞰しながら、参加者目線も取り入れた設計をすることができました。
さいごに、出来上がったワークショップ設計をスライドに落として完成です！
ワークショップにおけるProttの役割
続いて、ワークショップの中でどのようにProttが使われたかについてです。Prottはチームでのコラボレーションを促進し、認識を合わせながらユーザー視点のプロダクトを作ることに長けています。
改めてワークショップの流れを再確認してみましょう。
（ワークショップの流れ）
参加者はアイディエーションで取り組むべきアイデアを決定した後、Prottノートにアイデアを描き出していき、簡単なペーパープロトタイプを作成します。それをスマホカメラで写してProttアプリに取り込むことでPrott上でプロトタイプを作ることができます。それを基にユーザーテストを行い、プロトタイプを改善していきます。
では、なぜProttがプロトタイプ作りに貢献できるのでしょうか？
Prott上でプロトタイピングをすることで、議論の中心を主観からユーザー及びユーザー体験にシフトさせて進められるからです。しかも、このワークショップに参加しているほとんどはデザイナーではなく、どのようにUIを設計してどんな要素を組み込むかということを知っている人は多くありませんでした。それでもProttを軸にコミュニケーションを取ることで、専門知識が無くても立派なプロトタイプが完成します。実際に、受講者の皆さんが作ってくださったものはどれも全く未経験の状態から作成したとは思えないようなプロトタイプでした。
ワークショップを終えてみると、Prottには大きく2通りの役割があることが改めて明らかになりました。ペーパープロトタイピングとブラッシュアップの段階では、制作者同士を繋ぐツールとなってコラボレーションを促進していきますが、ユーザーテストの段階では制作者とユーザーを繋ぐという役割も果たしています。
（ワークショップ内でのProttの役割）
このように、UX KokeshiとProttというデザインツールを駆使し、博報堂さんとの共同ワークショップは成功に終わりました！
さいごに
（完成したグラフィックレコーディング）
トークセッション終了後、リアルタイムのグラフィックレコーディングが完成しました！担当したのはグッドパッチのUIデザイナーである中野です。
懇親会ではグラフィックレコーディングの前にたくさんの人が集まり、グラフィックレコーディングの説明や今回のレコーディングについての解説をしました。
グラフィックレコーダーに質問をしたり内容を振り返りながら交流したりする場が生まれていて、皆さまの高い熱量を感じました！
今回のUser Meetupは、まだまだ引き出しきれてないProttが持つ大きな可能性について知ることができたイベントだったのではないでしょうか？今回ご紹介した機能をぜひ試してみてくださいね！
お越しいただいた皆さまはProttチームとの交流だけでなく、参加された皆さま同士での交流も活発で会場は大いに盛り上がっていました！
以上、Prott User Meetup vol.20のレポートでした。
ご参加いただいた皆さま、ありがとうございました！
私たちProttチームは、今後もユーザーの皆さまと一緒になって開発・改善を進められるよう、User Meetupを開催する予定です！
こちらのイベントページにある「メンバーになる」ボタンを押していただけると、今後Meetupを開催する際にお知らせが届くようになります。
Prottのことをあまり知らないという方も、過去に参加したことのある方も、是非お気軽に遊びに来てください！