1-4no diary

自作キーボード, CSS, その他好きなことなど

CSS設計（コンポーネント化）を会社やチームとして導入するには

CSS

CSS設計を導入する際、エンジニアだけで進めることはとても難しいです。なぜ難しいのか、どうすればいいのか、といったことに対する僕の経験と意見をまとめてみました。

僕はデザイナーではなくエンジニアです。デザインの入門書のようなものはいくつか読んでいるので本当に初歩的なことはわかりますが、デザインを仕事で行うことはありませんし、デザインのアプリケーションの使用もできません。

また、今回はCSS設計そのものではなく、会社やチームでCSS設計を導入し、コンポーネント化を行い、極力CSSを書くことを減らしていくまでに必要なことについて述べていきます。すでにやってみたことについては失敗例にも触れまとめていきます。さらに、今後どうしていくべきなのかということについても、僕の意見を書いていきます。

 

エンジニア側のみでCSS設計を導入する

まず最初にやったのは、エンジニア側のみでCSS設計を導入していくということです。これは、CSS設計についての学習コストもあるので、学習対象者を最小限にするためです。

結論からいうとこれは失敗しました。

いくらエンジニアが設計手法に沿って対応しようとしても、コンポーネント化を意識していないデザインに対して、コンポーネント化するというのは厳しいものとなります。デザイナー側としては、何かルールに沿ってデザインしているのかもしれないですが、それをCSSとして表現しようとしても難しいことが多いです。

 

実装前にコンポーネント化の調整をデザイナーと行う

次に対応したのが、出来上がったデザインを元に、コンポーネント化を試み、ルールがぶれているところを洗い出し、デザイナーさんと調整するということです。

CSSがわかるデザイナーの方であれば、ここの調整はやりやすいと思いますが、そうでない場合はとても厳しいです。

しかし、これを行っても、設計が後付けになるので、大きな成果はあげられません。場合によってはデザインを大きく変更する必要がでてきてしまうこともあるからです。そういったことになっても、デザインを変更するところからやり直すということはあまりないかと思います。結局後付けの設計となるので、気休め程度のコンポーネント化となってしまいます。また、CSSも無理した実装になってしまったり、使いにくいコンポーネントとなってしまいます。

 

デザイナーにもCSS設計の概念を理解してもらう

結局はここに行き着きます。

デザインの段階で、使用するCSS設計の概念を取り入れてもらい、概念に沿ったデザインにしてもらいます。ここでもCSSがかける人とそうではない人では、結構差が出ると思いますが、CSS設計のルールに沿ったデザインになっていれば大きな問題ではありません。

最近 AtomicDesign を採用したという記事を見かけることが増えていますが、AtomicDesign でいう Atom や Molecule といった小さい部分を管理してもらうだけでも大きな効果がでるはずです。FLOCSS でいうなら component だけでも管理してもらえれば、あとは componet という基本ルールを使って、 project を作成していけます。

また、この後に詳しく書いていますが、似たようなページのデザインが不要になり、こだわるページに時間を割くことが可能となります。CSS設計を行うメリットをデザイナーの方にも理解してもらいましょう。

 

ディレクターにCSS設計導入のメリットを理解してもらう

ここまでくると、現場側はCSS設計の恩恵が理解できていることかと思います。しかし、最終的にはディレクターの理解が必要となります。

理解のないディレクターからすれば、似たようなページばかりができあがり、手抜きのように感じる人もいるかもしれません。とはいえ、もっと凝ったデザインのページにしたいというのはわかります。ただ、使い回しというのは工数も削減できますし、バグのリスクも削減できます。

ここで勘違いして欲しくないのは、別に全てのページで作成したコンポーネントを使用する必要はないということです。使用した方がサイトとして統一感がでるとは思うので最低限のものは使用することをおすすめしますが…。

しかし、こだわりたいページは存分にこだわればいいと思います。そうではないページはコンポーネントを使用することで、デザインと開発の時間を短縮し、浮いた時間をこだわるところにあてることができます。

また、速さとこだわりは反比例することを理解してもらいましょう。こだわればその分新規で書くコードが増えるので時間がかかります。当たり前のことですが、ここの理解はとても重要です。

 

最終的には会社用のCSSフレームワークが完成する

ここまでの活動を行っていくと、最終的には会社用のCSSフレームワークが出来上がることになると思います。僕はここまで至ったことがないので、推測にはなってしまいますが…。

正直コンポーネント化とかつまらない と感じるデザイナーの方もいるかもしれません。でも最終的にCSSフレームワークを作り上げることになると思えば、すごいことやったんだと思えるのではないでしょうか？

また、ここまでくればデザイン不要で、サイトの開発が進められることが増えくるはずです。その結果、その空いた時間でもっと別のことができるようになります。

 

まとめ

以上がCSS設計を導入するために必要なことのまとめになります。

今回は触れていませんが、実際にコンポーネントを使用してもらうには、スタイルガイドのようなものがあった方がいいと思います。これも面倒ですが、あるとないとでは大きな差がでます。コンポーネントを認識してもらえないと、別の人が再デザイン、再実装といったことが発生し、意味がなくなってしまいます。

最悪、実際の使用箇所のキャプチャを用意しておくだけでもいいかもしれません。無いよりはましです。CSS更新しても反映されないという問題はありますが…。

また、今回は導入するために必要なことということで、CSS設計そのものには全然触れていませんが、機会があればその辺りについても書いて見ようと思います。ただ、そういった記事はすでに多くあるので、あまり新鮮味がないものになりそうですね。

 

文字だけの記事をここまで読んでいただき、ありがとうございました。