#プロジェクト概要
• プロジェクト名:転職プラットフォームの大規模リニューアル
• 目的:UI/UX改善による求職者・企業・エージェント間のスムーズなマッチング促進
#チーム情報
• 体制:エンジニア5名、デザイナー2名、PM1名など計10〜20名
• 役割:メンバー(エンジニア)
• 使用技術:Ruby on Rails、Next.js(TypeScript)、MySQL、Figma、StoryBook、AWS(EC2, ECS)、Docker、CircleCI、GitHub
#開発・実装内容A
• 【概要】
ページリニューアルを中心とした機能追加・修正。具体的にはフロントエンドのコンポーネント設計を再構築し、UXを最適化するとともにサーバサイドのロジックを整理。
• 【どのような機能の開発・実装か】
• フロントエンド:Next.js + TypeScriptで各ページコンポーネントをアトミックデザインで管理し、StoryBook で可視化・共有。
• サーバサイド:RailsでAPIエンドポイントをRESTfulに再整理し、認証認可を含むビジネスロジックを分割。
• 【課題・問題点】
1. 既存UIが複雑化し、ユーザー離脱が多い
2. デザイナーとエンジニア間でデザイン修正の認識齟齬が多発
• 【打ち手・使用した技術】
1. UI刷新:Figmaにデザインガイドを作成 → StoryBookでUIコンポーネントを単位ごとに切り出し → Next.jsのPagesに統合
• 技術的工夫:Atomic Designパターンを導入してコンポーネントを「Atoms」「Molecules」「Organisms」と階層的に管理。ファイル構成・命名規則をチーム内で標準化
2. デザイナーとエンジニアの連携強化:CI上でVisual Regression Testツールを試験的に導入し、スタイル崩れを自動検出
• 工夫した点:デザイナーがFigma上でコメントを付与→エンジニア側がStoryBookで該当コンポーネントを更新→CIにより差分検出→問題があればSlack通知
• 【成果】
• リニューアルの分割的、安定的な実施
#開発・実装内容B
• 【概要】
QAテストフローや開発プロセスそのものの改善提案を行い、チーム全体の開発効率アップを図る。
• 【どのような機能の開発・実装か】
• QAテスト設計のテンプレート化、自動テストカバレッジの拡充
• Ruby 3 / Rails 7 へのバージョンアップ対応
• 【課題・問題点】
1. 手動テストに依存しており、人員リソースの確保やヒューマンエラーが懸念
2. 古いRailsバージョンのまま機能追加を行うと、Gem互換性やパフォーマンス面でリスクが増大
• 【打ち手・使用した技術】
1. 既存テストの自動化率向上
• 工夫した点:CircleCIのパラレル実行を有効活用し、テスト所要時間を30%短縮
2. Railsバージョンアップ:Rails 5.2 → 6.0 → 7.0 へ段階的にアップグレード
• 工夫した点:Rails 7対応Gemの調査やdeprecatedメソッド洗い出し、アップグレードガイドの作成
• 【成果】
• QAテスト工数が減少し、他タスクへリソースを割けるようになった
• 最新Railsへの移行によりRuby 3との互換性が確保され、中長期的な保守コスト削減