フロントエンドプラットフォームエンジニア

事業内容

株式会社HEARTBEATSは、「世界を鳴らす心臓であれ。」をフィロソフィーに掲げ、スポーツ・エンターテインメント領域で、世界中の人々の心を動かす新たな体験をファンの皆さまに届け続けることを目指しています。

現在、当社は公式電子トレカ®コレクションサービス「ORICAL®（オリカル）」を、プロ野球10球団を含むスポーツ・エンタメ領域の26のパートナーとともに展開しています（2026年8月時点）。

会社サイト
会社説明資料

電子トレカ®︎ コレクションサービス 「ORICAL®（オリカル）」

「ORICAL®」は、スポーツチームやアーティストなどのIPとファンをつなぎ、新しい応援体験を生み出す公式電子トレカ®コレクションサービスです。

スマートフォンの位置情報を利用した「会場限定トレカ」の配布や、試合展開と連動したリアルタイムコンテンツの提供など、それぞれのIPの特性やファンの楽しみ方に合わせたデジタル体験を企画・開発しています。

電子トレカ®を集める楽しさにとどまらず、ファンの応援や熱量を新たな体験と収益機会につなげることで、ファンエンゲージメントの向上とIPの事業成長に貢献しています。

電子トレカ®コレクションサービス「ORICAL®（オリカル）」

主なパートナー・導入サービス（一部）

株式会社西武ライオンズ（L COLLECTION）
公益財団法人日本相撲協会（大相撲コレクション）
株式会社千葉ロッテマリーンズ（MARINES COLLECTION）
株式会社ヤクルト球団（スワローズトレカ）
株式会社中日ドラゴンズ（ドラゴンズコレクション）
株式会社スターダム（スターダムカードパーティー）
株式会社楽天野球団（イーグルストレカ）
株式会社北海道日本ハムファイターズ（ファイターズトレカ）
オリックス野球クラブ株式会社（Buffaloes TRADING CARDS COLLECTION）
株式会社広島東洋カープ（CARP TRADING CARDS）
株式会社アップフロントインターナショナル、株式会社アップフロントクリエイト（Hello! Project デジタルコレクション）
株式会社円谷プロダクション（ウルトラマンデジタルカードコレクション）
一般社団法人Mリーグ機構（M.LEAGUE OFFICIAL TRADING CARDS）
株式会社スターダストプロモーション（スタコミュプロデュースコレクション）
新日本プロレスリング株式会社（新日CARD RUMBLE）
東芝ブレイブルーパス東京株式会社（BRAVE LUPUSデジタルトレカー猛勇狼士録ー）
株式会社クリエイティブオフィスキュー（CUEコレ！）
アソビシステム株式会社（SUKISUKIトレカfor PEAK SPOT）
公益財団法人日本バドミントン協会（BAJ COLLECTION）
株式会社阪神タイガース（タイガースコレクション）
株式会社kt sports（wiz collection）
トヨタヴェルブリッツ（ヴェルトレ）
株式会社ネットドリーマーズ（ウマトレカ）

募集背景

HEARTBEATSでは、スポーツ・エンターテインメント領域のパートナーとともに、電子トレカ®コレクションサービス「ORICAL®（オリカル）」を開発・提供しています。

「ORICAL®」は、パートナーごとに異なるブランドやファン体験を、一つのプロダクト基盤から提供しています。カードや動画、アニメーション、ゲーム要素などを取り入れたリッチなUIを、各パートナーの特性に合わせて展開できることが強みです。

一方、サービスの成長に伴って、パートナー固有のコンポーネントや設定、提供機能が増加し、コードベースやビルド・デプロイ、品質保証の複雑性も高まっています。

これまではフロントエンドチームが機能開発と並行して改善を進めてきましたが、今後も継続的かつ安全にプロダクトを成長させるためには、個別の機能開発だけでなく、フロントエンド全体を支える基盤への継続的な投資が必要です。

そのため、フロントエンド基盤を専任で担う一人目の「フロントエンドプラットフォームエンジニア」を募集します。

業務内容

「ORICAL®」のフロントエンド開発を支える基盤の整備と改善を担当していただきます。

Webパフォーマンス、ビルド・デプロイ、テスト、モニタリングなどの課題を可視化し、優先順位の策定から設計・実装、チームへの展開、効果検証までを一貫してリードするポジションです。

目の前の技術的負債を解消するだけではなく、フロントエンドチームがより速く、安全に、継続的に価値を届けられる開発環境をつくることをリードいただきます。

具体的な業務

① Webパフォーマンスの改善

• バンドルサイズ、表示速度、レンダリングパフォーマンスの計測・改善
• カード画像、動画、アニメーション、大量のDOM要素を扱う画面のパフォーマンス最適化
• メモリ使用量やフロントエンド上の不具合の調査・改善
• パフォーマンス指標の設計および継続的なモニタリング

② 開発基盤・開発者体験の改善

• ビルド時間やCI/CDパイプラインの計測・高速化
• 複数のパートナーへ安全かつ効率的にリリースするための仕組みづくり
• ローカル開発環境や開発ツールの改善
• フレームワークや周辺ライブラリの継続的なアップデート
• 開発時に生じる反復作業の自動化

③ 品質保証・テスト基盤の整備

• ユニットテスト、インテグレーションテスト、E2Eテストの方針策定
• Jest、Vitest、Playwrightなどを用いたテストの設計・実装
• 手動テストへの依存を減らすための自動化
• 影響範囲の大きな変更を安全に行える仕組みの整備

④ フロントエンドアーキテクチャの改善

• コードベースやコンポーネント構成の分析・改善
• パートナー固有の要件と、プロダクト共通基盤を両立する設計
• 技術的負債の可視化と、段階的な改善計画の策定
• フロントエンドチームへの設計方針や知見の共有

※これまでのご経験や専門性を踏まえ、優先度の高いテーマから順に担当いただくことを想定しています。

開発環境

言語：TypeScript/JavaScript
フレームワーク：Vue/Nuxt.js
ソースコード管理:Git
プロジェクト管理：GitHub/Jira
情報共有ツール：Slack/Google Docs/Confluence

ポジションの面白さ

「一つの機能をつくるだけでなく、チーム全体がより速く、安全に開発できる状態をつくりたい」
「繰り返し発生する問題に対処するのではなく、仕組みから解決したい」
「プロダクトの成長によって生まれた複雑な技術課題に、腰を据えて向き合いたい」

そんな方にとって、これまで培ってきたフロントエンドの専門性を活かしながら、プロダクトと開発組織の両方に大きな変化を生み出せるポジションです。

① 基盤改善を主役として推進できる
基盤改善をを「余裕があるときに取り組む改善」ではなく、継続的なプロダクト成長に欠かせない仕事として担っていただきます。決められた改善タスクをこなすだけではなく、現状を計測・分析し、何から取り組むべきかを考え、ロードマップの策定から設計・実装、チームへの展開、効果検証までを一貫してリードできます。

② 改善の成果が、ユーザー体験とチームの開発体験の両方に届く
表示速度やレンダリングパフォーマンスを改善すれば、ファンがカードや動画、アニメーションをより快適に楽しめるようになります。ビルドやテスト、デプロイの仕組みを改善すれば、開発チームが新しい機能や体験を、より速く安全に届けられるようになります。
自らの改善が、日々一緒に働くエンジニアの開発体験を変え、その先にいるユーザーの体験と事業の成長にもつながっていく。技術的な成果の広がりを実感できる仕事です。

③ リッチなUIと複数パートナーへの展開を両立する、「ORICAL®」ならではの技術課題に挑戦できる
「ORICAL®」では、カード、動画、アニメーション、バインダー、ガチャ、ランキングなど、ファンが楽しめる多彩な体験を提供しています。
また、同じコードベースをもとに、各パートナーのブランドやファン層に合わせて、異なるデザインや機能を展開しています。
高度にカスタマイズされたUIを実現しながら、表示速度、保守性、再利用性、開発効率をどのように両立するか。一般的なWebサービスとは異なる、複雑で解きごたえのある課題に向き合えます。

④ 成長したプロダクトを、さらに進化させる経験ができる
「ORICAL®」は、すでに多くのユーザーに利用され、継続的に新しい機能が追加されているプロダクトです。そのため、理想的な基盤をゼロから自由につくるわけではありません。
日々のサービス提供や機能開発を止めることなく、既存のコードや設計、チームの開発プロセスを理解し、優先順位を見極めながら段階的に改善していく必要があります。
簡単な仕事ではありませんが、成長を続けるプロダクトを安全に進化させ、次の数年を支える土台をつくる経験ができます。

必要な経験／スキル

• Webフロントエンド開発経験：5年以上
• TypeScriptを用いたWebアプリケーション開発経験
• 次のいずれかに関する設計・改善の経験
  • Webパフォーマンスの計測・改善
  • ビルドまたはCI/CDパイプラインの改善
  • テスト自動化・テスト基盤の整備
  • 大規模なコードベースのリファクタリング
• VueやReactのフレームワークや関連ライブラリのソースコードリーディングの経験
• 技術課題を整理し、関係者と合意形成しながら改善を推進した経験

歓迎する経験／スキル

• Vue.js／Nuxtを用いた大規模なWebアプリケーションの開発経験
• Jest、Vitest、Playwrightなどを用いたE2Eテスト設計・実装の経験
• Sentry、Datadogなどを用いたフロントエンドの監視・分析の経験
• 大量のDOM要素や画像、動画、アニメーションを扱うUIのパフォーマンスチューニング経験
• フロントエンド基盤チームの立ち上げやテックリードの経験

こんな人と働きたい

• スポーツやエンターテインメント領域に関心を持ち、プロダクトへの理解を深められる方
• 技術的負債を一度に解消しようとするのではなく、現実的な改善計画を立てて継続的に取り組める方
• フロントエンドチームや他職種のメンバーと対話しながら、仕組みを定着させられる方
• 課題を定量・定性の両面から捉え、改善前後の効果を検証できる方
• 業務で学んだ経験を自らに閉じず、他者と積極的に共有できる方
• 他者志向で物事に取り組める方
• 環境の変化を楽しみながら、挑戦や価値観のアップデートができる方