massa142's blog

くり返す このポリリズム

「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を読んだ

Atomic Design ~堅牢で使いやすいUIを効率良く設計する

Atomic Design ~堅牢で使いやすいUIを効率良く設計する

動機

  • デザイン・UIについての知識を広げたい
  • SQUEEZEのフロントエンド開発にAtomic Designを取り入れたい
  • @iktakahiro がこの本を持っていたので借してもらった

感想

UIを、化学の原子に見立てて設計する、Atomic Designの考え方・具体的な手順からReactを使った実装まで、UI設計の本質とともに1冊で解説。インターネットテレビ「AbemaTV」のUI設計を担当した著者が、現場実践をふまえて伝授する。

Atomic Designの概念とStorybookを使った開発フローについて、内容がよくまとまっていてざっと学ぶことができた。

おそらく筆者は「現場で使える」ということにこだわっており、具体的なコードをもとにした解説や色々なテストの書き方が紹介されている。それが本書籍の魅力の1つでもあるが、一方Reactに関する説明の比重が高くなってるなーという印象も受けた。

この書籍のなかでは紹介されていないが、TemplatesとPagesという概念がSPAにはそぐわないという意見も多く、Atomic Design から派生しSPAのために設計された Atomic Components というものもある。

Atomic Designはあくまでデザインにおける設計粒度であり、Reduxのような状態管理を考慮する必要があるコンポーネント指向開発では、このAtomic Componentsの考えを参考にするとよさそう。

Ref: A brief look at Atomic Components – Joey Di Nardo – Medium

読書メモ

第3章 Atomic DesignによるUIコンポーネント設計

化学用語のAtoms、Molecules、Organismsというコンポーネントの概念は開発者だけが認識していればよいものであり、一般的な用語のTemplatesとPagesについては、開発者以外の経営者やクライアントと話す際にも説明する必要がある概念だという意味が込められています。

Brad Frost氏によるAtomic Designの説明では、残念ながら、詳細なUIコンポーネントの分割基準は示されていません。かんたんな分類方針が示されているだけです。そのため、５つの層のうちどのUIコンポーネントをどの層に分類すればよいか、具体的な基準は自分たちで決める必要があります。

Atoms（原子）

  • 「それ以上UIとしての機能性を破壊しない最小要素」
  • 適用箇所
    • プラットフォームのデフォルトUI
    • プラットフォームのデファクト・スタンダードなUI
    • レイアウト・パターン
    • セマンティックなデザイン要素

Molecules（分子）

Molecules層のコンポーネントでは、何のために「ボタンをクリックする」のか、何のために「テキストを入力する」のか、機能を組み合わせてユーザーの具体的な動機に応える機能の単位でUIをコンポーネント化します。

Organisms（有機体）

Moleculesはユーザーの関心事に対して機能を提供しましたが、Organisms層はコンポーネントで完結するコンテンツを提供します。

* Molecules: 独立して存在できるコンポーネントではなく、ほかのコンポーネントの機能を助けるヘルパーとしての存在意義が強いコンポーネント
* Organisms: 独立して独立できるスタンドアローンなコンポーネント

Ref: Atomic Design の理解 : molecules と organisms をどのように分割するか - Frasco

我々が学んだことのひとつは、モジュールがどのグループに属するかを決めるに当たっては、より柔軟であるべきということです。討論でチーム全体を巻き込むよりは、新しいモジュールを導入するデザイナーや開発者が、molecules もしくは organisms のどちらになるのか最終的に決めるべきです。残りのメンバーは、強くそして事実に基づいた異議がなければ、その決定を受け入れるべきです。

Templates（テンプレート）

Templates層の目的は、コンポーネントがページ上で正しくレイアウトされるかを確認することです。

  • コンテンツとプロダクトのUI機能を分離するためのレイヤー

Pages（ページ）

Templates層のコンポーネントに実際のコンテンツを流し込んだものがPageです。

  • 実際のコンテンツに影響されるため、カプセル化も再利用もされない
  • Templatesを介してコンテンツやルーティングをコンポーネントに接続させる

第4章 UIコンポーネント設計の実践

第5章 UIコンポーネントのテスト

あわせて読みたい