RightTouch Blog

Haruki Kawashita

Sanshiro Sakai

Nariyuki Saito

Aaron Madlon-Kay

Tomoaki Oiki

Yuma Takeuchi

RightTouch Blog 編集部

Daichi Kanke

Yuichi Yabu

11/6に開催された「<a href="https://increments.connpass.com/event/328720/">Qiitaさんのフロントエンドイベント</a>」で弊社のPreact活用について登壇しました。本記事では、発表のサマリーと、スライドの補足を簡単に行います。
資料についてはこちらをご覧ください。
<iframe class="speakerdeck-iframe" frameborder="0" src="https://speakerdeck.com/player/7af71b37f2634b0bbe78038507dde201" title="3rd party scriptでもReactを使いたい！ Preact + Reactのハイブリッド開発" allowfullscreen="true" style="border: 0px; background: padding-box padding-box rgba(0, 0, 0, 0.1); margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 315;" data-ratio="1.7777777777777777"></iframe>
<h2>Preactとは</h2>
PreactはReactの軽量版であり、Reactとほぼ同じAPIを持ちながらも、サイズが小さく、パフォーマンスが高いことが特徴です。React比較で10分の1以下という非常に小さいバンドルサイズになっています。
<img src="https://ik.imagekit.io/righttouch/4bd819a5-02cd-4241-9460-06fed8dc4e3a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-11-2818.33.40.png" alt="Preact">
<h2>RightTouchでのPreactの活用</h2>
RightTouchでは、<a href="https://rightsupport.karte.io/">RightSupport by KARTE</a>というWebサポートプラットフォームを提供しています。
本プロダクトには「サポートアクション」と呼ばれる機能があります。これは、RightSupportをご活用いただいているクライアントのWebサイトにJavaScriptのタグを1行埋め込むだけで、ノーコードでサイトの自由な書き換えが行えたり、FAQやシナリオを組み込んだポップアップを表示することができる機能です。
この機能の実現のため、RightTouchのCDNからWebサイトにスクリプト(=3rd party script)を配信しています。このスクリプトは、クライアントのサイトのパフォーマンスを損なわないよう、軽量で高速なものであることが求められます。
<img src="https://ik.imagekit.io/righttouch/eee5381d-3677-41e9-906a-ca7b04d5101f/preact-use.png" alt="RightTouchでの利用例">
Preactは、この軽量性の要求にピッタリな技術でした。さらに、RightTouchでは3rd party script以外の管理画面(例えばサポートアクションのノーコードエディタ)ではReactを採用しており、その点で技術キャッチアップの最小化や、コードの共通化といったメリットもありました。管理画面との技術親和性に関しては、React製のノーコードエディタにPreact製のサポートアクションを埋め込むことで、サポートアクションのリアルタイムプレビューを実現するという少しユニークな活用も行っています。
<img src="https://ik.imagekit.io/righttouch/59a5f008-560f-4ee2-85dc-327cd8e67abe/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-11-2818.34.05.png" alt="サポートアクションエディタ">
運用の工夫としては、上述のノーコードエディタでのPreact + Reactの併用に伴う互換性の確保や、バンドルサイズのチェックなどが挙げられます。2024/11月時点で、Preactの運用実績は約1年となりますが、Preact起因の障害は今のところ起きておらず、順調に運用されています。
<h2>最後に</h2>
RightTouchでは、今回のPreact活用のように、プロダクトの価値向上のためには現状にとらわれすぎずに新たな技術を模索・採用していく文化があります。
カスタマーサポート市場の改革に挑むプロダクトエンジニアを絶賛採用中です。少しでも興味を持った方がいればぜひお話ししましょう！
エンジニア求人情報の詳細 
<a href="https://righttouch.co.jp/jobs/engineer">https://righttouch.co.jp/jobs/engineer</a>
採用サイト 
<a href="https://righttouch.co.jp/recruitment">https://righttouch.co.jp/recruitment</a>

RightTouchでのPreactの活用について発表してきました

RightTouch Blog編集部です！
10/22に開催された「<a href="https://righttouch.connpass.com/event/333501/">プレイド・kikitori・ダイニー・RightTouch_技術領域の垣根を超えた開発手法</a>」でテックリードの齋藤が登壇しました。
イベントでは、プレイド・ダイニー・kikitori・RightTouchという、フェーズも成り立ちも異なるスタートアップ4社が集まり特定の技術領域の垣根を超えた開発手法を紹介しました。
<h2>カスタマーサポート市場の改革に挑む 急成長中のプロダクトエンジニアチームの挑戦と舞台裏</h2>
齋藤はカスタマーサポート市場の改革に挑むRightTouchの、開発組織に求められる特性・プロダクトエンジニアの特徴や取り組みの紹介をしました！
発表スライドを公開しているので、ぜひご覧ください。
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;"><iframe title="カスタマーサポート市場の改革に挑む 急成長中のプロダクトエンジニアチームの挑戦と舞台裏" src="https://speakerdeck.com/player/488d10d700f74447b209badea7b5c434" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no"></iframe></div>
<h2>組織のベースとなる考え方: プロダクトエンジニア</h2>
<img src="https://ik.imagekit.io/righttouch/9dfcaf54-5b14-4f9d-aec7-87b7e289c710/241022-01.png" alt="241022-01.png">
RightTouchのエンジニアは基本的に
<ul>
<li>特定の技術領域に閉じず、機能全体を高速開発できる　「フルスタックな技術スキル」</li>
<li>技術だけではなくプロダクト・事業の成功に目線があり、そのために必要なことを考えられる 「プロダクトや事業への志向性・視座」</li>
<li>機能の使われ方や、顧客体験を考えて設計できる　「UXの設計能力」</li>
</ul>
上記3つを大事にする「プロダクトエンジニア(PdE)」として動いています。
<h2>プロダクトエンジニアが活躍する環境</h2>
<img src="https://ik.imagekit.io/righttouch/2878bd69-2b2c-48b0-8271-6b60d4ab1a4d/241022-03.png" alt="241022-03.png">
RightTouchでは、BizDev/エンジニア/デザイナーが越境しつつ協力してプロダクト作りを進めていくケースが多く、プロダクトエンジニアには技術を超えた越境が求められます。
ただ、それに慣れているエンジニアばかりではないゆえ、自然とプロダクトエンジニアの理想状態に近づけるような環境として 「構造」「機会」「文化」を重視しています。
<img src="https://ik.imagekit.io/righttouch/ef2247af-d9fc-4ed3-ab5f-22bbab7535b0/241022-02.png" alt="241022-02.png">
例えば、エンジニアがクライアントのコンタクトセンターを見学して実際にプロダクトが使われている様子を観察し、クライアントの課題理解やプロダクトの改善点発見に役立つ機会としている話などがありました。
最後は、プロダクトエンジニアについて 「作ったものが誰の何の役に立つのかをとことん考え、痛いほど結果が返ってくる。苦しいながらもとても面白いです」 と力強く語っていました。
<h2>最後に</h2>
RightTouchではカスタマーサポート市場の改革に挑むプロダクトエンジニアを絶賛採用中です。
少しでも興味を持った方がいればぜひお話ししましょう！
エンジニア求人情報の詳細 
<a href="https://righttouch.co.jp/jobs/engineer">https://righttouch.co.jp/jobs/engineer</a>
採用サイト 
<a href="https://righttouch.co.jp/recruitment">https://righttouch.co.jp/recruitment</a>

スタートアップ4社の「技術領域の垣根を超えた開発手法」に参加・登壇しました

RightTouchは、プレイドからスピンオフしたスタートアップで、カスタマーサポート領域向けのWebサポートプラットフォーム「<a href="https://rightsupport.karte.io/">RightSupport by KARTE</a>（以後、RightSupport）」「<a href="https://rightconnect.karte.io/">RightConnect by KARTE</a>（以後、RightConnect）」などを提供しています。
カスタマーサポート領域の抜本的変革に挑んでいるRightTouchは、複数プロダクトを提供するコンパウンドスタートアップとして、常に新たな事業、プロダクトの開発に向けて動いています。今回の記事では、α版がリリース済みであり、今後正式版のリリースを予定するフェーズのプロダクトに焦点を当てます。
約1ヶ月という超短期間で一つのプロダクト開発に携わったという新規事業開発の田中(akky)、エンジニアの齋藤(nari)、赤木(giinyo)の3人にインタビュー。“RightTouch流”コンパウンド戦略、そしてビジネスサイドと開発サイドとの圧倒的な信頼関係をもとに、高速でプロダクト開発をどのように実現したのか話を聞きました。
<blockquote>
＜プロフィール＞ 
田中 彬寛／akky（たなか あきひろ） 
九州大学工学部機械航空工学科卒業後、2017年にリクルートホールディングス入社。プロダクトグロースや事業戦略策定／実行、全社横断ナレッジ統括などに従事。 2022年にRightTouch入社、セールス及びカスタマーサクセスのリード／BizDevを担当。好きな言葉は「ロマンとそろばん」。趣味はサウナ、ポーカー、アニメ。
</blockquote>
<blockquote>
齋藤 成之／nari（さいとう なりゆき） 
東京大学大学院で博士課程修了後、2020年に日立製作所に入社。研究開発部門で業務システム開発に関する業務に従事。2021年10月プレイドに入社し、現在はRightTouchのテックリードとして開発に携わる。
</blockquote>
<blockquote>
赤木 勇統／giinyo (あかぎ ゆうと) 
大阪大学大学院を修了後はPhotosynthに新卒入社。主にAkerun入退室管理システムの開発に従事。新たな挑戦がしたいという想いがあり、2024年1月にRightTouchへ転職。RightTouchでは、RightSupportの開発担当を経て、新規プロダクトチームへジョイン。 
</blockquote>
<img src="https://ik.imagekit.io/righttouch/dfaffa20-3aab-4bd7-9f38-de0af07fdca8/DSC00850.jpg" alt="DSC00850.jpg"><center>左から田中（akky）、赤木（giinyo）、齋藤（nari）</center>
<h2>既存顧客との活動から新たなプロダクトの課題仮説と可能性を模索する</h2>
——「今回の新規プロダクトの詳細についてはまだ秘密…」と伺っていますが、どのようなアイディアがきっかけで開発に至ったのか教えていただけますか？
akky：今回の開発のきっかけに言及する前置きになりますが、アイディアを形にして、市場で仮説検証を行い、事業やプロダクトに還元する。このサイクルを高速で回していくことこそ、初期から複数プロダクトを並列で立ち上げていくコンパウンド型の事業成長においてもっとも大切だと思っています。だから、セールスやカスタマーサクセスの活動をしながらも常に新規事業の可能性を模索していました。
——今回の新規事業における「課題の特定や事業の方向性」はどのように決定していったのでしょうか？
akky：これまでRightTouchでカスタマーサクセス、事業開発を行ってきた知見から、カスタマーサポート領域で優位性を築くために“絶対に押さえなければいけないデータ”があることはわかっていました。
その上で、2023年秋ごろから10社ほどのクライアントのもとに足を運び、カスタマーサポートの業務全体を通じてどんな困りごとを抱えているのか、RightTouchとしてどんな打ち手があるかヒアリングし、新規事業の解像度を高めていきました。
ヒアリングを通して共通して出た課題意識を、新規事業の「What（何を解決するのか）」として設定することに決めました。 
<img src="https://ik.imagekit.io/righttouch/f7a99e1f-8366-4c0b-a559-0b67f3ed7732/DSC00834.jpg" alt="DSC00834.jpg"><center>BizDev 田中（akky）</center> 
——最初はチームではなく、一人で進めていたのですね。
akky：はい。「How（どのように解決するか）」を検討するため、パワーポイントに簡易的にアイディアを落とし込み、クライアントにプレゼンを行って仮説を当てていきました。このあたりから、エンジニアのnariくんにも協力してもらい、技術的な観点でフィードバックをもらっていきました。 
 nari：実は、当初は新規プロダクトという形ではなく、クライアントからデータをもらって加工する受託開発として進めていたんです。
その過程で、技術的な検証や提供価値の検証は、一定できました。しかし「本当に使いやすい形でプロダクトとして提供できるのか？」「継続して使ってもらえるのか？」といった、プロダクト化にあたって重要な論点は残っていました。もちろん、モノを作らずにこれらの論点を検証することもできたかもしれませんが、新規プロダクトとして開発に本腰を入れた方が良い、という経営判断もあり、2024年4月にエンジニアのgiinyoも含めたプロジェクトチームを組成しました。
——そこから、どのようなプロセスを経たのでしょうか？
nari：私はチームを組成直後から、まずは自分自身がこの新規プロダクトにフルコミットできるようリソース調整を行いました。akkyのおかげで大まかなアウトプットのイメージはできていたので、クライアントからもらった細かな要望や意見をもとに、MVP（Minimum Viable Product）を作ることに注力していきました。 
 akky：MVPを作るにあたって、「カスタマーサポートの現場で働く方々がきちんと活用できるもの」をゴールに設定しました。過去の経験から、コールセンターの皆さんは非常に膨大な量の問い合わせデータと向き合っていますが、ITツールに慣れていない方も多いと感じています。
プロダクトを作っても、日常的に活用してもらえなければ意味がない。そこで、実際の使用イメージが湧くように、<a href="https://note.righttouch.co.jp/n/n97bc415698b2?gs=53dcaaa6989f">デザイナーのkimさん</a>にも加わってもらい、MVPに沿ったデザインや、フロントエンド、バックエンドまで作り込みました。 
<img src="https://ik.imagekit.io/righttouch/5b7fe5a4-dcb4-4599-b645-9470a9da855c/DSC00809.jpg" alt="DSC00809.jpg"><center>テックリード 齋藤（nari）</center>
<h2>「共通開発基盤」と「リファレンスカスタマー」がコンパウンドの鍵</h2>
——チームを組んでから約1ヶ月という短期間でMVPを完成したと伺いました。そこまでのスピード感が出せたのはなぜですか？
akky：大きく3つ要因があると思っています。
一つは、コンパウンドスタートアップならではの強みだと思いますが、「共通開発基盤」と「リファレンスカスタマー」の存在です。
ゼロイチの開発といっても、すでにRightTouchで築き上げてきたフレームワークやリファレンスカスタマー（RightTouch既存プロダクトを導入・利用してくださっている代表的な企業）との信頼関係があるからこそ、ここまでのスピード感をもって開発に集中できたのだと思っていて。
特に大企業の部長・役員クラスともすぐにコミュニケーションがとれるのは、カスタマーサポートという非常に規模と影響範囲の大きな領域に向き合う上で大きな優位性となっていると感じます。 
 giinyo：私がこのチームにジョインした時には、「何を作るべきか」「クライアントにとってどんな価値を生むのか」がほぼ明確な状態でした。エンジニアにとって、プロダクトの価値を確かめながらものづくりができる環境はすごくありがたいんです。すぐに「早くこのプロダクトを世に出したい」という気持ちにまでなっていましたね。 
 akky：二つ目は、最初から「スケーラビリティ」を意識しなかった点かなと。
——コンパウンドスタートアップは、事業拡大、すなわちスケールを見越して仕様検討する場合が多いですよね。
akky：そうですよね。ただ、最初からスケールした先を意識して、細々としたところまで作り込んでしまうと、開発のスピード感は損なわれてしまう。だからまずは、PMF（プロダクト・マーケット・フィット）させることに主眼を置くことにしたんです。 
 nari：もちろん良し悪しはありますが、まずは市場に出し、顧客からフィードバックを受けながら仮説検証を行っていく姿勢も重要だと思っています。 
<img src="https://ik.imagekit.io/righttouch/fd77116c-ef5d-4f3d-af59-0279a8c939ad/DSC00885.jpg" alt="DSC00885.jpg"><center>エンジニア 赤木（giinyo）</center>
<h2>キーワードは「背中を預け合える信頼関係」。プロダクトづくりに集中できるRightTouchの環境とは？</h2>
——RightTouchが高速でプロダクト開発を進められる、最後の理由は何でしょうか？
akky：全員がプロフェッショナルであること、でしょうか。
「コンパウンドスタートアップの勝ち筋」として非常に重要なのが、「開発のスピード感」です。
その観点でいうと、メンバー一人ひとりがプロフェッショナルとしてミッションを果たす環境が当たり前にあるRightTouchだからこそ、実現するのではないかなと。 
<img src="https://ik.imagekit.io/righttouch/c20f7765-d142-4784-8c6b-cdd9ea22ff1b/DSC00893.jpg" alt="DSC00893.jpg"> 
——全員がプロフェッショナル、というのは具体的にどんな場面で実感しますか？
akky：RightTouchは、意思決定のトップダウンとボトムアップのバランスがとても良い組織です。大きな戦略や外してはいけないポイントは、経営陣が中長期からバックキャスト（逆算）してしっかり決めますが、その幅のなかでの現場の自由度はとても高い。 
今回も、冒頭に話した“（カスタマーサポート市場におけるコンパウンド戦略実現に不可欠な）絶対に押さえなければいけないデータ”を得ることができれば、どんなプロダクトとして実現するかは僕たちチームからのボトムアップで決められました。「データを押さえる」という観点で事業戦略との接合は作れていたということです。 
コンパウンドスタートアップも様々なスタイルがあると思いますが、感覚としては、すでに細かくプロダクトロードマップが引かれており、作るプロダクトの枠組みがおおよそ決まっている企業が多いように思います。 
スタートアップとして、限られたリソースをどのタイミングで何に配分するか、という経営判断は非常に重要ですが、全員が当事者意識を持って日々業務にコミットしているからこそ、こうした意思決定もスムーズに委ねてもらえたのではないかと思っています。 
 giinyo：手前味噌かもしれませんが、RightTouchにはakkyさんをはじめとしたクライアントと密な信頼関係を築き、プロダクトに対して深く率直なフィードバックを持ち帰ってきてくれるビジネス担当がいる。クライアントとのコミュニケーションは全面的に任せられるので、私たちエンジニアも開発に集中できるのだと思っています。 
 nari：チームとしてもバランスが良かったと思います。akkyは比較的楽観的にどんどん物事を前に進めていくタイプで、私はどちらかというとリスクを考えるタイプ。多様な視点を持ったチームかつ、各々をリスペクトしているからこそ、スムーズにゼロイチの開発ができたと感じます。
——ビジネス担当、エンジニア双方が強い信頼関係で結ばれているのがわかります。
nari：RightTouchでは「全員プロダクト担当、全員顧客担当」というバリューを大切にしています。役割に囚われず、事業成功にコミットしていくというマインドがあるんです。
だからこそ、クライアントへのプレゼンやミーティングには、私やgiinyoもできるだけ出席し、議論に参加するようにしました。
akky：ビジネス担当としても、クライアントとの打ち合わせにエンジニアも一緒に入ることで、要望や意見に対して「YES/NO」を即答できるのはすごく心強いんです。私が出したアイディアにも、すぐに仕様を書いて、技術的観点でフィードバックをくれますし。こうした環境で仕事ができるのはなかなか貴重ですし、とても嬉しいですね。
giinyo：回答や結論を持ち帰った場合でも、プロダクトへの実装は可能なのか、他にどのような選択肢があるのか、すぐにディスカッションを行いました。全員が同じ目的意識のもと、それぞれの役割に最大限コミットした結果、このようにスピード感を持った開発ができたのだと思います。
——RightTouchではビジネス担当、エンジニアが互いに背中を預けられる関係だからこそ、高速のプロダクト開発ができるのですね。貴重なお話、ありがとうございました！
<h2><img src="https://ik.imagekit.io/righttouch/7e3b0250-c21d-4a9c-9ee3-dba071f8837d/DSC00858.jpg" alt="DSC00858.jpg"></h2>
RightTouchの採用情報はこちらから 
<a href="https://righttouch.co.jp/recruitment">https://righttouch.co.jp/recruitment</a>
エンジニア求人情報の詳細 
<a href="https://recruit.righttouch.co.jp/engineer">https://recruit.righttouch.co.jp/engineer</a>
カスタマーエンジニア求人情報の詳細 
<a href="https://recruit.righttouch.co.jp/customer-engineer">https://recruit.righttouch.co.jp/customer-engineer</a>
デザイナー求人情報の詳細 
<a href="https://recruit.righttouch.co.jp/designer">https://recruit.righttouch.co.jp/designer</a>
（ライター／安心院 彩（フリーランス） 　取材・編集／緒方 祥子（フリーランス））

 高速でプロダクトの価値を検証せよ——RightTouch流コンパウンド事業立ち上げの勝ち筋

SlackのuserGroupメンションをアシストするアプリをCraft Functionsで作ってみた

SlackのユーザーグループメンションをアシストするアプリをCraft Functionsで作ってみた

※この記事は<a href="https://note.com/s346/n/n695816901938">RightTouch公式note</a>に掲載した内容を転載しています。
<h2>はじめに</h2>
RightTouchでエンジニアをしているsanshiroです。現在は主に<a href="https://rightconnect.karte.io/">RightConnect by KARTE</a> (以下RightConnect)の開発を担当しています。
RightConnectとは、昨年β版をリリースしたコンタクトセンターのオペレーター向けのプロダクトです。このプロダクトの目的は、Webサイトと電話の問い合わせ体験を統合し、電話の応対効率と顧客体験を最大化しすることです。
RightConnectの特徴の一つは、オペレーターが電話応対をしながらWeb上での行動や問い合わせ情報をリアルタイムで確認できる点です。この機能を実現するために、β版ではオペレーター向けのダッシュボードを作成しました。β版の運用・検証する中で明らかになった課題に対処するため、オペレーター向けのダッシュボードのリニューアルを4月に行いました。
本ブログでは、紆余曲折あったリニューアルのプロセスについてご紹介できたらと思います。
<h2>オペレーター向けのダッシュボードについて</h2>
<img src="https://ik.imagekit.io/righttouch/10f8c558-6a78-43af-b8be-2597e4f6476c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-05-2018.03.32.png" alt="スクリーンショット2024-05-2018.03.32.png">
LPより抜粋 <a href="https://rightconnect.karte.io/">こちら</a>
RIghtConnectは電話の応対効率と顧客体験を最大化を目的に開発され、顧客とオペレーターの 双方 の満足度を高めることに注力しています。
電話の応対で顧客が抱える不満で最も多いのは、待ち時間が長いことですが、説明の手間や話が噛み合わないといった情報伝達・コミュニケーションに関しても不満が上がることが多いです。
オペレーターが使いやすいプロダクトにすることで、顧客とオペレーターの情報伝達が円滑になり、顧客体験の向上に直結します。また、応対効率も向上するので、待ち時間の削減にも繋がります。
そのため、顧客の満足度のみを考えるのではなく、オペレーターが使いやすいプロダクトとしての満足度向上にも注力しています。
RightConnectの具体的な要素は大きく分けて3つで構成されています。
<ol>
<li>問い合わせ前行動を元に、顧客のお困りごとに合わせた最適なチャネルをご案内</li>
<li>顧客ごとの問い合わせ前行動の情報をオペレーターに還元し、ステータスや悩みを瞬時に把握</li>
<li>Webサイト上の行動や顧客属性、問い合わせきっかけなど、さまざまなデータをリアルタイムに解析・可視化</li>
</ol>
詳細は、RightConnectのβ版開発の裏側について書かれた<a href="https://blog.righttouch.co.jp/rightconnect-beta-release">こちらのブログ</a>をぜひご覧ください。
オペレーター向けのダッシュボードは、2.顧客ごとの問い合わせ前行動をオペレーターに還元し、ステータスや悩みを瞬時に把握 を実現するために、ユーザーの問い合わせ前行動を閲覧できることに加えて、ユーザーのWeb行動を動画でリアルタイムで再生しながらマウスポインタの共有も可能な画面として開発されました。
オペレーターは、問い合わせ応対時にオペレーター向けのダッシュボードを常に利用します。オペレーター向けのダッシュボードの使いやすさ = オペレーターにとってのプロダクト使いやすさ になります。
そのため、オペレーター向けのダッシュボードは、オペレーターにとって、見たい情報が見やすい形で表示され、必要な機能が使いやすい画面であることを追求して開発を行っています。
<h2>β版で明確になったオペレーター向けのダッシュボードへの課題</h2>
RightConnectはMVP(Minimum Viable Product)としてスピード重視で開発され、クライアントへ迅速な価値の提供を行いました。プロダクトを実際に運用・検証を行えたことが非常に重要で、特にRightConnectを利用しているコンタクトセンターの見学にチームメンバー全員で行かせていただことが以下の課題の発見につながりました。
<ul>
<li>オペレーターは多数のツールを使っており、そのそれぞれが高度にカスタマイズされている。その状態であっても、オペレーターがよく見る項目は限られており、無駄なスペースもある。</li>
<li>オペレーターにとってのダッシュボードの価値を最大化するためには、「そのセンター」「そのリーズン(顧客の困りごと・達成したいこと)」に最適化されたダッシュボードの項目や配置が実現できる必要がある。</li>
</ul>
β版のオペレーター向けのダッシュボードでは簡易的なカスタマイズは可能であったものの、これらの課題を解決するために求められる ダッシュボードの柔軟なカスタマイズ性は実現できない部分がありました。
4月から導入社数も増加予定だったこともあり、大規模な導入が進む前にオペレーターへのダッシュボードの価値を最大化できるようにリニューアルすることを決め、ダッシュボードが柔軟にカスタマイズできることという機能要件にフォーカスして設計を開始しました。
<h2>オペレーター向けのダッシュボードv2の設計</h2>
<img src="https://ik.imagekit.io/righttouch/b07ecaed-cb3d-4ffc-bb5b-159bcdccef73/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-05-2019.40.30.png" alt="スクリーンショット2024-05-2019.40.30.png">
オペレーター向けのダッシュボードv2の初期デザイン(設定画面)
RightTouchでは、職種問わず担当者がPRD(製品要件文書)を作成し、それをもとに、議論し、方向性・仕様を固め、開発に着手します。 
オペレーター向けのダッシュボードのリニューアルを行う際にも、運用・検証で得られた課題を元にダッシュボードの柔軟なカスタマイズ性を重視したPRDが作成されました。
カスタマイズ性の例としては、以下のようなものになります。
<ul>
<li>情報を自由に追加削除できる</li>
<li>直感的な操作で要素を並び替えることができる</li>
<li>顧客のリーズンに合わせたダッシュボードの表示ができる</li>
<li>ダッシュボードへの新機能の追加がしやすい</li>
</ul>
それに伴いデザインも柔軟なカスタマイズと今後の機能追加がしやすい形を追求し、機能要件を満たすために管理者が利用する設定画面を重点的にデザインしました。
<h2>プロトタイプ作成、再検証</h2>
PRD・デザインを元に開発を進め、一連の機能が操作できる状態になった段階で、社内でフィードバック会を開催しました。この会はRightTouchメンバー全員が参加可能で、実際に機能を触ってもらいながら幅広い意見を集めることを目的としています。
その結果、ダッシュボードの柔軟なカスタマイズ性に関する機能要件は問題がないことが分かりました。
一方で、本来のプロダクトとしての オペレーターにとって見やすい・使いやすい 部分が少し犠牲になっているのではといったフィードバックがチーム外のメンバーからありました。
チーム内でカスタマイズの機能要件にフォーカスし、機能・デザインの修正を繰り返していく過程の中で、オペレーターにとって見やすい・使いやすいの観点が薄まっていることに、フィードバックの機会を持つことで気づくことができました。
本来の目的が失われては、今後、プロダクトとしての価値を提供できないと判断し、カスタマイズ性を保ちつつ、オペレーターが使いやすい・見やすい画面としての細かいUI/UXといった非機能要件に徹底的にこだわるという観点を補強し、デザインをやり直すことを決めました。
デザインを作り直すコストはありましたが、プロダクトとしての価値をフラットに見直してリリースを遅らす意思決定しました。その際、チームのBusiness、Customer Engineerメンバーがその価値をクライアントにも丁寧に説明することで、考え方に賛同していただけました。
<h2>デザイン案の再設計</h2>
まず、オペレーターが使いやすい・見やすい画面として、電話しながらでも対応がしやすい理想のダッシュボードとは何かというところに立ち返ってチームで再度議論し直しました。
今まで行ってきたコンタクトセンター見学の情報などを元に、デザイナーは具体的な形にし、他職種のメンバーはインスピレーションを得るためにネットからダッシュボードのデザイン案を探しました。その中で、どのような要素が、見やすい・使いやすい画面に必要なのか、現在の画面には何が足りていないのか、画面構造から詳細の細かい表現まで議論を行い、理想のイメージをチーム間で共有し、整理しました。
<h2>デザインの反映</h2>
<img src="https://ik.imagekit.io/righttouch/7c81238f-f77d-4b4c-bf7c-13ce1fd1c5e8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882024-05-2021.48.23.png" alt="スクリーンショット2024-05-2021.48.23.png">
デザイン案再設計後のデザイン(オペレーター向けの表示画面)
デザインの反映は、理想のイメージを今後実現できるように、主にデザインの構造の修正とオペレーターが見やすい・使いやすいUI/UXへの修正を行いました。
主な変更点としては、以下になります。
<ul>
<li>構造の修正
<ul>
<li>カラム → カード(見出しと白いエリア部分) → コンポーネント(各情報) の階層構造に変更
<ul>
<li>カード内でコンポーネントを複数列表示等に対応できるように</li>
</ul>
</li>
</ul>
</li>
<li>各コンポーネントの表現方法
<ul>
<li>見出し・内容のテキストの色・サイズの調整</li>
<li>影など、ノイズになる可能性のあるデザインを修正</li>
</ul>
</li>
<li>イベントの表現方法
<ul>
<li>ユーザーの行動が視覚的にわかりやすいようにタイムライン表示に</li>
</ul>
</li>
</ul>
特に裏側のデータ構造に影響のある、理想のデザイン構造とすでに開発したデザイン構造で齟齬がある部分、妨げになる可能性のある部分の修正に絞って対応することで、1〜2週間程度で修正が完了しました。
結果、想定していた初期のリリース日から大きく遅らせずにリニューアルを完了できました。 
最終的に本来の目的であるオペレーターの使いやすさとスピードの両面を取れた形でリニューアルを完了できたことにチームとして満足しています。
<h2>まとめ</h2>
一度β版でリリースしたものをその延長で考えて、一度考えた方向性で固執せずに、理想を再定義して作り直すことで、プロダクト本来の価値を最大化するリニューアルを行うことができました。
今回のケースから今後は、プロダクトの価値を高めるために以下をより意識して、開発を行っていきます。
<ul>
<li>プロダクト全体としての目的をチーム間で 常に 共有しながら機能開発をすすめること</li>
<li>(ユーザー・社内)フィードバックの機会を 早めに何度も 設けること</li>
</ul>
RightTouchでは、職種問わず、目的を追求し、スピード感を持ってより良いものを作っていきます。興味がある方は、絶賛採用中ですので、ぜひ一緒に働きましょう。
採用サイト 
<a href="https://righttouch.co.jp/recruitment">https://righttouch.co.jp/recruitment</a>
エンジニア求人情報の詳細 
<a href="https://recruit.righttouch.co.jp/engineer">https://recruit.righttouch.co.jp/engineer</a>

RightTouchでエンジニアをしているsanshiroです。現在は主にRightConnect by KARTE https://rightconnect.karte.io/ (以下RightConnect)の開発を担当しています。  RightConnectとは、昨年β版をリリースしたコンタクトセンターのオペレーター向けのプロダクトです。このプロダクトの目的は、Webサイトと電話の問い合わせ体験を統合し、電話の応対効率と顧客体験を最大化しすることです。  RightConnectの特徴の一つは、オペレーターが電話応対をしながらWeb上での行動や問い合わせ情報をリアルタイムで確認できる点です。この機能を実現するために、β版ではオペレーター向けのダッシュボードを作成しました。β版の運用・検証する中で明らかになった課題に対処するため、オペレーター向けのダッシュボードのリニューアルを4月に行いました。  本ブログでは、紆余曲折あったリニューアルのプロセスについてご紹介できたらと思います。

プロダクトの価値と課題に向き合ったら、ダッシュボードのUIを完全に再設計することになった

プロダクトの価値と課題に向き合ったら、ダッシュボードのUIを完全に再設計することになった話

RightTouchでは、カスタマーデータをもとにプロダクトや機能の開発・改善を行っています。当社の「カスタマーデータドリブンなプロダクト開発」とはどういったもので、どんなやりがいがあるのか、RightTouch テックリードの齋藤に話を聞きました。
「<a href="https://karte.io/">KARTE</a>に豊富なカスタマーデータが蓄積されているからこそ、スムーズに精度の高い分析ができる」と語った齋藤。具体的にどのようなデータをどう開発に活かしているのかまで詳しく迫ります。
<h2>カスタマーデータドリブンな開発とは</h2>
──まずはカスタマーデータドリブンな開発とはどういったものかを教えてください。
齋藤：
カスタマーデータドリブンな開発は、ユーザーの利用状況などの「カスタマーデータ」を活用してプロダクトや機能を開発する手法のことです。たとえば、新しいマーケティングツールを作るとしたら、「どの機能がどんな人に使われているか」をデータで分析しながら開発するイメージです。
データを用いない開発だと、自分の感覚や経験しか頼りになりません。「ユーザーはこんな機能を求めているだろう」という自分の考えと、ユーザーが実際に必要とする機能とがいつも一致するとは限らないので、感覚や経験だけではズレてしまう可能性がありますよね。そうなれば、できあがったプロダクトや機能が役に立たないなんてことも考えられます。 
もちろん、お客様にインタビューさせていただき、お声をいただくことも多くありますが、それだけでは本当の利用実態は十分に把握できません。
カスタマーデータドリブンなら、自分の考えや仮説が正しいかをカスタマーデータで検証しながら開発できるため、大きく外す可能性を低くすることができます。開発の途中で「この考えは違うかもしれない」と思ったときには、すぐにデータで確かめられるんです。
<h2>RightTouchにはカスタマーデータドリブンな開発を行ううえで、これ以上ない環境が整っている</h2>
──RightTouchでは、どのようにカスタマーデータドリブンな開発を実施しているのでしょうか？
齋藤：
グループの母体である<a href="https://plaid.co.jp/">プレイド</a>が提供している、「<a href="https://karte.io/">KARTE</a>」の分析機能を使っています。
KARTEには「クライアントの担当者が弊社のプロダクトや機能をどれくらい使っているか」というデータが豊富に蓄積されていて、このデータを分析しているんです。
既存プロダクトの機能改善はもちろん、新規機能の検討にも活用しています。
──プロダクト開発にデータ分析を取り入れることは、さまざまな企業が実施していると思います。そんななかで、RightTouchのカスタマーデータドリブンな開発ならではの良さにはどんなものがありますか？
齋藤：
KARTEという強力なデータ基盤をプロダクト分析に活用しているおかげで、すぐに分析して開発提案ができるところです。
たとえば、自分が作りたいプロダクトや機能があったとして、一般的な開発環境だと、データドリブンにしたくても、すぐに着手ができないケースが多いと思います。例えば、分析したいデータが手元になくて、まず取得から始めないといけないとか、時間をかけて集めたデータの質がイマイチで取り直しになるとか、あるあるじゃないでしょうか。
ですが、RightTouchで利用するKARTEはデータの収集力と分析力が高くて、仮説検証を高速に進められますし、精度もかなり高いです。なので、すぐにプロダクトの仕様検討にデータを取り入れることができます。
<h3>データにもとづくから、ローンチ後に悲しい思いをしなくて済む</h3>
──齋藤さんが考える「カスタマーデータドリブンな開発」の良さを教えてください。
齋藤：
「手探りではなく、精度の高い試行錯誤を繰り返しながらプロダクト作りを進められるところ」です。
カスタマーデータを踏まえた開発なら、ユーザーの反応と行動を、数字やログで把握しながらプロダクト作りを進められます。どうすればもっと使ってもらえるのか、データをもとに仮説を立て、その結果をまたデータで検証する、という試行錯誤が可能です。
結果として、「頑張って作ったが価値が生まれず無意味」などのつらい思いをすることが少なくなりますし、数字を見ることで「ユーザーの役に立っている」「貢献できている」という実感を持てています。 
また、データ分析するたびに「こういうインサイトがあったんだ」と新しい発見があるのも楽しいです。
データドリブンな開発が「超楽しいか」は人それぞれだと思いますが、個人的にはデータを見ながら一歩ずつ進められるので、進んでいる実感から「モチベーションの維持」につながっています。
<h2>カスタマーデータを分析して開発した2つの実例</h2>
──齋藤さんは普段、どのようなプロダクト開発をしているのでしょうか。具体的に教えてください。
<h3>【例1】RightSupportの利用状況を分析して機能を追加・改善</h3>
齋藤：
私たちのメインのプロダクトである<a href="https://rightsupport.karte.io/">RightSupport</a>で、まさにカスタマーデータドリブンな機能開発・改善をしています。
Web上のユーザー行動を解析できるKARTEの計測タグをRightSupportの管理画面に埋め込んで、「ユーザーがどの機能を、どのくらい、どのように活用しているのか」といった利用状況を精緻に分析し、それをもとに開発をしています。
例えばRightSupportユーザーが管理画面で何をしているかを、KARTEのダッシュボードで集計する分析です。（下図）
<img src="https://ik.imagekit.io/righttouch/9b6e997e-ca16-4790-8fc9-8921af58fb70/qddash.png" alt="qddash.png">
この分析では、機能ごとに「何が使われて、何が使われていないか」がわかるので、作った機能の定量的な振り返りができます。機能追加・改修の際には、エンジニアとビジネスメンバーが一緒にダッシュボードのデータを見て、「どんな機能にすれば使われやすいのか」を話しあうこともよくあります。
ちなみに裏側の仕組みとして、ダッシュボードに自然にデータが溜まっていく構造にするため、エンジニアが誰でも気軽にイベント（※分析対象の行動のこと）を追加できるよう工夫しています。具体的には、管理画面のコードを数行調整するだけです。ダッシュボード側の集計操作をいじらなくても、自動で新しいカテゴリごとのイベントを集計・可視化できます。
<h3>【例2】KARTE Liveで有事では現れにくいユーザーの行動を分析</h3>
──既存機能ごとの利用状況をデータで見れるのは便利ですね。
齋藤：
はい。とはいえ、定量的なデータだけでは、ざっくりした利用状況はわかっても、細かいUIの使いづらさなど、数字に現れにくい部分の把握は難しいです。
そこで私たちは、不定期で「クライアントのKARTE Liveを見る会」を実施しています。
<a href="https://karte.io/product/live/">KARTE Live</a>とは、ユーザーのWebサイト上での行動を、マウスの動きまで含めて動画再生できるプロダクトのことです。Liveを見る会では、エンジニアとプロダクトマネージャの各メンバーを中心に、RightSupportの特定の機能を使っているクライアントのLive動画をひたすら見ていきます。 
※Liveのマスキング機能を用いて必要以上の管理画面行動データは取得せずに行っています
<img src="https://ik.imagekit.io/righttouch/33892a23-633e-4c3a-a568-0357d23564fa/live.png" alt="live.png">
その後、機能ごとに気になるクライアントの行動をピックアップして、気づきをまとめて議論します。
<img src="https://ik.imagekit.io/righttouch/2c013f6a-16d7-48f3-9808-62644e927dce/live%E3%82%92%E8%A6%8B%E3%82%8B%E4%BC%9A.png" alt="liveを見る会.png">
実際に上の図でお見せしているKARTE Liveを見る会では、「レポート・分析画面にデータが入っていないと、クライアントがすぐに離脱してしまう」という、定量データでは気づかなかった課題を発見できました。
この発見をもとに、レポート・分析画面にデータが入りやすくするよう集計やUIの見せ方を工夫するプロダクト改善を行えました。
<h2>評価が数字で表れるのが魅力</h2>
──RightTouchでプロダクト開発をしていて良かったと思うことはありますか？
齋藤：
プロダクトとともにエンジニアとしても成長して行けるところです。
数字を見ながら開発を進めるので、入社したときに比べて、データを見る力や分析力、仮説を立てる精度ともに上がったと実感しています。もちろん、開発のスキルも向上しました。開発者として必要な力が身についてきていると思います。
──カスタマーデータドリブンな開発の&quot;やりがい&quot;は何ですか？
齋藤：
先ほどもふれましたが「ユーザーの反応がわかる」ところです。
私たちが取得しているデータのなかには、「自分が開発した機能が利用してもらえているか」も含まれています。そのデータを見れば、ユーザー使ってもらえていることが数字でわかるので、作ったかいがあったなと実感できます。「自分が作った機能が誰にも使われていないのでは？」と確認できないままの疑心暗鬼状態では、作りがいを感じにくいですよね。
設計からデプロイまで各社員の裁量にゆだねられる部分が大きいチームであるからこそ、ユーザーの役に立ったときには、その評価が明確に数字として表れるのがRightTouchでのカスタマーデータドリブンな開発の魅力です。
<h2>プロダクトの「おもしろさの確度」をぐっと高められる開発環境</h2>
──齋藤さんから見て、RightTouchの開発はどんな人に向いていると思いますか？
齋藤：
一言で表すと「プロダクト志向」の人に合っていると思います。
RightTouchは作りたいプロダクトや機能があったときに、すぐにデータ分析やヒアリングなどを通じて仮説検証をしつつ、現場のエンジニア主導で開発を進められる環境が整っています。そのため、「おもしろいプロダクトを作りたい」人にとっては、理想の会社ではないでしょうか。本当に「おもしろさの確度」を高めやすい開発環境です。
「どうやったらお客様が喜んでくれるプロダクトに成長させられるか」を考えながら試行錯誤することを楽しめる人がいたら、ぜひ一緒に開発を進めていきたいですね。
<h2>一緒に働くメンバーを募集中</h2>
RightTouchでは、開発を一緒に進める新たなメンバーを募集しています。
顧客と企業の接点として貴重な場であるカスタマーサポートにおいて、顧客体験の向上、そして従業員体験の向上を目指して事業とプロダクトを展開しています。
カスタマーデータを活用してインパクトのあるプロダクトを作りたい方や、妥協しないチームの一員として挑戦してみたい方は、ぜひご応募ください。
${RECRUIT_LINK}
また、Wantedlyでもエントリーを受け付けています。応募を悩まれている方は、まずはブックマークを登録ください。 
${WANTEDLY_LINK}
新しい仲間に出会えることを楽しみにしています。

RightTouchの「カスタマーデータドリブンな開発」についてテックリードへ話を聞きました

プロダクトとともに自分も成長する。RightTouchのテックリードが語る「カスタマーデータドリブンな開発」とは

RightTouchの社内技術勉強会で話した「良いHTML、CSSの書き方」について紹介します。

Blog

Recent Article

プロダクトとともに自分も成長する。RightTouchのテックリードが語る「カスタマーデータドリブンな開発」とは

社内技術勉強会で「良いHTML、CSSの書き方」について話しました

Archives

Writers