#プロジェクト経験概要
県内の学び直し講座・就転職支援情報を一元的に管理・提供するポータルサイトの開発プロジェクトに参画しました。行政主導で運営される本サービスは、通信事業者が受託開発・運用を担当しており、私は開発支援チームの一員として、主にフロントエンドの設計・実装・リリース・保守を担当しました。
#チーム情報
• チーム構成:バックエンドエンジニア1名、デザイナー3名、フロントエンド3名(ポータル・管理システム)
• 使用技術:React, TypeScript, Figma, AWS(S3/CloudFront), Vite
• 開発体制:Gitでのコード管理/Backlogでのタスク進行、Teamsでの連携
#開発・実装内容
【概要】
Figmaで支給された画面設計をもとに、React + TypeScriptでの画面実装を担当。アクセシビリティや行政サービス特有の文言表現、導線の分かりやすさにも配慮しながら開発を進めました。
【課題】
• デザインに未定義のUI状態(例:disabled/hover時/バリデーションエラー状態)が多数存在し、そのままでは実装できない
• モーダル遷移や複数の外部リンク・問い合わせ導線のUXが曖昧で、ユーザーが迷いやすい構成になっていた
【打ち手/工夫】
• 状態バリエーションを洗い出し、Figma上に存在しないUI状態については、過去の類似画面やUX原則を参考に仮案を提示
• デザイナーと1対1でコミュニケーションを取り、想定されるユーザー行動を踏まえて仕様を明文化
• 問い合わせボタンが複数個所に存在していた点に着目し、ユーザー視点で導線を再設計。1クリックで到達できる動線を提案し、反映させる
【成果】
• 不明確だった仕様を自ら明確化し、実装可能な状態に整理したことで、手戻りなくUIを完成させた
• デザインチームとのすり合わせ力が評価され、他画面でも仕様調整役を任されるようになった
• フロントエンド実装後のUI整合性が高く、レビューの指摘は最小限で済んだ
#開発・実装内容:共通コンポーネント設計と保守性向上
【概要】
プロジェクトでは再利用性の低い個別実装が散見され、保守性が課題となっていたため、共通化・効率化を目的としたコンポーネント設計を行いました。
【課題】
• ページごとに似たUIがバラバラに実装されており、仕様変更時の修正コストが高い
• スタイリングの一貫性がなく、見た目のばらつきがUX低下の原因になっていた
【打ち手/工夫】
• ボタンやテキストフィールド、バリデーションメッセージなど、頻出パターンをピックアップし、Atomic Designの考え方を一部取り入れてコンポーネント化
• propsで柔軟に状態切り替えが可能な設計にし、業務委託のメンバーでも使いやすいドキュメントを整備
• Storybookは導入されていないプロジェクトだったため、mdx形式で簡易カタログを自作し、チーム内で共有
【成果】
• 以降の開発で他メンバーが新規ページを構築する際、共通部品を活用することでコーディング量を大幅に削減
• コンポーネント間の整合性が高く、デザイナー・PMからの評価も向上
• 実装ルールの可視化と標準化に貢献し、属人性を軽減する体制づくりに寄与
⸻
■ その他実施内容
• AWS S3へのビルド成果物のアップロードおよびCloudFrontキャッシュのクリアを自ら対応し、フロントエンドのリリースフローを一通り経験
• 公開後も軽微な改修やパフォーマンス改善の要望に継続対応中