# 概要
アパレルECにおける 「ささげ(撮影・画像加工・商品登録)」 業務全体を効率化するプラットフォームのフロントエンドの 0→1 開発。
マネキンを用いた撮影画像をAIでモデル着用画像へ生成する機能を核とし、撮影依頼からレタッチ、納品、EC掲載までのワークフローを一元管理することで、B2Bクライアントの大幅な業務効率化を実現するWebアプリケーション。
# 主な取り組み
・フロントエンドのアーキテクチャ設計・実装(0→1)
・認証基盤の技術選定・実装(Auth0)
・テスト戦略の策定・環境構築(Vitest, Testing Library, Chromatic)
・デザインシステム・デザイントークンの設計(デザイナー連携)
・CI/CDパイプラインの構築(GitHub Actions / パッケージ更新フロー整備)
・要件定義・仕様策定への参画 ・アジャイル開発におけるプランニング・チームリード
# 工夫した点
## 認証機能の設計・実装:
セキュリティと拡張性を重視し、認証基盤としてAuth0を選定。
フロントエンド側のDesign Doc(設計書)を作成してアーキテクチャを定義した後、設計から実装までを一貫して担当。
-> 結果: セキュアな認証基盤を初期段階から確立し、スムーズな開発進行に貢献。
## テスト戦略の策定と導入:
0→1フェーズにおいて、持続可能な品質担保の仕組みを作るため、以下の通りテストレイヤーを定義し、チーム全体の標準として導入。
・Visual Regression Test(外観・レイアウト): Chromatic
・Unit Test(ロジック): Vitest
・Component Test(振る舞い): Storybook の Storyを活用し、Vitest + React Testing Library を組み合わせたテストを実装
-> 結果: 視覚的なデグレとロジックの不具合を多層的に検知できる環境を整備し、リファクタリング耐性の高いコードベースを構築。
## デザインシステム設計とチームリード:
デザイナーと協業し、デザイントークンの設計段階から参画することで、デザインと実装の乖離を防止。
また、仕様策定やアジャイルプランニングにおいてフロントエンドチームを主導。
-> 結果: フロントエンドチームの開発方針を統一し、仕様の曖昧さを排除したスムーズな実装フローを実現。