自己紹介
フロントエンドを軸に、API・データベース・デプロイまで一人で立ち上げるフルスタックエンジニア
エンジニア歴 8 年半・フロントエンド 5 年半。Next.js / React / TypeScript を軸に、業務委託として複数クライアントの新規プロダクト開発・既存サービスのリニューアルに参加しています。現在は DMM.com でライブチャットサービスを Next.js へ置き換えるリプレイス案件にフロントエンドとして参画しています。前案件では自動車サービスの査定申し込み機能を担当し、リリース後はアンケート・クチコミ機能の追加開発も行いました。フルリモート歴 5 年半で、Slack を中心としたチャットコミュニケーションにより BE / デザイナー / QA と日々チーム開発を行います。Claude Code をはじめとする AI ツールを日常の開発に組み込み、実装だけでなくコードレビューやリファクタリング、テスト作成にも活用しています。担当範囲はフロントエンドに閉じず、管理画面のリニューアルでは未経験だった Go に手を挙げてバックエンドまで一通り実装し、採用サイト 2 件はエンジニア一人体制で技術選定・CMS 設計・ホスティングまで担当しました。個人開発では Cloudflare Workers + D1 / KV / R2 や Supabase の RLS まで自分で組んでいます。立教大学映像身体学科で学んだ「ユーザーの体験を起点に設計する」視点を活かし、UI 実装からパフォーマンス計測・改善まで担当。業務外でも 22 作品の個人開発を継続し、新しいフレームワークやベストプラクティスを実プロジェクトで検証しています。
ユーザー価値起点の UI / UX 設計
「画面を作る」前に、ユーザーがそのプロダクトに何を期待するかを言語化することを大切にしています。表現系の学部出身ということもあり、視線誘導・情報密度・余白・トーンといった非機能要件にこだわり、デザイナーや PM と仮説をすり合わせながら実装を進めます。Human Interface Guidelines / WCAG / shadcn のような既存ガイドラインを尊重しつつ、必要に応じてプロダクト固有のパターンを提案します。
パフォーマンス最適化と計測ベースの品質改善
Lighthouse / Web Vitals / バンドル分析を日常的に使い、「速くなった気がする」ではなく数値で語れる改善を積み重ねます。個人開発では Three.js などの重量級ライブラリの動的 import、レンダーブロッキング CSS の削減、常時 3D 描画するページの適応フレームレートなどを積み重ねてきました。22 作品のテスト総数は 17,914 件、Lighthouse Performance は計測した 19 作品の平均が 96.5（19 作品すべてが 90 点以上）で、作品ごとの計測値はポートフォリオで公開しています。チーム開発でも、Storybook・Vitest・型安全・CI/CD まで含めた DX 改善で「壊しにくいフロントエンド」を作ることを意識しています。
AI ツールの利用と、開発フローそのものの設計
業務では Claude Code / GitHub Copilot / ChatGPT / Gemini を日常の開発に組み込んでいます。コードを書かせる用途に留めず、コードレビュー・リファクタリング・テスト作成まで任せる範囲を広げ、実装したコードは必ず AI で確認して「他の人が読んで分かるか」を基準に整えてから出すようにしています。個人開発ではそこから一歩進めて、開発フローそのものを設計しています。Claude Code の個人スキルを 10 本自作し、subagent で調査と実装を並行させ、CI にテストカバレッジ 100% ゲート・Lighthouse ゲート・gitleaks・npm audit を組み込んで、AI が書いたコードを人手のレビュー前に機械で落とす形にしています。生成 AI で量を出すほど機械的な検証が要る、という前提です。業務ではまだ使う側ですが、個人で設計まで踏み込んできたため、チームへの AI 活用の導入や品質ゲートの整備を担う役割にも関われると考えています。
学習速度と自走力
新しい技術領域に対して、ドキュメント・公式リポジトリ・実プロダクトのコードを読み比べながら自分で検証する習慣を持っています。Next.js App Router、SvelteKit、TanStack Start、Vite、Tailwind CSS v4、Three.js といった複数の構成を業務外で実際に触り、得た知見をクライアント案件に持ち込んでいます。アサインされた範囲を超えて動くことを意識しており、管理画面の案件ではチームの稼働状況を相談したうえで、未経験だった Go に自主的に手を挙げ、カルテ情報の取得・削除をバックエンドからフロントエンドまで一通り実装しました。
経歴
ライブチャットサービスの Next.js リプレイス — フロントエンドエンジニア（業務委託）
- 長年運用されているライブチャットサービスのフロントエンドを Next.js へ置き換えるリプレイス案件に、フロントエンドエンジニアとして 2026 年 10 月から参画
- 開発部内のプロダクトチーム（5 名：チームリーダー、バックエンド兼インフラ、フロントエンド 2 名、バックエンド）に所属。フルリモートで、仕様のやりとりは Slack / GitHub / Jira / Confluence に残しながら進行
- 1 週間スプリントのスクラムで開発。既存画面の挙動を把握しながら、新しい構成に移す作業を担当
自動車サービス開発 — フロントエンドエンジニア（業務委託）
- 同一サービスのグロース期後半を担当（契約形態が SBテクノロジーからソフトバンクへ変更）。CVR 改善施策の実装と技術的負債の解消を継続
- アンケート・クチコミ機能を新規に設計から実装まで担当。「開始・入力・完了」を1ページ内の3コンポーネントで切り替える構成とし、画面遷移をまたぐ査定申し込みとは構成を分けて要件に合う形を選択
- ディレクターが設計した「複数社選択推奨バルーン」の表示と、その AB 検証の実装を担当。社会的証明型と直接推奨型の2パターンのコピーを実装し、リリース後の指標推移まで追跡。結果として有意な変化は見られず、この施策では効果が確認できないという結論を共有した。社内 AB 検証ツールの複数キャンペーン ID 対応も実施
- 相場比較グラフの実装、価格提示期限の表示対応など、ユーザーが判断に使う情報の可視化を担当
- ボタンが非活性のままになる不具合を、対症療法ではなく根本原因から修正
- SCSS の !important 削除、font-family 指定の整理など、リプレイス期に積み残した負債を施策の合間に返済
- 開発10名・全体13名のフルリモートチーム。仕様のやりとりや決定事項は Slack / GitHub / Jira / Confluence にできるだけテキストで残すよう心がけ、BE / デザイナー / QA と協働
自動車サービス開発 — フロントエンドエンジニア（業務委託）
- 所有車を登録すると事業者から買取価格が提示される査定サービスに、新規立ち上げのフェーズから参画。買取事業者とユーザーをつなぐマッチング事業で、査定申し込み数の獲得が事業 KPI。申し込みフォームの離脱削減と CVR 改善が開発の主目的だった。リリース前の7ヶ月で開発し、リリース後は CVR 改善と技術的負債の解消を継続（同一サービスをソフトバンク契約期間へ引き継ぎ）
- 査定申し込みの「入力・確認・完了」3ページを、詳細設計から実装・テスト・リリースまで一貫して担当。確認ページに認証コードの入力を挟む仕様で、画面をまたいで入力値を共有する必要があったため FormProvider の context を用意し、React Hook Form と zod で状態とバリデーションを一元管理
- 別チームが HTML / CSS / jQuery で実装していた画面を、React・Next.js へ置き換える作業を担当
- Next.js / React の採用は決まっていたが、チームに経験者が不在の立ち上げフェーズだったため、その上で使うライブラリの選定を主導。「他のメンバーが後から触れること」を基準に、必要最低限で API がシンプルな Jotai、情報量が多く自力で解決しやすい React Hook Form / zod、テストは Vitest / Testing Library を採用
- リプレイス時に最適化しきれなかったスタイルを、リリース後に CSS 分離として3期に分けて返済。一度に行うとリリースを止めることになるため、機能追加と並行して進められる単位に区切り、複数人で分担
- ディレクターが設計した AB 検証の実装を担当（査定スタートボタンの文言、売却希望時期アンケートモーダル）。LP を2本作成し、流入経路別の出し分けも実装
- 背中押し施策として、売却希望時期テキスト、価格提示の有効期限カウントダウン、スカウトリスト待機中のデザイン改修を実装。登録完了画面の文言変更で迷惑メール判定による離脱にも対応
- Next.js のバージョンアップ対応、使われなくなった Storybook の撤去、エラーログの出力改善、カスタムロガーの重複削除を実施
- SP のスカウト一覧で車両切替時に画像が前の車両のまま残る不具合を、一次調査から原因特定・修正・再発防止まで対応
- Claude Code / GitHub Copilot を早い段階から日常の開発に組み込み、実装だけでなくコードレビュー・リファクタリング・テスト作成にも活用。実装したコードは必ず AI で確認し、他の人が読んでも分かりやすいコードになることを意識
人事労務・モチベーション管理システム開発 — フロントエンドエンジニア（業務委託）
- 従業員のモチベーション管理サービスの新規機能を、React / TypeScript / Radix UI で開発
- UI コンポーネントの実装・ステート管理（Jotai）と、Apollo Client を用いた GraphQL 結合、Jest / Testing Library によるユニット／コンポーネントテストの追加
- 担当プロダクトのほか他プロダクトからも共通で使われる独自デザインシステムのリポジトリを管理し、新規機能に必要なコンポーネントの追加・修正も担当。自分の担当プロダクト単体ではなく、他プロダクトからも使われる前提で実装
- 開発8名・全体15名のスクラムチームで、Slack / Figma / Asana / DocBase を用いて開発
採用サイトの継続開発・運用 — フロントエンドエンジニア（業務委託）
- 正社員時代に自分が構築した採用サイト（https://recruit.caps365.jp/）を、退職後も業務委託として継続開発・運用。初回リリース時の12ページから、職種別採用ページ（医師・看護師・医療クラーク・オフィス）・アルムナイ採用・新卒採用・FAQ などを追加し、31ページまで拡張
- MicroCMS（ヘッドレスCMS）のスキーマ設計を、編集する非エンジニアが迷わない形へ継続的に調整
- リッチなアニメーションを伴うランディングセクションと、SSGform を用いた問い合わせ・応募フォームの実装
- Cloudflare Pages へのデプロイと、コンテンツ更新を伴う運用フローの整備
- 他クライアントの案件（人事労務システム／自動車サービス）と並行して担当。2026年6月頃をもって先方の社内チームへ移管
クリニック向け Web アプリ開発・管理画面刷新 — フロントエンドエンジニア（正社員）
- 30拠点規模の自社クリニックで使う予約・患者マイページ Web アプリのリプレイス開発（約2年）。Next.js / React / Jotai / MUI で UI 実装〜ステート管理、GraphQL 連携、Jest / Testing Library / Cypress / Storybook によるテスト整備まで担当
- 患者・カルテ情報を扱う管理画面のリニューアル。当初は Pages Router で開発していたが、ちょうど App Router が登場したタイミングでリリースまで期間に余裕があったため App Router へ移行
- 同案件では Mantine をヘッドレスで使い、デザイナーが Figma で作成したデザインに合わせて Tailwind CSS でスタイリング。UI ライブラリの既定のデザインに引っ張られず、デザイン通りに実装できる構成を選択
- チームの稼働状況やタスクの状況を相談しながら進め、Go は未経験だったが自主的に手を挙げ、カルテ情報の取得・削除をバックエンドからフロントエンドまで一通り実装。フロントエンドの範囲に閉じず担当を広げることを意識
- 電子カルテ・患者マイページ（CakePHP / Go）の運用：機能追加・不具合対応
- 採用サイト（https://recruit.caps365.jp/）と健康経営支援事業サイト（https://healthmanagement.caps365.jp/）の2件を、エンジニア一人体制で技術選定から構築。採用サイトは自社クリニック約30拠点の採用強化、健康経営支援事業サイトは新規事業の立ち上げが目的で、いずれも事業部の事業目標に直結する位置づけだった。採用サイトは初回リリース時点でヘッドレス CMS・問い合わせフォームを含む約12ページ構成
- フレームワークと状態管理（Next.js / React / Jotai）は他プロダクトと構成を揃えて社内で読める人が多い状態を保ち、サイト固有の要件になる CMS・ホスティング・フォーム（microCMS / Cloudflare Pages / SSGform）だけを一から選定。CMS は運用者が非エンジニアの部署だったため Contentful / Newt / WordPress と比較し、管理画面の日本語対応・国内実績・想定記事量が無料枠に収まることの3点で microCMS を採用
- 1件目で選定した構成と整備した運用ドキュメントを健康経営支援事業サイトにも流用し、2件目の立ち上げコストを下げた
GCP データ基盤・分析・モバイル開発 — システムエンジニア
- 保険会社の統合データウェアハウスを GCP（BigQuery / Cloud Storage）で構築し、オンプレミスからクラウドへの本番データ移行を実施
- アパレル企業のデータレイク構築・運用（Cloud Composer / Pub/Sub / Cloud Functions / Cloud Scheduler 等）をインフラ担当として推進
- ファッショントレンド分析の PoC：AutoML Vision / Vision API でモデルを作成し、学習用画像のスクレイピング〜ラベル付けまで担当
- 自動車業のデータ可視化 PoC では Looker のカスタム画面を JavaScript で実装し、Cloud Build で CD 環境を構築
- Flutter / Dart による自社名刺モバイルアプリの改修、AngularJS による地域電子クーポンアプリのフロント開発
クレジットカード共通基幹システムの運用保守 — システムエンジニア
- クレジットカード共通基幹システム（Java / Struts / Db2）の運用保守と、管理画面機能の追加
- VBA を用いた業務自動化ツールの作成と、Excel ベースの設計・テスト資料の整備、回帰テストの実施
- Rational ClearCase / ClearQuest を用いた構成・課題管理
- プロジェクト有志の社内勉強会で発表。Oracle Certified Java Programmer Silver SE 8 を取得
新入社員研修
- ビジネスマナー・Java プログラミング・IBM 製品に関する集合研修
- チーム開発・個人開発の演習（要件定義〜設計）、デザインシンキング・ワークショップへの参加
現代心理学部 映像身体学科
- 映画・写真・広告・演劇・ダンス・武術など、映像表現と身体表現をワークショップ形式で学習
- 表現の手法・知識・チームでの制作プロセスを実習を通して習得
個人開発
個人開発ポータル — my-apps-portal（新しいタブで開く）
業務外で続けている個人開発 22 作品（うち公開中 20）を一覧にしたポートフォリオ。作品ごとに Lighthouse・テストカバレッジ・依存パッケージの脆弱性・シークレット検出の計測値を載せ、ヘッダーで自動集計しています。各アプリの設計・技術選定・更新内容は開発ブログに書いています。
- テスト総数 17,914 件。Lighthouse Performance は計測した 19 作品の平均 96.5（19 作品すべてが 90 点以上）
- 作品ごとに構成を選び分けている: Next.js App Router・SvelteKit・TanStack Start・Vite のほか、Electron と SwiftUI のデスクトップアプリも
- 学習アプリ: AI Primer（24 トラック 142 レッスン）、CSS Atelier（87 トラック 248 レッスン）、GLSL Atelier（49 トラック 168 レッスン）、Snippet Sprint（32 言語 621 問）
- Three.js を使う作品は動的 import で初期バンドルから外し、常時 3D 描画でもモバイルの Lighthouse を落とさない
Somewhere Now — 世界のライブカメラ（新しいタブで開く）
118 の国と地域、5,711 地点の YouTube ライブカメラを、地図と地球儀から選んでアプリ内で見られる Web アプリ（日本語 / English）。昼夜の境界、現地時刻と天気、最大 4 画面の同時表示に対応しています。
- カメラの定義（バンドル同梱）と生存状態（Cloudflare KV）を分け、Cron が 10 分ごとに生存確認を回して、死んだリンクを地図に残さない
- YouTube Data API の無料枠 10,000 units/日 に対し、確認・再探索の頻度を設計して上限 8,000 units に収める
Service Anatomy — サービス解剖マガジン（新しいタブで開く）
人気サービスを、サービス解説・UX 分析・技術構成の推定・ビジネスモデルの 4 面から公開情報をもとに読み解く日英バイリンガルの分析マガジン。記事 121 本と、2 サービスを突き合わせる比較解剖 36 本を掲載しています。
- Next.js 16 の全ルートをビルド時に静的生成し、Cloudflare Workers から配信（sitemap 2,716 URL）
- 日英の項目一致や、確度「確認済み」の技術に一次情報 URL を必須とするなど、全記事の整合性をテストで CI 強制
chronoscroll — 歴史ニュース年表（新しいタブで開く）
1829 年から現在までの国内外の出来事 27,440 件を、ズームで詳しさが変わる縦スクロール年表で読める Web アプリ。Wikipedia の年ページをビルド時のデータパイプラインで解析し、注目度をスコアリングしています。テーマ別の特集 64 本（1,927 件）を読み物として通読することもできます。
- SvelteKit 3 + Svelte 5 の静的サイト。可視範囲だけを描画する仮想化タイムラインで、毎フレームのズームとスクロールに追従
- 出来事ごとの静的 HTML は R2 に置いて Worker から返し、静的アセットと分けて配信
スキル
プログラミング言語
フレームワーク / ライブラリ
データベース / クラウド
ツール
その他
ここまでお読みいただきありがとうございます
お仕事のご依頼・ご相談は、フォームからお気軽にご連絡ください。通常2〜3営業日以内にご返信いたします。
お問い合わせフォームへ