サイトリニューアルでのスタイルガイドの活用

Transcript

1. 1.

   サイトリニューアルでの スタイルガイドの活⽤ 松本 芳郎 2018 / 12 / 8 Frontend

   Conference Fukuoka 2018 - 懇親会LT
2. 2.

   松本 芳郎 デザイナー GMOペパボ株式会社 ホスティング事業部 ムームードメイングループ @bennkyougirai マツモト ヨシロウ

3. 3.

   話のネタ元 • ムームードメインのリニューアル！ • スタイルガイドを導⼊してコンポーネント 開発を⾏った。 ロゴもカッコよくなりました。

4. 4.

   Contents • なぜ、スタイルガイドを導⼊したのか？ • スタイルガイドの導⼊ • よかったこと、課題 サイトリニューアルでのスタイルガイドの活⽤

5. 5.

   なぜ、スタイルガイドを導⼊したのか？

6. 6.

   開発時の３つの課題… ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コンポーネントが重複・バラバラ １ Button Button Button .btn { }

   .button{ }
7. 7.

   開発時の３つの課題… ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コーディング環境がない デザイナの コーディング着⼿ 2 エンジニアの 開発着⼿ デザイナーのコーディング着⼿時期が、エンジニアの着⼿より先⾏していた

8. 8.

   開発時の３つの課題… ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ 開発環境が３つある Nuxt.js PHP Rails 3 リニューアル したページ 購⼊フロー・ログイン

   古いページ
9. 9.

   3つの課題を解決するために ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コンポーネントが
 重複・バラバラ 開発環境が３つある コーディング環境がない １ 2 3

10. 10.

    3つの課題を解決するために ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コンポーネントが
 重複・バラバラ 開発環境が３つある コーディング環境がない １ 2 3 各コンポーネントを管理しやす

    くしたい 独⽴してコーディングできる環 境が欲しい スタイルを⼀元管理したい くわえて、
11. 11.

    デザイナー視点で サービスの成⻑を⽀えるため、 ⼀貫したデザインを提供する仕組みが欲しい ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ

12. 12.

    スタイルガイドを導⼊!!

13. 13.

    ελΠϧΨΠυͷಋೖ ムームードメインのスタイルガイド

14. 14.

    Fractal IMBのCarbon Design Systemでも使われてる ελΠϧΨΠυͷಋೖ • スタイルガイドツール • スタンドアローンで動作する •

    以前の機能リリースで利⽤経験があった https://fractal.build/
15. 15.

    開発フロー ελΠϧΨΠυͷಋೖ デザイン Nuxt.js PHP Rails スタイルガイド 3つの環境に配信 コーディング npm

    install
16. 16.

    開発フロー ελΠϧΨΠυͷಋೖ デザイン Nuxt.js PHP Rails スタイルガイド 3つの環境に配信 1.コンポーネントをきちんと管理 3.スタイルを⼀元管理

    2.独⽴したコーディング環境 npm install コーディング
17. 17.

    よかったこと、課題

18. 18.

    よかったこと • リリース終盤でも壊れずらいコーディングが 出来た • デザインとコーディングの連携を取りやすい • プロダクトから独⽴しているので、コーディ ングに集中できる Α͔ͬͨ͜ͱɺ՝୊

19. 19.

    課題 • 属⼈化しやすい - ツールのメンテナンスの学習コスト - スタイルガイドを作り込みすぎがち • スタイルガイドを使ってもらうことは想像以上に難しい Α͔ͬͨ͜ͱɺ՝୊

20. 20.

    最後に

21. 21.

    スタイルガイドを始めよてみませんか？ • 導⼊するだけなら簡単 • ⼩さく試して検証しやすい • 捨てやすい

22. 22.

    ご静聴ありがとうございました！