Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SEがエンジニアに目覚めデザイナーに転身した冒険譚

A3ec73809a2105b3a9a829f983f6587e?s=47 camcam_lemon
July 06, 2019
Design
6
1.1k

 SEがエンジニアに目覚めデザイナーに転身した冒険譚

Battle Conference Under30の登壇資料です。

A3ec73809a2105b3a9a829f983f6587e?s=128

camcam_lemon

July 06, 2019
Tweet

More Decks by camcam_lemon

See All by camcam_lemon
Yarn WorkSpaces × React Nativeの環境構築
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
0
81
フロントエンドにおけるアーキテクチャとの向き合い方
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
9
4k
UI/UXデザイナーがデザインしてるもの
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
2
290
react-reduxで追加されたHooks APIの良い所と使い方
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
5
830
ESLintで始めるTypeScriptの静的解析
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
8
1.5k
React.lazyとSuspenseで行うLazy Load
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
2
320
なんとなくで書かないReact/ReduxのテストTips
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
0
240
bundleサイズ2MBの社内サイト大改修譚.pdf
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
0
200
反復処理に速さを求めて
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
1
130

Other Decks in Design

See All in Design
Memories
E52d95ea9e12c8d38b7f283ed04a32e9?s=48 honeysink
PRO
0
190
YOUは何しにそのデザインチームへ？【デザインマネージャー編】RAKSUL編
B69dc298b4efc6dad8b9ea6178799a5e?s=48 izumi_junichi
1
680
The HIG & Software UI Design
A4c8177aa00623c9593f10be748b3861?s=48 usagimaru
3
1.4k
アンラーンし続けるデザインプロセス / DESIGNWAVEvol.04
76490a22db71352df65342bcd2d69af2?s=48 daitorii
2
340
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
3
3.4k
リサーチ文化を組織に埋め込むために実践したこと
0c6fc884dd8b5a4e584feb6a1b615a47?s=48 hiranotomoki
6
2.2k
Big Surからの四角いアイコン / Rounded Rectangle Icons since Big Sur
2174bd20a68bf55c494a424ad3790f4a?s=48 1024jp
3
600
株式会社アジケのカルチャーデック
8faccdf30052156930edee47f9aa18db?s=48 shusakuumemoto
0
680
2022年Webデザイントレンド総まとめ
292e6e6063ab997fee2c9439dfb5de42?s=48 satoshi_shimoyama
1
120
「書けるようになる」ということ
B6a2f6699d8ebaad85000f9a8e3d8ccc?s=48 aguringo
6
15k
サービス設計12箇条で紐解く「サービスデザイン思考」
40638b9e3a098313234f358d35103735?s=48 y150saya
0
610
Untitled (Baseball)
3d895659a74acee6d37b3674f6f7b650?s=48 heewon
2
430

Featured

See All Featured
What the flash - Photography Introduction
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
63
10k
Statistics for Hackers
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
782
210k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
130k
Designing for Performance
245cee81a9c424266e5e401d844ea881?s=48 lara
597
64k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
4k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.3k
Designing on Purpose - Digital PM Summit 2013
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.7k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
jQuery: Nuts, Bolts and Bling
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
6.4k
What’s in a name? Adding method to the madness
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.6k

Transcript

  1. SEがエンジニアに目覚め デザイナーに転身した冒険譚

  2. Name 甲斐田 亮一 Twitter @camcam_lemon Company 日本事務器株式会社 Skills TypeScript, React

    / Figma Occupation フロントエンドエンジニア/デザイナー

  3. 「予想」よりも「予測」をもとに仕入れと販売のマッチングを 青果生産者が入荷予定量を入力することで 販売担当者は予想ではなく予測をもとにした提案を fudoloopは適正価格で青果物を販売先へ

  4. 皆さんはどうして エンジニアになりましたか？

  5. 僕は何となくエンジニアになりました

  6. 何となく始まったSE人生 - 特にプログラミングが好きというわけではなかった - 好きな言語もないし、作ってみたいものもなかった - エンジニアとしてこうなりたいとかもなかった - これからずっとExcelで設計書を作り、 プログラムを書いていくんだろうと思っていた

  7. いわゆるSE（職業エンジニア）でした

  8. そんな僕は 部署で一人だけいた フロントエンドエンジニアの 下につくことになりました

  9. 本当に色々なことを教えてもらった ESLint

  10. すごいエンジニアと一緒に働くことで 技術力はメキメキついていった だがしかし・・・

  11. ＜ 俺4月からいなくなるから

  12. オワタ・・・

  13. ＜ 明日からはかむかむが 社内で最強の フロントエンドエンジニアだ がんばれ

  14. いつ先輩に会っても胸を張って社内 で最強のフロントエンドエンジニア と言えるようになろう そう決心した

  15. タスキを渡されたことで フロントエンドエンジニア の自分が芽吹き始める

  16. ここから本当の苦悩が始まる

  17. かさばり続ける苦悩 ・正しい実装とは？ ・質の良いコードとは？ ・もっと良い書き方あるのでは？ ・redux-form v6何が起こった！？ ・フロントのキャッチアップどうしよ ・マイグレつらい ・聞ける人がほしい ・相談できる人がほしい

    ・アーキテクトはどう考えれば... ・全然成長できてない気がする

  18. かさばり続ける苦悩 ・相談できる人がほしい 正しい実装とは？ ・ 質の良いコードとは？ ・ もっと良い書き方あるのでは？ ・ ・redux-form v6何が起こった！？

    ・フロントのキャッチアップどうしよ ・マイグレつらい ・聞ける人がほしい アーキテクトはどう考えれば... ・ ・全然成長できてない気がする

  19. コードの品質は下げたくない 自分の書いてるコードが 正しいのか良い実装なのか わからない に苦しめらながらコードを書いていく 背反 二律

  20. やってきたこと -コードを書きまくる -他社のエンジニアと交流する -あまり多くを学びすぎない（特化する） -Twiiterで有名な人をフォローする -公式リポジトリをwatch -勉強会でLT枠で応募しまくる

  21. 後ろを振り返ることなくひたすら勉強していくうちに フロントエンドにハマっていき 気づけば自走できるエンジニアになっていた エンジニアとしての自我が生まれていた

  22. 職業エンジニアって変われるの？ -難しいと思う -変われるかどうかは結局本人次第 ネガティブなイメージが蔓延してるが 僕は職業エンジニアが悪いことだとは全く思わない -僕たちエンジニアが変わるためのキッカケを与えること はできる

  23. デザイナーに転身してからは ユーザインタビューやジャーニーマップを作ったり よりユーザの近くで イケてるサービスを エンジニアリングするようになりました

  24. イケてる

  25. エンジニア デザイナー ユーザ ユーザ が考える のイケてる感 エンジニア ユーザ が考える のイケてる感

    デザイナー

  26. イケてる感はちゃんと一致してる？ エンジニア デザイナー ユーザ

  27. UXデザイナーはユーザのシナリオを通して UIデザインに落とし込んでいく シナリオ起こし 機能の洗い出し UIデザイン ジャーニーマップ UIの見た目からだけでは測れない ユーザ像（≒ペルソナ）と一連のストーリーを以って イケてる感をデザインする

  28. 慣れ親しんでるアプリやサービスは何か どういう手順で操作しているか なぜその手順なのか 見た目や操作の変化に順応できそうか 操作でつまった時にどう行動しているか 重要なのは見た目じゃなくてユーザへの共感度 ユーザ像やストーリーって？

  29. エンジニアは仕様を固め実装して機能を作ります UXデザイナーはユーザや業界を知り機能を創ります （toBは） サービス寄りの話には ユーザへの共感がないと話についていけない

  30. エンジニアは仕様を固め実装して機能を作ります UXデザイナーはユーザや業界を知り機能を創ります （toBは） サービス寄りの話には ユーザへの共感がないと話についていけない 同じものをつくってるようで 違うものをつくってるな感覚に陥る

  31. エンジニアもサービスに関心 を持つことが大事です サービスが成長していく喜び ユーザに使ってもらう喜び 感じ方変わるかも！？

  32. 最後にちょっとエモい話

  33. 最近、先輩と仕事する機会ができた 2年ぶりに一緒に仕事をして 2年ぶりにコードレビューをしてもらった

  34. ＜ ほんとに成長したね 感動したわ

  35. タスキはちゃんと 受け継げていたみたいです

  36. 僕はこれからも 社内で最強のフロントエンドエンジニア のタスキをかけていきます

  37. ご静聴ありがとうございました！