こんにちは、デザインチームの@_ringogirlです。
エンジニア目線の求人・転職サイト Forkwell Jobsでは、最近デザインのリニューアルを行いました（最近と言っても3ヶ月前の話ですが…）。 リニューアルに合わせてCSSのリビングスタイルガイドを作ることにしました。
スタイルガイドとは
CSSのドキュメントのようなもので、サイトで使う色やタイポグラフィ、UIパターンなどを記述したものです。 見た目とコードをドキュメントとして読めるので、チームで開発するときの共有に役立ちます。
なぜスタイルガイドを作ったのか
僕が入社したのは約1年前なのですが、その頃からCSSがとっ散らかって肥大化してしまっていたので、CSSを触るのがつらい状況になっていました。 もちろんドキュメントも無かったので、どこにCSSコンポーネントが定義されているのか探さないといけないし、コードを書くまで見た目がわからない、色を定義された変数が多すぎて管理ができない、など様々な問題がありました。 このような状況を解決したかったのと、継続的にCSSをメンテナンスできる環境を作りたくてスタイルガイドを作ることにしました。また、エンジニアがデザインに関することで悩むことが減って、開発速度が上がればいいなという思いもあります。
どうやって作ったのか
HologramというGemを使用して作っています。KSSなど有名なものもありますが、やることが少なくて複雑ではない印象だったのでHologramを選択しています。 技術的なことについては長くなってしまうような気がするので、別の記事で書いていきます。
スタイルガイドの管理方法
プロダクト上で作っていくのではなく、別リポジトリで開発をしています。 npmで管理して、そこからプロダクトに読み込むという方法をとりました。
スタイルガイドを作って良かったこと
コンポーネントのスコープを狭めることができた
プロダクトとスタイルガイドを分離することで、プロダクトのレイアウトなどに左右されないようなコンポーネントを書きやすくなりました。 機能ごとにコンポーネントを定義できるので、スコープが狭くなりメンテナンスしやすくなったと思います。
CSSの管理がしやすくなった
上でも書きましたが、スタイルガイドをnpmで読み込んでいるので管理しやすくなりました。 スタイルガイドの変更がプロダクト側にコミットされないので、コミットログの見通しもよくなった気がします。
エンジニアがある程度は楽できるようになった
まだまだ問題はありますが、以前よりはデザインに関することで悩むことが減ったんじゃないかなと思います。 チーム共通のドキュメントなので、コミュニケーションが取りやすくなった気がします。
新しい技術を学ぶことができた
ES2015やReactなど、スタイルガイドで新しい技術を学ぶことができました。Hologramのプラグインを書いて拡張することも楽しかったです。 肥大化したCSSに継ぎ足していくのはつらかったので、こういったところで楽しみができるのも良かったです。
今後の展望
スタイルガイドの運用は始まりましたが、不便なところや不十分なところがまだまだ多くあり、以下のようなことを考えていたりします。
- Reactコンポーネントの提供
- JSのテスト
- CSSのテスト
- CSSの再設計
- 色の選定
- OSS化
スタイルガイドは、今までの僕らの開発にはなかった仕組みでまだ手探りな部分もありますが、今後も継続して開発していけるように頑張りたいと思います！
