経歴のスタート地点
田中芽衣さん（27）は、美大のグラフィックデザイン学科を卒業後、中堅のWeb制作会社にデザイナーとして入社した。担当はBtoB企業のコーポレートサイトとLP。Figmaでカンプを作り、HTML/CSSでマークアップまで一気通貫で仕上げるスタイルが日常だった。
「色とタイポグラフィを詰める時間は本当に楽しかった」。そう振り返るが、JavaScriptのインタラクション実装はいつもエンジニアにバトンを渡していた。「動きは別の人の仕事」――そんな分業に違和感を覚えるようになったのは入社4年目、ある案件でフロントエンドエンジニアが急遽抜け、自分のデザイン意図がコードに正確に落ちないまま納品された経験がきっかけだった。
「デザインだけでは、もう自分のやりたい表現が完結しない」。彼女は独学でJavaScriptに向き合い始めた。
最初のつまずき
ProgateとUdemyを2ヶ月走り、構文は一通り理解した。しかし、いざ簡単なTodoアプリを作ろうとすると手が止まった。「ボタンを押したら何が起きるのか、頭の中でフローが描けない」。デザイン思考は空間的・全体的にレイアウトを捉える。一方プログラミングは、状態の変化を時系列で順序立てて記述する。脳の使い方そのものが違うことに気づくまで数ヶ月を要した。
次に立ちはだかったのがReactの状態管理だった。「useState までは追えるけれど、コンポーネントが増えるとどこに何の状態を置くべきかわからなくなる」。propsのバケツリレー、useEffectの依存配列、再レンダリングの仕組み――どれも初学者の心を折るには十分な概念だった。
UI実装の見た目だけはきれいに作れるのに、ロジックがスパゲッティになる自分のコードを見て、「やっぱり私はエンジニアに向いてないのかも」と何度も筆を置きかけた。
転機 — Reactとの出会い
潮目を変えたのは『りあクト！』だった。「会話形式で書かれているのに、内容は容赦なく深い」。彼女は3周読み、関数コンポーネント・フック・型システムの背後にある“なぜそう設計されているのか”を理解できるようになった。
さらに『プロを目指す人のためのTypeScript入門』で型の世界に触れたとき、「型はデザインのレギュレーションと似ている」と腹落ちしたという。色やフォントの規則がデザインシステムなら、型はコードのデザインシステムだ。この比喩を手にした瞬間、TypeScriptは敵から味方に変わった。
半年後、彼女は副業でランディングページのフロント実装を請け負い始めた。「Figmaで自分が描いたデザインを、自分の手でReactに落とし込めた瞬間は震えました」。1年後には、デザインシステムの設計と実装の両方ができる人材として、SaaSスタートアップから業務委託オファーが届いた。
いま振り返る選書
田中さんが特に大きな転機を感じた書籍は次の通り。
- 『確かな力が身につくJavaScript超入門』: 構文の写経から一段深く、なぜその書き方になるのかを丁寧に追えた最初の本。
- 『プロを目指す人のためのTypeScript入門』: 型システムを「デザインの規律」として捉え直すきっかけになった。
- 『りあクト！』: 関数コンポーネントとフックの背後にある思想を理解できた決定打。
- 『CSS設計完全ガイド』: デザイナー時代のCSS知識を、保守性のある設計に昇華するために何度も読み返した。
- 『フロントエンドテスト入門』: 「動くコード」から「壊れにくいコード」へ意識を変えた一冊。
「デザイナー時代の美意識は、コードを書くようになっても財産だった。むしろ、エンジニアの中では希少な視点として評価される」と彼女は語る。
これから挑む人へ
「デザイナーからエンジニアへの転身は、ゼロからのスタートではない」。田中さんは言い切る。色彩・余白・タイポグラフィへの感覚、ユーザーへの配慮――これらはエンジニアリングの世界でも希少なスキルだ。
アドバイスは3つ。第一に、最初の壁は構文ではなく「ロジックの組み立て方」だと知ること。フローチャートを紙に書きながら考える練習が効く。第二に、Reactは独学で挫折しやすいので、信頼できる1冊を3周する方が10冊を1周より早い。第三に、デザインの強みを捨てないこと。デザインエンジニアという職種は、まだ希少だからこそチャンスがある。
「いつか自分のデザインシステムを持って、独立したい」。彼女の夢はもう絵空事ではない。
彼女の転身は、デザイナー職とエンジニア職の境界が溶けつつある時代の象徴でもあり、後進への希望にもなっている。境界を越えるたびに、新しい武器が手に入る――その実感が、彼女を次の挑戦へと押し出している。