tuchi

＃プロジェクト経験概要 県内の学び直し講座・就転職支援情報を一元的に管理・提供するポータルサイトの開発プロジェクトに参画しました。行政主導で運営される本サービスは、通信事業者が受託開発・運用を担当しており、私は開発支援チームの一員として、主にフロントエンドの設計・実装・リリース・保守を担当しました。 ＃チーム情報 • チーム構成：バックエンドエンジニア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キャッシュのクリアを自ら対応し、フロントエンドのリリースフローを一通り経験 • 公開後も軽微な改修やパフォーマンス改善の要望に継続対応中