Atomic Designの基礎: 英文翻訳(*抜粋箇所のみ)

はじめに

Atomic DesignのドキュメントAtomic Design by Brad Frost2章にて、Atomic Designの手法が詳しく解説されていたので、重要な箇所だけ抜粋し英訳しました。

Atomic Designとは

Atomic designとは、UIの構成要素を下記5つの階層に分解、連携させることでインターフェイス・デザインを設計する手法です。

1. Atoms　原子
2. Molecules　分子
3. Organisms　生物
4. Templates　テンプレート
5. Pages　ページ

最小単位となるコンポーネント「原子」から順番に組み合わせ、さらに大きなコンポーネントを作ることでWebサイトのUIが完成します。

引用元: https://atomicdesign.bradfrost.com/chapter-2/#the-atomic-design-methodology

5つの階層

Atomic Designは、ユーザーインターフェイスが部品の集合体であると考えるのに役立つモデルです。5つの階層は、それぞれインターフェース設計において重要な役割を果たします。各段階を詳しく見てみましょう。

Atoms 原子

原子の化学的な定義は、「物質を構成する基本的な粒子」です。

同じく、インターフェイスの原子も、すべてのユーザーインターフェイスを構成する基本的な構成要素として機能します。これらには、フォーム ラベル、入力、ボタンなど、これ以上分解すると機能しなくなる基本的なHTML要素が含まれます。

引用元:https://atomicdesign.bradfrost.com/chapter-2/#atoms.

自然界の各原子がそれぞれ独自の特性を持っているように、見出しのフォントサイズや画像の寸法など、各インターフェイスのアトムも独自のプロパティを持っています。これらは、デザインの開発保守で参照される基礎的な資料となります。

Molecules　分子

分子の化学的な定義は、「原子の結合体で、その物質の化学的性質を失わない最小の構成単位」です。たとえば、水分子(H2O)と過酸化水素(H2O2)の分子は、同じ原子要素で構成されているにもかかわらず、それぞれ独自の特性を持ち、まったく異なる動作をします。

インターフェイスの分子は、1つのユニットとして機能する比較的単純なUIコンポーネントです。たとえば、フォームのラベル、検索入力、ボタンを結合して、検索フォーム分子ができます。

引用元:https://atomicdesign.bradfrost.com/chapter-2/#molecules.

ラベル原子が入力原子を定義し、ボタン原子をクリックすると、フォームが送信されます。その結果、検索機能が必要な場所ならどこでも利用できる、再利用可能なコンポーネントが得られます。

Atomic Designで単純なコンポーネントを作成するこの段階では、単一責任の原則を守ります。単一のパターンに複雑の機能を持たせると、ソフトウェアが扱いにくくなるためです。1つのコンポーネントに単一の機能を持たせることで、再利用性が促進され、インターフェイス全体の一貫性が促進されます。

Organisms　生物

生物は、分子/原子、または他の生物のグループで構成される比較的複雑な UIコンポーネントです。これらの生物は、インターフェースで異なるセクションを形成します。

ここで、検索フォームがwebアプリケーションのヘッダーにあると考えます。
ヘッダー（生物）は、ロゴ画像（原子）、ナビゲーションリスト（分子）、検索フォーム（分子）などの異なる要素で構成されていることになります。

引用元:https://atomicdesign.bradfrost.com/chapter-2/#organisms.

Templates　テンプレート

作成されたコンポーネントは、最終的によりコンテンツ構造を明確にする必要があります。

テンプレートは、生物と分子で構成されるページレベルのオブジェクトです。
ヘッダーの例に基づき、それをホームページテンプレートに適用するとしましょう。

引用元: https://atomicdesign.bradfrost.com/chapter-2/#templates

テンプレートの特徴は、ページの骨組み（レイアウト）を明確にできるということです。
レイアウトを定義することで、さまざまな動的コンテンツに対応できるようになります。

下の画像は、レイアウト作成時の具体的な例です。
このように、コンポーネントを配置し、画像サイズや文字長などコンテンツに関する情報もテンプレートによって決まります。

引用元: https://atomicdesign.bradfrost.com/chapter-2/#templates

Pages　ページ

ページは、テンプレートに実際のコンテンツを配置したものです。
前の例に基づいて、テキスト、画像、メディアをホームページテンプレートに注ぎ込み、リアルなコンテンツを表示できます。

引用元: https://atomicdesign.bradfrost.com/chapter-2/#pages

ページは、Atomic Designの最も具体的な段階です。
ここでは、すべてのコンポーネントが結合されて、機能的なユーザーインターフェイスが形成されます。

ページは、基礎となるテンプレートのバリエーションをテストするために不可欠です。
以下は、テンプレートのバリエーションの一部です。

• あるユーザーはショッピングカートに1つの商品を入れており、別のユーザーはカートに10個の商品を入れている
• Webアプリのダッシュボードには最近のアクティビティが表示されるが、初めてのユーザーには表示されない
• ある記事の見出しの長さは40文字である一方、別の記事の見出しの長さは340文字である場合
• 管理者権限を持つユーザーでログインすると、ダッシュボードに追加のボタンやオプションが表示される

これらの例ではすべて、基礎となるテンプレートは同じですが、UIはコンテンツの動的な性質を反映して変更されます。このような変化は、基礎となる分子、生物、テンプレートがどのように構築されるかに直接影響します。
したがって、このような変化を考慮してページを作成することは、信頼性の高いUIのために重要です。

Atomic Designのメリット

The part and the whole

Atomic Designがの最大の利点の1つは、抽象(レイアウト)と具体(最終的なUI)を同時に作成できることです。
同時に、インターフェイスを原子要素に分解して確認することができ、それらの要素がどのように結合して最終的なUIを形成するのかも確認できます。

引用元: https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole

グラフィックデザイナーFrank Chimero は、著書『The Shape of Design』の中で、この横断がもたらす力を美しく表現しています。

The painter, when at a distance from the easel, can assess and analyze the whole of the work from this vantage. He scrutinizes and listens, chooses the next stroke to make, then approaches the canvas to do it. Then, he steps back again to see what he’s done in relation to the whole. It is a dance of switching contexts, a pitter-patter pacing across the studio floor that produces a tight feedback loop between mark-making and mark-assessing.
画家は画架から離れても、作品全体を評価し、分析することができます。彼は注意深く耳を傾け、次のストロークを選択し、それを実行するためにキャンバスに近づきます。それから彼は再び一歩下がって、全体に対して自分が何をしたかを確認します。それはコンテキストを切り替えるダンスであり、スタジオのフロアをパタパタと歩き回り、創作と評価の繰り返しをします。
Frank Chimero

デザイナーや開発者が特定のコンポーネントを作成するとき、私たちはFrankが描写した画家のようなものです。
インターフェースのテンプレートとページは、実際に小さな部分で構成されています。デザインの部分は全体に影響を与え、全体は部分に影響を与えます。 この2つは絡み合っており、Atomic Designではこの事実が考慮されています。

Clean separation between structure and content

デザインとコンテンツについて議論することは、鶏が先か卵が先かを議論するようなものです。
Mark Boulton は次のように説明します。

Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’.
コンテンツは構造化する必要があり、構造化によってコンテンツが変わり、デザインによってコンテンツが変わります。「コンテンツを作ってからデザインする」でも、「コンテンツかデザインか」ではありません。「コンテンツとデザイン」です。
マーク・ボールトン

よく作られたデザインは具体的なコンテンツに対応し、よく加工されたコンテンツはUIで正しく表示されます。インターフェイスは、その中のテキスト、画像、その他のコンテンツを正確に反映する必要があります。同様に、コンテンツもUIでの表示方法を意識する必要があります。コンテンツとデザインの間には密接な関係があるため、UI構築には両方を考慮する必要があります。

Atomic Designは、UIとコンテンツについて議論するための知見を提供します。コンテンツ構造の骨組み(テンプレート)と具体的なコンテンツ(ページ)の間には明確な区別がありますが、Atomic Designでは、この2つが相互に大きな影響を与えていることが認識されています。たとえば、次の例を考えてみましょう。

引用元: https://atomicdesign.bradfrost.com/chapter-2/#clean-separation-between-structure-and-content

左側は、UIの骨組みです。これは、同じ人物ブロック分子が繰り返されて構成されています。右側は、各人物ブロック分子に具体的なコンテンツを入力した場合です。コンテンツの骨組みと具体的なコンテンツを視覚化することで、コンテンツを正確に反映するパターンを作成できます。

ページの段階でUIに注ぎ込むコンテンツは、基礎となるデザインの特性とパラメーターに影響を与えます。