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
価値あるフロントエンドデザイン領域開拓
Search
jaxx2104
May 20, 2019
Technology
0
360
価値あるフロントエンドデザイン領域開拓
西船橋.tech #1
https://nishifuna-tech.connpass.com/event/137466/
jaxx2104
May 20, 2019
Tweet
Share
More Decks by jaxx2104
See All by jaxx2104
Relative CI が気になっている話
jaxx2104
0
490
デザインファイルにおける継続的インテグレーション
jaxx2104
2
410
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.2k
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
700
サイレントヒーローを作らない取り組み
jaxx2104
1
150
開発組織のメンバーからリーダーになって
jaxx2104
0
110
Nikuman
jaxx2104
0
370
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
320
Vue.jsとLambdaの導入
jaxx2104
0
360
Other Decks in Technology
See All in Technology
AIエージェント入門
minorun365
PRO
31
18k
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
210
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
320
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
120
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
360
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
280
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
3
6.1k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
890
偏光画像処理ライブラリを作った話
elerac
1
170
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
160
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
The Cult of Friendly URLs
andyhume
78
6.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
How to train your dragon (web standard)
notwaldorf
91
5.9k
KATA
mclloyd
29
14k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Scaling GitHub
holman
459
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Writing Fast Ruby
sferik
628
61k
Transcript
価値あるフロントエンドデザイン領域開拓 価値あるフロントエンドデザイン領域開拓 Futoshi Iwashita
自己紹介 自己紹介 岩下 太 (@jaxx2104) 株式会社リクルート Front-end engineer
やってきたこと やってきたこと Vue にしたり Nuxt にしたり VuePress にしたり etc.
趣味 #keyboard 趣味 #keyboard
趣味 #minecraft 趣味 #minecraft
キーボードとゲームがあれば だいたいの人間わかり合える
本題 本題
フロントエンドの周辺 フロントエンドの周辺
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/
こういった役割 こういった役割
「フロントエンド」がなぜ専門領域になったのかを思い出そう 体験と設計 フロントエンドエンジニアの二つの責務について #FROKAN - https://speakerdeck.com/potato4d/ti-yan-toshe-ji-hurontoendoenziniafalseer-tufalseze-wu- nituite-number-frokan?slide=37
フロントエンドエンジニアの責務 フロントエンドエンジニアの責務 設計 (Frontend develop) 体験 (Frontend design)
なので今日は体験の方 フロントエンドデザインの話をします。
まずは課題集め まずは課題集め 開発の前後工程に実際に参加してみる
ワイヤーフレーム作成に参加 店舗ヒアリング
感想 感想 開発する意義や成果を感じる満足感が高かった 職能間の手法と情報のギャップは感じた
そこで以下のことを手助けしたいと思った そこで以下のことを手助けしたいと思った 1. 共通認識を持つ 2. チームの力学について話し合う場を作る 3. チームの強化と改善にリーダーを巻き込む https://rework.withgoogle.com/jp/guides/understanding-team-e ectiveness/steps/help-teams-
take-action/
ギャップを埋めて最終的に開発組織にとっての ロールモデルを作れたら最高だ
やったこと やったこと
デザイン指示書のオンライン化 デザイン指示書のオンライン化
デザインレビュー観点の整備 デザインレビュー観点の整備
デザインレビューフロー(対面)の整備 デザインレビューフロー(対面)の整備
デザインファイルと UI モックの統一 デザインファイルと UI モックの統一
デザインファイルの自動化 デザインファイルの自動化 CLI - https://developer.sketch.com/cli/
成果物の向上(WF) 成果物の向上(WF) 社内限URLなので割愛
成果物の向上(画面設計) 成果物の向上(画面設計)
得られたこと 得られたこと コミュニケーションの可視化と 交通整理が出来た 職能間の目線を揃えることが出来た フロントエンドデザイン領域を 体系的に学ぶ環境が出来た
ありがとうございました! ありがとうございました!