Hacker's GATE Beer Bash!!!!

by yosshi595

Slide 1

Slide 1 text

新卒1年目でPMをやった話新卒1年目でPMをやった話株式会社ウィルゲート吉田慎

Slide 2

Slide 2 text

新卒1年目でPMをやった話新卒1年目でPMをやった話株式会社ウィルゲート吉田慎デザイナーと連携をしたらうまくいった話

Slide 3

Slide 3 text

アジェンダ • 自己紹介 • これまでの課題 • デザイナーとの連携 • アトミックデザイン • Zeplin • まとめ

Slide 4

Slide 4 text

自己紹介業務「Milly」運用保守「花時間」新規開発（PM）略歴 2015.3 工学院大学中退 2015.4 日本電子専門学校入学 2015.12 第53回技能五輪全国大会銅賞 2016.10 第54回技能五輪全国大会銅賞 2017.4 株式会社ウィルゲート入社 2018.4 第12期新人賞受賞趣味料理、旅行、子どもと遊ぶこと吉田慎 / Yoshida Shin

Slide 5

Slide 5 text

ウィルゲートの共同運営メディア

Slide 6

Slide 6 text

花時間の開発の体制

Slide 7

Slide 7 text

花時間の開発の体制デザイン開発フロントエンドバックエンドフロントエンド PM デザイナー

Slide 8

Slide 8 text

アジェンダ • 自己紹介 • これまでの課題 • デザイナーとの連携 • アトミックデザイン • Zeplin • まとめ

Slide 9

Slide 9 text

これまでの課題 1.デザイン（見た目）の統一感がないボタンのデザイン余白の取り方 2.cssが統一されていないページごとに新しいcssを作成似たようなコードが複数存在

Slide 10

Slide 10 text

アジェンダ • 自己紹介 • これまでの課題 • デザイナーとの連携 • アトミックデザイン • Zeplin • まとめ

Slide 11

Slide 11 text

アトミックデザインとはパーツの最小単位からデザインしていくデザイン手法これらを組み合わせてページデザインを仕上げていくボタンデザインフォームデザイン見出しのデザイン

Slide 12

Slide 12 text

アトミックデザインの実装【参考】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/

Slide 13

Slide 13 text

アトミックデザインの実装【参考】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/

Slide 14

Slide 14 text

アジェンダ • 自己紹介 • これまでの課題 • デザイナーとの連携 • アトミックデザイン • Zeplin • まとめ

Slide 15

Slide 15 text

デザイナーとエンジニアの連携でやったこと Zeplinを使用してデザインを連携

Slide 16

Slide 16 text

デザイナーとエンジニアの連携でやったこと余白のサイズや、cssを簡単に確認することができる

Slide 17

Slide 17 text

デザイナーとエンジニアの連携でやったこと Zeplinに各ページのデザインとパーツのデザインをあげることでパーツからの実装が可能に

Slide 18

Slide 18 text

アジェンダ • 自己紹介 • これまでの課題 • デザイナーとの連携 • アトミックデザイン • Zeplin • まとめ

Slide 19

Slide 19 text

これまでの課題 1.デザイン（見た目）の統一感がないボタンのデザイン余白の取り方 2.cssが統一されていないページごとに新しいcssを作成似たようなコードが複数存在パーツごとにcssを組んで作っているので解決！

Slide 20

Slide 20 text

まとめデザイナーとエンジニアは密に連携するべき！！