MoleculesとOrganismsのこと

Atomic Designを設計していくと壁にぶつかっていくことはとても多い。

自分自身が書いた記事になってしまうが、以下の記事のような、AtomsとMoleculesの違いや、Pagesの必要性などに疑問を持つことが多々ある。

Atomic Designってデザイナーには難しくない！？という話 - Qiita

あーそうかーなんて思いながらパーツを定義しても、また「え？このパーツは結局どこに属するの？」となることがしばしばある。

それにまさしくぶち当たったのが今で、それが「MoleculesとOrganismsの違い」だった。

検索窓って、本当にMoleculesなの？

Atomic Designの記事を漁っていると、しばしば「検索窓はAtomとAtomを組み合わせるからMoleculeだよ」という話がよく出てくる。

本当にそうなのかしら？

検索窓ってそのコンポーネントで完結してしまっている気がする。

検索するワードを入れて、検索のボタンを押すと、ページ遷移して結果が出てくるわけである。

そうしたら、完結しているのだからOrganismsな気がしてくる。

目的にフォーカスしてみる

Atomic Designはとても「文脈」を重要視している設計思想のように感じる。

Atomsは「それ以上機能が分解できない」もの。

Moleculesは「ユーザの動作を促す」もの。

Organismsは「コンテンツが完結している」もの。

私はざっくりと上記のように考えている。

このときのMoleculesとOrganismsの違いは「目的の有無」だと感じている。

検索窓で考えた場合、

「何を検索するのか」

が不明になっている。

行動は明確になっているが、目的が明瞭にやっていないものはMoleculesとなるのだろう。

「使い手」には理解しづらいAtomic Design

Atomic Designの「作り手」は、「部品をどのように設計したら使いやすいのか」を考えている。

しかし、「使い手」は、「それをどのように使ってデザインするか」を考えているために、なかなか「コンポーネント指向」を考えづらいのだろう。

デザイナーという職種は、他者に文脈を適切に伝える者であるはずなので、Atomic Designの「使い手」になるのか、「作り手」になるのかは、デザイナーとしての学びを深めることに大きく左右しそうだなと感じた。