営業が見るべき中心
見るべきは、候補者が「どの画面を、どの技術で、どの工程から、どこまで担当したか」です。 LP制作とSaaS管理画面開発、Reactの改修とNext.jsの設計では、同じフロントエンドでも提案できる案件が変わります。
提案精度が上がる読み方
技術名の一致に加えて、工程、規模、API連携、状態管理、レスポンシブ、チーム開発の有無を確認します。
01 / Why
この技術を営業が知る意味
フロントエンド案件は「JavaScriptができます」だけでは足りません。HTML/CSSの基礎、ReactやVueの実務経験、 TypeScript、SPA、SSR、Git、API連携まで、案件概要に出る言葉を営業が読み分ける必要があります。
02 / Overview
技術の概要
フロントエンドの基礎を、営業が案件・人材理解に使える形で整理します。
この章で覚えること
HTML/CSS/JavaScript/TypeScriptの役割と、React・Vue・Next.jsなどの名前が案件概要で何を意味するか。
ページの構造
見出し、段落、リンク、画像、フォームなどを定義します。スキルシートでは「コーディング」「マークアップ」「HTML5」と出ます。
見た目とレイアウト
色、余白、フォント、レスポンシブを作ります。Flexbox、Grid、Sass、CSS Modules、Tailwindなどが周辺語です。
画面の動き
クリック、入力チェック、API通信、DOM操作を担います。現在はES6以降、非同期処理、Fetch、npm理解がよく見られます。
型のあるJavaScript
大規模開発でバグを減らすために使われます。React/Vue/Angular案件ではTypeScript経験が強い加点になります。
フロントエンドとバックエンドの違い
| 観点 | フロントエンド | バックエンド |
|---|---|---|
| 担当領域 | 画面表示、ユーザー操作、UI実装 | データ処理、API、サーバーロジック |
| 主な言語 | HTML / CSS / JavaScript / TypeScript | Java / PHP / Python / Ruby / Goなど |
| 実行環境 | ブラウザ、スマホWebView | サーバー、クラウド環境 |
| 成果物 | Webページ、画面、UIコンポーネント | API、DB操作、バッチ、認証処理 |
React
Meta発のUIライブラリ。コンポーネント、JSX、Hooks、状態管理が重要。案件数が多く、Next.jsとセットで出やすいです。
Vue.js
学習しやすく、国内案件でも多いフレームワーク。Vue 2/3、Composition API、Nuxt.jsの確認が有効です。
Angular
Google発の大規模向けフレームワーク。TypeScript前提で、業務系やエンタープライズ案件に出ます。
Next.js / Nuxt.js
SSR/SSG/ISRなどに対応するメタフレームワーク。SEOや表示速度が重要なサービスで評価されます。
03 / SES Usage
SES案件での使われ方
フロントエンドは、単なる画面作成からプロダクト開発まで幅があります。案件領域ごとに求められる深さが違います。
この章で覚えること
同じフロントエンドでも、LP制作、管理画面、SaaS、EC、業務システム刷新では提案すべき人材が変わること。
04 / Talent Types
フロントエンド人材のタイプ分け
新人営業が一番ミスしやすいのは「フロントエンド経験あり」を一括りにすることです。得意領域を見分けると、提案先と補足コメントが決めやすくなります。
この章で覚えること
人材を「マークアップ寄り」「UI実装寄り」「フロントエンドエンジニア」「Next.js/Nuxt.js寄り」「リード・設計寄り」に分けて見る。
マークアップ・コーダー寄り
HTML/CSS、LP、レスポンシブ、Figma反映、CMS改修が中心。デザイン再現性、ブラウザ差分、納期対応が強みになりやすいタイプです。
- 見るキーワード
- HTML5 / CSS3 / Sass / Figma / WordPress / レスポンシブ
- 提案しやすい案件
- LP、コーポレートサイト、CMS改修、静的サイト、デザイン反映
UI実装寄り
JavaScript、React/Vueでの画面実装が中心。既存仕様に沿って、一覧、詳細、フォーム、モーダルなどを実装できるタイプです。
- 見るキーワード
- JavaScript / React / Vue / コンポーネント / 画面改修 / Git
- 提案しやすい案件
- 管理画面、既存サービス改修、UI追加、画面単位の実装案件
フロントエンドエンジニア
React/Vue + TypeScript、API連携、状態管理、認証、エラー処理まで担当。プロダクト開発の中核として提案しやすいタイプです。
- 見るキーワード
- TypeScript / API連携 / Redux / Zustand / Pinia / Jest / PRレビュー
- 提案しやすい案件
- SaaS、SPA、プロダクト開発、業務アプリ、フロント実装中核
Next.js / Nuxt.js寄り
SSR/SSG、SEO、表示速度改善、ルーティング、デプロイ周りまで関わるタイプ。React/Vue経験だけでは代替できない場合があります。
- 見るキーワード
- Next.js / Nuxt.js / SSR / SSG / ISR / SEO / Web Vitals
- 提案しやすい案件
- メディア、EC、SEO重視サービス、表示速度改善、公開サイト刷新
リード・設計寄り
コンポーネント設計、レビュー、技術選定、状態管理方針、品質改善、チーム支援まで担えるタイプ。実装だけでなく「どう作るか」を決められるかを確認します。
- 見るキーワード
- 設計 / アーキテクチャ / レビュー / 技術選定 / Storybook / テスト戦略
- 提案しやすい案件
- フロントリード、設計、品質改善、開発標準化、チーム立ち上げ
05 / Keywords
案件概要でよく見るキーワード
案件概要の単語は、候補者の経験と照合するための入口です。知らない単語を飛ばさず、必須条件、尚可条件、作業内容、求める深さに分けて読みます。
基礎・画面実装
HTML5CSS3JavaScriptTypeScriptレスポンシブクロスブラウザアクセシビリティFigma反映デザインカンプ反映
フレームワーク
ReactVue.jsAngularNext.jsNuxt.jsSPASSRSSGISR
状態管理・画面制御
ReduxZustandPiniaVuexReact RouterHooksComposition APIフォーム実装バリデーション
開発環境・品質
GitGitHubGitLabPull RequestnpmyarnpnpmViteWebpackJestVitestStorybookESLintPrettier
ポイント
- 「JavaScript経験」だけではReact/Vueの実務経験とは限らない。
- 「React触れます」は、実務か個人開発か、担当画面数とAPI連携まで確認する。
- 「フロントエンド募集」でも、デザイン寄り、実装寄り、設計寄りで提案すべき人材が違う。
06 / Skill Sheet
スキルシートの読み方
経験年数よりも、担当工程・技術の実務利用・チーム開発の有無を見ます。
この章で覚えること
経験年数だけで判断せず、画面数、担当工程、API連携、状態管理、Git運用、レビュー経験を拾うこと。
見る順番
- 直近案件でReact/Vue/TypeScriptを使っているか
- 担当工程が実装だけか、設計・レビューまであるか
- API連携、状態管理、テスト、Git運用があるか
- 画面数、チーム人数、担当範囲が具体的か
強い書き方
- React + TypeScriptで管理画面を20画面実装
- Figmaをもとにレスポンシブ対応まで担当
- REST API連携、エラーハンドリング、入力バリデーションを実装
- Pull Requestレビュー、Jestで単体テスト作成
確認が必要な書き方
- 「React経験あり」だけで期間・担当がない
- 「HTML/CSS修正」中心でSPA開発経験が不明
- 「Next.js使用」とあるがSSR/SSGの理解が不明
- 「チーム開発」とあるがGit運用やレビュー経験が不明
案件概要とスキルシートの照合例
| 案件概要 | スキルシートで見る記載 | 営業の確認 |
|---|---|---|
| React 3年以上 | React案件の期間、担当画面、Hooks経験 | 個人開発を含めず実務年数を確認 |
| TypeScript必須 | 型定義、props/interface、APIレスポンス型 | JavaScriptのみの経験で提案しない |
| API連携 | REST/GraphQL、Fetch/Axios、認証、エラー処理 | 画面だけでなくデータ取得まで担当したか |
| Next.js | SSR/SSG、App Router、SEO、デプロイ | React経験だけでNext.js案件に出せるか確認 |
07 / Interview
登録面談で聞くこと
新人営業は、技術を試験するのではなく「案件に出せる根拠」を集めます。回答は具体性で判断します。
この章で覚えること
候補者の言葉をそのまま受け取らず、期間、担当機能、使った技術、チームでの役割まで具体化すること。
基礎確認
- HTML/CSS/JavaScriptはそれぞれ何年、どの案件で使いましたか？
- レスポンシブ対応では、どの端末・ブラウザまで確認しましたか？
- FlexboxとGridはどのように使い分けましたか？
- Gitはブランチ運用、PR、レビューまで経験がありますか？
React / Vue確認
- ReactまたはVueで担当した画面数、機能、期間を教えてください。
- 状態管理は何を使いましたか？ useState、Redux、Zustand、Pinia、Vuexなど。
- コンポーネント設計で意識したことはありますか？
- API連携、入力チェック、エラー表示はどこまで担当しましたか？
上流・品質確認
- 基本設計や詳細設計から関わった経験はありますか？
- TypeScriptの型設計で工夫したことはありますか？
- 表示速度改善、Web Vitals、SEO対応の経験はありますか？
- テストはJest、Vitest、Storybook、E2Eのどれを使いましたか？
08 / Judgment
レベル感の見極め
「できる」と言ったかではなく、回答の具体性と担当範囲で△ / ○ / ◎を判断します。
この章で覚えること
曖昧な経験は△、画面実装とAPI連携まで具体的なら○、設計・レビュー・改善まで語れれば◎で見ること。
提案前に確認が必要
「Reactは少し触りました」「HTML/CSSの修正が中心です」など、期間・画面・担当範囲が曖昧。
出し方実装補助、既存画面修正、マークアップ中心案件なら可能性あり。
一般的な実装案件に提案可
React/Vueで画面実装、API連携、Gitでのチーム開発を具体的に話せる。
出し方SPA開発、管理画面、既存サービス改修に提案しやすい。
上流・リード寄りも狙える
設計、状態管理方針、TypeScript型設計、性能改善、レビュー、技術選定まで語れる。
出し方Next.js、フロント設計、リード、品質改善案件で強く補足する。
回答別の判断例
| 質問 | △ | ○ | ◎ |
|---|---|---|---|
| React経験は？ | 個人開発で少し触った | 実務で半年、一覧・詳細・フォーム画面を実装 | 実務で2年、設計・状態管理・レビューまで担当 |
| API連携は？ | 他の人が作った処理を修正 | Fetch/Axiosで取得・登録・エラー表示を実装 | 認証、型定義、共通化、失敗時のUXまで設計 |
| Next.jsは？ | Reactと同じ感覚で少し使用 | Next.jsでページ作成、SSG/SSRの利用経験あり | 要件に応じてSSR/SSG/ISRを選定し、SEOや表示速度も改善 |
09 / Practice
案件概要を読んで提案可否を判断する演習
実際の営業では、案件概要と候補者情報が完全一致することは多くありません。足りない条件を確認し、提案できる場合は補足コメントで不安を減らします。
この章で覚えること
「提案可」「条件付き提案」「見送り」を分け、提案する場合は不足条件と代替経験をコメントに入れること。
演習 1
Next.js / SSR / SEO改善案件
案件概要
React、TypeScript、Next.js、SSR、SEO改善、表示速度改善。メディア系サービスのフロント改修。
候補者情報
React + TypeScriptでSaaS管理画面を2年。Next.jsは個人開発でSSGを使用。SEO改善は未経験。
判断
条件付き提案。React/TypeScriptの実務は強いが、SSRとSEO改善は実務確認が必要。
提案時の補足コメント
React + TypeScriptでの画面実装、API連携、状態管理経験があります。Next.jsは個人開発で利用経験があり、SSR/SEO改善はキャッチアップ前提で、React基盤の開発力を活かせる人材です。
演習 2
HTML/CSS経験3年をReact案件に出せるか
案件概要
React必須、TypeScript尚可、管理画面の新規機能開発。API連携、フォーム実装、GitでのPR運用あり。
候補者情報
HTML/CSS経験3年。LP、コーポレートサイト、WordPress改修、レスポンシブ対応が中心。React実務なし。
判断
原則見送り。マークアップ案件なら強いが、React必須のSPA開発とは評価軸が違う。
提案時の補足コメント
この案件ではReact実務が必須のため提案は避けます。別案件では、Figma反映、HTML/CSS、レスポンシブ、CMS改修の即戦力として提案します。
演習 3
Vue 2経験者をVue 3案件に出せるか
案件概要
Vue 3、Composition API、Pinia、TypeScript。既存サービスの機能追加とリファクタリング。
候補者情報
Vue 2で業務システム画面を2年。Vuex、Options API、JavaScript中心。Vue 3とTypeScriptは学習中。
判断
条件付き提案。Vueの実務経験は評価できるが、Vue 3固有の経験とTypeScriptの深さを確認する。
提案時の補足コメント
Vue 2での画面実装、Vuexを用いた状態管理経験があります。Vue 3/Composition API/TypeScriptは実務経験が浅いため、既存Vue知識を活かしたキャッチアップ前提でご検討ください。
演習 4
React経験あり、TypeScript未経験
案件概要
React、TypeScript必須。SaaS管理画面の一覧、詳細、登録フォーム、API連携を担当。
候補者情報
React実務1年半。JavaScriptでHooks、React Router、API連携を担当。TypeScriptは個人学習のみ。
判断
案件の必須度次第。TypeScriptが厳密必須なら弱いが、React実装力を評価する現場なら条件付き提案。
提案時の補足コメント
Reactでの画面実装、Hooks、ルーティング、API連携は実務で対応済みです。TypeScriptは実務未経験ですが基礎学習済みのため、既存コードを読みながらキャッチアップ可能です。
演習 5
デザイン寄り人材と開発寄り人材の見分け
案件概要
React/Vueいずれか、API連携、状態管理、既存サービス改修。Figma確認はあるが、主担当は開発。
候補者情報
FigmaからのHTML/CSS実装、LP制作、レスポンシブは豊富。JavaScriptは簡単なアニメーション中心。API連携は未経験。
判断
開発寄り案件には見送り。デザイン再現力は強いが、API連携と状態管理が必要な案件とは合いにくい。
提案時の補足コメント
LP、コーポレートサイト、CMS、デザイン反映案件では強く提案します。React/Vueでのプロダクト開発案件では、API連携経験の有無を確認した上で判断します。
10 / Mismatch
営業がミスりやすい提案
フロントエンドは似た単語が多く、経験の深さを取り違えやすい領域です。よくあるミスマッチを先に押さえます。
ミス 1: JavaScript経験だけでReact必須に出す
Reactはコンポーネント、Hooks、状態管理、ルーティングなどの経験が見られます。素のJavaScript経験とは別物として確認します。
ミス 2: Vue 2とVue 3を同じ扱いにする
Composition APIやPinia経験が求められる案件では、Vue 2中心の人材にキャッチアップ可否を確認します。
ミス 3: Next.js案件をReact経験だけで押す
SSR/SSG、ルーティング、デプロイ、SEOの理解が問われる場合があります。React経験に加えてNext.jsの実務有無を補足します。
ミス 4: デザイン寄りと開発寄りを混同する
Figmaからのコーディングが得意な人と、API連携・状態管理が得意な人では合う案件が違います。
ポイント
- JavaScript、React、Next.js、TypeScriptはそれぞれ確認すべき経験が違う。
- Vue 2とVue 3、ReactとNext.js、HTML/CSSとSPA開発は同じ扱いにしない。
- デザイン再現が得意な人と、API連携・状態管理が得意な人を分けて提案する。
11 / Proposal
提案時の注意点とコメント例
提案コメントでは「フロントエンド経験あり」では弱いです。案件側が安心できるように、技術、担当画面、API連携、状態管理、チーム開発経験を短く補足します。
提案時の注意点
- HTML/CSS、React、Vue、Next.js、TypeScriptを同じ経験として扱わない。
- デザイン再現、画面実装、API連携、設計・レビューで強みが違うことを補足する。
- TypeScriptやNext.jsが未経験の場合は、隠さず代替経験とキャッチアップ状況を書く。
- API連携案件では、一覧取得だけか登録更新・認証・エラー処理まで担当したかを添える。
ポイント
- 提案コメントは、案件で任せたい作業に近い経験を1〜2文で補足する。
- 不足条件は隠さず、代替できる経験とキャッチアップ可否を添える。
- 面談で確認した事実ベースで書き、技術経験を盛らない。
12 / Check
確認テスト
案件概要、スキルシート、面談、提案の判断軸が残っているかを確認します。答えを暗記するより、自分の言葉で説明できることを目指します。
1. React必須案件に、JavaScript経験のみの候補者を提案してよいですか。
回答の観点: 原則NG。Reactの実務経験、個人開発、キャッチアップ可否を確認し、不足条件を明記する。
2. TypeScript経験を見るとき、何を確認しますか。
回答の観点: 実務利用期間、型定義、props/interface、APIレスポンス型、React/Vueでの利用有無を確認する。
3. SPA案件でよく確認する経験は何ですか。
回答の観点: React/Vue、ルーティング、状態管理、API連携、認証、エラー処理、Gitでのチーム開発。
4. HTML/CSS経験3年の候補者は、どの案件に強い可能性がありますか。
回答の観点: LP、コーポレートサイト、CMS、デザイン再現、レスポンシブ改修に強い可能性がある。SPA開発は別途確認する。
5. Vue 2経験者をVue 3案件に提案するときの注意点は何ですか。
回答の観点: Vueの基本経験は評価できるが、Composition API、Pinia、TypeScript、Vue 3での実務有無を確認する。
6. React経験あり、TypeScript未経験の候補者はどう補足しますか。
回答の観点: Reactで担当した画面、Hooks、ルーティング、API連携の実務経験を強調し、TypeScriptは実務未経験であることと学習状況を明記する。
7. Next.js案件でReact経験だけをどう扱いますか。
回答の観点: React経験は土台として評価できるが、Next.js固有のSSR/SSG、ルーティング、SEO、デプロイ経験は別途確認する。
8. API連携経験の有無はどう確認しますか。
回答の観点: Fetch/Axiosなどで一覧取得、登録更新、認証、エラー処理、ローディング表示、型定義まで担当したかを聞く。
ポイント
- 確認テストは暗記ではなく、案件概要・スキルシート・面談・提案をつなげて説明できるかを見る。
- React、Vue、Next.js、TypeScript、API連携の違いを自分の言葉で説明できれば実務で使いやすい。
- 分からない単語は飛ばさず、候補者に確認する質問へ変換する。
13 / Summary
まとめ
フロントエンドの提案精度は、技術名を知っているかよりも、案件の型と候補者の経験粒度を合わせられるかで決まります。
案件概要
HTML/CSS、React、Vue、TypeScript、Next.js、SPA、SSR、API連携、Gitなどを分解して読む。
スキルシート
技術名の羅列ではなく、担当画面、担当工程、実装範囲、周辺技術を見る。
登録面談
「何を使ったか」から「何を担当し、どう判断したか」まで深掘りする。
提案
フロントエンド経験ありで止めず、案件側の不安を埋める具体経験を短く添える。
提案コメント例