Molecules と Organisms の分け方

2020-06-12

とあるエンジニアの方から「Atomic Design における Molecules と Organisms の分け方がイマイチわからない」というお話が挙がりましたので、自分なりに解説を書いていこうと思います。

まずは公式サイトを Google 翻訳で訳してみます。


Molecules(分子)の翻訳

In chemistry, molecules are groups of atoms bonded together that take on distinct new properties. For instance, water molecules and hydrogen peroxide molecules have their own unique properties and behave quite differently, even though they’re made up of the same atomic elements (hydrogen and oxygen).

化学では、分子は互いに結合した原子のグループであり、異なる新しい特性を帯びます。 たとえば、水分子と過酸化水素分子は、それらが同じ原子要素(水素と酸素)で構成されていても、独自の特性を持ち、まったく異なる動作をします。

In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.

インターフェースでは、分子は、1 つの単位として一緒に機能する比較的単純な UI 要素のグループです。 たとえば、フォームラベル、検索入力、およびボタンを結合して、検索フォーム分子を作成できます。

A search form molecule is composed of a label atom, input atom, and button atom.

検索フォーム分子は、ラベルアトム、入力アトム、ボタンアトムで構成されます。

When combined, these abstract atoms suddenly have purpose. The label atom now defines the input atom. Clicking the button atom now submits the form. The result is a simple, portable, reusable component that can be dropped in anywhere search functionality is needed.

結合すると、これらの抽象的な原子には突然目的があります。 これでラベルアトムは入力アトムを定義します。 ボタンのアトムをクリックすると、フォームが送信されます。 その結果、シンプルでポータブルな再利用可能なコンポーネントができ、検索機能が必要なあらゆる場所にドロップできます。

Now, assembling elements into simple functioning groups is something we’ve always done to construct user interfaces. But dedicating a stage in the atomic design methodology to these relatively simple components affords us a few key insights.

現在、要素を単純な機能グループにまとめることは、ユーザーインターフェイスを構築するために私たちが常に行ってきたことです。 しかし、これらの比較的単純なコンポーネントにアトミックデザイン手法の段階を当てることにより、いくつかの重要な洞察が得られます。

Creating simple components helps UI designers and developers adhere to the single responsibility principle, an age-old computer science precept that encourages a “do one thing and do it well” mentality. Burdening a single pattern with too much complexity makes software unwieldy. Therefore, creating simple UI molecules makes testing easier, encourages reusability, and promotes consistency throughout the interface.

シンプルなコンポーネントを作成することで、UI の設計者と開発者は、単一責任の原則、つまり「1 つのことを適切に実行する」という考え方を奨励する古くからのコンピューターサイエンスの原則を守ることができます。 1 つのパターンに非常に複雑な負荷をかけると、ソフトウェアが扱いにくくなります。 したがって、単純な UI 分子を作成すると、テストが容易になり、再利用性が促進され、インターフェース全体の一貫性が促進されます。

Now we have simple, functional, reusable components that we can put into a broader context. Enter organisms!

これで、幅広いコンテキストに配置できる、シンプルで機能的で再利用可能なコンポーネントができました。 生物を入力してください!

Organisms(有機体)の翻訳

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.

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

Let’s revisit our search form molecule. A search form can often be found in the header of many web experiences, so let’s put that search form molecule into the context of a header organism.

検索フォームの分子をもう一度見てみましょう。 検索フォームは多くのウェブエクスペリエンスのヘッダーに含まれていることが多いので、その検索フォーム分子をヘッダー生物のコンテキストに入れましょう。

This header organism is composed of a search form molecule, logo atom, and primary navigation molecule.

このヘッダー生物は、検索フォーム分子、ロゴ原子、および主要なナビゲーション分子で構成されています。

The header forms a standalone section of an interface, even though it contains several smaller pieces of interface with their own unique properties and functionality.

ヘッダーは、独自の固有のプロパティと機能を持ついくつかの小さなインターフェイスを含んでいますが、インターフェイスのスタンドアロンセクションを形成します。

Organisms can consist of similar or different molecule types. A header organism might consist of dissimilar elements such as a logo image, primary navigation list, and search form. We see these types of organisms on almost every website we visit.

生物は、類似または異なる分子タイプで構成されます。 ヘッダー生物は、ロゴ画像、主要なナビゲーションリスト、検索フォームなどの異なる要素で構成される場合があります。 私たちがアクセスするほとんどすべての Web サイトで、この種の生物を目にします。

Organisms like website headers consist of smaller molecules like primary navigation, search forms, utility navigation, and logos.

ウェブサイトのヘッダーなどの生物は、プライマリナビゲーション、検索フォーム、ユーティリティナビゲーション、ロゴなどの小さな分子で構成されています。

While some organisms might consist of different types of molecules, other organisms might consist of the same molecule repeated over and over again. For instance, visit a category page of almost any e-commerce website and you’ll see a listing of products displayed in some form of grid.

いくつかの生物は異なるタイプの分子で構成されているかもしれませんが、他の生物は同じ分子が何度も繰り返されている可能性があります。 たとえば、ほとんどすべての e コマース Web サイトのカテゴリページにアクセスすると、何らかの形式のグリッドで表示された製品のリストが表示されます。

A product grid organism on Gap's e-commerce website consists of the same product item molecule repeated again and again.

Gap の e コマース Web サイト上の製品グリッド生物は、同じ製品アイテム分子が何度も繰り返されて構成されています。

Building up from molecules to more elaborate organisms provides designers and developers with an important sense of context. Organisms demonstrate those smaller, simpler components in action and serve as distinct patterns that can be used again and again. The product grid organism can be employed anywhere a group of products needs to be displayed, from category listings to search results to related products.

分子からより精巧な生物に構築することは、デザイナーと開発者に重要な文脈の感覚を提供します。 生物は、これらのより小さくてより単純なコンポーネントの動作を示し、何度も使用できる個別のパターンとして機能します。 製品グリッド有機体は、カテゴリリストから検索結果、関連製品まで、製品のグループを表示する必要があるあらゆる場所で使用できます。

Now that we have organisms defined in our design system, we can break our chemistry analogy and apply all these components to something that resembles a web page!

設計システムで有機体が定義されたので、化学のアナロジーを壊して、これらすべてのコンポーネントを Web ページに似たものに適用できます!


めちゃくちゃ長いのと、Atomic Design がなぜ優れているか、みたいな説明も入っていて読みづらいですね。

個人的に押さえるべきポイントとしては、

Molecules のポイント

  • いくつかの Atoms が組み合わさって構成される
  • シンプルである
  • ポータブルであるため、必要とされるあらゆる場所から呼び出されることが可能である

Organisms のポイント

  • いくつかの Atoms、Molecules、Organisms が組み合わさって構成される
  • ウェブサイトのヘッダー Organisms は、プライマリナビゲーション、検索フォーム、ユーティリティナビゲーション、ロゴなどの小さな Molecules で構成されている
  • 同じ Molecules を何度も繰り返し使用され、リスト Organisms が構成されることもある

といった感じでしょうか。


続いて Atomic Design 公式のお墨付きサンプル、pattern lab を見ていきます。

Molucules と Organisms 直下のフォルダ構成を見てみると、

Molecules のフォルダ構成

  • BLOCKS
  • FORMS
  • LAYOUT
  • MEDIA
  • MESSAGING
  • NAVIGATION
  • TEXT

Organisms のフォルダ構成

  • GLOBAL
  • FORMS
  • LISTS
  • SECTIONS
  • TEXT

となっています。

パッと見た感じ、以下の印象を受けます。

  • 両方に FORMS が存在するが、 Molecules 側は label つきの input 要素を持ち、Organisms 側は Molucules 側の FORMS からコンポーネントを引っ張ってきている
  • Molecules 側で LISTS 自体は切られていないが、NAVIGATION あたりで list 自体は使用されている、list の複雑度で切る場所が変わる
  • header や footer は Organisms の GLOBAL に格納されており、Molecules では切らない

大体こんな感じでしょうか。

加えて、個人的に思うことをいくつか。

  • そもそもプロトタイプが Atomic Design を意識してデザインされている必要がある
  • UI が複雑なケースだと Organisms が Organisms を呼ぶケースが出てくる
  • Organisms と Molucules は width: 100% みたいな感じのコンポーネントが多い、あくまでイメージ
  • form タグや main タグのような、本来デザイン目的で使用すべきでないタグの配置は難しい、自分は container components (つまり Pages)に置くことが多い
  • Organisms を store などの状態管理と繋ぎこむのは愚の骨頂、プロジェクトがすぐに破綻してしまう可能性があるのできちんと Pages で行いましょう

前にも書きましたが、本来論ではエンジニアは Atomic Design を意識する必要はありません。

あくまで Web デザイナーが作り上げるプロトタイプが Atomic Design に沿っている必要があるだけです。

ですが、フロントエンドエンジニアも Atomic Design についてしっかりと知識を固めておくと、何かと得も多いのかなーと思う今日このごろです。

© 2018 kk-web