Frontend Conference Fukuoka 2018 のLTで発表した資料です。
サイトリニューアルでのスタイルガイドの活⽤松本 芳郎2018 / 12 / 8Frontend Conference Fukuoka 2018 - 懇親会LT
View Slide
松本 芳郎デザイナーGMOペパボ株式会社 ホスティング事業部ムームードメイングループ@bennkyougiraiマツモト ヨシロウ
話のネタ元• ムームードメインのリニューアル!• スタイルガイドを導⼊してコンポーネント開発を⾏った。ロゴもカッコよくなりました。
Contents• なぜ、スタイルガイドを導⼊したのか?• スタイルガイドの導⼊• よかったこと、課題サイトリニューアルでのスタイルガイドの活⽤
なぜ、スタイルガイドを導⼊したのか?
開発時の3つの課題…ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁコンポーネントが重複・バラバラ1ButtonButtonButton.btn { }.button{ }
開発時の3つの課題…ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁコーディング環境がないデザイナのコーディング着⼿2エンジニアの開発着⼿デザイナーのコーディング着⼿時期が、エンジニアの着⼿より先⾏していた
開発時の3つの課題…ͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ開発環境が3つあるNuxt.jsPHP Rails3リニューアルしたページ購⼊フロー・ログイン古いページ
3つの課題を解決するためにͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁコンポーネントが 重複・バラバラ開発環境が3つあるコーディング環境がない123
3つの課題を解決するためにͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁコンポーネントが 重複・バラバラ開発環境が3つあるコーディング環境がない123各コンポーネントを管理しやすくしたい独⽴してコーディングできる環境が欲しいスタイルを⼀元管理したいくわえて、
デザイナー視点でサービスの成⻑を⽀えるため、⼀貫したデザインを提供する仕組みが欲しいͳͥɺελΠϧΨΠυΛಋೖͨ͠ͷ͔ʁ
スタイルガイドを導⼊!!
ελΠϧΨΠυͷಋೖムームードメインのスタイルガイド
FractalIMBのCarbon Design Systemでも使われてるελΠϧΨΠυͷಋೖ• スタイルガイドツール• スタンドアローンで動作する• 以前の機能リリースで利⽤経験があったhttps://fractal.build/
開発フローελΠϧΨΠυͷಋೖデザインNuxt.jsPHPRailsスタイルガイド 3つの環境に配信コーディング npm install
開発フローελΠϧΨΠυͷಋೖデザインNuxt.jsPHPRailsスタイルガイド 3つの環境に配信1.コンポーネントをきちんと管理 3.スタイルを⼀元管理2.独⽴したコーディング環境npm installコーディング
よかったこと、課題
よかったこと• リリース終盤でも壊れずらいコーディングが出来た• デザインとコーディングの連携を取りやすい• プロダクトから独⽴しているので、コーディングに集中できるΑ͔ͬͨ͜ͱɺ՝
課題• 属⼈化しやすい- ツールのメンテナンスの学習コスト- スタイルガイドを作り込みすぎがち• スタイルガイドを使ってもらうことは想像以上に難しいΑ͔ͬͨ͜ͱɺ՝
最後に
スタイルガイドを始めよてみませんか?• 導⼊するだけなら簡単• ⼩さく試して検証しやすい• 捨てやすい
ご静聴ありがとうございました!