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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. 3つの課題を解決するために
   ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ
   コンポーネントが

   重複・バラバラ
   開発環境が３つある
   コーディング環境がない
   １
   2
   3
   

   View Slide

10. 3つの課題を解決するために
    ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ
    コンポーネントが

    重複・バラバラ
    開発環境が３つある
    コーディング環境がない
    １
    2
    3
    各コンポーネントを管理しやす
    くしたい
    独⽴してコーディングできる環
    境が欲しい
    スタイルを⼀元管理したい
    くわえて、
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. Fractal
    IMBのCarbon Design Systemでも使われてる
    ελΠϧΨΠυͷಋೖ
    • スタイルガイドツール
    • スタンドアローンで動作する
    • 以前の機能リリースで利⽤経験があった
    https://fractal.build/
    

    View Slide

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

    View Slide

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

    View Slide

17. よかったこと、課題
    

    View Slide

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

    View Slide

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

    View Slide

20. 最後に
    

    View Slide

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

    View Slide

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

    View Slide