Atomic Design — 基礎、UIにおける原子、分子、有機体

Atomic Designとは？

Atomic Designは、階層的なインターフェースシステムを作成するための方法論で、各UI要素は5つのレベルのいずれかに属します：原子（基本要素）、分子（原子の組み合わせ）、有機体（複雑なブロック）、テンプレート（ページのワイヤーフレーム）、ページ（データを含む特定の画面）。この類推は化学から借用されています：原子が結合して分子になり、分子が有機体になり、有機体がテンプレートになり、テンプレートがコンテンツで満たされてページになります。

この方法論は、2013年にウェブデザイナーのBrad Frostが「ページ思考」の問題（既存のコンポーネントを考慮せずに新しい画面をゼロから設計すること）への対応として提唱しました。著書「Atomic Design」（2016）で、Frostは大手企業（IBM、GE、Starbucks）のプロジェクトでの方法論の実装について説明しています。Nielsen Norman Group（2022）によると、Atomic Designは既製コンポーネントの再利用により、新しい画面の設計時間を30〜50%削減します。

Atomic Designは技術というよりもUI組織の哲学です。特定のフレームワークに縛られず、ウェブ（React、Vue）とモバイル開発（Jetpack Compose、SwiftUI）の両方に適用可能です。IT Sectrでは、クライアントのデザインシステムを構築するためにAtomic Designを使用しています：設計段階で原子コンポーネントを特定し、それらをCompose/SwiftUIのコードコンポーネントに移行します。

5つのレベル：原子、分子、有機体、テンプレート、ページ

Atomic Designの各レベルは独自の問題を解決し、厳格な責任範囲を持っています。原子は、意味を失わずにこれ以上分割できないインターフェースの最小構成要素です：ボタン、テキストフィールド、アイコン、ラベル、チェックボックス。原子はビジネスロジックを含まず、コンテキストに依存しません。色、サイズ、間隔、タイポグラフィなどの基本的な視覚特性を定義します。

分子は、2つ以上の原子の組み合わせで、単純な機能単位を形成します。ラベルとエラーメッセージ付きの入力フィールドは分子です。画像、名前、価格付きの商品カードは分子です。分子は基本的なロジック（エラーの表示/非表示）を含むことができますが、ビジネスプロセスは含みません。分子は、コンポーネントが異なる画面間で再利用可能になる最初のレベルです。

有機体は、分子と原子から構成される複雑なインターフェースブロックで、アプリケーションの特定の機能を実装します。ログインフォーム（メールフィールド、パスワードフィールド、送信ボタン、「パスワードをお忘れですか」リンク）は有機体です。ロゴ、検索、ナビゲーション付きのヘッダーは有機体です。有機体はビジネスロジックを含み、APIにアクセスできますが、それは自身の機能の範囲内に限られます。

テンプレートは、特定のコンテンツなしで画面上の有機体の配置を定義するページのワイヤーフレームです。テンプレートはグリッド、列、コンテンツ領域を定義します — コードレベルのワイヤーフレームです。テンプレートにはデータは含まれず、プレースホルダーのみです。コンテンツを埋める前にページ構造を評価することができます。

ページは、テンプレートが実際のデータで満たされた特定のアプリケーション画面です。このレベルでは、実際のコンテンツ（長い文字列、データ欠落、エラー）でのコンポーネントの見え方が検証されます。ページはエンドユーザーが見る唯一のレベルです。ページレベルでの変更は原子、分子、有機体に影響を与えてはいけません — コンポーネントを変更する必要がある場合、そのレベルで変更が行われ、ページが自動的にそれを反映します。

Atomic Designの利点と制限

利点 — Atomic Designの利点はインターフェースをスケールする際に明らかになります。単一のコンポーネントライブラリが視覚的一貫性を保証します：ボタンは同じ原子であるため、すべての画面で同じように見えます。Brad Frost（2016）によると、Atomic Designを実装した企業は、既製の分子と有機体の再利用により、新しい画面の開発時間を30〜50%削減します。

制限 — Atomic Designはアプリケーションの状態管理方法を記述しません。この方法論は「UIコンポーネントをどのように整理するか」という質問にのみ答え、ビジネスロジック、ルーティング、データ管理には対応しません。2つ目の制限は、境界を定義する難しさです：分子はどこで終わり、有機体はどこから始まるのか？実際には境界は曖昧で、異なるチームが同じコンポーネントを異なる方法で分類する可能性があります。デザイントークンとコンポーネントカタログ（Storybook、Jetpack Compose Preview）でルールを確立することをお勧めします。

3つ目の制限は、小規模プロジェクトに対する過剰な抽象化です。アプリケーションが5画面で構成されている場合、原子と分子の階層を作成することは不要な作業です。Atomic Designは、画面数が20を超え、コンポーネントが異なるページで再利用される場合に有益になります。

Atomic Design vs Feature-Sliced Design

Atomic DesignとFeature-Sliced Design（FSD）は異なる問題を解決し、一緒に使用することができます。Atomic DesignはUIコンポーネントを整理するための方法論であり、FSDはビジネスレイヤーとアプリケーション全体を整理するための方法論です。Atomic Designは「UIを再利用可能な部分に分割する方法」という質問に答え、FSDは「ビジネス機能を中心にコードを整理する方法」という質問に答えます。これらは競合しません：featuresとentitiesのレイヤーを持つFSD構造を持ち、各レイヤー内でAtomic Designを使用してUIコンポーネントを整理することができます。

典型的な組み合わせ：FSDがアプリケーションのモジュール構造（レイヤー、スライス）を定義し、Atomic Designが各スライス内のUIコンポーネントの内部構造を定義します。例えば、feature.authスライスには、Atomic Designのルールに従って組み立てられた分子（LoginForm、PasswordInput）と有機体（AuthPage）が含まれます。共有レイヤーには、すべての機能で再利用される原子（Button、Input、Label）が含まれます。

モバイルアプリケーションにおけるAtomic Design：ComposeとSwiftUI

Jetpack ComposeとSwiftUIは、コンポーネント構成を通じてAtomic Designの階層を自然にサポートします。原子はComposeでは基本的な@Composable関数です：AppButton、AppTextField、AppCheckbox。各関数はカスタマイズパラメータ（色、サイズ、状態）を受け取り、ビジネスロジックは含みません。原子は共有レイヤーで定義され、UIキットとしてエクスポートされます。

分子は、複数の原子を組み合わせる@Composable関数です：LabeledTextField（ラベル+入力フィールド+エラーメッセージ）、ProductCard（画像+名前+価格）。分子は基本的な状態（フィールドの有効性）を含むことができますが、APIやViewModelにはアクセスしません。それらは異なる有機体で再利用されます。

有機体は機能レベルの@Composable関数です：LoginForm（メール用のLabeledTextField + パスワード用のLabeledTextField + 送信用AppButton + 復旧リンク）。有機体はIntent関数を通じてViewModelと連携し、ビジネスロジックを含むことができます。SwiftUIでは、@ViewBuilderとカスタムView構造体を通じて同様の階層が構築されます。

SwiftUIでは、原子はカスタムView構造体のAppButton、分子はHStack上のラベル付き入力フィールド、有機体はログインフォームです。この構造により、すべての画面でコンポーネントを再利用できます — 原子（ボタンの色）を変更すると、自動的にすべての画面に適用されます。Atomic Designとデザインシステムの組み合わせにより、各画面を手動で制御することなくインターフェースの一貫性が保証されます。