転職サービス
レバテックキャリア
デザインとフロントエンドの両方のスキルを活かせる求人が見つかりやすい
※ サービス選びの参考情報。利用は各自の判断で。
学習ストーリー
田中 芽衣さん本人の学習設計の語り
HTML/CSSの基盤はあるため、JavaScriptとTypeScriptの習得からスタートする。 フレームワーク（React）を学んだ後、テスト・アクセシビリティ・パフォーマンスなど エンジニアリングの品質面を強化し、6ヶ月後の転職を目指す。
田中 芽衣の学習プラン
Webデザイナー → フロントエンドエンジニア
最終更新: 2026-10-29 
田中 芽衣（27歳）
Webデザイナー フロントエンドエンジニア
フロントエンドエンジニア: Webアプリケーションのユーザーインターフェースを設計・実装する職種。HTML/CSS/JavaScriptを駆使して快適なユーザー体験を構築する。
完全プランを見るプロフィール / 経歴
Web制作会社でデザイナーとして4年間勤務。Figmaを使ったUIデザインとコーディング（HTML/CSS）は 日常的に行っているが、JavaScriptの実装はエンジニアに任せる分業体制で働いてきた。デザインの 意図を正確にコードで表現したいという想いが強まり、自分自身でインタラクションまで実装できる フロントエンドエンジニアへの転身を決意。デザインの知識とユーザー視点を活かしつつ、 エンジニアリングスキルを本格的に伸ばしたい。
きっかけ・モチベーション
「「デザインを渡して終わり」ではなく、自分の手でユーザー体験を最後まで作り込みたい。 デザインとコードの両方がわかるエンジニアは市場価値が高く、UI/UXに強い フロントエンドエンジニアとしてキャリアを確立したいと考えている。 」
現在の課題
- JavaScriptの実装を他のエンジニアに任せてきたため応用力が弱い
- TypeScriptの型システムを理解していない
- Reactなどのモダンフレームワークの経験がない
- テスト手法（単体テスト・E2Eテスト）の知識が皆無
スキルギャップ
現在のスキル水準とフロントエンドエンジニアに必要な水準を並べ、何を伸ばすべきかを可視化しています。
HTML/CSS 4 5
JavaScript/TS 2 4
フレームワーク 0 4
レスポンシブ設計 3 5
テスト手法 0 3
パフォーマンス 1 4
アクセシビリティ 2 4
デザイン理解 5 5
埋めるべきギャップ
JavaScript応用 TypeScript Reactフレームワーク テスト手法 パフォーマンス最適化
学習プラン全体像
6
ヶ月
週12
時間
3
フェーズ
-
Phase 1: JavaScript/TypeScript基礎
8週間プログラミング言語としてのJavaScript/TypeScriptを体系的に学び、ロジック実装力を養う
-
Phase 2: React + コンポーネント設計
8週間Reactによるコンポーネント指向開発を習得し、CSS設計とテストの基本を身につける
-
Phase 3: 実践アプリケーション開発
8週間SSR/SSGを活用した実践的なアプリ開発、アクセシビリティとパフォーマンスの改善手法を学ぶ
転職を意識した次の一歩
web-designer frontend-engineer
このキャリア遷移を目指す田中 芽衣さんが活用を検討しやすい転職サービスをまとめました。
転職サービス
Green
スタートアップ・ベンチャー企業のフロントエンドエンジニア求人が豊富
※ サービス選びの参考情報。利用は各自の判断で。
似た背景のペルソナ
同じ職種・近いレベル感を目指す他のペルソナです。学習プランや読む順番のバリエーションとして参考にしてください。
フロントエンドエンジニアのロードマップへ
田中 芽衣さんの学習プランは「フロントエンドエンジニア」を目指す一例です。 職種全体のロードマップ・必要スキル・代表的な書籍は専用ページで体系的に確認できます。
フロントエンドエンジニアのロードマップを見る →