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
21k
やっぱりやりたいのはUIデザインだった
「
TECH PLAY Talk ~現役&元フロントエンドエンジニアに聞く!キャリアの分岐点~
」での登壇資料です。
Google Slidesで閲覧するにはこちら
ymrl
April 14, 2022
Tweet
Share
More Decks by ymrl
See All by ymrl
アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind
ymrl
0
16k
「Webアプリケーションアクセシビリティ」著者の会社 (freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ?
ymrl
2
16k
freeeのアクセシビリティの取り組みの紹介
ymrl
0
18k
開発チームみんなで取り組むアクセシビリティ
ymrl
0
18k
アクセシビリティ アプリを企画する時点で考えること
ymrl
1
18k
Web技術基礎 for インターン
ymrl
1
6.4k
Webアクセシビリティ関連業務のためにブックマークレット書いてる
ymrl
0
160
Webエンジニアとして いま知っておきたい Webアクセシビリティ
ymrl
3
670
世界を変えるための デザインシステム (アクセシビリティ編)
ymrl
1
6.7k
Other Decks in Technology
See All in Technology
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
35k
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
190
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
1
650
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
7
1.3k
ルーターでプレゼンする
puhitaku
1
3.3k
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
330
Azureの基本的な権限管理の勉強会
yhana
1
2.1k
Building Dashboards as a Hobby
egmc
0
370
今さら聞けないDocker入門 〜 Dockerfileのベストプラクティス編
devops_vtj
4
570
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.2k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
37k
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
450
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
91
13k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
14
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Building Your Own Lightsaber
phodgson
100
5.7k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Optimising Largest Contentful Paint
csswizardry
12
2.4k
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