Atomic Design ~堅牢で使いやすいUIを効率良く設計する
- 作者: 五藤佑典
- 出版社/メーカー: 技術評論社
- 発売日: 2018/04/25
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
動機
- デザイン・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です。
第4章 UIコンポーネント設計の実践
- Storybookでコンポーネント・リストをつくる
- MailChimpのコンポーネント・リスト: https://ux.mailchimp.com/patterns
- ロジックと表示に関する責務を分離する
- コンポーネント同士を組み合わせやすくなる
- UIコンポーネント外部からスタイルを適用する
- 役割に対して逸脱しない名前をつける
- Template層以下: 入力された静的データの表示に特化したプレゼンテーショナル・コンポーネント
- Pages層: 外部から取得した動的データとプレゼンテーショナル・コンポーネントをつなぐコンテナー・コンポーネント
第5章 UIコンポーネントのテスト
- ストラクチュラル・リグレッション・テスト
- DOM構造の変更を検知
- StoryShots
- Jestのスナップショット機能を利用
- ビジュアル・リグレッション・テスト
- パフォーマンス・テスト
- Responsive Image as Service (RIaS)
- ネットワーク・アクセスが発生する画像や動画を扱うコンポーネントは、Atoms層として構成するとよい
- アクセシビリティ・テスト
- Lighthouseでのテスト
- aXe
- A/Bテスト
