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
やっぱりやりたいのはUIデザインだった
Search
ymrl
April 14, 2022
Technology
0
28k
やっぱりやりたいのはUIデザインだった
「
TECH PLAY Talk ~現役&元フロントエンドエンジニアに聞く!キャリアの分岐点~
」での登壇資料です。
Google Slidesで閲覧するにはこちら
ymrl
April 14, 2022
Tweet
Share
More Decks by ymrl
See All by ymrl
デザイナーがTSKaigiでWAI-ARIAの話をしてみて / Speaking as a Designer: WAI-ARIA at TSKaigi
ymrl
0
15
TypeScriptとReactで、WAI-ARIAの属性を正しく利用する / Fixing WAI-ARIA Typing in React with TypeScript
ymrl
0
41
がんばらないアクセシビリティ / Accessibility Without the Struggle
ymrl
0
19
Webサイトのアクセシビリティにどう向き合う? / How Should We Approach Web Accessibility?
ymrl
0
87
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
ymrl
1
1.1k
アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind
ymrl
0
23k
「Webアプリケーションアクセシビリティ」著者の会社 (freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ?
ymrl
3
23k
freeeのアクセシビリティの取り組みの紹介
ymrl
0
24k
開発チームみんなで取り組むアクセシビリティ
ymrl
0
24k
Other Decks in Technology
See All in Technology
2025-06-26 GitHub CopilotとAI駆動開発:実践と導入のリアル
fl_kawachi
1
210
Model Mondays S2E03: SLMs & Reasoning
nitya
0
230
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
380
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
260
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
4.4k
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
1
100
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
300
How Community Opened Global Doors
hiroramos4
PRO
1
130
Geminiとv0による高速プロトタイピング
shinya337
0
180
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
170
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
Featured
See All Featured
How to Ace a Technical Interview
jacobian
277
23k
Faster Mobile Websites
deanohume
307
31k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Writing Fast Ruby
sferik
628
62k
GitHub's CSS Performance
jonrohan
1031
460k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
#TECHPLAY やっぱりやりたいのは UIデザインだった 2022.04.14 TECH PLAY Talk @ymrl
#TECHPLAY 自己紹介 • ymrl(やまある) • freee株式会社 プロダクトデザイン部 デザインリード • フロントエンドエンジニアからデザイナーになった人
• freeeのデザインシステム “Vibes” を作ったり、 アクセシビリティまわりの活動をしたりしている
#TECHPLAY ざっくりした略歴 • 大学〜大学院は、インタラクションデザインの研究室にいた ◦ デザインというよりはWebサービス作ったり電子工作したりしていた • デザイナー実績は無いがプログラミング実績はあったのでエンジニアとして就職 • インターンしていたベンチャー企業に新卒で就職、9ヶ月で辞めてfreeeへ
• freeeではフロントエンド寄りのエンジニアとして5年半勤めたのち、 2019年にデザイナーに転身して今に至る
#TECHPLAY モチベーショングラフ スタートアップに転職したぞ! サーバーサイドは自信ないけど フロントエンドなら負けない! 新プロダクトのチームに異動 めっちゃドメインの勉強して 最高のサービスを作るぞ! ドメインむっちゃ詳しくなった! もはや自分抜きではプロダクトが成立しない!
チームが大きくなって、人も入れ替わった 自分だけ取り残されてしまった ドメインに詳しい価値とは? アクセシビリティ楽しい! コレをやりきるには デザインシステムやるしかない! 一緒にデザインシステム作ってた デザイナーが退職してしまった! もう自分がデザイナーやるしかない! 意外とふつうにデザイナーやれてるし エンジニアの知見が活きてる
#TECHPLAY 学生のころ • 「Webページを作る」ことへの興味から、HTMLやCSSを学び始めた • インタフェースデザイン・インタラクションデザインの研究室に所属 ◦ プログラミングばっかりやって、サービス公開したりしてた ◦ HTML+CSS+jQuery
ならいろいろ作れる!という状態で大学院修了 • なんとなく流されるままエンジニアの道へ ◦ 個性を否定されるような感じがして、就活をがんばる気になれなかった ◦ 大学の先輩の紹介でインターンしていた会社にそのまま入社
#TECHPLAY freeeに入社したころ(2014年ごろ) • freeeは20名くらいの会社で、JavaScriptやCSSが得意な人が少なかった ◦ サイトやUIが格好悪くて「ここなら仕事が無くならなさそうだな」と思った • サーバーサイドへの苦手意識 ◦ サーバーサイドの設計などが自分でできる気がしない(知識もない)ので、
フロントエンドのタスクを積極的に巻き取ることでうまく逃げていた • 会計freee(現・freee会計)の機能開発 ◦ 基本部分が出来上がっているのでサーバーサイド設計の比重が小さい
#TECHPLAY ドメインエキスパート期(2015〜2016頃) • 給与計算freee(現・freee人事労務)開発チームに異動して、少人数での開発 • 対象となる業務ごとにゼロから設計する必要のある機能開発が多くなった ◦ 業務ドメインをエンジニア自身で咀嚼、アプリケーションの形に落とし込む • 法令や行政文書をとにかく調べて、社内で一番詳しい人みたいになる
• この頃にはサーバーサイドのこともわかってきたが、しかし自信がない • ドメインに詳しくなることが自分の価値のように思っていた ◦ 社会保険労務士試験も受けた(落ちた)
#TECHPLAY 孤独期(2017〜2018) • プロダクトの成長に伴ってチームも大きくなり、メンバーも入れ替わった ◦ ドメインに詳しい人としてチームに残り続けている ◦ 自分が離れると知識が断絶してしまう、しかし後進が育たない • あとから入ったメンバーとは知識量やモチベーションの差が大きかった
• 「このままでいいのか?」と思い始めた ◦ これ以上ドメインに詳しくなっても、転職したら価値がなくなってしまう ◦ 社労士試験は落ちた、そんなになりたいわけでもない ◦ 技術力に自信がない、対人スキルが低くてマネジメントも向いてない
#TECHPLAY アクセシビリティとの出会い • 2017年、伊原さん @magi1125 が入社、アクセシビリティの流れが生まれる • この頃からデザイナーとの課外活動みたいな動きが増える ◦ アクセシビリティの基準づくりや勉強会などで交流が多くなる
• Webデザインに興味を持った頃の気持ちへの原点回帰みたいになった ◦ 技術的なものへの興味の原点はこういうところにあったんだ、という発見 ◦ アクセシビリティを考えるのはUIの原理原則に立ち返ること、それが楽しい
#TECHPLAY デザインシステムを作りはじめる(2018〜2019) • 片手間でアクセシビリティやUI品質を向上させていくことの限界を感じ始める ◦ フロントエンド専業エンジニアがいないのでコードの治安が悪い ◦ 良くないものを1つ直すと3つ増えていくような状態 • 同僚デザイナーと大衆居酒屋で飲みながらデザインシステムによる革命を決意
◦ デザインシステムの名前は “Vibes”と名付けた • これをやらないと未来は無いと思い、20%ルールとして勝手にやりはじめた ◦ そんなに期待されていなかったと思う
#TECHPLAY デザイナーへの異動〜現在(2019〜) • Vibesが形になってきた矢先、一緒に作っていたデザイナーが退職してしまった • エンジニアの片手間でデザインシステムを作るのは無理という確信があった ◦ 退職を聞いた金曜の夜、その場でUXチームへ異動することを決意して、 週明けにUXチームのマネージャーとの面談をセットした •
デザインシステムやアクセシビリティを専門とするチームが発足した ◦ UIコンポーネントやガイドラインの整備 ◦ デザイン→実装のワークフローの整備
#TECHPLAY エンジニアからデザイナーになってここがよかった • コーディングの経験は、デザイナーとしても武器になる ◦ 周囲のデザイナーを見ていても、コーディング経験がある人と無い人では アプリケーションを見るときの解像度が違うように思える ◦ ここ最近、新卒でデザイナーになる人は特にコーディング経験を得づらい •
「自分のやりたいこと」に「デザイナー」の仕事を寄せることができた ◦ 必要な部分のコードを書いたり、テクノロジーの目線からデザインを考える ◦ 「エンジニアだからこれもやらなければならない」からの脱却
#TECHPLAY エンジニアからデザイナーになるとここがつらい • 転職先がない、転職すると給料が安くなってしまう ◦ 世の中の「デザイナー」に求められているスキルがマッチしない ◦ 「コードが書けること」はオマケ扱いみたいになってしまいがち • 個人的には「デザインエンジニア」の流れに期待しています
◦ 「Ubieにデザインエンジニアとして入社して3ヶ月経った感想」 https://zenn.dev/takanorip/articles/e94bc72b23f330 ◦ この流れで、数年後には転職の選択肢も増えてくれないかと思ってる (いま転職先を探している・数年以内に確実に転職するわけではないです)
#TECHPLAY キャリアを振り返ると • 最初は「コードが書ける」から「エンジニアになる」という選択だった • 今は「デザインをやりたい」ので「コードも書けるデザイナー」をやっている ◦ 「コードが書ける」は「デザイナーとしての武器が1つ多い」くらいの感覚 • 自分の場合はそれができる・受け入れられる環境にたまたま出会えていた
◦ メンバーの退職というタイミング ◦ エンジニアとして働いている間に蓄積していた信頼の貯金 ◦ チャレンジを後押ししてくれる企業文化
#TECHPLAY もう少し話せます https://meety.net/matches/xtdwNbUkdqZC