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

Frontend Conference Fukuoka 2018 のLTで発表した資料です。

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. ご静聴ありがとうございました！