© 2026 Makoto Katayori

About Me

ソフトウェアエンジニアとしてのプロフィールと職務経歴

Profile

フロントエンドを軸に、技術的意思決定から開発体験の改善までを担うエンジニア

6年以上にわたり、新規開発・大規模リプレイス・グロース施策の技術基盤構築に従事。機能を実装するだけでなく、「チームの開発速度と品質を構造的に上げる」ことを自分の役割として案件に向き合ってきました。

チームに提供できる価値

技術的意思決定とアーキテクチャ設計

GraphQLスキーマ設計、キャッシュ戦略（CDN / Redis）、フレームワーク移行など、後戻りコストの大きい判断を設計から実装まで一貫して担当

開発生産性の仕組み化

ABテスト基盤の改修により施策サイクルを月1回→週1回に短縮。テスト基盤移行、CI/CD整備、Lint自動化など、チーム全体の開発効率を上げる基盤づくりを継続的に実践

事業数値に直結する技術改善

LCP 6秒→2秒のパフォーマンス改善、SEO最適化、ABテスト運用など、グロースを支える技術施策の設計と運用

Personal Product

Plants Log — 植物図鑑・栽培記録Webサービス

企画・設計・開発・運用のすべてを一人で行っている自社プロダクト。

  • アーキテクチャ: Next.js（App Router）+ Supabaseによる構成。認証（メール検証フロー含む）、データベーススキーマ設計、画像管理までフルスタックで設計
  • 事業視点での運営: 収益化モデルの設計など、技術以外の意思決定も含めてプロダクトを運営
  • 継続的な改善: モバイルWeb特有のUI課題（ソフトウェアキーボード対応など）への深い取り組み

受託開発で培った技術力を、事業オーナーの視点で活かしている実例。

Career

2024年8月 - 2026年1月•1年5ヶ月

不動産関連Webサービス

フロントエンド・バックエンドエンジニア（グロース技術基盤を担当）

Next.js + GraphQL構成の不動産検索サービスにて、グロース施策を高速に回すための技術基盤を担当。

  • ABテスト基盤の改修: 属人化していた既存基盤を改修し、メンテナンス性と開発効率を改善。施策の実施ペースを月1回から週1回へと4倍に高速化し、検証サイクルの短縮に貢献
  • パフォーマンス改善: 地図検索ページのLCPを6秒→2秒に短縮。地図マーカーのクラスタリングアルゴリズムの改善、CloudFront（CDN）とRedisを組み合わせたキャッシュ戦略の設計・実装により、体感速度とSEOの土台を強化
  • バックエンドまで一貫して担当: GraphQLのスキーマ設計からリゾルバ実装までを担い、フロントエンドの要件起点でAPI設計を最適化
  • Google Maps APIの高度な活用: クラスター表示、Geocoding API、Routes APIを用いた検索体験の設計・実装
技術スタック
  • Next.js
  • TypeScript
  • GraphQL
  • CloudFront
  • Redis
  • Google Maps API
  • Cypress
2021年11月 - 2024年8月•2年9ヶ月

飲食店向けモバイルオーダーシステム

フロントエンドエンジニア（全4サービスを横断担当）

飲食店の注文をWeb上で完結させるサービス。ユーザー向け・ホールスタッフ向け・店舗管理者向け・社内管理画面の4つのフロントエンドサービスすべてを担当し、機能開発と技術基盤のモダン化を並走させた。

  • Vue2→Vue3移行を3ヶ月で完遂: EOLを見据えたリプレイスを、Composition API・script setup構文への書き換えを含めて段階的に実施。サービスを止めずに短期間で移行を完了
  • テスト・開発基盤のモダン化を推進: Jest→Vitest移行、pnpm化、husky・Storybook導入など、開発体験の改善を主導。2年9ヶ月にわたり技術的負債を計画的に返済しながら機能開発を継続
  • 4サービス横断の知見: エンドユーザー・店舗スタッフ・管理者という異なるユーザー特性に応じたUI設計・実装を経験
技術スタック
  • Vue 2
  • Vue 3
  • TypeScript
  • Vitest
  • Storybook
2022年2月 - 2023年12月•1年10ヶ月

BtoB SaaSプラットフォーム

フロントエンドエンジニア

プラットフォーム構築を支援するBtoB SaaSの新規開発。ユーザー向け・管理者向けなど複数サービスをモノレポで運用する構成にて、フロントエンドの設計・実装を担当。

  • 型安全な開発体制: OpenAPIによるスキーマ定義でバックエンドと型を共有し、API変更に強い開発フローを実践
  • コンポーネント設計: MUIベースの社内UIパッケージを活用した、複数サービスで再利用可能なコンポーネント設計
  • 品質担保: react-hook-formを使ったフォーム状態管理・バリデーション設計、Jest + react-testing-libraryによるテスト設計・実装
技術スタック
  • Next.js
  • TypeScript
  • OpenAPI
  • モノレポ
  • MUI
  • react-hook-form
  • Jest
2021年8月 - 2022年2月•6ヶ月

転職マッチングサービス

フロントエンドエンジニア

Nuxt.js + TypeScript構成のフロントエンド開発を担当。新規機能の実装と既存機能の改修、テスト整備により品質向上に貢献。

  • OpenAPIを用いたスキーマ駆動開発を実践し、フロントエンドとバックエンドの型定義を共通化
  • ユニットテスト・スナップショットテストの実装により、リファクタリングを安全に行える基盤を整備
技術スタック
  • Nuxt.js
  • TypeScript
  • Jest
  • OpenAPI
2020年6月 - 2021年8月•1年2ヶ月

CtoCレンタルプラットフォーム

フロントエンドエンジニア・インフラエンジニア

ユーザー間レンタルを実現するCtoCプラットフォームにて、事業者向けWeb管理画面とユーザー向けアプリ（Vue.js + OnsenUI + WebView）の両方を担当。

  • レガシー構成からのフルリプレイス: Laravel-mix + Vue.jsの既存管理画面をNuxt.js + TypeScriptへ置き換え。Atomic Designベースのコンポーネント設計とStorybook導入により、保守性の高いフロントエンド基盤を構築
  • コードレビューの自動化: ESLint・Prettier・StyleLintを導入し、GitHub ActionsでPR時に自動実行する仕組みを構築。機械的な指摘を自動化することでレビューを設計議論に集中できる状態に改善
  • アプリ側のネイティブ連携: WebKitによるネイティブ連携、API連携の改修、既存コードのコンポーネント化リファクタリングを実施
技術スタック
  • Nuxt.js
  • TypeScript
  • Vue.js
  • Storybook
  • GitHub Actions
2020年4月 - 2020年7月•3ヶ月

顧客管理システム（CRM）新規開発

フルスタックエンジニア

顧客情報を一元管理するCRMシステムをゼロから構築。

  • ワイヤーフレームからのUI実装、API開発に加え、AWS環境（VPC, RDS, EC2, S3）の構築とCodePipelineによるCI/CDの実装まで一人で完結
  • 外部開発会社とのAPI連携では仕様の取りまとめ役を担い、技術面の窓口として調整を実施
技術スタック
  • Vue.js
  • Vuetify
  • AWS (VPC / RDS / EC2 / S3 / CodePipeline)
  • Salesforce API