はじめてのAtomicDesign
はじめに
最近、業務を通じてフロントエンドのコードを触る機会が増えてきました。
正直まだフロントエンドのことは全然理解しきれておらず、よくわからないままタスクをこなしているような感じです。現在担当させていただいているプロジェクトではUIの設計にAtomicDesignを採用しているため、自分自身の理解を深める目的と備忘録のために記事を書いてみようと思います。
Atomic Design（アトミックデザイン）とは
Atomic Designとは、Brad Frost氏によって提唱されたUI設計のための方法論。
パーツ単位またはコンポーネント単位でUIのデザインを設計していく手法で、小さなパーツから順番にUIを組み立てていくことで大きなパーツを作っていきます。
Atomic Designは5つの要素があります。
- Atoms（原子）
- Molecules（分子）
- Organisms（生体）
- Templates（テンプレート）
- Pages（ページ）
これらを組合せていくことで効率的にUIコンポーネントを段階的に構築します。
メリット
- 再利用性が高い
一度設計したコンポーネントを何度も利用することが可能であるため、その分の作業工数を削減できる。 - 一貫性が確保される
システム全体で同じルールとコンポーネントを利用することで、UIに一貫性が生まれる。 - デザインの変更が容易になる
構成要素を細かくした上で再利用しながら組み立てていくため、開発途中でデザインに変更があった場合に修正がしやすい。（ボタンのデザインが変わった際に一つ直せば、全ての画面で変更がなされる）
デメリット
- 学習コストが高い
Atomic Designの概念は理解しやすいように見えるが、実際に適用するとなると複雑になりやすい。どのコンポーネントが原子で、どれが分子や生物に分類されるかといった判断が難しく、これらを理解しきるまでに時間がかかる。 - ファイル数が増えやすい
UIに利用するコンポーネントを細かく分けて作成することになるため、ファイル数が増えやすい。 - 複雑化しやすい
前述したファイル数の問題にも繋がるが、コンポーネントが細かくなっていくことで返って複雑になってしまう可能性をもつ。
構成要素について
Atoms（原子）
最小単位のUIコンポーネントであり、それ以上分解できないような要素。
- ボタン
- テキストフィールド
- ラベル
- アイコン
Molecules（分子）
複数の原子を組合せて構成するUIコンポーネント。比較的単純な要素であり、一定の役割を持つ。
- 入力フォーム（テキストフィールド+ボタン）
- ナビゲーションリンク（複数のリンク原子）
Organisms（生体）
複数の分子や原子を組合せて構成する特定の機能を持つUIコンポーネント。より複雑な機能を実現する。
原子や分子は汎用的に利用されるのに対して、生体は特定の役割を担う。
- ヘッダー（ロゴ+ナビゲーションメニュー+入力フォーム）
- 商品カード（画像+タイトル+説明+価格+購入ボタン）
Templates（テンプレート）
複数の生体や原子・分子を組合せて構成するページ全体の骨組みを定義するレイアウト要素。テンプレートはワイヤーフレームとほぼ同じ。後述するPagesに対して実際のデータが反映される前の状態。
- トップページのテンプレート
- ブログ記事のテンプレート
- 特定ユーザーのプロフィールページのテンプレート
Pages（ページ）
テンプレートに対して実際のデータを反映したもの。最終的にユーザーが閲覧するページ。
- 特定のブログ記事ページ
- 特定のユーザーのプロフィールページ
といったようにUIの要素を分類するが、どうしても人によってコンポーネントの分類をどれに当てはめるか？がバラついてしまう可能性があり、あるチームでは「分子」と考えられるものが、別のチームでは「生物」とみなさせれることも。チーム全体がこの方法論を正しく理解し、一貫したルールで適用するには難しい一面もある。
まとめ
Atomic Designの考えを適用することで、アプリケーション全体のデザインに統一性が生まれ、開発の際にも再利用可能しやすいコンポーネントを用意できるということがわかりました。
しかし、Atomic Designの考えは強力なデザインシステムの方法論ではあるが、必ずしも万能というわけではないようです。これを適用する際は、エンジニアだけでなくデザイナーなども含め、チームメンバがこの考えを理解しているか？の認識合わせをまずしていく必要があるように感じました。
一人一人がAtomic Designの考えを適切に理解したうえで、メンバ全員と話し合いながらUIの構成単位を決めたり、プロジェクトの規模やニーズに合わせて柔軟に考えを適用しながら運用していくのが求められるのだと思います。
参考記事
Discussion