この記事は、PIXTA Advent Calendar 2017 9日目の記事です。
はじめまして、出張撮影マッチングサービスfotowaのプロダクトオーナーの李と申します。
正月休みはプレステ4を買って、大神とトリコの世界に浸かりたいと計画しておりますが、一緒にVRを買うべきか4Kテレビを買うべきか、超絶悩み中です。
今日は、fotowaでお問い合わせがあった際に、ChatWorkにその内容を自動的に流すようにしたら、 チームに起きた良い変化についてお話したいと思います。
【目次】
なぜそうしたか
fotowaとは？
背景を説明するために、まずはfotowaのことを簡単に紹介させてください。
fotowa（フォトワ）は、2016年2月末にローンチした、社内新規事業である出張撮影サービスです。
写真を撮って欲しい人と、撮影スキルを持つフォトグラファーを繋ぐプラットフォームです。
特に小さいお子さんが主役の家族行事（例えば七五三やお宮参りなど）で、ご利用いただくことが多いです。
- 写真で自分好みのフォトグラファーを選べる
- 完全データ納品
- オプション料金一切なしの一律料金
- 安心の無条件全額返金保証
……などなどで、時代の流れと消費者のニーズに寄り添った結果、ユーザーにも支持され、今年9月末時点で、サービス開始して1年半強で3,000件以上のご予約をいただきました。
お問い合わせにおいての課題
社内コミュニケーションは完全にChatWorkで、社外とやり取りすることが少ないエンジニアやデザイナーはそもそもメールをあまりチェックしません。
わたしからは、こういうお問い合わせがあったからこういう改善をしようとチケットを上げたり、最近こういうお問い合わせが多い傾向にあると定例で共有したりすることはしてきましたが、
ユーザーが増えるにつれ、当然お問い合わせの量もすごく増えて、すべてのお問い合わせに目を通している自分と、共有されるごく一部のお問い合わせ内容しか把握していない開発メンバーの間に、ユーザー理解度について大きな情報格差が生じているように感じました。
じゃChatWorkにもお問い合わせ内容を流せばええやん！
どうやってやったか
fotowa のお問い合わせは現状 Google Form を使っており、新規お問い合わせが入る≒該当スプレッドシートに新しい行ができる仕組みです。
スプレッドシートに新しい行が追加されたら、Google Apps Script のトリガーが走り、ChatWorkの特定チャットルームにその内容を投稿するスクリプトを、ネットにある情報1を参考に、非エンジニアの自分でも2時間くらいで書きました！
以下、そのやり方です。
Step 1: スプレッドシートを用意する
サンプルスプレッドシートです。
（スプレッドシートのメニューから、ファイル > コピー すれば、スクリプト込みでご自身のGoogle Driveにコピーできます）
name, content, timestamp の3つの値を収集しているとします。
そのほかに、通知済みかどうかを判別するための列「chatwork」を作っておきます。
Step 2: スプレッドシートからスクリプトを作る
スプレッドシートのメニューから、ツール > スクリプト エディタ
から、スクリプトエディタを開きます。
プロジェクト名を入力します2。
Step 3: ChatWork ライブラリを入れる
スクリプトエディタのメニューから、リソース > ライブラリ
「ライブラリを追加」に、ChatWork Client for Google Apps Script（2017/11/30時点 ver. 18、公式ライブラリではない）から Google App Script Project Key を追加します。
最新バージョンを選択し、保存します。
Step 4: スクリプトをカスタマイズする
コピペで使えるスクリプト
サンプルスプレッドシートを、ご自身の Google Drive にコピーしたものに含まれているスクリプトをカスタマイズして使います。
name列とcontent列の内容を通知する場合を例とします。
（※一応Gistも）
カスタマイズが必要な箇所
1. ChatWorkアカウントのAPI token
ChatWorkの右上のメニューの「API設定」からAPI tokenを取得します。
はじめて使う方は、ChatWorkへの申請が必要だと思います。
2. ChatWork の room_id
通知を送信したいチャットルームのURL末尾の、数字部分です。
例えば、URLhttps://www.chatwork.com/#!rid000000の場合、末尾の000000が room_id になります。
client.sendMessage({room_id: 000000, body: message});
3. ChatWorkに送信するメッセージ内容
カスタマイズの仕方については、ChatWorkのヘルプページをご確認ください。
Step 5: トリガーを設定する
この時計（かな？）アイコンから設定します。
用途にあわせてトリガーを設定してください。複数トリガーの設定も可能です。
通知ボタンから、うまく作動しなかった時にメール通知を受け取ることができます。
保存する時に、Google アカウントの承諾が必要になります。
Step 6: テストする
▶をおしてテストしてみよう！（基本重くて数十秒かかるのはよくあることなので、気長に待ちましょう）
例えばこんな情報をスプレッドシートで収集した場合……
チャットルームにこんな感じで通知が届きます。
スプレッドシートのchatwork列に「TRUE」が入ります。
以上、自動通知が動くようになります！
やってみてよかったこと
これを今年6月中旬ごろに始めて、課題だった情報格差の解消だけでなく、他にも思いがけぬ良いことが起きました。
情報格差の溝を埋められた
まずは、やはり今回のきっかけとなった「メールチェックするメンバーとあまりしないメンバー間に生じている、お問い合わせ内容把握の情報格差」という課題がかなり解消されました。
ChatWorkに流れてくるので、必ず目には入ります。
「先週◯◯に関するお問い合わせは10件ありました」とだけ共有されることと、お問い合わせ内容の詳細と頻度をリアルタイムで直接体感することを比べると、その理解度はダントツに後者がよいでしょう。
チーム内で話し合う時も、「この間もそんなお問い合わせあったよね」と前提情報を全員が把握できるため、コミュニケーションロスの減少やスピード向上に繋がりました。
お問い合わせに対して、職種関係なくコメントするようになった
ChatWorkに流れて目に入ることによって、情報の把握だけでなく、それに対してメンバーみんなが積極的にコメントしたり提案したりするようになりました。
例えば、fotowaのフォトグラファー空きスケジュールの表示にはReactを使っていますが、レガシーブラウザでそれがサポートされていないため、「スケジュールが表示されない」とのお問い合わせが非常に多かったです。
それを受けて、チャット上で以下のような会話が行われて、それを実装した結果、実装前に1日あたり1~2件あった該当お問い合わせはほぼ0になりました。
このように、お問い合わせ内容について活発に話し合うようになり、fotowaのUI/UX改善に繋がりました。
また、fotowaのチャットルームには、fotowaメンバーだけでなく、fotowaと業務上で関わりある全社横断のマーケティングチームや、広報チーム、法務・経理チームのメンバーも参加しています。
彼らの目にもお問い合わせ内容がとまることによって、色んな観点から助言やコメントをもらうことも非常に増えました。
生のユーザーボイスだからこそ、より個々の感情を知るようになった
それまで、お問い合わせ傾向をチームに共有する際に、ユーザーの言葉そのままではなく、共有する人の言葉に変換されてしまうため、そのお問い合わせに込められた感情はあまり伝わらなかったのですが、
生のお問い合わせ内容に触れることによって、メンバーはよりユーザーの感情を知るようになりました。
「あぁ……本当に困ってるな……」「あぁ……怒ってる……そこは確かに不親切だよね……」のような「改善しなきゃ」と思うこともあれば、「すごく喜んでもらった！やってよかった！」のような嬉しい声もたくさん届いているため、
ユーザーと直接関わることが少ないメンバーも、ユーザーとの距離が縮まり、理解度がより深まるとともに、やりがいを感じてモチベーションの向上にも繋がりました。
次にやってみたいこと
fotowaは、撮影後に依頼者が感想を投稿できるレビュー機能があります（※例）
現状では、管理画面かフォトグラファーの個人ページをチェックしに行かないと、最新レビューを確認できないようになっていますが、
次は、新規レビューが投稿されたら、ChatWorkに自動的に流すようにしたいと考えています。
（Redash => Slack => ChatWork と試みましたが、ちょっとうまく行かず……）
告知
fotowaでは、職種にとらわれず、みんなでより良いサービスを作りたいエンジニアとデザイナーを募集しています！
よかったらfotowa使ってみてください！
これからはクリスマスやお正月休みで、家族の皆さんが集まることも多いかと思いますので、
ささやかですが、てくすた読者の皆さんにこちらのクーポンを進呈します。
ぜひ家族の皆さんでfotowaの撮影をご体験いただければ幸いに思います！
- クーポンコード：texta2017
- 割引額：2,000円
- 有効期限：2018年3月末日の撮影まで
-
スクリプトのプロジェクト名をユニックかつ可読にしておくと、複数のスプレッドシートでいろんな自動通知を作るようになった時に恩恵を受けます。ユニックかつ可読でないと、すべてのプロジェクトのトリガーをまとめて管理する時がしんどくなります……↩
