Atomic DesignでUIを細分化する
最近のjavascriptのフレームワークはコンポーネント指向で設計されているものが多いです。 コンポーネント指向の良いところは、作ったパーツを再利用できる点と、再利用することでサービス全体でのUIの一貫性が保たれるという点だと思います。
そしてコンポーネント指向はマークアップや、プログラムだけの話ではなく、デザインでも利用できます。
今回は以前から気になっていた、コンポーネント指向を使ったデザインシステムであるAtomic Designについて調べました。
Atomic Designについては、すでに多くの素晴らしい記事があり、ご存知の方も多いと思います。 この記事での新たな発見はないと思うので、知っている方は読まずにもっと結意義な時間に使ってください。
Atomic Designとは
Atomic Designはページ単位でデザインするのではなく、細分化したコンポーネントの組み合わせでデザインを組み立てていく手法です。
コンポーネントの種類
コンポーネントはパーツの粒度によって名前が決まっています。
- ATOMS（原子）
- MOLECULES（分子）
- ORGANISMS(有機体）
- TEMPLATES(テンプレート）
- PAGES(ページ）
この中で特に原子、分子、有機体を使ってページを組み立てていきます。
ATOMS（原子）
まず原子です。 その名の通り、原子は最小単位のパーツです。 カラーパレットやフォント。ボタンやラベルなどが当たります。 それ以上機能的に分けることができないパーツは原子に分類されます。
MOLECULES（分子）
分子は2つ以上の原子で構成されるエレメントです。 分子になるとUIパーツっぽさがでてきます。
ORGANISMS(有機体）
有機体は原子と分子を使って、ヘッダーやフッター、テーブルなどの大きめのコンポーネントを作ります。
TEMPLATES(テンプレート）
テンプレートは有機体を組みあせて作るワイヤーフレームです。 ダミーの情報を入れた状態で、具体的なコンテンツの情報はもっていません。
PAGES(ページ）
テンプレートにコンテンツ情報を入れた最終型です。
instagramの例
instagramだとこんな感じです。わかりやすいです。
Atomic DesignとSketch
私はデザイン業務の際にSketchを好んで使っています。 以前はphotoshopやfireworksを使っていましたが、動作の軽さと、シンボル機能の使いやすさでSketchを利用することが増えました。
Atomic Designは上記で説明した通り、コンポーネントの粒度の小さい物を組み合わせて作成していきます。 その際に、Sketchのシンボル機能が力を発揮します。
Sketchのシンボル
Sketchのシンボルは、共通コンポーネントを作成するのに向いています。 同じシンボルで形状やテキスト、装飾を変更することができますし、シンボル化されていれば一括変更ができる為、後からの修正が楽です。
またシンボルを入れ子にもできるのでコンポーネントの階層構造を実現するのにピッタリです。
コンポーネント単位でシンボル化していく
ある程度デザインが出来た段階で、シンボル化していきます。
シンボル化する際のポイントとしては、以下を気をつけると良さそうです。
1.シンボルの命名規則を統一させる 2.コンポーネント化する粒度を統一させる
命名規則は決まりは無いみたいなのですが、一般的な付け方が下記になります。
Lv1 ・・・ 原子 Lv2 ・・・ 分子 Lv3 ・・・ 有機体
スラッシュを入れているのは、Sketchではスラッシュをシンボル名に入れることで、階層をもたせることができるからです。
シンボルに正しく名前を入れていると、SketchプラグインのSymbol Organizerでシンボルを階層ごとに並べ替えることができ見通しが良くなります。 これは便利です。
まとめ
通常デザインする際はページ全体のデザインを考えます。 Atomic Designの場合は細部のパーツのデザインから考えていくため慣れないと全体のイメージが湧きにくいです。
しかし、開発の工程では、すでにコンポーネント分けがされてる為、無駄に同じコンポーネントを実装してしまうなどの問題が起こりづらく、 エンジニアの人にはメリットが大きそうな印象でした。
また、Atomic Designを意識してデザインしていくと、名前や階層を意識するのでレイヤーがキレイになりデキるデザイナーの印象を与えることができそうです
