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
わたぽん
December 04, 2021
Technology
0
100
フロントエンドエンジニアがデザインに介入していく話
2021年12月4日に行われた Piyogrammer Conference 2021 で使用した資料
わたぽん
December 04, 2021
Tweet
Share
More Decks by わたぽん
See All by わたぽん
もし田舎の大学生がスタートアップで開発経験を積んだら
what_a_pon
0
63
Other Decks in Technology
See All in Technology
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
770
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
350
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
470
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
280
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
840
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
170
本当のAWS基礎
toru_kubota
0
500
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
630
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
Featured
See All Featured
A Philosophy of Restraint
colly
197
16k
BBQ
matthewcrist
80
8.8k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Embracing the Ebb and Flow
colly
80
4.1k
Why Our Code Smells
bkeepers
PRO
331
56k
Typedesign – Prime Four
hannesfritz
36
2.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Happy Clients
brianwarren
92
6.4k
How to Ace a Technical Interview
jacobian
272
22k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Transcript
フロントエンドエンジニアが デザインに介⼊していく話 @what_a_pon
⾃⼰紹介
好き:ウェブフロントエンド / 温泉 / シーシャ / 瞑想 / ねこ わたぽん
@what_a_pon ⼭⼝⼤学⼯学部4年(春からNAIST) ⼩野 航 #ホロライブ6期⽣がアツい #2021年がもう終わるなんて嘘だ
こんな経験をした
デザイン担当者「デザイン組んだので確認お願いシャス🙇」 わた「了解です👀」
わた「(デザイン的にはシンプルだけど実装的にはコスト⾼そう)」 わた「(ここのマージンはどのくらい空いてんだ)」 わた「(ボタンの種類が何種類もあるがこれは意図的か?)」 Figma にて
フロントエンドエンジニア x デザイナー
どうにかできないか?🤔
実装もデザインも 両⽅やっちゃおう!
フロントエンド デザイン
フロントエンド デザイン
実際にやってみた
✓ デザイン組みつつフロントの実装しつつ ✓ 実装をイメージしながらデザインできた → エンジニアが欲しい情報を明記 → 他エンジニアとのコミュニケーションが円滑に
✓ UI ライブラリ前提のレイアウト作り → 実装コスト激減 某ハッカソンにて
Let’s go Figma
✓ フロントエンドエンジニアとデザイナーの コラボレーションめっちゃ⼤事 ✓ フロントエンドエンジニアがデザイン領域に 介⼊するメリットがたくさんある ✓ デザインやっていこう
まとめ