Webエンジニア（デザインシステム担当）

必須

• Webフロントエンドの開発実務経験（目安3年以上）と、設計・品質改善を自律的に進めた経験
• TypeScript／JavaScript、HTML、CSSに関する実践的な知識と開発経験
• Reactを用いたプロダクト開発経験
• 再利用可能なUIコンポーネントおよび公開APIを設計・実装した経験
• 既存利用者への影響や後方互換性を考慮して、ライブラリや共通機能を改善した経験
• ユニットテストを含む自動テストの設計・実装経験
• GitHubを用いたチーム開発、コードレビューおよびCI/CDの運用経験
• AWSおよびDockerを利用した開発経験
• デザイナーや他職種と協働し、曖昧な要件を技術仕様へ落とし込んだ経験
• 技術的な課題を自ら整理し、関係者と合意形成しながら解決まで進めた経験

歓迎

• デザインシステムまたはコンポーネントライブラリの開発・運用経験
• Next.jsまたはWeb Componentsを用いた開発・組み込み経験
• Storybookを用いたコンポーネントのドキュメント作成、レビュー、テストの経験
• npmパッケージ／モノレポの設計、ビルド、公開、バージョン管理の経験
• デザイントークン、Figma、Style Dictionaryなどを用いたデザインと実装の連携経験
• WCAG、WAI-ARIA、キーボード操作、スクリーンリーダー対応などのアクセシビリティ実装経験
• Playwrightやビジュアルリグレッションテストを用いた品質保証の経験
• SSR環境や複数ブラウザを考慮したコンポーネント設計経験
• 技術ドキュメント、ガイドライン、コーディング規約を策定・改善した経験
• 複数チームを横断する共通課題の解決や導入支援を主導した経験

求める人物像

• デザインシステムを「作って終わり」ではなく、利用者とともに育てたい方
• UIの見た目だけでなく、意味、使いやすさ、アクセシビリティ、実装品質に関心がある方
• デザイナーとエンジニア双方の視点を尊重し、曖昧な要件を対話によって具体化できる方
• ライブラリ利用者への影響や後方互換性を考え、長期的な保守性を大切にできる方
• 変化やフィードバックを楽しみ、小さく試しながら継続的に改善できる方
• 自身の知見をドキュメントやレビューを通じて共有できる方

使用ツール

メッセージ

• プライム市場上場のSaaS企業であるインフォマートで Webエンジニア（デザインシステム担当）職を募集いたします！
• 私たちは、すべてのプロダクトに「インフォマートらしさ」と「意思」を宿し、作り手もユーザーもその価値を感じられる世界を目指しています。デザインシステムを単なるUIパーツ集ではなく、プロダクトとして継続的に育て、複数の開発チームへ届けていく仕事です。
• デザイナー、プロダクトオーナー、各プロダクトの開発者と協働しながら、共通UI基盤の品質と開発者体験を高めていきたい方をお待ちしています。

仕事内容

• 本ポジションは、組織上はイネイブリングチームに所属し、その中でデザインシステムを担当するWebエンジニアです。BtoBプラットフォームの複数プロダクトで利用されるデザイントークンおよびReactコンポーネントの設計・開発・テスト・リリース・運用を担当していただきます。
• 見た目を揃えるだけでなく、アクセシビリティ、後方互換性、保守性、ドキュメント、導入体験まで含めた品質に責任を持ちます。また、利用するプロダクト開発チームからのフィードバックを収集し、デザイナーとともに継続的な改善を進めます。

コンポーネントライブラリの開発・運用

• TypeScript／Reactによる再利用可能なUIコンポーネントの設計・実装
• Figmaで定義されたデザイン意図を、型安全で保守性の高いAPIとコードへ落とし込む
• デザイントークン、アイコン、CSS Custom Properties、Reactコンポーネントのパッケージ開発
• Storybookによるコンポーネントカタログと利用ドキュメントの整備
• npmパッケージのバージョン管理、リリース、後方互換性の維持

品質基盤の整備

• Vitest／Testing Libraryを用いたユニットテストの設計・実装
• Storybookを活用したビジュアルレビュー、変更影響の確認
• ESLint、Prettier、Stylelint、Markuplintなどを用いた品質管理
• WCAG／WAI-ARIAを考慮したアクセシブルなコンポーネントの設計・実装
• GitHub Actionsを用いたCI/CDパイプラインの改善と安定運用
• パフォーマンス、SSR、ブラウザ互換性を考慮した実装

デザインシステムの導入・利用支援

• 各プロダクト開発チームから寄せられる質問、改善要望、不具合への対応
• プロダクト固有UIと共通コンポーネントの責任境界の整理
• 導入ガイド、実装パターン、チュートリアルの作成
• コードレビューやペア／モブプログラミングによる技術支援
• 利用状況やフィードバックを基にした開発者体験の改善

デザイナー・開発者との協働

• デザイナーとコンポーネントの仕様、バリアント、振る舞い、制約を検討
• デザインレビューとコードレビューを通じたデザインと実装の乖離防止
• プロダクトオーナーと連携したバックログの整理、優先順位付け、リリース計画
• スクラムイベントへの参加と、検査・適応による継続的なチーム改善

開発環境

• 利用言語：JavaScript、TypeScript、HTML、CSS
• ミドルウェア：AWS、Docker
• フレームワーク等：React、Next.js、Web Components、Vitest、Playwright、Storybook
• パッケージ・ビルド：pnpm、Vite、Changesets、npm
• その他：Figma、GitHub、GitHub Actions、GitHub Packages、GitHub Pages、ESLint、Prettier、Stylelint、Markuplint 等

この仕事の魅力について

• 1. 複数プロダクトに横断的な価値を届けられる
• 一つの実装が複数のプロダクトで再利用され、UIの一貫性と開発速度の向上に直接つながります。
• 新規サービスにはフル適用、既存サービスには状況に応じた適用という現実的な戦略のもと、組織全体への浸透を進められます。
• 2. デザインとエンジニアリングの境界で専門性を磨ける
• デザイナーと対話しながら、見た目だけでなく意味、振る舞い、API、アクセシビリティまで含めて設計できます。
• ライブラリ設計、パッケージ配布、後方互換性など、アプリケーション開発とは異なる技術的課題に挑戦できます。
• 3. 開発者体験と組織の生産性に影響を与えられる
• コンポーネント、ガイドライン、ドキュメント、サポートフローを通じて、プロダクト開発者の認知負荷を下げられます。
• 利用チームのフィードバックを受けて、デザインシステムそのものをプロダクトとして改善できます。
• 4. 技術的な裁量
• コンポーネント設計、テスト戦略、リリースフロー、開発ツールの改善を主体的に提案・推進できます。

身につけられるスキル

• TypeScript／Reactによる汎用コンポーネントと公開APIの設計スキル
• デザイントークンから実装・配布までをつなぐデザインシステム開発の知識
• アクセシビリティ、テスト自動化、ビジュアル品質管理の実践力
• npmパッケージのビルド、バージョン管理、リリース、後方互換性設計
• デザイナーとエンジニアの協働を促進するコミュニケーション・ファシリテーション能力
• 複数チームへの導入支援と技術ドキュメンテーションのスキル

オンボーディング・サポート体制

• 入社後は、当社の事業・プロダクト構成、デザインシステムの戦略と利用状況、チームの役割を共有するオンボーディングを実施します。
• 技術面では、既存のコードベースとアーキテクチャ、デザイントークン、コンポーネント設計方針、テスト・CI/CD・リリースフローなど、プロジェクト固有の情報をキャッチアップしていただきます。
• 既存メンバーやデザイナーとのコードレビュー、デザインレビュー、ペア作業を通じて、小規模な改善から担当範囲を広げていただきます。習熟状況に応じて、新規コンポーネントの設計・開発や各プロダクトへの導入支援をお任せします。

働き方（ワークスタイル）

• 出社とリモートワークを組み合わせたハイブリッドワークを導入しています。
• 出社は平均して週3日程度です。チームビルディング、コンポーネント仕様の検討、デザインレビュー、ホワイトボードを使った複雑な議論など、対面コミュニケーションが効果的な場面でオフィスを活用します。

チーム構成

• チームメンバー　9名 年齢層　30歳代 男女比　男性6名、女性3名