Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
先生と一緒に プロダクトを良くする アナリティクス機能の開発
Search
meijin
June 20, 2023
Programming
0
67
先生と一緒に プロダクトを良くする アナリティクス機能の開発
meijin
June 20, 2023
Tweet
Share
More Decks by meijin
See All by meijin
Technical Decisions and Reflections on "Test Maker" After Two Years of Development
texmeijin
1
21
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
25k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
3
1.7k
サービス黎明期にNuxt.js v2からNext.js移行を決めた理由と進め方
texmeijin
0
360
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
1.1k
個人開発がおすすめな理由
texmeijin
3
950
弊社の開発体験の良いところは?メンバーに訊いてみた!
texmeijin
0
380
初めてESLintプラグインにコントリビュートした話
texmeijin
0
150
ハードルが激低な社内勉強会を続けている話
texmeijin
0
5.4k
Other Decks in Programming
See All in Programming
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
630
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
500
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
380
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
7
1.5k
動作確認やテストで漏れがちな観点3選
starfish719
5
860
カンファレンス動画鑑賞会のススメ / Osaka.swift #1
hironytic
0
200
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
190
functionalなアプローチで動的要素を排除する
ryopeko
1
920
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
8
1.3k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
140
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
140
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
120
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
RailsConf 2023
tenderlove
29
980
How to train your dragon (web standard)
notwaldorf
89
5.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Adopting Sorbet at Scale
ufuk
74
9.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Building Adaptive Systems
keathley
39
2.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
For a Future-Friendly Web
brad_frost
176
9.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
600
Transcript
先⽣と⼀緒に プロダクトを良くする アナリティクス機能の開発 株式会社NoSchool CTO @meijin
TL; DR - オンライン家庭教師マナリンクで2023年5⽉1⽇にリリースした 「アナリティクス機能」について説明します - マナリンクはtoCサービス特有の特性があり、 「先⽣と⼀緒にプロダクトを良くしていく」という考え⽅があります - その考えに基づいて開発、リリース、運⽤していく⼀連の流れを
説明していきます
⾃⼰紹介 - 名⼈|マナリンクCTO(https://twitter.com/Meijin_garden) - 「オンライン家庭教師マナリンク」を開発 - TS(React, Vue)、PHP(Laravel)、AWSあたりが主戦場 - ほどよいLaravel×DDDを模索するのが好き
- わけわからん低レイヤーのバグを踏んでも気合で解決するのが得意 - 2023年現在Zennで⼀番Likeがついている記事の著者(React) - 趣味:将棋、カメラ、ラム酒、筋トレ、⾼校野球観戦(どれも布教したくて仕⽅がない) - 娯楽:ゼル伝、流⾏りのアニメを⾒る、国内旅⾏
オンライン家庭教師マナリンクについて
オンライン家庭教師マナリンクとは https://manalink.jp/
マナリンクの機能① 「先⽣検索‧お問合せ機能」
マナリンクの機能② 授業予定、売上、宿題管理機能
今回のスコープ 今回は①の検索‧お問合せ機能のために、 先⽣⽅に提供したアナリティクス機能のお話をします 1. サービスが抱える構造的な課題 2. マナリンクにおける「プロダクト」の定義 3. アナリティクス機能の開発 4.
リリース後のサポート体制
サービスが抱える構造的な課題
検索‧お問合せ機能が抱える構造的な課題 - 先⽣が⾃⾝のプロフィールや指導内容を記載した指導コースを ⾃分で作成‧編集して公開 - SNSのようなCGM(Consumer Generated Media)の⼀種 - CGMの構造的な問題として、コンテンツの質がコントロールしきれず
バラバラになってしまう - 先⽣の情報の質がバラバラだと‧‧‧ - 保護者様から⾒たときに、先⽣の魅⼒が伝わらなかったり、混乱を招く - SEO的にもよくない
検索‧お問合せ機能が抱える構造的な課題 - でも、⼀⼈ひとりコンテンツ内容を都度都度レビューするのは コストが⼤きすぎる((先⽣の⼈数×平均指導コース数)回のレビュー) - 先⽣の魅⼒を伝えるメディアでありながら、コンテンツをコントロールする コストを抑えて事業をスケールさせたい
そこでどうするか - 先⽣が⾃発的にコンテンツを改善していける仕組みが必要 - どういうプロフィールや指導コースだと保護者様に刺さるか? PDCAを回せるようにしたい - つまり、⾃⾝が公開しているプロフィールや指導コースがどの程度⾒られて おり、コンバージョンに繋がっているか把握できればPDCAを回せる!
マナリンクにおける「プロダクト」とは
ユーザー(保護者様)から⾒たときの「プロダクト」とは - 開発者視点では作っているソフトウェアがプロダクト、と考えがち - ただし特にCGMのような特性を持っているサービスにおいては ソフトウェアの上に載っているコンテンツ、 マナリンクでは先⽣の情報や魅⼒的な⾃⼰紹介⽂も含めて 保護者様から⾒ればマナリンクという1つの「プロダクト」に⾒えている
保護者様から⾒たときの「プロダクト」とは https://manalink.jp • サイトは⾼速か? • デザインは⾒やすいか? • 検索しやすいか? • 検索軸が多様かつ⼗分か?
• その他機能性は⼗分か? • ページ遷移は滑らかか? • etc 先⽣⽅のプロフィールページ • 顔写真の印象は? • 経歴は? • 指導実績は? • ⾃⼰紹介動画の内容は? • 指導コース内容が ⾃分にもわかりやすいか? • etc
よりよいプロダクトにするには - ソフトウェア開発を頑張るだけではなく、 先⽣⽅と⼀緒にマナリンクというプロダクトを作っていく
アナリティクス機能の開発
アナリティクス機能の提供
アナリティクス機能の特徴 - 期間ごとにアクセス数の増減がわかる - アクセス元⽐率がわかる(同サイト内か、SNSか、検索エンジンか) - 指導コースごとにアクセス数とCV(お問合せ)数がわかる
アナリティクス機能の特徴 以上から、 - 内容を改善したから徐々にアクセス数が増えているとか - 先週からTwitterを頑張っているからSNS経由の流⼊増えたとか - 指導コースの書き⽅を変えたからCVRが上がったとか 先⽣⾃⾝の活動の結果が⼀部数値化されて⾒ることができる。 余談ですが、アクセス元⽐率は開発メンバーが提案して追加することになりました。
技術的な解説
アーキテクチャ概観 保護者様はWebまたは アプリでアクセス Laravelで標準出⼒に アクセス情報をJSON出⼒ →fluentbitでS3へ流す S3に吐き出されたJSONを Athenaでクエリする。 ⽇次バッチで集計し、 RDSに⼊れておく
先⽣が管理画⾯から アクセス数を閲覧
技術的なポイント - toCなので突発的にアクセスが増えたときに不要な負荷を掛けたくない - アクセス記録は直接DBに書き込まずスケールしやすい標準出⼒→S3 - もともと標準出⼒はJSONで吐く運⽤だったので S3に吐き出してそのままAthenaでクエリするところまでスムーズに組めた - アクセス元を収集するためにReferrerを活⽤し、
CSR/SSR両⽅で収集するのが少し⼤変だった - フロントはReactで組んでいるが、 `@tanstack/react-table`や`victory`を利⽤して爆速実装
ここ気になる⽅ 懇親会で訊いてください!!!!!!
リリース後のサポート体制
先⽣向けにアナリティクス機能⾃体の勉強会を実施 - 数値だけ⾒せても改善できるかは別 - 機能の勉強会を実施して、 SEOの基礎知識も込みで伝える - 週1回のペースで実施 - ⼀⼈ひとりに属⼈的にレビューするよりも
N⼈に対して勉強会1〜2hで済むので 効率性はUpしている
SEOの考え⽅から、数値を⾒ての改善プロセスを提⽰
Twitter上での先⽣の反応
先⽣がマナリンクの考え⽅を汲み取ってくれました
まとめと告知
まとめ - toCのサービスかつ、ユーザーがコンテンツを掲載するサービスでは ユーザーの協⼒なしに「良いプロダクト」にはなりえない - ユーザーの協⼒を得るには、良い機能の開発と、ユーザーに浸透させる 取り組みの両輪が必要 - マナリンクの場合は、先⽣に協⼒して頂く形でプロダクトを改善している -
先⽣がTwitterに取り組むので、機能開発に対する感想に触れられる
告知!いきなり採⽤をしています!って⾔ってもハードルが⾼いので‧‧‧ 弊社メンバーと勉強会 or ボルダリングしませんか?(実績多数) React/TypeScript/Laravel/PHP/DDD周りでの 1時間程度の勉強会@御茶ノ⽔オフィス またはオフィス徒歩5分に国内最⼤級の ボルダリング場があります!ので、そちらでも!
ご清聴ありがとうございました!