ID:82711さん

▼担当業務 全社共通デザインシステム（8122-cheese）の新規構築プロジェクトにフロントエンドとして参加。コンポーネントの設計・実装に加え、VRT・CI/CD・Figma Code Connect・MCPサーバー・Vite+ へのツールチェイン移行など、長期運用のための基盤整備を担当（現在も進行中）。 ▼詳細 - UIコンポーネントの設計・実装 - Visual Regression Testing (Playwright + Docker) 基盤の整備と Cloudflare R2 連携 - CI/CD パイプラインの構築（PRタイトル検証、パスフィルタ、cacheベース VRT、Turbo SCM BASE） - Cloudflare Pages へのプレビューデプロイ基盤構築（Basic認証ミドルウェア含む） - Vite+（統合ツールチェイン）への全面移行（Turborepo 廃止・pnpm v10・Astro 6・oxlint/oxfmt・tsdown ビルド） - Figma Code Connect 全コンポーネント対応（Figma上のコンポーネントとコードを1対1で紐付け） - Cheese MCP サーバーの新規実装（AIエージェントにデザインシステム情報・Code Connect情報を提供） - Claude Code Skills の整備（デザインシステム開発側 / 利用プロダクト側） 社内に複数プロダクトがある中、それぞれのトーンが揃っておらず、同じ会社のプロダクトとして見られにくい状態でした。今後のプロダクト拡大を見据えると、ブランドの一貫性がさらに崩れていくリスクがあり、単なるUI統一ではなく事業拡大の基盤としてデザインシステムをゼロから構築するプロジェクトが立ち上がりました。 デザイントークンの策定はデザイナーが主導し、自分はその上に乗るエンジニアリング側を担当。短期間でコンポーネントを設計・実装しつつ、複数プロダクトに影響が出るデザインシステムの特性を踏まえ、見た目のデグレを自動検知する VRT を Playwright + Docker で整備し、スナップショットは Cloudflare R2 に保存して PR コメントに差分画像を表示するフローまで構築しました。あわせて Cloudflare Pages へのプレビューデプロイ・リリースフローも整え、デザインシステムの更新が各プロダクトに届くまでの一連の流れを整えました。 新しい取り組みとして、統合型ツールチェイン Vite+ への全面移行を推進し、Turborepo を廃止、pnpm v10 / Astro 6 / oxlint / tsdown ビルドへと刷新。開発体験の向上と保守・拡張性を確保しました。さらに Figma Code Connect を全コンポーネントに適用し、Figma とコードを1対1で紐付けた上で、独自に Cheese MCP サーバーを実装してAIエージェントがデザインシステムの仕様とCode Connect情報を直接参照できる状態を作りました。「デザインシステムを作ってもドキュメントが読まれず使われない」という従来の課題に対し、AIエージェントがデザインシステムを正しく扱える状態を作る、AI駆動開発時代を見据えた運用の形を模索しています。 現時点ではデザインシステムの共通基盤部分の構築が一段落し、各プロダクト向けの拡張・適用フェーズに移行。実プロダクトへの導入も進んでおり、デザインシステムで最も難しいとされる「採用を広げる」フェーズまで到達しています。新規プロジェクト 8122-photo-frontend の立ち上げでも、ここで整備した Skills / Code Connect / MCP を前提とした開発体制が標準化されつつあります。

▼担当業務 社内管理画面群（社内向け：React + Laravel、園向け：React + Go）の改善プロジェクトに メンバーとして参加。フロント・バックエンド問わず改修全般を担当し、13種類のイベント パターンに対応する撮影依頼画面の全面リプレイスを中心に、資料参照・メール改修・日報フォーマット変更など FE/BE 連動の実装を幅広く行った。 ▼詳細 - 社内向け管理画面（React + Laravel）の機能改善・保守開発 - 園向け管理画面（React + Go）の機能改善・バックエンド改修 - デザイナー主導で立ち上がったβ版デザインシステムの実装・運用 - 撮影依頼画面（園の先生が撮影日・撮影内容を指定する画面）の全面リプレイス （運動会・入学式・プール・発表会・ハロウィン・餅つき・豆まき・遠足・クリスマス等、 13イベント種別の詳細閲覧コンポーネントを openapi 定義から実装まで一気通貫で整備） - 撮影依頼の編集機能を新規追加 - 資料タブ・前年撮影参照機能の追加（権限制御・依頼変更期間超過アラート含む） - 「研修カメラマン / 車案内 / 車必要」の識別 UI を FE/BE 連動で新設 （概要ページ・サイドメニュー両方に警告表示） - カメラマン日報フォーマットの FE/BE 同時変更（非報告時は非表示など） - タイムスケジュールフォームの分割送信設計 - 社内部署 / 登録者向けメールの大改修（Figma 準拠の文言、GA4 リンク、BCC 除去、 未登録時の考慮） - アラート・文言・5分刻み入力など管理画面の UX ブラッシュアップを継続的に実施 社内で運用していた複数の管理画面はオペレーション工数が膨らんでおり、エンドユーザー である園側にも使いにくさが生じていました。チーム内にフロントエンド専門のメンバーが いない中、社内ステークホルダーとの定例で業務ドメインをキャッチアップしながら、 画面とバックエンドのロジックを行き来して業務フロー全体を意識した改善を進めていきました。 園向け管理画面では、未経験だった Go を学びながらバックエンド改修にも入りつつ、 並行してβ版デザインシステムの構築に関わり、フロントエンド経験者不在の中で デザインシステムを実務で動かせる状態に落とし込みました。 中心的に取り組んだのが撮影依頼画面の全面リプレイスです。1画面ながら入力項目が多く、 13種類のイベントパターンに対応する必要がある複雑な画面でしたが、β版デザインシステムを 活用して再設計し、各イベント種別の openapi 定義と詳細閲覧コンポーネントを短期集中で 実装。さらに既存依頼の編集機能を新規追加しました。 依頼画面の周辺機能として、前年撮影の参照（前年のイベント・タイスケ・撮影日を引き継げる） や資料タブ・権限制御、依頼変更期間を超過したあとの未定アラート、研修カメラマンや 車案内・車必要といった現場情報を概要ページとサイドメニュー両方で識別できる UI を FE/BE 連動で整備。カメラマン日報のフォーマット変更も FE/BE 同時にリリースしました。 社内部署 / 登録者向けの各種メールも Figma 準拠の文言・GA4 リンク付きに刷新し、BCC を除去、 未登録時の表示も考慮。タイムスケジュールのフォームを分割送信形式に再設計するなど、 UX 上の積み残しも継続的に潰していきました。 結果として、社内オペレーションの工数削減を実現。撮影依頼画面では園側の入力手順や ミスが減り、編集機能により再依頼コストも解消されました。園側から「使いやすくなった」 というポジティブな反応も得られ、社内改善にとどまらずエンドユーザーの体験向上にまで 届く成果となりました。また、このとき構築したβ版デザインシステムがその後の全社 デザインシステムの土台として採用され、プロジェクトスコープを超えた組織的な成果にも 繋がりました。

▼担当業務 カメラマン向け写真納品ツールのWeb化プロジェクトにフロントエンドとして参加。 既存リポジトリのモダン化・バリデーション設計・納品管理基盤構築・旧ツール廃止まで、 機能実装だけでなく技術基盤の刷新まで幅広く担当。 ▼詳細 - 既存リポジトリのモダン化（TypeScript 5 化、Vitest 導入、ESLint に jsx-a11y / tailwind プラグイン追加、prettier + tailwind プラグイン、node/vite アップ） - MUI から Tailwind CSS への部分移行の提案・実施（ADR 記載） - Zod + exifreader による写真バリデーション基盤の設計・技術検証・本格導入 - 写真納品機能の React 実装（plimit で並列バリデーション、jpeg ヘッダー可変読込、 解像度 / exif / 撮影日 / 重複 / スナップ・集合写真区別まで対応） - お泊まり保育など業務ドメインに合わせた exif 警告の緩和ルール実装 - 納品管理 API の新規設計・実装（migrator + core BE + FE 連携、納品期限・他カメラマン 現着状況の表示、納品後の直リンクアクセス遮断） - 旧納品ツール（Electron）の完全廃止（ルーティング削除・API 遮断・メール文面変更・ 再納品メールをカメラマンにも送信） - 段階的リリース（社内先行公開 → フィードバック反映 → 本番リリース）の設計・運用 カメラマンの業務ツールが Web サイト（撮影日程確認・日報送信）と Electron 製 デスクトップツール（写真納品）に分かれており、Electron 側は開発者の離脱・ コード署名証明書の失効により保守不能な状態でした。バグ修正などもできず、 カメラマンの業務を止めかねないリスクを抱えていたため、納品機能を既存 Web サイトに 取り込んで業務を一本化するプロジェクトが立ち上がりました。 メンバーとしての参加でしたが、割り振られたタスクをこなすだけでなく、基盤整備や 技術選定に自ら手を挙げて担当しました。まず本格的な機能実装に入る前にリポジトリの バージョンアップを行い、TypeScript 5 化・Vitest 導入・ESLint に jsx-a11y / tailwind / textlint の各プラグインを追加するなど、技術的負債を整理して開発のしやすさと拡張性を 確保しました。この時の話は会社のプロダクトブログに書いています https://productblog.sencorp.co.jp/entry/2025/12/15/100000 続いて、既存の MUI から Tailwind CSS への移行を提案・実施。Web 側は MUI で作成されて いましたが、Figma DevMode MCP の体験が良いことなどを理由に、部分的な Tailwind 導入を 決定しました。MUI との共存で不具合が発生する場面もありましたが、対処しながら実際の 開発で使える状態に落とし込みました。 機能実装では、写真納品時のバリデーション要件に対して Zod を使った技術検証から着手。 スキーマベースで型安全と保守性を両立できる感触が得られたため本格導入し、 React で納品機能を構築しました。plimit で並列実行することで体感速度を大きく改善し、 jpeg ヘッダーの可変読込、解像度 / exif / 撮影日 / 重複のチェック、スナップ写真と 集合写真の区別、お泊まり保育時の exif 警告緩和など、業務ドメインに踏み込んだ バリデーションルールを実装しました。 あわせて「納品報告」とは別に「納品そのもの」を管理する API を migrator・core BE 側でも 新規設計し、FE・BE 連動で納品期限や他カメラマン現着状況の表示・納品後の直リンク アクセス遮断まで構築。最終的に旧 Electron 納品ツールを完全廃止するところまで一気通貫で 対応しました（ルーティング削除・API 遮断・メール文面変更・再納品メールを カメラマンにも送信）。 リリースではリスクを抑えるため、まず社内向けに先行公開する期間を設け、 フィードバックを素早く反映する改善サイクルを回してから本番リリースに踏み切りました。 結果として、写真のバリデーションにかかる時間を従来の 1/10 に短縮。アップロードは ブラウザ経由になった分わずかに遅くなったものの、バリデーション側の改善幅がそれを 大きく上回り、納品フロー全体として大幅な高速化を実現しました。段階的リリースで 改善を重ねたこともあり、カメラマンからもポジティブな反応を得られました。