こんにちは。ソウゾウのSoftware Engineerの @naopr です。
連載：「メルカリShops」プレオープンまでの開発の裏側 の5日目を担当します。

はじめに

このエントリでは、メルカリShopsを構成するシステムの中でもお客さまの目に直接触れることのないCS(Customer Service/Success)オペレーション用のシステムについてご紹介します。
CSオペレーション用のシステムをメルカリグループでは CSツール と呼んでいるため、このエントリでもその呼称を使うこととします。

はじめにメルカリShopsのCSオペレーションの概要についてご説明したあと、システムのアーキテクチャと技術スタックについてご紹介します。そして、CSツールの基盤機能と各オペレーション用の機能について、実際の画面をご覧いただきながらご説明します。
※画面は開発環境のものでありテストデータを表示しています。

メルカリShopsのCSオペレーション

メルカリShopsのCSオペレーションは大きく3つに分かれます。

• ショップ・購入者さまからのお問い合わせ返信
• 出店審査
• 違反商品の通報対応

詳細は後ほどご説明しますが、CSツールはこれら3つのオペレーションを行うための機能を提供します。

アーキテクチャと技術スタック

CTOの@suguruが メルカリShopsの技術スタックと、その選定理由 でご紹介したようにメルカリShopsのアーキテクチャは上のようになっています。
CSツールはメルカリShopsのアプリケーションとは独立したNext.jsのフロントエンドを持つ以外はアプリケーションと同じBFF(GraphQLサーバー)、Microservicesを参照しており、CSツールでのみ必要なバックエンドも独立したMicroservicesとして実装されています。

CSツールのフロントエンドで採用している技術スタックについてはアプリケーションと同様のものです。これはアプリケーションとCSツールで共通の機能を実現しやすいことや、技術スタックを合わせることでキャッチアップコストを下げられることが理由です。

詳細については後日別のエントリで公開予定なので、楽しみにお待ち下さい。

基盤機能

CSオペレーションを行うためにCSツールに求められる機能要件をご説明する前に、基盤となる機能についてご説明します。

認証認可

CSツールはCSオペレーターにPCブラウザ用のWeb UIを提供しますが、誰でも利用できてしまっては困ります。ですので、認証・認可の機能を実現する必要があります。

今回、認証にはGoogle OAuthを使い、認可は自前でMicroservicesにロジックを実装しました。

認可のロジックとしてドメインのチェックとオペレーター登録がされているかどうかのチェックを行っており、オペレーター登録はCSToolの機能として簡易なものを実装しました。

もちろんオペレーター登録機能を使用できるのはオペレーター登録済のユーザーに限られるため、勝手に自身のアカウントをオペレーター登録することはできません。
※余談ですが、1人目のオペレーターを登録する際にはこの機能を誰も使うことができないためDBに直接INSERT文を打ちました

オペレーションログ

オペレーションを行う中で、特定のお客さまや商品に対して過去行われたオペレーションの履歴を確認したいシチュエーションがあります。また、セキュリティーや監査の観点からも「いつ」「誰が」「何に」「どんな」オペレーションをしたかを検索しやすい形で保存しておくことには大きな価値があります。

メルカリShopでは、CSオペレーターによって行われた更新処理をGraphQLサーバーでログ出力し、Cloud Logging経由でDBに保存しています。

各オペレーションに対応した機能

ここからは、各オペレーションに対応した機能の実装についてご紹介します。
冒頭で触れたように、メルカリShopsのCSオペレーションは大きく3つに分かれます。

• ショップ・購入者さまからのお問い合わせ返信
• 出店審査
• 違反商品の通報対応

それぞれについて順にご説明します。

お問い合わせ返信

メルカリShopではショップさまからのお問い合わせに返信するオペレーションがあります。
直接のやりとりはZendeskを介して行っていますが、問い合わせいただいた内容によってはショップさまの情報をCSツールを介して確認して問題解決を図る必要があります。

お問い合わせ返信のためのCSツールの機能は2つで、1つはショップ名やメールアドレス等を指定して該当のショップを検索する機能です。

もう1つは、ショップの詳細情報をまとめて表示する機能です。

あらゆるお問い合わせ対応に必要な情報を1ページに集約することで、オペレーションの難易度を低減し高効率化を図っています。そのぶん多くのMicroservicesからデータを取得する必要がありますが、必要なMicroservicesへのアクセスはBFFが担当しているため、フロントエンドからはqueryを発行して表示するだけで複雑なロジックを書かずにコードをシンプルに保てています。

ページ中ほどにある事務局メモとは、今後同じショップさまへの対応を行うCSオペレーターに引き継ぎたい内容を書き残す用途で使用しており、フリーテキストで入力できます。
※ただし、個人情報にあたる情報は残さないルールになっています

出店審査

メルカリShopsでは、ショップを開設いただく際に出店申し込みをしていただき、CSオペレーターが申込内容のチェック等を行う出店審査というオペレーションがあります。

このオペレーションを行うために、CSツールには審査一覧ページと審査対応ページの2つがあります。

審査一覧ページは、審査が必要な申込みの一覧を申込日時の古い順に表示するだけの簡易なページです。CSオペレーターは「詳細」ボタンを押して審査対応ページで実際の審査対応を行います。

審査対応ページにはショップさまに申し込みいただいた内容を表示しており、その情報をもとにCSオペレーターが審査OK/NGを判断します。NGになった場合にはその理由を事務局メモに残す運用を行っています。
なお、このメモは各審査でなくショップにひもづくメモとして保存されるため、もしショップさまが一度審査却下となってしまい再度審査を申し込んでいただいた場合には、その審査対応ページに前回審査時に残したメモが表示されます。

違反商品の通報対応

安心・安全なマーケットプレイスを保つために、メルカリShopsの利用規約に反している商品がないかチェックするオペレーションがあります。
通報には、お客さまから報告していただくものとシステムで自動検知するものの2種類があり、その両方をCSオペレーターが確認して必要に応じて商品の削除を行います。

このオペレーションを行うために、CSツールには通報一覧ページと通報対応ページの2つがあります。

通報一覧ページは、通報のカテゴリとステータス（未対応・対応完了・対応不要）で通報を検索できるページです。通報日時の古い順に表示されるため、CSオペレーターは基本的に上から順に「通報日時」リンクから通報対応ページに遷移して対応を行います。

通報対応ページでは、通報の内容と商品の情報を確認して必要に応じて商品の削除を行います。また、場合によってはその商品に紐づく取引をキャンセルすることもあります。

商品の削除を行う場合には、事務局メモに商品をなぜ削除したのかの情報を残しておくことで商品を出品しているショップさまからお問い合わせを受けた際にもスムーズに返答を行うことができます。

おわりに

メルカリShopsのCSオペレーションを支える内製ツールについてご紹介しました。

サービスの機能と同様、MVP(Minimum Viable Product)を意識して開発したものにはなりますが、ショップさまや商品が増えてくるにあたって初期要件から落とした機能の優先度が上がったり（例：ページング）、実際にオペレーションが始まることで新たに必要な機能が見つかったりと、CSメンバーと密にコミュニケーションをとりながら開発を進めています。

まだまだ立ち上げフェーズの混乱のさなかですが、お客さまと向き合いよりよいUXを一緒に作ってくれるエンジニアを大募集中です！
ご応募いただける方は こちら 、まずはカジュアルに話してみたいという方は こちら からご連絡ください。

また、2021/08/18から2021/09/28にかけて 「ソウゾウ TECH TALK」 というイベントが開催されます。テーマを分け、技術的な知見を共有しあうことを目的とした勉強会です。興味のある方はぜひご参加ください！

明日は「メルカリShopsのためのWebViewの技術」というタイトルでSoftware Engineerの@gentleが登場予定です。お楽しみに！