コトラ（広報チーム） 
フロントエンドエンジニアやマークアップエンジニアとしてWeb制作・実装の経験を積んだ方の中には、「もっとユーザーの反応に近いところで仕事をしたい」「設計から関わってUIや体験を最適化したい」と感じることもあるでしょう。実は、UI・UXデザイン職はエンジニア出身者のポテンシャルを高く評価する傾向にあり、適切な準備とアピールができれば、キャリアチェンジは十分に可能です。本記事では、その具体的なステップから、必要なスキル、ポートフォリオの作り方、志望動機、職務経歴書の書き方まで詳しく解説します。
目次
- 1. エンジニアとUI・UXデザイナーの違いとは
- 2. なぜエンジニア出身者がデザイン職で活躍できるのか
- 3. 転職を成功させるための5ステップ
- 4. 必要なスキルと学習法
- 5. ポートフォリオの作り方
- 6. 職務経歴書の書き方
- 7. 志望動機の例文
- 8. まとめ
1. エンジニアとUI・UXデザイナーの違いとは
まず、職種の性質やアウトプットのゴールを整理しましょう。
| 項目 | フロントエンド／マークアップエンジニア | UI・UXデザイナー |
|---|---|---|
| 主な目的 | デザインをコードに落とし込み、実装する | ユーザー体験の設計・最適化 |
| 関与フェーズ | 実装以降（要件をもとに形にする） | 構想〜設計〜プロトタイプ作成 |
| 成果物 | HTML/CSS/JSなどのフロント実装 | ワイヤーフレーム／UI設計／ユーザーフロー |
2. なぜエンジニア出身者がデザイン職で活躍できるのか
UI・UX領域では、実装を理解している人材が非常に重宝されます。理由は以下のとおりです：
- 技術的制約を加味した設計ができる
- エンジニアとの共通言語がある（コミュニケーションがスムーズ）
- プロトタイピングの精度・速度が高い
- 自走できるUXデザイナーを求める企業にとって「実装も理解できるデザイナー」は貴重
3. 転職を成功させるための5ステップ
- UI・UXの基礎理解：人間中心設計、インタラクションデザイン、情報設計（IA）を学ぶ
- 既存業務の棚卸し：今までの案件でユーザー視点を意識した設計・改善をしていた実績を抽出
- FigmaやXDの習得：主要なUIデザインツールを使える状態にしておく
- ポートフォリオ制作：デザインプロセスや設計意図がわかる形式で作成
- 面接・選考対策：「なぜデザインなのか」と「どう活かせるのか」の言語化
4. 必要なスキルと学習法
- UIデザイン：Figma、Adobe XD、Sketch（中〜上級）
- UX設計：ペルソナ設計、ユーザーストーリーマッピング
- 情報設計：ワイヤーフレーム、サイトマップ作成
- テスト／検証：ユーザビリティテスト、ABテストの設計
おすすめ教材：
– Udemy「ユーザー体験を学ぶ完全講座」
– 書籍『ノンデザイナーズ・デザインブック』『UIデザインの教科書』
– YouTube：海外のUXチュートリアル
5. ポートフォリオの作り方
企業は「UIの見た目」よりも「思考プロセス」を見ています。以下のような構成が効果的です。
- 背景（課題と目的）
- ターゲット分析（ユーザー理解）
- 課題抽出と仮説
- 設計プロセス（ワイヤー／フロー／UI案）
- テストと改善（改善前後の比較）
6. 職務経歴書の書き方
以下のようなアプローチで「ユーザー視点」「設計視点」を強調しましょう。
- LP制作において、UI改善提案をもとにCV率20%改善
- CMS開発プロジェクトにおいて、UXフローを自ら設計し実装工数を15%削減
- HTML/CSS実装時にアクセシビリティを考慮し改善提案、社内標準として採用
7. 志望動機の例文
エンジニアとしての経験を踏まえ、「なぜデザインに進みたいのか」を明確にしましょう。
【志望動機例】
私はこれまでフロントエンドエンジニアとして、WebサービスのUI実装を中心に携わってまいりました。業務の中で、単なる見た目の再現だけでなく「ユーザーにとっての使いやすさ」「体験のスムーズさ」を考える重要性を実感し、自らUI設計提案やユーザビリティ改善に取り組む機会も増えてきました。今後は、ユーザーの行動や心理を起点に体験を設計するUX領域により深く関わり、プロダクト価値の向上に貢献していきたいと考えております。エンジニアとしての視点とデザインへの探究心を融合し、UI・UXデザイナーとして成長していきたいと考え、御社を志望いたしました。
8. まとめ
UI・UXデザイナーは、見た目をつくる職種ではなく、「体験」を設計する職種です。実装からスタートしたキャリアであっても、ユーザー視点を持ち、設計に興味を持った方であれば、十分にUI・UX領域へキャリアチェンジすることが可能です。
ご自身の経験を丁寧に言語化し、ポートフォリオで「思考のプロセス」を伝えることが、転職成功の鍵となります。
新しいキャリアの一歩として、UI・UXデザインの世界にぜひ挑戦してみてください。
【職務経歴書（サンプル）】
氏名：佐々木 翔 生年：1992年生まれ ■職務要約： Web制作会社およびSaaS企業にて、フロントエンド実装とUI改善に関する業務に約6年従事。HTML/CSS/JavaScriptによる実装のほか、ユーザビリティの観点からUI改善提案・ワイヤーフレーム作成にも一部関与。実装とユーザー体験をつなぐデザイナーを目指し、現在はFigmaなどを用いたUI設計業務にシフト中。 ■職務経歴： 株式会社WebMotion（2020年4月〜現在） 担当業務： ・企業コーポレートサイト／LPのフロント実装（HTML5、SCSS、GSAPなど） ・UIパーツの設計とコンポーネント管理 ・サイトリニューアル時の情報設計補助、ユーザーフロー改善提案 ・社内デザイナーと協働し、Adobe XDからFigmaへの移行推進 ■保有スキル： ・Figma、Adobe XD、Photoshop、Illustrator ・HTML5、CSS3、JavaScript、React（基本） ・SEO／アクセシビリティ設計 ■学歴： 日本大学 芸術学部 情報デザイン学科（2015年3月卒） ■保有資格： ・Webクリエイター能力認定試験 上級（2017年） ・HCD認定人間中心設計スペシャリスト（取得予定） ■ポートフォリオURL：
