デザインエンジニアへの道

Transcript

1. © 2025 Wantedly, Inc. デザインエンジニアへの道 Jan. 22 2025 - Shintaro Kawabe エンジニア交流会 #2 ～エンジニアのキャリアを考える LT～
2. © 2025 Wantedly, Inc. 自己紹介 shintaro kawabe sh1ntaro_dev s-kawabe 所属 ウォンテッドリー株式会社 ・Visit Growth Squad ・Frontend Chapter ・Design System Guild React / TypeScript / Figma / Design System 好きな 技術 ポーカー / カラオケ / クラフ トビール 趣味 s_kawabe
3. © 2025 Wantedly, Inc. 目次 1. デザインエンジニアとは？ 2. エンジニアがデザインを学ぶ方法 3. デザインエンジニアへの道
4. © 2025 Wantedly, Inc. デザインエンジニアとは？
5. © 2025 Wantedly, Inc. デザインエンジニアとは？ 定義1 デザイン・エンジニアとは、さまざまな工学分野（土木、機械、電気、 化学、繊維、航空宇宙、原子力、製造、システム、構造／建築／建 築など）や、ヒューマン・コンピュータ・インタラクション（HCI）などの デザイン分野において、エンジニアリング・デザイン・プロセスに重 点を置くエンジニアのことである。 https://en.wikipedia.org/wiki/Design_engineer
6. © 2025 Wantedly, Inc. デザインエンジニアとは？ 定義2 デザインエンジニアは、デザインとエンジニアリングの橋渡し役を担 うロールです。ユーザー体験 (UX) と技術的実現性の両方を深く 理解し、デザインの意図を忠実に製品へ反映させる役割を果たし ます。以下は、デザインエンジニアの特徴や役割の詳細です。 chatGPT
7. © 2025 Wantedly, Inc. デザインエンジニアとは？ 求められる仕事 • UIデザインの生成 • フロントエンド実装、コンポーネント実装 • プロトタイピング（デザイン、コード） • デザイナーとエンジニアのコミュニケーションの強化 ◦ デザインシステムの整備 ◦ ドキュメンテーション • プロダクトのアクセシビリティ品質の向上
8. © 2025 Wantedly, Inc. デザインエンジニアとは？ デザインとフロントエンドの 両方の専門知識が必要
9. © 2025 Wantedly, Inc. エンジニアがデザインを学ぶ方法
10. © 2025 Wantedly, Inc. エンジニアがデザインを学ぶ⽅法 • まずは基礎を学ぶ ◦ デザイン4原則、OOUI、情報設計、配色 …etc ◦ 本やUdemy、Youtubeなど • デザイナーと近い場所でエンジニアとして働く ◦ 日々デザイナーのアウトプットを観察、 FBする、気づきを得る ◦ コミュニケーションの課題を発見する • 自らFigmaデザイン→実装の流れを体験する ◦ 個人開発などでFigma力を養う、デザイン↔コードの間にある課題を自ら体 感する • 世の中のプロダクトを観察する • 世の中のデザインシステムを観察する
11. © 2025 Wantedly, Inc. デザインエンジニアへの道
12. © 2025 Wantedly, Inc. デザインエンジニアへの道 デザインとフロントエンドの 両方の専門知識が必要 と言っても...
13. © 2025 Wantedly, Inc. デザインエンジニアへの道 まずは、エンジニアとして一人前を目指そう
14. © 2025 Wantedly, Inc. デザインエンジニアへの道 Webエンジニアになる Reactしかできない 3年⽬ 6年⽬ 9年⽬ n年⽬ 今はこの辺り Next.jsなどのエコシステム GoやRailsも少しできる この辺りでエンジニアとして 満⾜のいくレベルに 仕事としてデザイン関係 にチャレンジし始める 明確にUIデザイン⽅⾯でも バリューを出せるようになり デザインエンジニアを名乗れる くらいになる 何らかのマネージャーに …?