Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

m-yoshiro
December 08, 2018

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

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

m-yoshiro

December 08, 2018
Tweet

More Decks by m-yoshiro

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    Button
    Button
    Button
    .btn { }
    .button{ }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    2
    3

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. よかったこと、課題

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. ご静聴ありがとうございました!

    View full-size slide