Jobgation

エンジニアという仕事自社サービスのUIエンジニア

フロントエンド × 自社開発

自社サービスのUIエンジニア

代表例 自社SaaSのフロントエンドエンジニア toC/toBtoCアプリのUI担当 プロダクトエンジニア(フロント)

自社で運営するWebサービスやアプリのユーザーインターフェース(UI)を、企画・デザイン・バックエンドの担当者と一緒に作り上げる仕事です。React/Vue/Next.jsなどのフレームワークで画面を実装するだけでなく、機能追加のたびにユーザーの反応を見ながら改善を重ねていく、プロダクトに長く伴走するスタイルが特徴です。

未経験からの難易度 業界・実務経験推奨

JavaScriptやReact等のモダンなフレームワークでの実装経験が前提として求められることが多い

働き方の傾向 波がある

月の残業は目安15〜25時間程度(Webエンジニア全体の平均は月17.4時間という調査があり、新機能のリリース前後は業務が集中しやすい)

年収の中央値(参考) 500万円〜700万円

求人の中心的なレンジ。技術力・裁量の大きさで上振れしやすい

業務内容
  • React/Next.jsやVue.jsなどを用いたプロダクト画面の設計・実装
  • デザイナーが作成したデザインカンプ(完成見本)をもとにしたコンポーネント(画面を構成するボタンやカード等の部品)実装。例えば、同じデザインのボタンを何度も使い回せるように部品化する
  • サーバーとデータをやり取りする仕組み(API連携)の実装、画面の状態(ログイン中かどうか、選択中の項目など)を管理する設計
  • 表示速度や操作性を改善するための調整(例: 画面の読み込みを速くする、ボタンを押した時の反応をなめらかにする)
  • 2パターンを比較して効果を確かめるA/Bテストや、利用状況を計測する仕組みの実装
具体的な業務イメージ

多くのチームでは1〜2週間のスプリント(開発の区切り)単位でタスクを進め、朝会(デイリースタンドアップ)で進捗を共有しながら開発します。実装したコードはプルリクエスト(変更内容をチームに確認してもらう仕組み)としてまとめ、他のエンジニアによるコードレビューを経てから本番に反映するのが一般的な流れです。1つの機能追加につき、設計・実装・レビュー対応を含めて数日〜1週間程度かかることが多く、新機能のリリース直前は複数のプルリクエストが並行して動き、確認作業に追われることもあります。

この仕事のやりがい
  • 自分が実装した画面を使うユーザーの反応をすぐに見られる
  • 企画・デザイン・バックエンドと一緒にプロダクトを育てていく一体感
  • 技術選定から関わり、UIアーキテクチャを自分ごととして育てられる
向いている人
  • ユーザー視点で細部のUI/UXにこだわれる人
  • デザイナーや企画職と協働しながら手を動かすのが好きな人
  • 新しい技術のキャッチアップを楽しめる人
向いていない人
  • 決まった仕様通りに黙々と実装する方が落ち着く人
  • デザインや仕様の変更が度々発生することにストレスを感じやすい人
  • バックエンドやインフラなど他レイヤーへの興味が薄い人
つまずきやすいポイント
  • ブラウザやデバイスによる表示崩れの調整に想定以上の時間がかかることがある
  • 仕様確定前に実装を進め、後から手戻りが発生することがある
  • フレームワークやライブラリの更新サイクルが早く、キャッチアップが追いつかなくなることがある
必要スキル
JavaScript/TypeScript React・Vue等の実装力 UI設計・コンポーネント設計力 APIとの連携実装力 パフォーマンスチューニング
その後のキャリアパス例
  • フロントエンドのテックリード(チームの技術方針を主導する立場)・アーキテクト(システム全体の設計方針を決める立場)へ
  • プロダクト全体を見るフルスタックエンジニア(フロント・バックエンド両方を担える人)へ

掲載の年収は各パターンの求人情報から算出した中央値の参考レンジです(quickfactsを参照)。経験・スキル・企業規模により変動します。

相性の良い転職エージェントは人によって違います。求人の量や、担当者との相性を見るためにも、2〜3社まとめて登録しておくのがおすすめです。

総合型エージェント

求人数が多く、まず1社目に登録しておきたいタイプ

求人を見る(準備中)
IT・エンジニア職特化エージェント

エンジニア求人・選考ノウハウに強いタイプ

求人を見る(準備中)
転職サイト

自分のペースで求人を探したい人向け

求人を見る(準備中)

※求人リンクは現在準備中です。ASPとの提携が完了し次第、実際の求人ページへのリンクに差し替えます。

← エンジニアという仕事の他のパターンも見る