パフォーマンス最適化
Core Web Vitals を指標に、バンドルサイズ削減・画像最適化・レンダリング改善を実施。LCP を 4.2s から 1.8s へ短縮した実績あり。計測→仮説→改善の反復を体系的に行える。
Profile
プロフィール
2019年よりフロントエンドエンジニアとしてキャリアをスタート。Web制作会社でコーポレートサイトやLP制作を手がけた後、スタートアップへ転職し、プロダクトのゼロイチ立ち上げと機能拡張を経験。現在はSaaS企業にてフロントエンド領域を主導し、設計・実装・コードレビューを担当している。
TypeScriptとReact/Next.jsを主軸に、パフォーマンス最適化・アクセシビリティ・テスト設計まで幅広く対応できる。デザイナーとの協業経験が豊富で、Figmaを用いたUIの具体化や、デザインシステムの構築・運用にも携わってきた。
技術的な興味はコードの書き心地にとどまらず、ユーザーの行動分析や事業KPIとの接続まで広がっている。エンジニアリングを手段として捉え、プロダクトや事業の成果に直結する実装を意識している。
Strengths
強み
コンポーネント設計
Atomic Design を参考にしながら、プロダクトの規模感に合わせた現実的な設計を選択する。再利用性・保守性・型安全性のバランスを意識し、チームで長期運用できるコードベースを構築する。
デザイナーとの協業
Figma でのデザイン確認・フィードバックから、トークン設計・デザインシステムの共同整備まで担当。「実装できない UI」を事前に防ぎ、デザインと実装の乖離を最小化する進め方を習慣的に行っている。
型安全な設計と品質担保
TypeScript を strict モードで運用し、型レベルでバグを防ぐ設計を実践。Vitest・Playwright を用いた自動テスト体制の整備、CI/CD パイプラインの構築・改善にも対応する。
Works
制作実績
守秘義務の範囲内で掲載。詳細は面談時にお伝えできます。
分析ダッシュボードのフロントエンド刷新
担当：アーキテクチャ設計 / 実装 / コードレビュー
100以上のデータ可視化コンポーネントを持つ管理画面を、AngularからNext.js + TypeScriptへ移行。段階的リプレイス戦略を立案し、既存機能を維持しながら6ヶ月で移行を完了した。
68%
初期ロード時間削減
0
リリース後障害件数
3名
チーム体制
大規模ECサイトのパフォーマンス改善
担当：計測・分析 / 改善実装 / ドキュメント整備
月間 PV 500万超のECサイトにおいて、Core Web Vitals の改善を主導。画像フォーマットの最適化・コード分割・サードパーティスクリプトの遅延読み込みなど、複数の施策を並行して推進した。
4.2s
→ 1.8s LCP 改善
→ 1.8s LCP 改善
+12%
コンバージョン率向上
92
Lighthouse スコア
UIコンポーネントライブラリの設計・構築
担当：設計 / 実装 / Storybook 整備 / 社内展開
複数プロダクトで一貫したUIを実現するため、デザイントークンからコンポーネントまでを体系化。デザイナーとペアで仕様を固め、全コンポーネントに型定義・テスト・ドキュメントを整備した。
40+
コンポーネント数
2製品
展開プロダクト数
100%
型カバレッジ
予約管理システムのフロントエンド開発
担当：UI実装 / 状態管理設計 / API連携
複雑な予約フロー（ステップ管理・バリデーション・在庫連携）を持つ業務システムを Vue 3 で構築。チームへの状態管理設計の提案と、開発ガイドラインの整備も担当した。
5名
開発チーム規模
8ヶ月
開発期間
85%
テストカバレッジ
Philosophy
実装で意識していること
ユーザーに届くまでを考える
コードの正しさだけでなく、ネットワーク・レンダリング・インタラクションを含めたユーザー体験の全体を意識して実装する。「動く」と「使いやすい」は別物だという認識を常に持っている。
次に触る人のために書く
変数名・関数の粒度・コメントの有無まで「6ヶ月後の自分や別のメンバーが迷わず読めるか」を基準にする。複雑なロジックは意図を明文化し、レビューコストを下げる工夫を惜しまない。
変更容易性を設計に組み込む
ビジネス要件は変わる前提で設計する。依存関係の方向・インターフェースの分離・状態の局所化を意識し、機能追加や仕様変更が局所的な修正で完結する構造を目指す。
根拠を持って技術を選ぶ
新しいライブラリの採用はトレードオフを整理してから判断する。チームのスキルセット・バンドルサイズへの影響・長期のメンテナンスコストを考慮し、選定理由を説明できる状態を保つ。
アクセシビリティをあとづけにしない
セマンティックなHTMLの選択・フォーカス管理・ARIA属性の適切な使用を、機能実装と同じタイミングで組み込む。後からアクセシビリティを付け足す難しさを経験し、設計段階から考慮する習慣を持っている。
計測してから改善する
「なんとなく遅い」「なんとなく重い」という感覚論ではなく、Lighthouse・DevTools・RUM データを根拠にボトルネックを特定してから改善に着手する。施策の効果も定量的に確認することを習慣としている。
Skills
スキルセット
実務での使用頻度を基準に記載。
言語
- TypeScript 実務 4年+
- JavaScript 実務 5年+
- HTML / CSS 実務 5年+
フレームワーク / ライブラリ
- React 実務 4年+
- Next.js 実務 3年+
- Vue 3 / Nuxt 実務 2年+
スタイリング
- Tailwind CSS 実務 3年+
- CSS Modules / SCSS 実務 4年+
テスト
- Vitest / Jest 実務 3年+
- Playwright 実務 2年+
ツール / インフラ
- Git / GitHub 実務 5年+
- GitHub Actions 実務 3年+
- Figma 実務 4年+
その他の対応領域
Career
職務経歴の概要
詳細は面談または別途レジュメにてご確認いただけます。
2024
現在
現職
SaaS企業（従業員数 約200名）
シニアフロントエンドエンジニア
- 分析ダッシュボードのフルスクラッチ設計・実装を主導
- フロントエンドチームのコードレビュー・技術標準の策定
- GitHub Actions を用いた CI/CD パイプラインの整備
- 新メンバーのオンボーディング支援
Next.js
TypeScript
React Query
Playwright
2021
2024
スタートアップ（シリーズB・従業員数 約50名）
フロントエンドエンジニア
- プロダクトのゼロイチ立ち上げフェーズから参画
- 予約管理・EC 機能のフロントエンド全般を担当
- デザインシステムの構築とドキュメント整備
- デザイナーとの仕様策定から UI の実装まで一貫して担当
Vue 3
TypeScript
Nuxt
Storybook
2019
2021
Web制作会社（従業員数 約30名）
Webエンジニア
- コーポレートサイト・LP のマークアップ・実装を担当
- WordPress を用いたCMSサイトの開発・保守
- JavaScript を用いたインタラクション実装の習得
HTML/CSS
JavaScript
WordPress
jQuery
Contact
お問い合わせ
採用のご検討・業務委託のご相談など、お気軽にご連絡ください。
初回はカジュアル面談からでも歓迎しています。通常2営業日以内にご返信します。
SNS でのご連絡の場合は、DM 欄よりお送りください。