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

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

C0e40025e5098e025a249b0cda428434?s=47 m-yoshiro
December 08, 2018

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

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

C0e40025e5098e025a249b0cda428434?s=128

m-yoshiro

December 08, 2018
Tweet

Transcript

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

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

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

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

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

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

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

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

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

  10. 3つの課題を解決するために ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ コンポーネントが
 重複・バラバラ 開発環境が3つある コーディング環境がない 1 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. ご静聴ありがとうございました!