フロントエンドエンジニアのSES求人｜未経験からの入り方・学ぶ順番・きつい点

SESのフロントエンド案件ではどんな仕事をするのか

SES（システムエンジニアリングサービス）は、SES企業に雇用されたエンジニアが、準委任契約にもとづいて取引先のプロジェクトで技術的な作業を行う働き方です。ここではフロントエンドの仕事の中身に絞って見ていきます。

よく使われる技術

現在のWebシステムの画面開発では、次のような技術がよく使われています。案件によって組み合わせは違いますが、求人票でよく見かけるのはこのあたりです。

• HTML / CSS：画面の骨組みと見た目。Sass、Tailwind CSS、CSS Modulesなどを使う現場もあります
• JavaScript / TypeScript：画面の動きやデータの処理。新しめの案件ではTypeScriptが前提になっていることが多いです
• React / Vue.js：画面を部品（コンポーネント）単位で組み立てるためのライブラリ・フレームワーク。Angularを使う現場もあります
• Next.js / Nuxt：ReactやVueをもとにした、ルーティングやサーバー側の描画まで扱えるフレームワーク
• Git / GitHubなど：ソースコードの管理とレビュー
• REST API / GraphQL：バックエンドとのデータのやり取り

よくある作業の例

SESのフロントエンド案件は、新しいサービスをゼロから作るものより、すでに動いているシステムに手を入れる仕事の割合が大きい傾向があります。具体的には次のような作業です。

• 既存画面の改修（項目の追加、入力チェックの変更、表示の不具合修正など）
• 新しい画面や機能の追加（デザインや仕様書をもとにコンポーネントを実装する）
• バックエンドAPIとの連携（データの取得・登録、エラー時の表示）
• スマートフォン表示への対応（レスポンシブ対応）
• 古い技術からの置き換え（jQueryからReactへ、JavaScriptからTypeScriptへ、フレームワークのバージョンアップなど）
• テストコードの作成、画面の動作確認、表示速度やアクセシビリティの改善
• コードレビューへの対応、ドキュメントの整備

対象になるシステムは、一般向けのWebサービスだけでなく、企業の社内向け管理画面や業務システムも多くあります。業務システムの画面は見た目の派手さより、入力項目の多さや正確さが求められることが多く、フォームの扱いや入力チェックの経験が生きます。

チームでの立ち位置

多くの場合、取引先のプロジェクトの中で、デザイナー、バックエンドエンジニア、テスト担当などと一緒に働きます。SES企業から1人で入ることもあれば、同じ会社のメンバー数人で入ることもあります。なお、準委任契約では、取引先の担当者が作業者一人ひとりに直接細かな指示を出すことは想定されていません。そうした指揮命令が必要な働き方は労働者派遣の扱いになります。この線引きはSES偽装請負の判断基準で解説しています。

未経験や他の職種からフロントエンドのSESに入る道

SESのフロントエンド求人は、React・Vue.jsなどの実務経験を条件にしているものが目立ちます。取引先がSES企業に求めるのは「すぐに作業できる人」であることが多いためです。そのため、未経験から入る場合は、いきなりフロントエンド専任の案件を狙うより、段階を踏むほうが現実的です。

完全な未経験から入る場合

未経験者を採用するSES企業の多くは、入社後の研修を用意しています。ただし、研修の中身や、研修後にどんな案件に入るかは会社によって大きく違います。フロントエンドに進みたいなら、次の点を確認しておきましょう。

• 研修でHTML/CSS、JavaScript、フレームワークまで扱うか。扱うのがJavaやインフラ中心ではないか
• 研修後の最初の案件として、どんな仕事が多いか（テスト、運用・保守、ヘルプデスクなど）
• 最初の案件が希望と違った場合、どのくらいの期間でフロントエンドの案件に移れる見込みがあるか

最初はテストや運用・保守の案件から入り、そこで画面の仕様やWebシステムの流れに慣れてから開発に移る、という道筋も珍しくありません。遠回りに見えても、現場での働き方やチーム開発の流れを学べる期間になります。未経験からの全体的な進め方は未経験からSESエンジニアへ｜学習ロードマップと実現方法も参考になります。

他の職種から移る場合

すでに別の職種で働いている人は、今の経験がフロントエンドにつながる場合があります。

• Webデザイナー・コーダー：HTML/CSSの経験はそのまま土台になります。JavaScriptとTypeScript、ReactかVue.jsを足せば、実装側の案件を狙いやすくなります
• バックエンドエンジニア：API設計やデータベースの知識は、APIとつなぐ画面を作るときに役立ちます。JavaScript/TypeScriptとフレームワークの書き方に慣れれば、フロントとバックの両方を扱える人として見られることもあります
• テスト・QA担当：画面の仕様を読む力、不具合を見つけて説明する力は、実装でも評価されます
• IT以外の職種：業務システムを使う側だった経験（営業管理、経理、物流など）は、業務画面の使いやすさを考えるうえで役に立つことがあります。ただし技術面は基礎からの学習が必要です

「実務経験1年以上」の求人にどう向き合うか

求人票の「React実務経験1年以上」などは、目安として書かれていることもあります。個人開発の成果物や、現職でのJavaScriptの経験を具体的に示せれば、選考に進める場合もあります。応募前に、条件にどの程度幅があるのかを面談で聞いてみるのも一つの方法です。

身につけるスキルと学ぶ順番

フロントエンドの技術は種類が多く、流行り廃りの話題も目に入りやすいため、何から手をつければよいか迷いがちです。基本は「土台から順に、一つずつ動くものを作りながら」進めることです。目安として、次の順番をおすすめします。

1. HTML / CSS

見出し・リスト・フォームなどの正しいタグの使い方と、Flexbox・Gridを使ったレイアウトを身につけます。スマートフォンとパソコンの両方で崩れない画面を作れることが目標です。見た目を整えるだけでなく、スクリーンリーダーなどでも読み取りやすい書き方（アクセシビリティ）を意識しておくと、後で役立ちます。

2. JavaScript

変数、条件分岐、繰り返し、関数、配列やオブジェクトの操作といった基礎に加え、DOM操作（画面の要素を書き換えること）、イベント処理、非同期処理（Promise、async/await）、fetchを使ったデータの取得まで進めます。フレームワークを使う前に、素のJavaScriptで小さなアプリを作っておくと、フレームワークが何を代わりにやってくれているのかが理解しやすくなります。

3. Git と開発の道具

コミット、ブランチ、プルリクエスト、コンフリクトの解消など、チーム開発に必要なGitの操作を覚えます。あわせて、npmなどのパッケージ管理、ブラウザの開発者ツールでのデバッグにも慣れておきましょう。現場ではこれらが使える前提で話が進むことが多いです。

4. TypeScript

JavaScriptに型の仕組みを加えた言語です。型定義、ユニオン型、ジェネリクスの基本、APIから受け取るデータに型を付ける方法あたりを押さえます。多くの現場で使われているため、読めて書ける状態にしておくと応募できる案件が広がります。

5. React または Vue.js

コンポーネントの分け方、props、状態管理（stateやストア）、フォームの扱い、画面遷移（ルーティング）を学びます。どちらから始めるかは、応募したい求人でどちらが多いかで決めて構いません。一つを深く理解すれば、もう一方も考え方は近いため覚えやすくなります。余裕があれば、Next.jsやNuxtにも触れておくとよいでしょう。

6. API連携

公開されているAPIや自分で用意した簡単なAPIを使い、データの一覧表示、登録、更新、削除までを画面から行えるようにします。読み込み中の表示やエラー時の表示、認証（ログイン状態の扱い）まで作ってみると、実務に近い経験になります。

7. テスト

VitestやJestなどを使った関数やコンポーネントのテスト、Playwrightなどを使った画面操作のテストの基本を学びます。未経験の段階でテストを書ける人はまだ多くないため、ポートフォリオにテストが入っているだけでも、丁寧に作る人だという印象につながります。

この順番の中で、特に大事なのは2のJavaScriptです。フレームワークの使い方だけを覚えても、つまずいたときに原因を調べられません。焦ってReactに進むより、JavaScriptの理解に時間をかけたほうが、結果的に早く現場で通用するようになります。

選考で見てもらえるポートフォリオの作り方

実務経験が少ないうちは、ポートフォリオ（自分で作った成果物）が技術力を示す主な材料になります。SES企業の選考でも、取引先との面談（いわゆる顔合わせ）でも、「何を作れるのか」を具体的に説明できると話が進みやすくなります。

作るもののポイント

• 実際に動くURLを用意する：見る人がすぐ触れるように、公開して動く状態にしておきます
• GitHubでソースコードを公開する：コミットの粒度やメッセージ、ブランチの使い方も見られることがあります
• 業務システムに近い題材を選ぶ：SESの案件は管理画面や業務画面が多いため、一覧・検索・登録・編集・削除があるアプリ（例：在庫管理、予約管理、タスク管理）は実務との距離が近くなります
• TypeScriptとReact/Vue.jsで作る：求人で多く求められている技術で作ると、そのまま評価につながりやすくなります
• API連携、入力チェック、エラー表示、レスポンシブ対応を入れる：見た目より「実務で当たり前に求められる部分」ができているかが見られます
• テストを少しでも書く：主要な処理だけでも構いません

READMEに書くこと

ソースコードだけでは伝わらない部分をREADMEで補います。作った目的、使った技術とその理由、工夫した点、苦労した点と解決方法、今後直したい点を書いておくと、面談でその内容をもとに会話ができます。チュートリアルをそのまま写したものは評価されにくいため、機能を足したり設計を変えたりして、自分で考えた部分を明確にしておきましょう。

ポートフォリオ全般の見せ方は転職に効く個人ポートフォリオの作り方でもまとめています。

フロントエンドをSESで経験する良い点と、きついと言われる理由

SESでフロントエンドを経験することには、良い面も難しい面もあります。どちらも知ったうえで選ぶことが、入社後の後悔を減らします。

単価と給与の関係について

SESでは、取引先がSES企業に支払う金額を「単価」と呼びます。エンジニアの給与はその単価から会社の経費や利益を引いた中から支払われるため、単価と給与は同じではありません。フロントエンドの単価は、使う技術、経験年数、担当する工程（実装だけか、設計やリードまでか）、商流（取引先との間に何社入っているか）などによって大きく変わり、一律の相場を示すのは難しいのが実情です。

大切なのは、自分の給与がどう決まり、何をすれば上がるのかを会社が説明できるかどうかです。単価の何割を給与に回すかの考え方や、評価の基準を面談で聞いておきましょう。給与の仕組みはSESの給与の仕組みで詳しく解説しています。

「きつい」を減らすためにできること

• 入社前に、フロントエンドの案件にどのくらい入っているか、希望が通りやすいかを具体的に確認する
• 案件に入る前の面談で、使う技術、チームの人数、リモートの可否、担当範囲を聞く
• 現場で困ったときに相談できる相手（自社の担当者や先輩）がいるかを確認しておく
• 現場で使っていない技術（最新のフレームワーク、テストなど）は、個人開発で触れ続けておく

SES企業を選ぶときに聞いておきたい質問

フロントエンドに進みたい人が、SES企業の面談で確認しておきたい質問をまとめました。答えがあいまいなまま入社を決めないことが大切です。

1. フロントエンドの案件はどのくらいありますか。使われている技術は何が多いですか。React、Vue.js、TypeScriptなど、自分が伸ばしたい技術の案件があるかを確認します。
2. 未経験や経験の浅い人は、最初にどんな案件に入ることが多いですか。テストや運用から入る場合、開発に移るまでの流れも聞いておきます。
3. 案件はどのように決まりますか。本人の希望はどの程度反映されますか。断れる余地があるのか、希望を伝える場があるのかを確認します。
4. 研修の内容と期間、研修中の給与を教えてください。フロントエンドの技術を扱うかどうかも確認します。
5. 案件に入った後、自社の誰がフォローしてくれますか。定期的な面談やメンターの有無、技術的な質問ができる場があるかを聞きます。
6. 給与はどう決まり、どんな条件で上がりますか。評価の基準、昇給の時期、単価と給与の関係についての考え方を確認します。
7. リモートワークの案件はありますか。出社が必要な場合の場所はどこが多いですか。
8. 契約の形態は準委任ですか、派遣ですか。取引先との間に何社入っている案件が多いですか。

会社選び全体の考え方はSES企業の選び方完全ガイドも参考にしてください。

HLTのフロントエンドエンジニア求人

株式会社HLTは、東京都港区赤坂に本社を置くSES企業で、2023年7月31日に設立しました。採用サイトではフロントエンジニアの求人を掲載しています。求人ページに載せている内容は次のとおりです。

仕事内容

ReactやVueなどのモダンフレームワークを使い、ユーザーの目に見える部分をつくるポジションです。具体的な業務として、次の内容を挙げています。

• React / Vue.js を用いたSPA・Webアプリケーションの開発
• TypeScriptを活用した型安全なコードの実装
• デザイナーと連携したUI実装・レスポンシブ対応
• バックエンドAPIとの連携・データフェッチの設計
• パフォーマンス最適化とアクセシビリティ対応
• コードレビューと技術的負債の解消

応募要件と求める人物像

応募要件は、HTML / CSS / JavaScriptの実務経験、React または Vue.js の開発経験（目安1年以上）、TypeScriptの基礎知識、Gitを用いたチーム開発の経験です。求める人物像としては、React・Vue等の実務経験がある方に加えて、HTML/CSS/JavaScriptを習得してフロントエンド開発にチャレンジしたい方も挙げています。

募集要項

選考の流れ

エントリー（フォームより）、書類選考・ポートフォリオ確認、カジュアル面談（オンライン30〜45分）、技術確認（コーディングテストまたはポートフォリオレビュー）、最終面接、内定の順に進みます。面接はオンラインでも受けられます。年齢制限はなく、18歳以上であれば応募できます。

入社後の支援

専任のメンターによる1on1の定期的なサポート、月2回の社内勉強会、資格の受験費用の補助と資格手当（AWS認定は月1万円〜、情報処理技術者は月5千円〜）があります。プログラミング未経験の方向けには3ヶ月の研修コースを用意しており、研修期間中も同額の給与を支払います。研修の内容や研修後の案件について気になる点は、カジュアル面談で質問してください。

選考では書類選考の段階でポートフォリオの確認があります。応募はエントリーフォームから受け付けています。応募前の疑問はよくある質問、働き方や制度は働く環境のページもご覧ください。

よくある質問

未経験からSESのフロントエンドエンジニアになれますか？

可能性はありますが、フロントエンド専任の案件は実務経験を求められることが多いため、段階を踏むのが現実的です。HTML/CSS、JavaScript、TypeScript、React（またはVue.js）を順に学び、API連携まで入った成果物を用意すると、選考で話ができる材料になります。未経験者向けの研修がある会社を選ぶ場合は、研修でフロントエンドの技術を扱うか、研修後の最初の案件が何になりやすいかを確認しておきましょう。

SESのフロントエンドはきついですか？

現場ごとに技術やルールが違うこと、仕様やデザインの変更で作業が増えやすいこと、希望と違う案件に入る可能性があることが、きついと言われる主な理由です。一方で、さまざまな現場で経験を積めるという面もあります。案件の決まり方や入社後のフォロー体制を入社前に確認しておくと、負担を減らしやすくなります。

ReactとVue.jsはどちらを先に学ぶべきですか？

応募したい求人でどちらが多く求められているかで決めるのがおすすめです。両者は考え方が近いため、一方をしっかり理解すれば、もう一方も覚えやすくなります。どちらを選ぶ場合でも、先にJavaScriptとTypeScriptの基礎を固めておくことが大切です。

SESのフロントエンドエンジニアの給与はどう決まりますか？

取引先がSES企業に支払う単価をもとに、会社ごとの給与制度や評価によって決まります。単価はスキル、経験年数、担当する工程、商流などで変わるため、一律の相場で判断するのは難しいのが実情です。入社前に、評価の基準や昇給の条件、単価と給与の関係についての考え方を会社に確認しておきましょう。

ポートフォリオはどのくらい作り込めばよいですか？

数を増やすより、実務に近いものを1〜2個しっかり作るほうが評価されやすいです。一覧・登録・編集・削除とAPI連携、入力チェック、エラー表示、レスポンシブ対応が入っていて、公開URLとGitHubのソースコード、READMEがそろっていれば、面談で十分に説明できる材料になります。