Atomic Designの初め方

tech vein デザイナの平野です。

去年あたりからAtomic Designの存在を知って自分なりに業務に取り入れてみました。

弊社なりのAtomic Designの取り入れ方とそのメリットをご紹介します。

なぜAtomic Designが必要なのか

Atomic Designとはパーツ・コンポーネント単位で定義していく UIデザイン手法です。

パーツの最小単位からデザインしていく事でUIを使いまわし、開発工数やテストを減らすことができるのが特徴です。

パーツの単位は小さいものからとなっています。

• Lv1:「原子」Atoms
  • 画面を構成する要素の最少単位 ラベルやインプット項目、ボタンなど
• Lv2:「分子」Molecules
  • Atomsを組み合わせて作成された要素　検索フォーム/SNSのシェアボタンが並んだものなど
• Lv3:「生体」Organisms
  • 複数のMoleculesやAtomsを組み合わせたもの、ヘッダーやフッター/サイドバーなど
• Lv4:「テンプレート」Templates
  • 複数のOrganisms等を組み合わせたデータの入っていない画面。ワイヤーフレームのようなもの
• Lv5:「ページ」Pages
  • Templatesを元に実際の文言や画像などが入ったもの、最終的な画面。

レベル毎に分ける理由

開発あるあるなのですが、下記のような事はないでしょうか。

• UIを使い回す事ができない/プログラマだけで既存のUIで画面を作りたい
• 新しいデザイナ/プログラマがアサインされた時、コードの見通しが悪くて作業できるまでに時間がかかる
• CSSの命名規則/各場所がバラバラで影響範囲がわからない

Atomic Designではこのあたりの事を解決ができます。

具体的には、「原子」Atomsと言われる最小のUIを作る事で、そのUIはどこにでも存在ができて、何か特殊な変更をするためには「分子」Moleculesでそれが可能になります。

つまり、「分子」Moleculesで指定した範囲でしか変更が行われない事がルール化されコードを書きやすくなります。

また昔ながらの作り方ですと、ページ毎に作る事が多いかと思いますが、Atomic Designのようにページ毎ではなく、レベルごとにUIを設計することで使い回しのしやすい統一感のあるデザインに仕上がります。

各作業者との連携のため

みなさんはスタイルガイドって作られていますか？
弊社では作ることが多いのですが、なぜ作るのかというとWebサイトやアプリは一人で作らないからです。

作ったものをそのまま組み込むだけならHTMLをプログラマに渡すだけで済むのですが、あとから一度作ったUIを使いまわしたいと思った時、今作成中のシステムではどんなUIがあるのかを一覧で見えるようにするときにスタイルガイドは活躍します。

また複数人デザイナ/コーダーがいる時でも同様に連携が取れやすくなります。

Atomic Designで設計することでスタイルガイドも作りやすい構成にできるので、実装時のコミュニケーションコストが減ります。
特に新しくアサインされたメンバーにはスタイルガイドがあるのはとてもありがたい事になります。

atomic designを始めるために

さて、Atomic Designをはじめてみようと思ったときに何をしたら良いかと悩むかと思いますが、私はSketchでUIデザインをするのをオススメします。

なぜSketchかというと、SketchではシンボルというUIを使いまわすための機能が充実しているからです。
この分野ではadobeのツールよりも品質が高いと感じていて私は、UI作成のツールにSketchを採用しています。（もちろん、ビジュアル素材の作成はPhotoshopなどを使いますので、全てSketchで完結するものではありません）

Sketchでシンボルを使いながらデザインをすると少なくとも、自然と、「原子」Atoms、「分子」Moleculesは分かれていきます。（※Molecules/Organismsは違いがわかりづらいのでちょっと最初は悩むと思います。）

そうやって、レベル毎にUIを設計することでコーディングに落とし込むときに、自然と分解ができるとうになります。

Sketchでの命名規則は下記記事が参考になります。（私もこちらのやり方を最近採用しています）
Sketchのシンボル活用で新規サービスの開発効率が2倍になった

atomic designのためのCSS設計

何がベストかは私も分かっていませんが、私が落ち着いた方法は、CSSのディレクトリはOrganismsでまとめておき「parts」という名前にしています。
Atoms/Moleculesについては、Organismsの中に書くか、extend/mixinに書くようにしています。※SCSSを使う前提での設計です。

Templatesについては、「pages」という名前で作っておき、pagesは使っていません。

個人的にはレベル毎にSCSSを分けてしまうと使い勝手が悪かったのでこの形に落ち着いていますが、他にや利用はあるのかもしれません。

他にもAtomic Design向けのCSS設計ですと、APB CSSがあります。
私も初めこちらを利用していたのですが、SMACSSの設計が相容れなかったので、自分なりに改良しました。

最後に

まだまだ私もAtomic Designを初めたばかりで使いこなしてるというわけではありませんが、ようやく自分なりの使いやすい形まで落とし込めました。

これからAtomic Designを初めたいという方の参考になれば幸いです。

もちろん、スタイルガイドがあるデザインが欲しいと言った場合でもお力になれると思いますので、そう言った方はご連絡ください。寿命の長いUIをお作りいたします。