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

Transcript

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

   Conference Fukuoka 2018 - 懇親会LT

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

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

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

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

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

   .button{ }

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

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

   古いページ

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

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

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

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

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

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

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

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

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

    install

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

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

17. よかったこと、課題

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

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

20. 最後に

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

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