スタイルガイドの設計方針を決める時に意識して明文化したこと

こんにちは、Gaji-Labo 横田です。

見た目上のデザインを大きく変えたりフルリニューアルをせずに、スタイルガイドや CSS の再設計を行い、運用上のボトルネックや負債になっている課題を改善していきたい。このような既存プロジェクトの HTML+CSS のコード改善にはまずヒアリング、そしてコード調査による課題の掲示が最初のステップと以前の記事で紹介しました。今回は、次のステップとしてスタイルガイドの設計方針を決める時に Gaji-Labo で意識して明文化した3つのことを紹介します。

誰のためのスタイルガイド？

スタイルガイドを作成する前提として、どんな人がそのスタイルガイドを使うことになるのかを明確に定義し、チーム内で認識をすり合わせています。
主に新人教育向けか経験者向けなのか。 フロントエンド専任か、フロントも兼任するバックエンドエンジニアが使うのか、デザイナーが運用するのか等々、スタイルガイドを使う人の属性やスキルによって、掲載すべき情報の粒度や厚みが異なってくるからです。

また、スタイルガイドそのものがある程度作りきりのドキュメントになるのか、運用していく中で継続したメンテナンスをしていく前提のものになるのか。スタイルガイド中でコードをどう見せるかの指標を決める時も、誰の使うスタイルガイドなのかが判断材料のひとつになります。

実装上の方針

誰のためのスタイルガイドか明確になれば、自ずと実装上の細かな方針も見えてきます。
HTML/CSS にそれほど詳しくない人が対象であれば、スタイルガイドで定義したスタイルを使うたびに HTML や class 名を手作業で変更しなければならないような複雑な作りは避けたいところです。把握しやすいルール、拡張しやすい使い方、コピーしたコードをそのまま使用してもデザインやコードができるだけ破綻しないような実装の堅牢さもより求められると思います。
既存のスタイルと共存させるために、スタイルガイドで定義するスタイルには独自の接頭辞を付ける必要も出てくるかもしれません。

これら実装上の細かな方針をチーム内で明文化することで、スタイルガイドを実際に使うことを想定したコードの品質担保に努めています。

スタイルガイドに掲載する情報

スタイルガイドに掲載する主な情報として、以下のような項目が例に挙げられます。

• コーディングの基本ルール
• スタイルガイドで定義したスタイルの見た目・コード
• スタイルの具体的な使用例・サンプル
• スタイルのイレギュラーな使い方
• スタイルの使い方のアンチパターン
• スタイルをよく使うページや箇所の一覧
• スタイルガイドのスタイルを上書きする場合のルール
• ページ固有のスタイルを作成する場合のルール
• 特定のレイアウトパターンの実装ルール
• 特定のページパターンの実装ルール
• 変数を追加する場合のお作法
• SCSS / SASS ファイルの読み込みルール
• SCSS / SASS の書き方

スタイルガイドを使う対象者やメンテナンス頻度、実装方針にのっとり、これらの項目から掲載する情報の取捨選択をしたり、特に厚く解説すべき情報をあらかじめ可視化することで、対象者にとってより把握・運用しやすいスタイルガイドの設計を目指しています。

まとめ

スタイルガイドの設計方針をあらかじめチーム内で明文化し、認識をすり合わせておくことが、抱えている課題の改善にとって小さくも大事な道筋となっています。

次回は実際にスタイルガイドを作成するステップを紹介したいと思います。

Gaji-Laboブログ内には、他にもチーム開発でのWebフロントエンドについて取り上げた記事があります。
チーム開発のために必要なコーディングルールやスタイルガイド、コンポーネントの設計方法など、実践をもとにしたリアルなWebフロントエンド知見に興味がある方におすすめの記事シリーズを「チーム開発でのWebフロントエンド」としてまとめていますので、あわせてお読みいただけるとうれしいです。