フロントエンドエンジニアがデザインに介入していく話

2021年12月4日に行われた Piyogrammer Conference 2021 で使用した資料

Transcript

1. フロントエンドエンジニアが デザインに介⼊していく話 @what_a_pon
2. ⾃⼰紹介
3. 好き：ウェブフロントエンド / 温泉 / シーシャ / 瞑想 / ねこ わたぽん @what_a_pon ⼭⼝⼤学⼯学部４年(春からNAIST) ⼩野 航 #ホロライブ６期⽣がアツい #2021年がもう終わるなんて嘘だ
4. こんな経験をした
5. デザイン担当者「デザイン組んだので確認お願いシャス🙇」      わた「了解です👀」
6. わた「(デザイン的にはシンプルだけど実装的にはコスト⾼そう)」 わた「(ここのマージンはどのくらい空いてんだ)」 わた「(ボタンの種類が何種類もあるがこれは意図的か？)」 Figma にて
7. フロントエンドエンジニア x デザイナー
8. どうにかできないか？🤔
9. 実装もデザインも 両⽅やっちゃおう！
10. フロントエンド デザイン
11. フロントエンド デザイン
12. 実際にやってみた
13. ✓ デザイン組みつつフロントの実装しつつ ✓ 実装をイメージしながらデザインできた 
 → エンジニアが欲しい情報を明記 
 → 他エンジニアとのコミュニケーションが円滑に ✓ UI ライブラリ前提のレイアウト作り 
 → 実装コスト激減 某ハッカソンにて
14. Let’s go Figma
15. ✓ フロントエンドエンジニアとデザイナーの 
 コラボレーションめっちゃ⼤事 ✓ フロントエンドエンジニアがデザイン領域に 
 介⼊するメリットがたくさんある ✓ デザインやっていこう まとめ