やっぱりやりたいのはUIデザインだった

「TECH PLAY Talk　～現役＆元フロントエンドエンジニアに聞く！キャリアの分岐点～」での登壇資料です。

Google Slidesで閲覧するにはこちら

Transcript

1. #TECHPLAY やっぱりやりたいのは UIデザインだった 2022.04.14 TECH PLAY Talk @ymrl
2. #TECHPLAY 自己紹介 • ymrl（やまある） • freee株式会社 プロダクトデザイン部 デザインリード • フロントエンドエンジニアからデザイナーになった人 • freeeのデザインシステム “Vibes” を作ったり、 アクセシビリティまわりの活動をしたりしている
3. #TECHPLAY ざっくりした略歴 • 大学〜大学院は、インタラクションデザインの研究室にいた ◦ デザインというよりはWebサービス作ったり電子工作したりしていた • デザイナー実績は無いがプログラミング実績はあったのでエンジニアとして就職 • インターンしていたベンチャー企業に新卒で就職、9ヶ月で辞めてfreeeへ • freeeではフロントエンド寄りのエンジニアとして5年半勤めたのち、 2019年にデザイナーに転身して今に至る
4. #TECHPLAY モチベーショングラフ スタートアップに転職したぞ！ サーバーサイドは自信ないけど フロントエンドなら負けない！ 新プロダクトのチームに異動 めっちゃドメインの勉強して 最高のサービスを作るぞ！ ドメインむっちゃ詳しくなった！ もはや自分抜きではプロダクトが成立しない！ チームが大きくなって、人も入れ替わった 自分だけ取り残されてしまった ドメインに詳しい価値とは？ アクセシビリティ楽しい！ コレをやりきるには デザインシステムやるしかない！ 一緒にデザインシステム作ってた デザイナーが退職してしまった！ もう自分がデザイナーやるしかない！ 意外とふつうにデザイナーやれてるし エンジニアの知見が活きてる
5. #TECHPLAY 学生のころ • 「Webページを作る」ことへの興味から、HTMLやCSSを学び始めた • インタフェースデザイン・インタラクションデザインの研究室に所属 ◦ プログラミングばっかりやって、サービス公開したりしてた ◦ HTML+CSS+jQuery ならいろいろ作れる！という状態で大学院修了 • なんとなく流されるままエンジニアの道へ ◦ 個性を否定されるような感じがして、就活をがんばる気になれなかった ◦ 大学の先輩の紹介でインターンしていた会社にそのまま入社
6. #TECHPLAY freeeに入社したころ（2014年ごろ） • freeeは20名くらいの会社で、JavaScriptやCSSが得意な人が少なかった ◦ サイトやUIが格好悪くて「ここなら仕事が無くならなさそうだな」と思った • サーバーサイドへの苦手意識 ◦ サーバーサイドの設計などが自分でできる気がしない（知識もない）ので、 フロントエンドのタスクを積極的に巻き取ることでうまく逃げていた • 会計freee（現・freee会計）の機能開発 ◦ 基本部分が出来上がっているのでサーバーサイド設計の比重が小さい
7. #TECHPLAY ドメインエキスパート期（2015〜2016頃） • 給与計算freee（現・freee人事労務）開発チームに異動して、少人数での開発 • 対象となる業務ごとにゼロから設計する必要のある機能開発が多くなった ◦ 業務ドメインをエンジニア自身で咀嚼、アプリケーションの形に落とし込む • 法令や行政文書をとにかく調べて、社内で一番詳しい人みたいになる • この頃にはサーバーサイドのこともわかってきたが、しかし自信がない • ドメインに詳しくなることが自分の価値のように思っていた ◦ 社会保険労務士試験も受けた（落ちた）
8. #TECHPLAY 孤独期（2017〜2018） • プロダクトの成長に伴ってチームも大きくなり、メンバーも入れ替わった ◦ ドメインに詳しい人としてチームに残り続けている ◦ 自分が離れると知識が断絶してしまう、しかし後進が育たない • あとから入ったメンバーとは知識量やモチベーションの差が大きかった • 「このままでいいのか？」と思い始めた ◦ これ以上ドメインに詳しくなっても、転職したら価値がなくなってしまう ◦ 社労士試験は落ちた、そんなになりたいわけでもない ◦ 技術力に自信がない、対人スキルが低くてマネジメントも向いてない
9. #TECHPLAY アクセシビリティとの出会い • 2017年、伊原さん @magi1125 が入社、アクセシビリティの流れが生まれる • この頃からデザイナーとの課外活動みたいな動きが増える ◦ アクセシビリティの基準づくりや勉強会などで交流が多くなる • Webデザインに興味を持った頃の気持ちへの原点回帰みたいになった ◦ 技術的なものへの興味の原点はこういうところにあったんだ、という発見 ◦ アクセシビリティを考えるのはUIの原理原則に立ち返ること、それが楽しい
10. #TECHPLAY デザインシステムを作りはじめる（2018〜2019） • 片手間でアクセシビリティやUI品質を向上させていくことの限界を感じ始める ◦ フロントエンド専業エンジニアがいないのでコードの治安が悪い ◦ 良くないものを1つ直すと3つ増えていくような状態 • 同僚デザイナーと大衆居酒屋で飲みながらデザインシステムによる革命を決意 ◦ デザインシステムの名前は “Vibes”と名付けた • これをやらないと未来は無いと思い、20%ルールとして勝手にやりはじめた ◦ そんなに期待されていなかったと思う
11. #TECHPLAY デザイナーへの異動〜現在（2019〜） • Vibesが形になってきた矢先、一緒に作っていたデザイナーが退職してしまった • エンジニアの片手間でデザインシステムを作るのは無理という確信があった ◦ 退職を聞いた金曜の夜、その場でUXチームへ異動することを決意して、 週明けにUXチームのマネージャーとの面談をセットした • デザインシステムやアクセシビリティを専門とするチームが発足した ◦ UIコンポーネントやガイドラインの整備 ◦ デザイン→実装のワークフローの整備
12. #TECHPLAY エンジニアからデザイナーになってここがよかった • コーディングの経験は、デザイナーとしても武器になる ◦ 周囲のデザイナーを見ていても、コーディング経験がある人と無い人では アプリケーションを見るときの解像度が違うように思える ◦ ここ最近、新卒でデザイナーになる人は特にコーディング経験を得づらい • 「自分のやりたいこと」に「デザイナー」の仕事を寄せることができた ◦ 必要な部分のコードを書いたり、テクノロジーの目線からデザインを考える ◦ 「エンジニアだからこれもやらなければならない」からの脱却
13. #TECHPLAY エンジニアからデザイナーになるとここがつらい • 転職先がない、転職すると給料が安くなってしまう ◦ 世の中の「デザイナー」に求められているスキルがマッチしない ◦ 「コードが書けること」はオマケ扱いみたいになってしまいがち • 個人的には「デザインエンジニア」の流れに期待しています ◦ 「Ubieにデザインエンジニアとして入社して3ヶ月経った感想」 https://zenn.dev/takanorip/articles/e94bc72b23f330 ◦ この流れで、数年後には転職の選択肢も増えてくれないかと思ってる （いま転職先を探している・数年以内に確実に転職するわけではないです）
14. #TECHPLAY キャリアを振り返ると • 最初は「コードが書ける」から「エンジニアになる」という選択だった • 今は「デザインをやりたい」ので「コードも書けるデザイナー」をやっている ◦ 「コードが書ける」は「デザイナーとしての武器が1つ多い」くらいの感覚 • 自分の場合はそれができる・受け入れられる環境にたまたま出会えていた ◦ メンバーの退職というタイミング ◦ エンジニアとして働いている間に蓄積していた信頼の貯金 ◦ チャレンジを後押ししてくれる企業文化
15. #TECHPLAY もう少し話せます https://meety.net/matches/xtdwNbUkdqZC