『メルカリ ハロ』の成長を加速させる最重要タッチポイント、「はたらくタブ」はこうしてつくられた

2024年3月のリリースから1ヶ月で登録者数が250万人を突破し、加速度的に成長を続けている空き時間おしごとサービス『メルカリ ハロ』。新規サービスがこれほどまで多くの方に受け入れていただいたのにはいくつか理由がありますが、その“入口”のわかりやすさにも要因があったと考えています。

フリマアプリ『メルカリ』に、6つ目のタブとして通称「はたらくタブ」が追加されたことにはお気づきでしょうか?「はたらくタブ」は、スポットワークとのタッチポイントがこれまでなかったりする方のための入口であり、ふだんのメルカリを使う体験に延長線上でかんたんにおしごとを探すことができる機能です。この「はたらくタブ」とともに、「働く」に特化した機能が充実するアプリを同時展開することで、「だれでも、すぐに、かんたんに」働けることの実現を目指してきました。

しかし、6つ目の「はたらくタブ」の追加には大きな議論がありました。新しい機能が組み込まれることで、普段『メルカリ』を使い慣れているお客さまの体験を毀損をしかねないからです。しかし、「はたらくタブ」は、この日本のおける人手不足の社会問題を解消し、かつ事業の成否に直結する重要なタッチポイントでもありました。この単に“入口“をつくる以上のチャレンジに取り組んだ、「はたらくタブ」の開発メンバーにプロジェクトを振り返ってもらいました。そこから見えてきたのは「All for One」というメルカリのバリューでした。

この記事に登場する人


  • 曹楨(Godric Cao)

    大学卒業後、新卒で村田製作所に入社しSoftware Engineerを経験。2015年に楽天に入社し、Global Point Platformの開発を担当した後、スタートアップ企業で越境EC事業全般の立ち上げや旅行記サービスの開発を行う。2017年11月にメルカリグループに参画し、「メルペイ」の立ち上げに従事。決済、ID、KYC、加盟店、Growth等グループの基盤系チームのEMとMoMを経験。2023年11月から「メルカリ ハロ」の新規事業立ち上げに従事し、現在メルカリ執行役員 VP of Engineering Workを務める。


  • 加月宗一郎(Soichiro Katsuki)

    GMOペパボ株式会社など数社で動画配信サービス、ホスティングサービス、ECサービスなど複数のサービスの開発・運用を経験。2022年4月にメルカリグループに入社し、メルカリShopsの開発・運用やWeb版メルカリの機能追加などを担当した後、メルカリ ハロの「はたらくタブ」の開発プロジェクトにフロントエンドのテックリードとして参画。自宅にサウナがあるサウナ沼の住人。



  • 呂明倍 (Mingbei Lu)

    2023年11月にメルカリに入社。前職ではfreee株式会社で約3年間、企業向け決済サービスの開発リーダー兼エンジニアリングマネージャーを務めた。現在は「Mercari Hallo」プロジェクトのエンジニアリングマネージャーとして、チームのパフォーマンスとプロダクト品質の向上に努めている。主にはたらくタブ、メルカリ ハロアプリ、及び事業者向け管理画面の開発を担当している。


事業成否の鍵を握る「はたらくタブ」

——そもそものところから伺いたいのですが、「はたらくタブ」はつくることは初期段階から決まっていたのでしょうか。

@godriccao:「はたらくタブ」の議論自体はかなり初期から継続して行われてきました。「はたらくタブ」そのものというより、『メルカリ ハロ』という事業自体はやることが決まった後に、その展開の仕方についてかなり議論になりました。単独のアプリ(以下、クルーアプリ)のみで行くのか、メルカリアプリの中に6つ目のタブとして組み込んで同時展開するかを中心に議論されました。最終的には、成功する事業をつくるために「はたらくタブ」とクルーアプリの両方をつくることになりました。『メルカリ ハロ』は人手不足の社会問題を解決していくものであり、この2つを同時に展開したのは、市場リーダーを目指すために必要なことだからです。

曹楨(@godriccao)

——「はたらくタブ」は、フリマアプリを日常的に使っているお客さまにとって、UX面での大きな変化があると思うのですが、一番議論になったポイントはなんだったのでしょうか?また、その課題をどのように解消していきましたか。

@godriccao:やはりタブが増えることによって、操作ミスはしやすくなるとは思います。Apple
のHuman Interface GuidelinesのBest practicesでは、iOSのタブ数は5つまでと言われています。また、クルーアプリと6つ目の「はたらくタブ」を両方つくること自体はコストではあります。

では、なぜ両方必要なのかというと、それぞれの役割が違うからです。初めて使う方やライトな層には「はたらくタブ」が入口となり、メルカリアプリで気軽に仕事を発見・探すことができます。スポットワークを積極的に取り組みたいヘビーな層にとっては、クルーアプリのほうが日常的に仕事が探しやすい。また、これまで他の競合サービスも使われていた方にとっても使いやすいものとなっています。


「はたらくタブ」はスポットワークとのタッチポイントがこれまでなかったりする方のための入口であり、オンボーディングとしても機能しますが、もう少しヘビーに活用されるお客さまにはユーザー体験を重視するべきですし、やはりリピートしていただくためにはサービスそのものを第一想起が必要なので、クルーアプリが必要だと考えました。それぞれの層にちゃんとリーチできることが、この事業の成功には不可欠だし、私たちがつくりたい世界観を構築するうえでも不可欠なんですいね。メルカリアプリに「はたらくタブ」をつくるという意思決定自体が、Boldかつ『メルカリ ハロ』の可能性を信じているという思いの現れであり、グループとしての本気度の高さの裏付けです。

@lvmingbei:私が入社した2023年の11月時点で、既に「はたらくタブ」の開発はけっこう進んでいました。私の観点から見ると、「はたらくタブ」とクルーアプリを同時に展開したのは、おもに2つの意味があると考えています。

まずはUX面。メルカリの既存のお客さまが慣れ親しんでいるアプリ内であれば、『メルカリ ハロ』へのアクセスがとても容易です。新しいアプリをダウンロードする手間もなく、メルカリで求人の情報を探したり、簡単に迅速に応募することが可能になります。メルカリ ハロのスローガンである、「だれでも、すぐに、かんたんに」に応えるものです。

もうひとつは、メルカリには既に月間2,000万人以上のアクティブユーザーがいるということです。かつ、多くのお客さまが本人確認(eKYC)を完了している状態です。そうした既存のお客さまに活用いただくことで、『メルカリ ハロ』の迅速な認知拡大が期待できると思います。

——UXを毀損する可能性については、どのような対策がなされたんですか?

@lvmingbei:先ほどもAppleのBest practicesの話がありましたが、メルカリアプリ本体に6つ目のタブを追加するのがそもそもアンチパターンです。メルカリアプリ本体への影響は図りきれないので、いきなり全開放をすることはせず、さまざまな可能性を考慮した上で、定例のミーティングを通じてロールアウトの計画を立てていきました。

メルカリのアセットをフル活用して、「All for One」に短期間でやりきった

——リリースするにあたり、関係各所との連携がかなり肝となりそうですが。

@zuckey:そうですね。まず、開発に関わったメンバーの多くは私を含めマーケットプレイスに所属しているメンバーで、『メルカリ ハロ』の専属というわけではなく、もともとバラバラのチームに所属しているメンバーが、自分たち所属するチームでの仕事を止めて「はたらくタブ」に最優先でコミットする即席チームでした。また、基本的にはエンジニアは英語話者で、かつ日本語が喋れないメンバーがほとんどだったため、基本的にミーティングは英語で行いました。『メルカリ ハロ』側のチームは日本語メインで仕事を進めているため、連携が必要なときに自分が窓口になることが多く苦労しました。そもそも、テックリードとして大きなプロジェクト入ることも初めての経験で、最初はかなり不安だったしストレスもありました…。

また、ログインまわりの仕様を意思決定するにはステークホルダーが本当に多く、IDP チームやWeb Platform チームなど、いろんなチームとともに議論を進めていき、採るべき手法が決まった後にも、複数のチームがそれぞれさまざまなレイヤーの設定などを管理しているため細かな認識のズレがあったりしました。複数のチームを跨いで、毎日SlackやGoogle Meetなどで遅くまでやりとりして、翌朝に動作確認して、その日のうちに上手く動いていない箇所を特定して設定変更などを依頼して…というようなことを2週間にわたって繰り返して、なんとかスマートフォンの実機で開発環境が動かせるようになって年末を迎えれたという感じでした。本当にメルカリの「All for One」というバリューがあるからこそ、多くのチームの献身的な協力に支えられて短期間でリリースすることができたと思います。

加月宗一郎(@zuckey) ※この日は福岡からリモートで取材に参加

@godriccao:マーケットプレイスはかなり英語ベースでチームのコミュニケーションが行われていて、バイリンガルのメンバーも相当限られています。そこにzuckeyさんはエンジニアリングまわりの窓口の役割になって、コミュニケーションをとりながら上手く進めてきてくれました。単純にグループ間のヘルプだけだとプロジェクトの推進力が足りなくなるので、そこはzuckeyさんの献身的な立ち回りや提案がなければ難しかったと思います。

@zuckey:あと、集まったメンバーはそれぞれiOS、Android、Web Frontendを専門とするエンジニアでしたが、WebViewを一から開発した経験があるメンバーはいなかったため、WebView特有の問題を深く認識できていなかったところがありました。特に苦労したのが権限まわりですね。通常のWeb開発と、位置情報やカメラなど権限を要求するWeb APIの挙動が異なってしまったため、開発開始当初は位置情報の取得処理が複数の問題を抱え、許容できないレベルの挙動になってしまっていました。

最も致命的な問題として、OSの位置情報サービスを切っていると、位置情報取得処理がエラーにもならずに永遠に終わらないという問題が発生したのでsetTimeoutで無理やり回避することにしました。その上で、QAエンジニアとも連携しながら位置情報取得APIの本来のタイムアウトとsetTimeoutの値とを微調整していきました。現時点でも、いくつか課題が残っているので、UX改善を目的にネイティブアプリに位置情報取得処理を移植予定です。

——WebView特有の問題は、開発に携わったエンジニアたちにとっても初めての経験だった?

@zuckey:そうですね。『メルカリShops』でのWebViewの経験はありましたが、WebViewとして提供しているのは購入に関連する機能のみなので、位置情報やカメラなどの権限は必要ありませんでした。このあたりの問題をWebとして実装としたのは今回がおそらく初めてだと思います。

@godriccao:まさにここはかなり苦労されていた印象です。このトピックは「はたらくタブ」の課題というより、短期間の開発かつ技術的な違いがあるから、リリースまでに最大限まではできていなかった。時間をかけたら多分解決できた問題ではあったと思うけど、とにかくタイムラインが短かったんですね…。

@lvmingbei:ステークボルダーとのコラボレーションという意味では、この事業は短期間で企画からリリースまでは走り切ったので、メルカリのアセットが活用できたのと難しかった部分はそれぞれはあります。

メルカリのアセットが活用できた部分は、これまでメルカリが11年間かけて積み上げた技術の基盤やノウハウ、特に『メルカリShops』の技術スタックを活用して、基盤の部分はけっこう早く構築できました。あと、テスト環境周りや、CI/CDやメルペイの決済基盤がしっかり整っていたので、『メルカリ ハロ』のための新しい機能を追加することができました。

逆に難しかった部分は、メルカリ自社のPRC(Production Readiness Check)*対応が難しかったですね。『メルカリ ハロ』は給与や、お客さまの個人情報を扱うので、重要度のレベルは最も高いLevel Aになります。チェック項目は1️00以上もおよび、負荷試験も1年先のピークを想定してパスしなければならないんです。Work SRE チームやWeb Platform チームのメンバーに、負荷負荷試験まわりや、サーバーのキャパシティプランニングなどに「All for One」に協力していたもらい、何とか乗り越えることができました。
*サービスを本番にリリースする前に、社内の Production Readiness Check を通す必要があり、本番環境で動くマイクロサービスが満たすべき項目がチェックリストとしてまとめられている。すべて満たされていることを確認することで、サービスは Production Ready な状態であると判断される
参考:メルペイでのマイクロサービス開発プロセス〜メルカード編〜

——1年以上先のピークを想定するんですね!

@godriccao:そもそもPRC自体がかなり高いレベルを求められていて、かつ『メルカリ ハロ』は成長角度の高い事業だから、いま想定してるシナリオよりも速いスピードで成長した場合に耐えられる構成にしておかないといけないんですね。

私の視点からお話しすると、これまでメルカリでさまざまな技術基盤系のチーム(Payment Platform, Partner Platform, KYC, Growth Platform, IDP)に参画してきたこともあり、今回ほとんど全てのチームに協力してもらいました。なので、すごく支えられたという実感があるし、彼らのおかげで開発スピードと品質が両立できたんだと思います。

——今回、技術的なチャレンジだったポイントについても、改めて伺いたいと思います。

@zuckey:Next.jsのApp Routerという新しい仕組みを恐らく社内で初めて導入しました。Next.jsには従来から使われていたPages Routerという仕組みがあるのですが、将来的に縮小されていくリスクがあり、新たに推奨されているApp Routerを採用しました。まだ社内の技術的な制約などもあって、細かい機能をフルで活用しきれてないのですが、Pages Routeよりも細かくパフォーマンスチューニングはしていけるので、今後より活用していければユーザー体験をさらに向上していけると考えています。

@lvmingbei:大量なアクセスが来た場合も快適なユーザー体験を維持するために負荷試験(パフォーマンステスト)を行いました。そのパフォーマンステストのおかげで、ローンチしてわずか1ヶ月で登録クルー数が250万が超えましたが、サーバーの利用率は10%未満で余裕を持たすことができています。

呂明倍 (@lvmingbei)

——「Go Bold」に取り組んできた結果として、かなり良い手応えを得られていると感じですか?

@godriccao:タブの存在があるからこそ勢いのある数字は出ていて、タブからの流入は相当強い。クルーの6割以上がスポットワーク初体験であり、サービススタートから1ヶ月で登録クルー数250万人達成にもつながっています。

これからの全国展開のことを考えると相乗効果はすごく良い。単独アプリのダウンロードを待つ、お客さまにリーチできなかったり、というところはあるので、このタブ自体の存在はすごく大きいですね。

パートナーとクルーの新しい出会いを繋ぎ、仲間と大きな成功を掴みたい

——では最後に、『メルカリ ハロ』はこれから何を変えていくのでしょうか?皆さんの野望やビジョンを教えてください。

@lvmingbei:まずは働き方の柔軟性の向上ですね。育児や介護など、いろんな事情で働き方が限定されている方たちが多くいて、そうした人たちの柔軟な働き方が可能になるということが私たちが目指すことの一つ。あとは新しい就労形態をつくりたい。従来のアルバイトとかパートタイムとは異なる、新しい労働市場を改革していきたいという思いがあります。

いま、日本の人手不足は深刻な社会問題になっています。私たちエンジニアにとって、技術力で社会問題を解決することが一番の醍醐味だと思っています。新しい労働市場を改革を通じて、社会的にインパクトを出すのが自分のエンジニア生涯でやりたいことです。

@zuckey:「はたらくタブ」をつくっていくなかで、Work事業のミッション「あたらしい出会いを繋ぎ、信頼と機会をひろげる」を強く意識するようになりました。「はたらくタブ」の存在によって、お客さまが初めてお仕事に触れるところだと思うので、UXを改善してどんどん使いやすくしていきたいです。すべてのメルカリのお客さまが対象となるので、新規事業でありながら、とてもインパクトが大きいので、その分プレッシャーも大きいです。けれど、同時に面白さも感じてます。

あとは、完全に個人的な話ですけど、学生時代からバーテンダーに憧れがあるので、求人が出たらぜひ働いてみたいです(笑)。

@godriccao:まさにふたりのおっしゃる通りなので、改めて言うことがないのですが(笑)、「あたらしい出会いを繋ぎ、信頼と機会をひろげる」というミッションがやっぱり実現したい世界そのもの。そこで「はたらくタブ」は、スポットワークの世界の入口としては非常に重要で、この事業の成否に係るものといっても過言ではないと思います。

メルカリには、2,300万人以上のお客さまがいらっしゃるし、これまでに蓄積されてきたデータも相当あります。そうしたアセットをベースに、この事業のもっと成長させられる可能性が十分にあります。そして、パートナー(事業者)とクルー(メルカリ ハロを利用するお客さま)の新しい出会いを繋ぐことで、それぞれの可能性を広げていきたいんですね。

そのためには仲間の存在が不可欠です。『メルカリ ハロ』は、これからできる領域がまだまだたくさんあります。フロントエンド領域を含めて、バックエンド、SRE、QA…言ってしまえば、ほぼあらゆる技術領域ですね(笑)。この事業で仲間たちと大きな成功を掴みたいと思っています。

ちなみに、自分は『メルカリ ハロ』を使って、人生で初めて居酒屋でバイトしました(笑)!

関連記事 サクッと読める!✨

「Mercari Summer Internship 2022」の募集を開始しました! #メルカリな日々

メルペイ初!QAエンジニア育成&インターンシッププログラム「Merpay QA Summer Training Camp 2022」の募集を開始します! #メルカリな日々

「Mercari Summer Internship 2021」の募集を開始しました! #メルカリな日々

関連記事 読み応えアリ✨