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
Hacker's GATE Beer Bash!!!!
Search
yosshi595
July 19, 2018
1
2.9k
Hacker's GATE Beer Bash!!!!
yosshi595
July 19, 2018
Tweet
Share
Featured
See All Featured
Designing for Performance
lara
610
69k
Faster Mobile Websites
deanohume
309
31k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Rails Girls Zürich Keynote
gr2m
95
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Why Our Code Smells
bkeepers
PRO
339
57k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Transcript
新卒1年目でPMをやった話 新卒1年目でPMをやった話 株式会社ウィルゲート 吉田 慎
新卒1年目でPMをやった話 新卒1年目でPMをやった話 株式会社ウィルゲート 吉田 慎 デザイナーと連携をしたら うまくいった話
アジェンダ • 自己紹介 • これまでの課題 • デザイナーとの連携 • アトミックデザイン •
Zeplin • まとめ
自己紹介 業務 「Milly」運用保守 「花時間」新規開発(PM) 略歴 2015.3 工学院大学中退 2015.4 日本電子専門学校入学 2015.12
第53回技能五輪全国大会銅賞 2016.10 第54回技能五輪全国大会銅賞 2017.4 株式会社ウィルゲート入社 2018.4 第12期 新人賞受賞 趣味 料理、旅行、子どもと遊ぶこと 吉田 慎 / Yoshida Shin
ウィルゲートの共同運営メディア
花時間の開発の体制
花時間の開発の体制 デザイン 開発 フロントエンド バックエンド フロントエンド PM デザイナー
アジェンダ • 自己紹介 • これまでの課題 • デザイナーとの連携 • アトミックデザイン •
Zeplin • まとめ
これまでの課題 1.デザイン(見た目)の統一感がない ボタンのデザイン 余白の取り方 2.cssが統一されていない ページごとに新しいcssを作成 似たようなコードが複数存在
アジェンダ • 自己紹介 • これまでの課題 • デザイナーとの連携 • アトミックデザイン •
Zeplin • まとめ
アトミックデザインとは パーツの最小単位からデザインしていくデザイン手法 これらを組み合わせて ページデザインを仕上げていく ボタンデザイン フォームデザイン 見出しのデザイン
アトミックデザインの実装 【参考】http://design.dena.com/design/atomic-design- %E3%82%92%E5%88%86%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A4%E3%82%82%E3%82%8A%E3%81%AB%E3%81%AA%E3%82%8B/
アトミックデザインの実装 【参考】http://design.dena.com/design/atomic-design- %E3%82%92%E5%88%86%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A4%E3%82%82%E3%82%8A%E3%81%AB%E3%81%AA%E3%82%8B/
アジェンダ • 自己紹介 • これまでの課題 • デザイナーとの連携 • アトミックデザイン •
Zeplin • まとめ
デザイナーとエンジニアの連携でやったこと Zeplinを使用してデザインを連携
デザイナーとエンジニアの連携でやったこと 余白のサイズや、cssを簡単に確認することができる
デザイナーとエンジニアの連携でやったこと Zeplinに 各ページのデザインとパーツのデザインをあげることで パーツからの実装が可能に
アジェンダ • 自己紹介 • これまでの課題 • デザイナーとの連携 • アトミックデザイン •
Zeplin • まとめ
これまでの課題 1.デザイン(見た目)の統一感がない ボタンのデザイン 余白の取り方 2.cssが統一されていない ページごとに新しいcssを作成 似たようなコードが複数存在 パーツごとにcssを組んで作っているので解決!
まとめ デザイナーとエンジニアは 密に連携するべき!!