Prott User Meetup vol.19を開催しました！
HRTech特集
ProttはUser Meetupを定期的に開催して、サービスの開発・改善に欠かせないユーザーの皆様の声を直接聞く機会を大切にしています。
またユーザー同士でProttの活用方法を共有することもUser Meetupの目的です。
今回は、2017年4月20日 (木) に開催したVol.19「HRTech特集」のイベントレポートをお届けします！
Prottのアップデートについて
トークセッションに入る前に、Prottのプロダクトマネージャー・岡田より、直近行ったアップデートや今後追加される機能についての今後追加される機能について、お知らせしました！
今後控えているのは、時限遷移機能のリリース。
一定の時間が経過すると、自動的に画面が遷移する機能の実装をしており、会場ではまさに開発中のこの機能をデモンストレーションさせていただきました。もちろん、その開発もProttを活用しておこなっていますよ！
他にも、Prottのアカウントが無くてもフィードバックできるシェアURLの機能や、レビュアーのためのPrott Viewer for iOSのリリース（リリースしました！）、他にも細かな機能改善をおこなっています。
今後もProttは進化していきますので、今後のアップデートをお楽しみに！詳細はProttブログでお伝えしていきます。
SmartHR 副島智子さん「非エンジニアの人事労務のプロが作った『ペーパーレスの年末調整』の裏側」
ここから、いよいよトークセッションに入っていきます。
今回は、「HRTech特集」ということで、HRとテクノロジーをかけ合わせてイノベーションを起こしている2社にご登壇いただきました。
お一人目は、SmartHRの副島智子さん。プロダクトマネージャーと管理部長を兼任されていて、バックオフィスのご経験を17年やられている、バックオフィスのプロフェッショナルです！これまで、20人前後のIT系、5,000人の製薬会社など、多種多様な環境を経験された副島さんは、開発経験が無いながらもProttを活用してプロダクト開発をされている、珍しいご経験の持ち主です。
今回は、以下の3点のテーマでお話いただきました！
1. SmartHRってどんなサービス？
2. 年末調整のツラミ
3. 非エンジニアがどのようにして
1. SmartHRってどんなサービス？
SmartHRは社会保険・雇用保険の手続を自動化するクラウド型ソフトウェアです。これまで手書きで入力していためんどうな手続きを一元管理し、オンラインで完結させることができます。
例えば、入社手続き書類の作成に関して、これまで60分かかっていたものを3分で終えられるようになるので、非常に便利なサービスです。弊社グッドパッチでも導入させていただいており、多くの社員から「便利すぎる！」と話題になっています。
2. 年末調整のツラミ
今回は「年末調整」をトピックに、労務担当者がどれだけ大変な想いをしているかという点を、全国にチェーン店のある飲食系の企業に勤務されていた副島さんのご経験を踏まえて、話していただきました。
年末調整の時に、労務担当者がやらなければいけないことは、書類を印刷し、 (3種類×1300枚 =3900枚)各店舗ごとに封入して全国に発送。返送されてきた書類の中身をチェックして、給与計算用に紙に書かれた内容をデータ化する。
こういった時間のかかる重いタスクだったそうです。
年末調整で記入する書類 (副島さん スライドより)
一方で、従業員も書類へ記入し、申請をする必要があります。
しかし、その中身をちゃんと理解して記入している人はどれだけいるでしょうか？実際に会場でも手が上がる人は多くなく、そもそもよくわからないものに時間をかけていたのが、これまでの年末調整でした。
3. 非エンジニアがどうやって解決したか
副島さんは、以前から年末調整の効率化についてのアイデアをお持ちだったそうです！
「言葉の意味を知らなくても、正しい申告ができるようにしたい！」
「この時代に面倒な計算を手でやる必要があるんだろうか？」
「はい、いいえ、といった簡単なアンケート形式でできるんじゃないか？」
SmartHRに入ってから、かねてから温めていたアイデアを実行し解決できるのではないかと思い立ち、年末調整を効率化する機能を作ろうと考えたそう。
SmartHRさんでは、新しい機能のアイデアは社内のQiita:teamにまとめて共有し、ミーティングを設けて議論して、画面の仕様などを決めていく流れで開発が進んでいきます。年末調整に関しては、必要な要件が決まっており、副島さんご自身が画面のイメージを持っていたということで、いきなりモックを作ってみたそうです。
最初はPower Pointを使用して画面を作ってみたはいいものの、全体像が見えないし、回答が分岐したときの遷移先を整えられず、どうもいまいち...。そこで、Prottを導入したところ、画面の設計を進めていけたそうです！
ここで、SmartHRさんがProttを導入してよかったことを3つに絞って発表してくださいました！
1. 頭の整理がしやすい
どこを押したらどの画面に行くか、という画面遷移を作成できるため、整理がしやすいため、過不足無く画面を作っていけたそうです！
2. エンジニアとのコミュニケーションツールに
Prottをハブにすることで、どの画面からどの画面に移動するかといったことを、エンジニアに抜け漏れなく伝えることが出来たそうです。コミュニケーションコストが一気に下がり、スケジュールどおりに開発が進められたんだとか！
3.プレビュー機能を使って、事前にユーザーテストができた
今までになかったUIに対していいねをもらえるのはモチベーションに繋がるし、エンジニアにユーザーからの評価を伝えることで、迷いのない開発をしてもらえたとのことでした。
Prottをうまく活用して、世の中に送り出した年末調整の機能。はじめての年末を迎えた昨年末 (2016年) は、ユーザーの反応が気になってドキドキしていたそうです。そこで、Twitterでエゴサーチをしてみると、
「わかりやすすぎて震えている」
「マジで簡単すぎて感動」
「衝撃的な簡単さだ。猿から人間になったくらいの衝撃」
などなど、絶賛の嵐！思わず、嬉し泣きしてしまったそうです！
実際に弊社グッドパッチでも利用させていただいていますが、本当に簡単でびっくりしました。
今後も、SmartHRさんは機能改善を繰り返していき、今年の年末には去年以上により良くしたものにパワーアップさせていくとのことです。
非エンジニア、デザイナー・PMでも、Prottをうまく活用してリリースにまで至った好例ですね！
副島さん、ありがとうございました！
ビズリーチさん 小松崎麻里さん 「事業会社と高速プロトタイピング」
続いて、ご登壇いただいたのは、株式会社ビズリーチでUI/UXデザイナーとしてご活躍されている小松崎麻里さん。新サービス『ビズリーチ・キャンパス』の立ち上げの際に、どのようにProttを使ってプロトタイピングを行ったかについて、具体的なプロセスを交えてお話いただきました。
小松崎さんには以前、Prott Blogのインタビューにもお応えいただいております。
参考｜Prott Blog - 開発スピードが倍速に!? Prottは絶対に欠かせないツールの1つ - ビズリーチ
1.どんなサービス？
『ビズリーチ・キャンパス』は、学生と社会人をつなぐOB/OG訪問ネットワークサービスです。
ビズリーチさんの創業事業は即戦力人材に特化した会員制転職サイト「ビズリーチ」ですが、HRテック・ベンチャーとして「新しい時代に適した働き方の創造」「企業と個人の生産性向上」を掲げており、新卒採用の領域でも革新を起こそうとしています。
同じ大学出身の社会人（OB/OG）を、現在や過去の在籍企業だけでなく、在学時代の学部やサークルなどの多様な条件から探すことができ、実際に会って就活やキャリアについて相談をしたり、アドバイスをもらったりできるのがこのサービスの特徴です。
2. プロトタイピングをする前
プロトタイピングをフローに組み込む前は、実際のユーザー体験イメージが湧きにくかったそうです。遷移図を作って周りに見せると
「なんとなくいいね」
「良い気がする」
という反応をもらいますが、実際に仕様書の詳細を詰めていった段階で、細かくフィードバックをもらって手戻りが生じるなどの課題がありました。
プロトタイピングでフローを刻んでチームに共有することで、開発のスピードが格段に上がっていったそうです。
これまでの事業立ち上げのフローは、事業誕生→チーム結成→コンセプト→遷移図作成→デザイン→ローンチという流れでしたが、遷移図作成とデザインの部分をプロトタイピングに置き換えたフローで、『ビズリーチ・キャンパス』の開発は進んでいきました。
今回は、具体的に何をどのように変えていったか、変えることによってどのようにスピードが早まったのかについて、詳しく説明していただきました。
3. プロトタイピングのフロー
事業会社の新規事業だと、関わる人がたくさんいます。小松崎さんは、開発を6ステップに分けて進めていき、それぞれのフェーズでは、誰に介在してもらうかと、その目的を意識されていたそうです。
1. 要件を確認する
今ある要件が課題を解決出来ているものなのか、この機能は本当に必要なのかどうかを検討するフェーズ。紙で簡単なプロトタイプを書き、一日以内に終わらせるほどの早いスピードやっていくそうです。その段階で、PMやエンジニアに共有して、目線を揃えます。
2. 情報を設計する
全ての画面遷移や項目の優先順位を決めていくフェーズです。一番大事なのは、エンジニアがより早く着手できる環境を作ることです。会社名や名前や性別など、エンジニアがすぐにでもデータベースの構築をしていけるように、必要な項目を決定するためのプロトタイプを作成します。それらをスプレッドシートに展開して、プルダウンなのかラジオボタンなのかなど、同時に入力方法も全て記載していったそうです。
PMやディレクターなどのフィードバックをもらいながら、この時点で必要な情報をFixさせていきます。
3.プロトタイプを共有する
これまで書いてきたペーパープロトタイプを撮影し、全てProttへアップロードしていったそうです。アップロードは30分ほどで完了するため、今まで紙だったものをチーム全員にスピーディーに共有することができます。データ化をすると、PMから上司へと、またエンジニアやユーザーに近しい社員に確認してもらえるので、早い段階でフィードバックをもらうことができたそうです。まさにプロトタイピングですね！
4. 仕様を確定する
仕様書のような状態をProttで実現し共有することで、エンジニアもイメージが鮮明になりますし、デザイナーやフロントエンドも作業に入ることができます。白黒のワイヤーフレームのようなものですが、ここからビジュアルデザインを当てこんでいったそうです。
5. 本番通りの体験を確認する
プロトタイプの状態でしっかりと設計ができていれば、Sketchと連携してビジュアルデザインを進めていくだけで、自動で更新が反映されていきます。ここまできたら、自分でガリガリ改善をしていくフェーズ。精神と時の部屋の状態で、もくもくとスピード感を持って実際の画面に近いものを作っていきます。
6. フィードバックを得る
小松崎さんお気に入りの、コメント機能。フィードバックをもらうときは、フィードバック内容を書き込むメモとして利用し、修正対応後に解決済み機能を使うことでタスク処理を行っているそうです。
他にも、文言のチェックもこの段階で行なっているとのこと。今まではスプレッドシートを共有して文言だけで見てもらっていたのが、Prottのプロトタイプの中で確認してもらうことで、その文言が使われている文脈を踏まえてチェックできるので、一緒にユーザー体験を改善していけます。
全体のフローの後に、改めてProttでプロトタイピングをやるメリットをまとめてお話しくださいました。
・体験ベースで設計ができるので、ユーザー中心の設計ができる
・フローを刻むからこそ、手戻りが少ない
・プロトタイプを元に、早い段階でエンジニアが開発をはじめられたり、コーディングを開始できたりと、フローごとに担当者が作業開始できるので、開発スケジュール全体を前倒しできる
いままでだと、体験がイメージしきれないままフローが進んでいたこともあり、ローンチ直前になって、追加修正や手戻りが発生していたとのこと。
一方でプロトタイピングを行うと、体験のイメージがしやすくなるので、担当者がそれぞれの作業を開始できますし、小さなPDCAをたくさん回した状態で開発を進めていけます。すると、ユーザー体験が整った状態でローンチに向かっていけるので、新しい改善の余裕が生まれます。
この立ち上げを経て小松崎さんは、「イメージでアウトプットを早く出せることがデザイナーの価値である」という実感を得られそうです。また、デザイナーがプロダクトを主導していけたり、企画を自分で出したりと、「チームの中でより必要な存在になっていけるのが嬉しい」と語っていただきました。
小松崎さん、ありがとうございました！
今回のお話は、Prottを使って早いスピードで開発を進めていける、ひとつのモデルケースだと思いました。ぜひ参考にしてみてください！
最後に
お越しいただいた皆さまはProttチームとの交流だけでなく、参加された皆さま同士での交流も活発で会場は大いに盛り上がっていました！
以上、Prott User Meetup vol.19のレポートでした。
ご参加いただいた皆さま、ありがとうございました！
私たちProttチームは、今後もユーザーの皆さまと一緒になって開発・改善を進められるよう、User Meetupを開催する予定です！
こちらのイベントページにある「メンバーになる」ボタンを押していただけると、今後Meetupを開催する際にお知らせが届くようになります。
Prottのことをあまり知らないという方も、過去に参加したことのある方も、是非お気軽に遊びに来てください！