価値あるフロントエンドデザイン領域開拓

Slide 1

Slide 1 text

価値あるフロントエンドデザイン領域開拓価値あるフロントエンドデザイン領域開拓 Futoshi Iwashita

Slide 2

Slide 2 text

自己紹介自己紹介岩下太 (@jaxx2104) 株式会社リクルート Front-end engineer

Slide 3

Slide 3 text

やってきたことやってきたこと Vue にしたり Nuxt にしたり VuePress にしたり etc.

Slide 4

Slide 4 text

趣味 #keyboard 趣味 #keyboard

Slide 5

Slide 5 text

趣味 #minecraft 趣味 #minecraft

Slide 6

Slide 6 text

キーボードとゲームがあればだいたいの人間わかり合える

Slide 7

Slide 7 text

本題本題

Slide 8

Slide 8 text

フロントエンドの周辺フロントエンドの周辺

Slide 9

Slide 9 text

Somewhere between design – a world of personas, pixels, and polish – and engineering – a world of logic, loops, and linux – lies frontend design. frontend-design - http://bradfrost.com/blog/post/frontend-design/

Slide 10

Slide 10 text

こういった役割こういった役割

Slide 11

Slide 11 text

「フロントエンド」がなぜ専門領域になったのかを思い出そう体験と設計フロントエンドエンジニアの二つの責務について #FROKAN - https://speakerdeck.com/potato4d/ti-yan-toshe-ji-hurontoendoenziniafalseer-tufalseze-wu- nituite-number-frokan?slide=37

Slide 12

Slide 12 text

フロントエンドエンジニアの責務フロントエンドエンジニアの責務設計 (Frontend develop) 体験 (Frontend design)

Slide 13

Slide 13 text

なので今日は体験の方フロントエンドデザインの話をします。

Slide 14

Slide 14 text

まずは課題集めまずは課題集め開発の前後工程に実際に参加してみる

Slide 15

Slide 15 text

ワイヤーフレーム作成に参加店舗ヒアリング

Slide 16

Slide 16 text

感想感想開発する意義や成果を感じる満足感が高かった職能間の手法と情報のギャップは感じた

Slide 17

Slide 17 text

そこで以下のことを手助けしたいと思ったそこで以下のことを手助けしたいと思った 1. 共通認識を持つ 2. チームの力学について話し合う場を作る 3. チームの強化と改善にリーダーを巻き込む https://rework.withgoogle.com/jp/guides/understanding-team-e ectiveness/steps/help-teams- take-action/

Slide 18

Slide 18 text

ギャップを埋めて最終的に開発組織にとってのロールモデルを作れたら最高だ

Slide 19

Slide 19 text

やったことやったこと

Slide 20

Slide 20 text

デザイン指示書のオンライン化デザイン指示書のオンライン化

Slide 21

Slide 21 text

デザインレビュー観点の整備デザインレビュー観点の整備

Slide 22

Slide 22 text

デザインレビューフロー（対面）の整備デザインレビューフロー（対面）の整備

Slide 23

Slide 23 text

デザインファイルと UI モックの統一デザインファイルと UI モックの統一

Slide 24

Slide 24 text

デザインファイルの自動化デザインファイルの自動化 CLI - https://developer.sketch.com/cli/

Slide 25

Slide 25 text

成果物の向上（WF）成果物の向上（WF）社内限URLなので割愛

Slide 26

Slide 26 text

成果物の向上（画面設計）成果物の向上（画面設計）

Slide 27

Slide 27 text

得られたこと得られたことコミュニケーションの可視化と交通整理が出来た職能間の目線を揃えることが出来たフロントエンドデザイン領域を体系的に学ぶ環境が出来た

Slide 28

Slide 28 text

ありがとうございました！ありがとうございました！