Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザインエンジニアへの道
Search
shintaro
March 12, 2025
0
38
デザインエンジニアへの道
shintaro
March 12, 2025
Tweet
Share
More Decks by shintaro
See All by shintaro
Role of frontend engineer at product growth team
shin_k_2281
0
500
UIデザインとフロントエンド実装のレビュープラクティス集
shin_k_2281
0
200
Wantedly の Dropdown UI カイゼンの道(調査・設計編)
shin_k_2281
2
260
エンジニアのためのFigma
shin_k_2281
0
48
知った気になれるUX心理学用語
shin_k_2281
0
100
OOUIを知る
shin_k_2281
2
66
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
Into the Great Unknown - MozCon
thekraken
40
1.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Embracing the Ebb and Flow
colly
86
4.7k
Being A Developer After 40
akosma
90
590k
Transcript
© 2025 Wantedly, Inc. デザインエンジニアへの道 Jan. 22 2025 - Shintaro
Kawabe エンジニア交流会 #2 ~エンジニアのキャリアを考える LT~
© 2025 Wantedly, Inc. 自己紹介 shintaro kawabe sh1ntaro_dev s-kawabe 所属
ウォンテッドリー株式会社 ・Visit Growth Squad ・Frontend Chapter ・Design System Guild React / TypeScript / Figma / Design System 好きな 技術 ポーカー / カラオケ / クラフ トビール 趣味 s_kawabe
© 2025 Wantedly, Inc. 目次 1. デザインエンジニアとは? 2. エンジニアがデザインを学ぶ方法 3.
デザインエンジニアへの道
© 2025 Wantedly, Inc. デザインエンジニアとは?
© 2025 Wantedly, Inc. デザインエンジニアとは? 定義1 デザイン・エンジニアとは、さまざまな工学分野(土木、機械、電気、 化学、繊維、航空宇宙、原子力、製造、システム、構造/建築/建 築など)や、ヒューマン・コンピュータ・インタラクション(HCI)などの デザイン分野において、エンジニアリング・デザイン・プロセスに重
点を置くエンジニアのことである。 https://en.wikipedia.org/wiki/Design_engineer
© 2025 Wantedly, Inc. デザインエンジニアとは? 定義2 デザインエンジニアは、デザインとエンジニアリングの橋渡し役を担 うロールです。ユーザー体験 (UX) と技術的実現性の両方を深く
理解し、デザインの意図を忠実に製品へ反映させる役割を果たし ます。以下は、デザインエンジニアの特徴や役割の詳細です。 chatGPT
© 2025 Wantedly, Inc. デザインエンジニアとは? 求められる仕事 • UIデザインの生成 • フロントエンド実装、コンポーネント実装
• プロトタイピング(デザイン、コード) • デザイナーとエンジニアのコミュニケーションの強化 ◦ デザインシステムの整備 ◦ ドキュメンテーション • プロダクトのアクセシビリティ品質の向上
© 2025 Wantedly, Inc. デザインエンジニアとは? デザインとフロントエンドの 両方の専門知識が必要
© 2025 Wantedly, Inc. エンジニアがデザインを学ぶ方法
© 2025 Wantedly, Inc. エンジニアがデザインを学ぶ⽅法 • まずは基礎を学ぶ ◦ デザイン4原則、OOUI、情報設計、配色 …etc
◦ 本やUdemy、Youtubeなど • デザイナーと近い場所でエンジニアとして働く ◦ 日々デザイナーのアウトプットを観察、 FBする、気づきを得る ◦ コミュニケーションの課題を発見する • 自らFigmaデザイン→実装の流れを体験する ◦ 個人開発などでFigma力を養う、デザイン↔コードの間にある課題を自ら体 感する • 世の中のプロダクトを観察する • 世の中のデザインシステムを観察する
© 2025 Wantedly, Inc. デザインエンジニアへの道
© 2025 Wantedly, Inc. デザインエンジニアへの道 デザインとフロントエンドの 両方の専門知識が必要 と言っても...
© 2025 Wantedly, Inc. デザインエンジニアへの道 まずは、エンジニアとして一人前を目指そう
© 2025 Wantedly, Inc. デザインエンジニアへの道 Webエンジニアになる Reactしかできない 3年⽬ 6年⽬ 9年⽬
n年⽬ 今はこの辺り Next.jsなどのエコシステム GoやRailsも少しできる この辺りでエンジニアとして 満⾜のいくレベルに 仕事としてデザイン関係 にチャレンジし始める 明確にUIデザイン⽅⾯でも バリューを出せるようになり デザインエンジニアを名乗れる くらいになる 何らかのマネージャーに …?