HRBrainの生態系を支える フロントエンドチームの取り組み 2023/06/22 #AwEngineerMeetup 株式会社HRBrain 山口祐司

2 AGENDA ● 自己紹介 ● HRBrainについて ● 抱えている課題 ● 改善の取り組み ● まとめ

自己紹介

4 自己紹介 ● ヤマグチ ユウジ（35） ○ SNS: @yug1224 ● フロントエンドエンジニア ● 三児の父 ○ 11歳、9歳、1歳 ● 趣味／興味 ○ オープンワールドゲーム ○ Home automation ○ Fediverse ● 2011/04 ソフトバンクモバイル株式会社 ○ フロントエンドエンジニア ● 2016/01 株式会社サイバーエージェント ○ フロントエンドエンジニア ● 2016/10 株式会社リクルートライフスタイル ○ フロントエンドエンジニア ○ プロジェクトマネージャー ● 2021/10 株式会社ラクス ○ アシスタントマネージャー ● 2022/08 株式会社HRBrain ○ エンジニアリングマネージャー

HRBrainとは？

6 プロダクトラインナップ

7 技術スタック

マルチプロダクト × フロントエンド の課題

9 マルチプロダクト × フロントエンドの課題 ● 各プロダクトごとのドメイン差異 ○ タレントマネジメント・人事評価・組織診断・労務管理 ○ 共通化している部分はあるが、ドメイン知識すべてを流用することはできない ● コンウェイの法則 ○ プロダクトごとのチーム構成 ○ モノレポの中でアーキテクチャが分岐していってしまう

10 マルチプロダクト × フロントエンドの課題 ● 各プロダクトごとのドメイン差異 ○ タレントマネジメント・人事評価・組織診断・労務管理 ○ 共通化している部分はあるが、ドメイン知識すべてを流用することはできない ● コンウェイの法則 ○ プロダクトごとのチーム構成 ○ モノレポの中でアーキテクチャが分岐していってしまう プロダクト横断でUI/UXの統一が難しい

改善の取り組み

● デザインシステムとUIコンポーネントライブラリ ○ プロダクト横断で共有 ○ 各プロダクトのデザイナーとフロントエンドエンジニアが管理 ● プロダクト横断のフロントエンドオフィスアワー ○ 各プロダクトのフロントエンドエンジニアが集まる会を運営 ○ 他にもプロデザ・バックエンド・テックリード軸のMTGもあり相互に連携 ○ 任意のメンバーも聞けるようにオンライン上で開催し議事録も公開 ○ 他にType-Challenge会や輪読会なども 12 改善の取り組み

13 改善の取り組み

14 改善の取り組み

15 改善の取り組み

16 改善の取り組み

なぜこの取り組みをしたのか？

18 コミュニケーション量の可視化

19 コミュニケーション量の可視化 活躍している人材ほど右上に位置

● コミュニケーション量を可視化した結果から ○ 活躍している人材ほどリアクション数・被リアクション数が多い ● コミュニケーションの活性化を促す施策が必要と判断 ○ 活躍人材の再現性を高めるのが良いと考えた ○ コミュニケーションコスト増大のデメリットもありそうだが飲み込む 20 なぜこの取り組みをしたのか？

まとめ

● HRBrainとは？ ○ HRTech SaaS企業でマルチプロダクトを展開 ● マルチプロダクト × フロントエンドの不 ○ プロダクト横断でのUI/UXの統一が難しい ● 改善の取り組み ○ デザインシステム・UIコンポーネントライブラリの整備 ○ プロダクト横断でコミュニケーションを促進する施策実行 ● 取り組みの背景 ○ コミュニケーション量の多い活躍人材の再現性を高めるため 22 まとめ

ご清聴ありがとうございました！