Webエンジニア・フロントエンドの職務経歴書の書き方｜例文とテンプレート
Webエンジニア・フロントエンドの職務経歴書は、使えるフレームワークの名前を並べるだけでは差がつきません。採用担当者は、ReactやVue、Next.jsでどの規模の画面を、どんな状態管理と型定義で実装したか、レスポンシブとアクセシビリティをどこまで担保したか、Core Web Vitals（LCP・INP・CLS）をどれだけ改善したかを見ています。デザイナーやバックエンドとの分担まで書くと、チームでの働き方が伝わります。
Webエンジニア・フロントエンドの職務経歴書で押さえる3つのポイント
① フレームワークは規模と設計まで書く
「React経験3年」だけでは判断できません。「Next.jsのApp RouterとTypeScriptで会員向け画面を35枚構築し、共通コンポーネント約120点を設計」「状態管理はZustand、フォームはReact Hook FormとZodでバリデーションを実装」のように、画面数、採用した設計、選定の理由を添えます。既存コードへの途中参加か、ゼロからの立ち上げかも必ず明記してください。
② レスポンシブ対応は端末と不具合で書く
スマートフォン比率の高いサービスでは、実装の丁寧さが売上に直結します。「ブレークポイントを375・768・1280の3点に統一し、CSS設計をTailwindのユーティリティに寄せた」「iOS Safariのセーフエリアと、キーボード表示時に入力欄が隠れる不具合を修正」「実機3機種での確認をリリース前チェックリストに追加」のように、対応した端末と直した不具合を具体的に書きます。
③ Core Web Vitalsの改善を数値で示す
表示速度はフロントエンドの評価軸として定着しています。「画像をWebP化しnext/imageの遅延読み込みを導入してLCPを4.1秒から2.2秒へ改善」「不要な再レンダリングをメモ化で削減しINPを320msから160msへ改善」「広告枠に固定高さを指定しCLSを0.25から0.02へ」のように、指標名、改善前後の数値、施策の3点をセットで書いてください。
そのまま使える例文
職務要約の例文
株式会社〇〇にて、5年間、BtoC向けECサイトのフロントエンド開発を担当してまいりました。React・TypeScriptでの実装を中心に、直近2年はNext.jsへの移行プロジェクトで共通コンポーネントの設計とレビューを担当。スマートフォン経由の流入が8割を占めるため、レスポンシブ対応と表示速度の改善に注力し、主要導線のLCPを2秒台まで短縮しました。デザイナー2名、バックエンド4名のチームで開発を進めております。
業務内容・実績の例文
会員向けマイページをNext.jsとTypeScriptで刷新。画面数32、共通コンポーネント約110点の設計とレビューを担当しました。 商品一覧の画像をWebP化し遅延読み込みを導入。LCPを4.1秒から2.2秒へ短縮し、モバイルの直帰率を6%改善しました。 デザイナーとFigma上で余白と文字サイズのルールを整理し、Storybookでコンポーネントを共有する運用を立ち上げました。 フォームのキーボード操作とスクリーンリーダーの読み上げを見直し、主要4画面でWCAG 2.1 AAの項目を満たしました。
活かせる経験・知識・技術の例文
React / Next.js / TypeScript（実務5年） レスポンシブ実装、Tailwind CSS、Storybook Core Web Vitals改善（LCP・INP・CLS） Jest / Playwright による自動テストの整備
自己PRの例文
前職では、スマートフォンでの読み込みの遅さが離脱の原因になっていました。Lighthouseと実ユーザーのフィールドデータを両方確認し、影響の大きい順に、画像の最適化、フォントの読み込み方法、サードパーティタグの遅延読み込みへと手を入れました。結果としてLCPは4.1秒から2.2秒、CLSは0.25から0.02となり、モバイルの購入完了率が前月比8%向上しました。計測してから直す進め方と、デザイナーと認識を合わせる姿勢を貴社でも続けます。
よくある惜しい書き方と、その直し方
惜しいReactとVueを使った開発ができます。
直した例React・TypeScriptで画面数32の会員向けSPAを新規構築し、共通コンポーネント約110点の設計を担当しました。
フレームワーク名だけでは、チュートリアル程度か実務規模かを区別できません。画面数やコンポーネント数、新規構築か既存改修か、状態管理の方針まで書くことで、入社後に任せられる範囲が具体的に伝わります。参加時期と自分の担当箇所も添えてください。
惜しいサイトの表示速度を改善しました。
直した例画像のWebP化と遅延読み込みでLCPを4.1秒から2.2秒へ改善し、モバイルの直帰率を6%下げました。
速度改善は指標と数値があって初めて実力の証明になります。Core Web Vitalsのどの指標を、どの施策で、どこまで動かしたかを書くことで、感覚ではなく計測に基づいて改善できる人だと判断され、他の候補者と差がつきます。
よくある質問
未経験やスクール卒でもフロントエンドの求人に応募できますか？
20代であれば、自主制作のアプリとGitHubのコードを提出物として評価する企業があります。HTML・CSSのレスポンシブ実装、JavaScriptでの非同期処理、Reactでの状態管理まで自力で書けることを示してください。制作物は完成度よりも、技術選定の理由を説明できるかが見られます。
コーダーやWeb制作会社の出身ですが応募できますか？
応募できます。実装したページ本数、対応したブラウザと端末、jQueryからの置き換え経験、CMSのテンプレート改修などを書いてください。そのうえで、業務でも個人制作でもよいのでReactやTypeScriptで作ったものを1つ添えると、移行の意思と学習速度が伝わります。
ポートフォリオは職務経歴書とどう使い分けますか？
職務経歴書には案件の規模、体制、担当範囲、数値の成果を書き、ポートフォリオにはコードと画面を置きます。経歴書には必ずURLを記載し、どの部分を自分が実装したかを一文添えてください。受託案件で公開できない場合は、技術構成と役割だけを文章で説明します。