Atomic Designでモテるデザイナーになろう

こんにちは〜。

user-avatar

先日、ビデオカメラから動画を取り出してくれと頼まれた際に、上手く取り込めずチームの若者に聞いたところ、

「このケーブル、電源用ですね」

と、木彫りの人形のような目で言われ、
いよいよテーブルの中身を少しずつ整理する必要があるかもしれないと思った、夢際のラストボーイ佐藤です。

今回はビデオカメラからの動画の取り出し方ではなく、ページからのUIの取り出し方について書こうと思います。

Atomic DesignでUIを細分化する

最近のjavascriptのフレームワークはコンポーネント指向で設計されているものが多いです。
コンポーネント指向の良いところは、作ったパーツを再利用できる点と、再利用することでサービス全体でのUIの一貫性が保たれるという点だと思います。

そしてコンポーネント指向はマークアップや、プログラムだけの話ではなく、デザインでも利用できます。

今回は以前から気になっていた、コンポーネント指向を使ったデザインシステムであるAtomic Designについて調べました。

Atomic Designについては、すでに多くの素晴らしい記事があり、ご存知の方も多いと思います。
この記事での新たな発見はないと思うので、知っている方は読まずにもっと結意義な時間に使ってください。

Atomic Designとは

Atomic Designはページ単位でデザインするのではなく、細分化したコンポーネントの組み合わせでデザインを組み立てていく手法です。

コンポーネントの種類

コンポーネントはパーツの粒度によって名前が決まっています。

170519_01

1. ATOMS(原子)
2. MOLECULES(分子)
3. ORGANISMS(有機体)
4. TEMPLATES(テンプレート)
5. PAGES(ページ)

この中で特に原子、分子、有機体を使ってページを組み立てていきます。

ATOMS(原子)

まず原子です。
その名の通り、原子は最小単位のパーツです。
カラーパレットやフォント。ボタンやラベルなどが当たります。
それ以上機能的に分けることができないパーツは原子に分類されます。

170519_02

MOLECULES(分子)

分子は2つ以上の原子で構成されるエレメントです。
分子になるとUIパーツっぽさがでてきます。

170519_03

ORGANISMS(有機体)

有機体は原子と分子を使って、ヘッダーやフッター、テーブルなどの大きめのコンポーネントを作ります。

170516_6

TEMPLATES(テンプレート)

テンプレートは有機体を組みあせて作るワイヤーフレームです。
ダミーの情報を入れた状態で、具体的なコンテンツの情報はもっていません。

170516_7

PAGES(ページ)

テンプレートにコンテンツ情報を入れた最終型です。

170516_8

instagramの例

instagramだとこんな感じです。わかりやすいです。

170516_9

Atomic DesignとSketch

私はデザイン業務の際にSketchを好んで使っています。
以前はphotoshopやfireworksを使っていましたが、動作の軽さと、シンボル機能の使いやすさでSketchを利用することが増えました。

Atomic Designは上記で説明した通り、コンポーネントの粒度の小さい物を組み合わせて作成していきます。
その際に、Sketchのシンボル機能が力を発揮します。

Sketchのシンボル

Sketchのシンボルは、共通コンポーネントを作成するのに向いています。
同じシンボルで形状やテキスト、装飾を変更することができますし、シンボル化されていれば一括変更ができる為、後からの修正が楽です。

170518_1

またシンボルを入れ子にもできるのでコンポーネントの階層構造を実現するのにピッタリです。

170516_1

コンポーネント単位でシンボル化していく

ある程度デザインが出来た段階で、シンボル化していきます。

シンボル化する際のポイントとしては、以下を気をつけると良さそうです。

1.シンボルの命名規則を統一させる
2.コンポーネント化する粒度を統一させる

命名規則は決まりは無いみたいなのですが、一般的な付け方が下記になります。

Lv1 ・・・ 原子
Lv2 ・・・ 分子
Lv3 ・・・ 有機体

スラッシュを入れているのは、Sketchではスラッシュをシンボル名に入れることで、階層をもたせることができるからです。
170516_11

シンボルに正しく名前を入れていると、SketchプラグインのSymbol Organizerでシンボルを階層ごとに並べ替えることができ見通しが良くなります。
これは便利です。

170516_12

まとめ

通常デザインする際はページ全体のデザインを考えます。
Atomic Designの場合は細部のパーツのデザインから考えていくため慣れないと全体のイメージが湧きにくいです。

しかし、開発の工程では、すでにコンポーネント分けがされてる為、無駄に同じコンポーネントを実装してしまうなどの問題が起こりづらく、
エンジニアの人にはメリットが大きそうな印象でした。

また、Atomic Designを意識してデザインしていくと、名前や階層を意識するのでレイヤーがキレイになりデキるデザイナーの印象を与えることができそうです。

次回は、ビデオカメラからの動画の取り出し方について書こうと思います。

SNSでもご購読できます。