Hacker's GATE Beer Bash!!!!

Transcript

1. 1.

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

2. 2.

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

3. 3.

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

   Zeplin • まとめ
4. 4.

   自己紹介 業務 「Milly」運用保守 「花時間」新規開発（PM） 略歴 2015.3 工学院大学中退 2015.4 日本電子専門学校入学 2015.12

   第53回技能五輪全国大会銅賞 2016.10 第54回技能五輪全国大会銅賞 2017.4 株式会社ウィルゲート入社 2018.4 第12期 新人賞受賞 趣味 料理、旅行、子どもと遊ぶこと 吉田 慎 / Yoshida Shin
5. 5.

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

6. 6.

   花時間の開発の体制

7. 7.

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

8. 8.

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

   Zeplin • まとめ
9. 9.

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

10. 10.

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

    Zeplin • まとめ
11. 11.

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

12. 12.

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

13. 13.

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

14. 14.

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

    Zeplin • まとめ
15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

    Zeplin • まとめ
19. 19.

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

20. 20.

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