SketchでAtomic Designぽいことをしてみた

Supership株式会社でデザイナーをしているエリィです。
この内容は所属しているSupership株式会社データソリューションスタジオ(DSS)のプロダクト開発Gでの勉強会で発表した内容を、外部公開向けに再編したものです。

Atomic Designって言葉だけは知っているけど、実際にこのシステムを使ってデザイン〜コーディングしたらどうなるんだろう？と思ったのでやってみました。
あとSketchを使うようになって慣れてきたものの、お絵かきソフト的な用途にしか生かせてないように思えたので、デザインシステムを利用した使い方をしてみたいなと思いました。

Atomic Designとは？

引用元：https://bradfrost.com/blog/post/atomic-web-design/

パーツ・コンポーネント単位で定義していく UI デザイン手法です。化学用語を使っているのでちょっとわかりにくい。。。と思ったのは私だけでしょうか。最小の単位「原子」から「分子」、「生体」、「テンプレート」、「ページ」という分類でデザインをしていきます。

原子（Atom）-アトム：デザインシステムを構成する基本的なブロックを表します。たとえばボタンやテキストスタイルが該当します。

分子（Molecules）-モルキュール：ユニットとして共に機能する原子のグループを表します。分子は実体のあるUI要素です。たとえば、ボタンとテキストフィールドが一緒になった分子は、検索フォームを構成します。

生体（Organisms）-オルガニズム：原子と分子が繋ぎ合わさった複雑な構造のことです。たとえば、分子である検索フィールドと原子であるナビゲーションバーが組み合わされば、Webサイトのヘッダーという生体を構成します。

テンプレート（Templates）：コンテンツの構造を定義するレイアウトの中にコンポーネントを配置した、ページ単位のオブジェクトです。たとえば、ヘッダーの生体をトップページのテンプレートに入れ込みます。

ページ（Pages）：最終的なプロダクトを表すテンプレートの例です。

引用元：http://atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces

Sketchで部品を作っていく

Atom
Atomから作っていきます。ボタンとかラベルがAtomね〜・・・おっ？ちょっと待てよ。
ここでいきなり迷う。アイコンって何になるの・・・？
分割するレベルはサイトの規模などによって柔軟にするのが良さそうですね。今回はアイコン違いのボタンがたくさん出てくる想定だったので、アイコンもAtomにしてしまいました。

Sketchのシンボル機能を使って、Atom/〜という名前をつけて送っておきます。さらに以下のようなカテゴリ分けをすると見通しが良くなります。

・アセット
・ボタン
・インプットコントロール
・画像
・ナビゲーション
・情報

シンボル、レイヤースタイル、テキストスタイルの登録の仕方はここが詳しくてわかりやすかったです。

Molecules
Atomを組み合わせてMoculesを作っていきます。今回はスマホのセルのようなコントロールをたくさん使うので、Atomをペタペタ貼り付けてはシンボルに送ります。ちょっとレゴに似てますね。

Organisms
ヘッダーなど。ただ今回はヘッダーが一つしかないので部品を組み合わせずに、ロゴ+メニューボタンのみで作成しました。

Template、Pagesは今回は使いませんでした。

良かった点

部品の組み合わさり方がわかる=コーディングしやすい！
例えばボタンの例でいくと、今回はアイコンが左にあるボタン、右にあるボタン、少し小さいボタンなどいとこ同士みたいなボタンがたくさんありましたが、Atomにして把握できていたのでコーディングがしやすかったです。

デザインが破綻しにくい
あらかじめ決めた部品で作っていくので、思いつきで作り始めることがなく、秩序のあるデザインに仕上がった気がします。

CSSフレームワークと相性が良さそう
今回はBulmaというフレームワークを利用する前提だったので出来上がりがイメージしやすかったです。

懸念点

0からやるの難しい
メインのデザイナーがいて、ベースのデザインがあって、その人がきちんと管理するようなデザインチームにはとても合いそうです。エンジニアに共有もしやすそう。

分割するの難しい
Atomicは5種類に分ける手法ですが、プロダクトによってカスタマイズするのが良いのかも。

つまんないデザインになる
ランディングページやWebサイトには向いてないと思いました。Webサービスの管理画面のような、ページ数とUIが多いデザインに向いていそう。

終わりに

今回は一人デザイナーでこのような作り方をしました🥺
という終わりになってしまうのですが、デザイナーとチームでやる、エンジニアとチームでやる、想定をしたときに単なるパーツの構造化だけでなく、プロダクト開発の上で意識合わせをするのに良いモデルだなあと思いました。

デザインする上で、まずビジュアルから作っていたのをマークアップ、コーディング込みで考えるやり方をできて勉強になりました。

進めるうちにデザインガイドラインが出来上がるので、エンジニアと共有して使うのが良さそうだなと思いました。今回は自分でコーディングもしてしまったので自分の抜け漏れチェックとしても使えて良かったですし、Sketchのファイルの中も見通しが良くなって一石二鳥でした。

参考

Atomic Design を分かったつもりになる
Atomic Design
Sketchを使ったAtomic Designのワークフロー