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
26k
やっぱりやりたいのはUIデザインだった
「
TECH PLAY Talk ~現役&元フロントエンドエンジニアに聞く!キャリアの分岐点~
」での登壇資料です。
Google Slidesで閲覧するにはこちら
ymrl
April 14, 2022
Tweet
Share
More Decks by ymrl
See All by ymrl
Webサイトのアクセシビリティにどう向き合う? / How Should We Approach Web Accessibility?
ymrl
0
42
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
ymrl
1
910
アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind
ymrl
0
21k
「Webアプリケーションアクセシビリティ」著者の会社 (freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ?
ymrl
3
22k
freeeのアクセシビリティの取り組みの紹介
ymrl
0
23k
開発チームみんなで取り組むアクセシビリティ
ymrl
0
23k
アクセシビリティ アプリを企画する時点で考えること
ymrl
1
23k
Web技術基礎 for インターン
ymrl
1
7.4k
Webアクセシビリティ関連業務のためにブックマークレット書いてる
ymrl
0
210
Other Decks in Technology
See All in Technology
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
260
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
560
JavaにおけるNull非許容性
skrb
2
2.6k
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
160
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
540
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
340
EDRの検知の仕組みと検知回避について
chayakonanaika
11
4.7k
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
190
組織におけるCCoEの役割とAWS活用事例
nrinetcom
PRO
4
120
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
590
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
300
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
Designing for Performance
lara
604
68k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
For a Future-Friendly Web
brad_frost
176
9.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Docker and Python
trallard
44
3.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Scaling GitHub
holman
459
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Visualization
eitanlees
146
15k
Documentation Writing (for coders)
carmenintech
67
4.6k
KATA
mclloyd
29
14k
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