Atomic DesignをベースにしたデザインシステムとCSS設計

自社サービス『ツクリンク』はリリースから7年が経ちました。
直近でAtomic Designをベースにしたデザインシステムの作成と、CSS設計の変更をしたので紹介します📛

CSSの変遷

現在の設計の話をする前にこれまでのCSSを紹介。

Ver１　初回リリース時
昔懐かしいCSSです。Sassも使わずベタ書き。

#main .articles p {  }
#main .articles .header {  }

実は今でも一部で生きています。反省してます。探さないでください。

Ver２　リニューアル
リニューアルをしたタイミングでCSS設計にはMindBEMdingを採用、SCSSを使い格段に書きやすくなりました。ファイルはBlockごとに分け、クラスの衝突を防いでいました。

# _block.scss
.block {
  &__element {
    &--modifier {}
  }
}

# ディレクトリ構造
├ application.scss
├ _mixin.scss
├ _valiables.scss
└ blocks
  ├ _articles.scss
  ├ _block.scss
  ├ _beer.scss
  └ _pizza.scss

MindBEMdingで書いていく中で
・ボタンのBlockやページ単位のBlockなど粒度の違うBlockが混在する
・小さく再利用可能にしようとするあまりBlockが増えすぎる
といった問題があり、FLOCSSのようなレイヤー構造を持たせたいと思いがありました。

これからのCSS設計

新しくデザイナーが加わり、Atomic Designをベースにデザインシステムを作ることが決定。
TDS（Tsukulink Design System）と命名されました🐭
このタイミングでCSS設計にFLOCSSを採用🎉

デザインシステムを作り目指したいのは以下
・UIの一貫性が保たれる
・誰でもコンポーネントの再利用が可能
・使わなくなったコンポーネントをすぐ捨てられる
・実装時、命名等で迷わない

Atomic Design とは

コンポーネント単位で定義していく UI デザイン手法です。コンポーネントに細かいレイヤーがあり再利用可能性を上げることができます。

画像引用：Atomic Design Methodology | Atomic Design by Brad Frost

FLOCSS とは

FLOCSS（フロックス） は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。

FLOCSSは次の3つのレイヤーと、Objectレイヤーの子レイヤーで構成されます。
- Foundation - reset/normalize/base...
- Layout - header/main/sidebar/footer...
- Object
    - Component - grid/button/form/media...
    - Project - articles/ranking/promo...
    - Utility - clearfix/display/margin...

hiloki/flocss: CSS organization methodology.

レイヤーが細かく別れているのが特徴で命名規則はMindBEMdingベースになっています。

Figmaでのコンポーネントづくり

FigmaではAtomic Designのレイヤー毎のページを作り、コンポーネントをまとめています。

使用されるテキストや色も名前をつけて別ページに記載。

デザインデータとFLOCSSの対応

Figmaのデザインを元に、FLOCSSのLayout, Object(Component, Project, Utility)に対応させていきます。

# Atomic Designレイヤー　->　FLOCSSレイヤー
Atoms         ->　Component
Molecules  ->　Component
Organisms ->　Component or Project
Templates  ->　Layout
Pages          ->　Project

CSSのファイル構成はFLOCSSを参考に以下の通り。
※サンプルをGitHubに公開しました

# ディレクトリ構造
├ application.scss
├ _var_colors.scss -> $color-black
├ layouts
| └ _header.scss -> .l-header
└ objects
  ├ components
  | └ _dialog.scss -> .c-dialog
  ├ projects
  | ├ _messages.scss -> .p-messages
  | └ users
  |   ├ _index.scss -> .p-users-index
  |   └ _show.scss -> .p-users-show
  └ utilities

CSS実装の基本方針は
・FigmaのComponentsと FLOCSSのObject を揃える
・Figmaと命名を揃える
・ページ固有など特例的なものは FLOCSSのProject で吸収する
としています。

FigmaのComponentsと FLOCSSのObject を揃える
FigmaのComponentsにあるものはコンポーネント名もそのままFLOCSSのComponentとして実装。
使われてる変数名もFigmaと揃えます。

固有ページでしか使われないものはProjectとしています。
例：メッセージの吹き出しなど

Projectを細分化する
ユーザーの一覧(index)、詳細(show)ページなど固有ページで使われるCSSはディレクトリ構造をクラス名と対応させています。

└ objects/projects
  ├ users
  | ├ _index.scss -> .p-users-index
  | └ _show.scss -> .p-users-show
  └ posts
    ├ _index.scss -> .p-posts-index
    └ _show.scss -> .p-posts-show

変数をまとめる
Figmaで定義された文字サイズや色の変数名と対応させて _var_clors.scss, _var_fonts.scss にまとめています。数字やカラーコードを直接使わないようにしてサイト内に微妙に違う要素が生まれるのを防ぎます。また命名されていることで共通言語として使えるためコミュニケーションもしやすくなります。

# _var_colors.scss
$tds-color-blue: #0044cc;
$tds-color-dark-green: #3c7818;

いくつか書きましたがGitHubのサンプルを見てもらうのが早いです。

デザインシステムを導入しての所感

メリット
デザインシステムの作成を始め、既存サービスに一部入れている状況ですが、デザインシステムをFLOCSSで実装していく中で以下のメリットを感じました。
・再利用可能なコンポーネントが明確になった
・デザイナー/エンジニア間のコミュニケーションが取りやすくなった
・要素のレイヤー構造があるためCSSの整理がしやすい
・CSSの詳細度が大きくならない
・MindBEMdingベースで書きやすい
最後は元々MindBEMdingで書いていた影響もありますが一番気持ちよく書ける命名規則だと思います。

課題
デザインから実装まで『AtomicDesign → Figma → FLOCSS』と３つのレイヤーを経て完成しますが、３つのレイヤー間でコンポーネントの粒度や名称の異なりが課題に感じます。レイヤー間の差異を無くし考えることを減らせればもっとスムーズに実装までいけるのではないかと考えています。
この変換コストを減らせる方法があったら教えて下さい。

さいごに

人類がどんなに進化してもCSSはいつか崩壊するものだと思っていますが、デザインシステム導入で少しでも平和な世界になることを祈っています。
オレたちの戦いはこれからだ💪