表題の通り、Figma でプロトタイプを作成してカスタマーサクセスチーム（お客様のサポート対応を行うチーム。お客様との接点が多かったり、開発サービスの業界出身者が多く在籍。以下 CS）へ共有し、新機能の FB をもらう会を開いたのですが、これがものすごく良かったという話です！
UX/UI 体験の観点から、実際にプロトタイプを小さく作って FB をもらいながら回す、というアプローチは最近はよくあるものですが、うちのチームでは現在までそういったアプローチは行ってきませんでした。
理由は主に 2 つあると思っています。
- 現在の開発組織にはデザイナーが在籍しておらず、ノウハウを持つメンバーがいなかったこと。
- 拡大期のため、どちらかというと機能開発に重点をおいてバシバシ新機能を作る段階だったこと。
今でもデザイナーは在籍していませんが、私の在籍しているエンジニアチームで日々開発を行った結果「プロトタイプを先に作って見てもらいたいよね」という話が上がり、今回実施してみました。
そこで今回、プロトタイプを作ろうと思った経緯や実際のプロトタイプの作り方、FB 会の内容、実際に得た効果等をお伝えしていけたらと思います。
プロトタイプを作ろうと思ったきっかけ
私が働いている CastingONE では、現在 10 名ほどの開発チームが 2 つあります。そのうち、私の所属しているチームは今年に入って早くも 2 つの大きな機能開発を行っていました。CastingONE は現在機能の拡大期のため、このように大きな機能を全員で作る機会が多いなと思っています。
執筆地点で 1 つ目の開発は今年春頃まで行い、そろそろ 2 つ目の機能がリリースを迎えようとしています。
しかし、1 つ目の開発の QA 期間にチームで実際に作った機能を触っていたところ、「なんか…やりづらい」「使いづらい、不便さを感じる」といった部分があることに気づきました（PdM ともすり合わせを行い、使いづらさに関する多くの部分は、次のリリースで修正をしています）。
毎週金曜日に KPT を利用してスプリントの振り返りや個人の振り返りを行っているのですが、その際にこの話題が出た際「もっと早く、『お客様にとって』っていうのを考えられたらよかったよね」という反省が出ました。その結果、新たな TRY として、事前にプロトタイプを作って CS メンバーに聞いてみよう！ということになりました。スプリント振り返りでは PdM も参加しているので、すぐに日程を決めてプロトタイプの用意を始めました。
プロトタイプの作り込みについて
ここからは figma を利用したプロトタイプについて、使った理由や figma の使いやすさ、作成にあたり気をつけたことなどを紹介します。
figma をプロトタイプツールとして使った理由
figma をプロトタイプツールとして利用した理由としては、ごく単純で、プロトタイプの作成に役立つさまざまな機能が取り揃えられているからです。また、私たちは少し前に外部のデザイナーさんに figma の勉強会を開催していただいたこともあり、既に慣れ親しんでいたというのもありました。
figma に惚れ込んだのでこんな記事を書いてしまったくらいです！figma めちゃ良いので使ってみてください。
今回主に利用したプロトタイプ機能は、プレビュー画面でのユーザーの動作に対して画面遷移やモーダル表示といった Web サイトのようなインタラクティブな動きをつけてくれる機能です（上記の記事ではプロトタイプ機能についてはまったく触れていません…）。
エンジニアやデザイナーなら紙芝居的な雰囲気のプロトタイプでも動きのイメージが掴めたかもしれませんが、今回はプロダクト開発外の組織である CS メンバーに（しかも初めて）FB をもらうという施策だったため、なるべく完成イメージに近いものを作りたかったというのがありました。
以下がプロトタイプ機能を利用して要素を繋げた様子です。
私たちはデザイナーではなかったので、あまり作り込みすぎても慣れずに時間が消費されてしまうため、単純にできてかつユーザー体験の肝になりそうなところでツールを利用しました。繋げていないところは、ペラのプロトタイプを figma 上で見せていく形で十分伝わるところもあったためです。
ちなみに figma は以下のような、Web サイトの動きにおいて当たり前に存在する単純な動きが得意でした。
- クリックしたらコンポーネントが選択中に変わる、メニューが出る等のコンポーネントの状態変更
- クリックしたら別ページへ遷移する, モーダルを表示・非表示にする
プロトタイプツールを利用するのは初めてだったので、実は「プロトタイプ機能ができないこと」にもぶち当たりました（ある場所をクリックすると 2 つのモーダルが閉じる、とか）。その時になぜこれができないのだろうと考えた際、プロトタイプツールとして標準機能にないということは、逆に「この遷移やモーダルの仕組みが、逆にイケてないのか？」と思ったりもしました。色々と学びがあります。
また、プロトタイプツールは作り込めば作り込むほど、繋ぐ線も増えて複雑になります。先ほどの線で繋げた様子の画像をみてもらえればお気づきかと思いますが、何か変更したいところがあったときに繋ぎ直したり、いちいち文言レベルの不整合を直そうと思っているとキリがありません。そこはある程度折り合いをつけ、全体的なイメージを掴んでもらうことを意識し、細かい作り込みを行いすぎないようにしました（FB 会という MTG の場での活用を目的としていたため、補足で口頭説明をすることで回避していました）。
プロトタイプで悩んだコンポーネントの作りは、そのまま実デザインにも活かすことができたのも、大きくよかったところです。その後のデザイン作業が時短になりました（結局、構成ができていれば、あとは意匠に落とすだけなので）。
FB 会の実施について
次に、FB 会の概要やその効果について紹介します。
同じようにこういった会を設けようと考えている方がいらしたら、何かの参考になれば嬉しいです。
FB 会の当日の流れ
当日の流れについては、初めてでよくわからなかったので chatGPT 先生に基本的なところを聞きながら、ところどころアレンジを入れました。
こんな感じで、時間としては 60 分で FB をもらい切るようにしました。
参加者としては、CS メンバー 2 名、PdM1 名、開発エンジニア 3 名です。
1. プロトタイプと機能の紹介 5min
1. プロトタイプ共有の目的
2. 主な機能の概要
2. プロトタイプの注意点 5min
3. 主な機能や動作の流れの概要をプロトタイプのデモンストレーションしながら説明 15min
1. p: [機能1]
2. p: [機能2]
3. p: [機能3]
4. p: [機能4]
5. [機能5]
6. [機能6]
7. [機能7]
4. 実際にさわってもらったり見てもらったりする 10min
1. 自由に意見を求める（よさそう、よくなさそう、ほしい、いらない等）
5. フィードバックの収集 20min
1. この新しい機能をどう思いますか？
2. あなたにとって、この機能はどのような価値がありますか？
3. この機能を使うと、どのように効率化できると思いますか？
4. この機能について、改善してほしい点はありますか？
5. この機能を使う上で、もっとも困難だと感じる点は何ですか？
6. この機能によって、どのような問題が解決されますか？
7. この機能を使うことによって、どのようなメリットがありますか？
8. この機能がなければ、どのような問題が生じると思いますか？
9. この機能をどのくらいの頻度で使うと思いますか？
10. この機能を使った結果、何が変わりますか？
11. なんか追加してほしい項目とかしりたいやつとかあれば
6. フィードバックの共有とまとめ 5min
1. できそうなことできないこと
7. 閉会の挨拶 1min
※ [機能x]というところには実際の機能が入ります。
※ p: はプロトタイプで繋げた画面を利用した説明をさします。
この流れで予定して FB 会を実施したのですが、基本的に ステップ 4 はあまりいらない、ステップ 5 は完全にいらなかった、というのが結果です。
私たち作り手よりも、CS メンバーは、よりお客さんに詳しいですし、私たちのプロダクトを普段から操作し慣れています。
そのため、3 で口頭デモを行った時点である程度お客さんの利用イメージを想像することができたらしく、この時点で、想像をはるかに超えた具体的な質問や要望をもらうことができました。
実際にお客さんに詳しいメンバーのヒアリングがかなり大きな効果を発揮しそう、というのは想定した上での FB 会だったのですが、その想定以上に CS メンバーがお客さんや機能を使うイメージを持っており、FB 会は 1 時間できれいに終わりました。
FB 会で得た効果
FB 会の効果として、実際のお客さんの操作感をもとにした有益な FB が得られ、それを元に機能が複数追加され機能がより磨き込まれました。
FB 会のあと、すぐに PdM とエンジニアサイドで、CS メンバーの具体的な要望だけでなく、会話した際のリアクション等やどういう時に使いそうかといった FB 会中に行われていた会話内容などにも着目し、追加した方が良い機能やその優先順位づけを行いました。
「これは不要、これは後で良い」と思っていた機能が、実はよく使う機能なので磨き込んだ方が良かったり…といったことが多くあったり、実際の利用イメージを聞いて仕様をガラッと変更したところもありました。
ただ、不要な機能といった会話がなかったため、結局今ある機能実装に要望が重なってしまい、工数が増えたということにはなってしまいました。中途半端だったり、優先度の低い機能を聞き出すという方法においては、まだまだうまいやり方がありそうです。
とはいえ、この FB 会があったことにより、さらに良い機能になったことはいうまでもありません！
これからも続けていきたいなと思いました。
おわりに
実は、この FB 会を元に作り上げた機能を、チームメンバーで不具合チェックもかねてみんなでいじり倒した『探索会』も行いました。そこでは（機能不具合も含めますが）「こうした方がお客さんがわかりやすいのでは？」とった機能の磨き込みアイディアが、大きなものから小粒なものまで 2〜3 時間で 100 件以上集まりました。
冒頭できっかけとして挙げた「もっと早く、『お客様にとって』っていうのを考えられたらよかったよね」という反省点を活かし、FB 会や探索会を行うことにより、チーム全員でより良いものを作りたいという思いも自然と激増していったのかなと思い、チームの成長度も一歩上がった気がします。
さらに実は、近日再度 CS メンバーに完成した機能を見てもらう会も開こうとメンバーで話し合いまして、そんな会も予定しています。
お客さんに気持ちよく使ってもらえるプロダクトの機能になるべく、引き続き頑張っていきたいと思っています！
Discussion