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

五藤佑典(著者)

• 販売会社／発売会社: 技術評論社
• 発売年月日: 2018/04/25
• JAN: 9784774197050

商品レビュー

2021/07/23

　デザインのお勉強。

■コンポーネントの4つの特徴
１．カプセル化されている
２．置換可能である
３．再利用可能である
４．コンポーネントを別のコンポーネントを組み合わせて作成可能である

　CSSの修正をデザイナー自身が行えることは、エンジニアにとってもデザイナーにとっても大きなメリットがあります。最終的なUIの見た目に責任を持つのは、デザイナーであることが多いです。エンジニアが見た目を変更するためにCSSを修正すると、エンジニアは、デザイナーを空いている時間に捕まえて、変更を確認してもらう必要があります。もしそこでOKが出なかった場合、再修正して、またデザイナーを捕まえて、何度も確認しなければいけません。見た目に関する指定は言語化が難しいため、こういったコミュニケーションはくり返されやすいです。
　しかし、そのデザイナー自身がUIの見た目を実装レベルで変更すれば、リアルタイムで変更を確認できるため、二者間のコミュニケーションによる確認待ち時間は０になります。そして、変更した見た目にデザイナー自身がOKを出した後で、GitHubにプルリクエストすることになるので、エンジニアはコード・ベースのレビューだけに集中できます。UIをコンテナ―・コンポーネントとプレゼンテーショナル・コンポーネントに分離することは、職域ごとの関心も分離できるため、開発フローもスムーズになります。

■基本的な視覚デザイン要素を一元管理する
・余白の大きさ：コンポーネントとコンポーネントの間の余白など
・書体：明朝体、ゴシック体、手書き風など
・フォントサイズ：極小、小、中、大、極大
・色：背景、テキスト、テキストリンク、強調、成功、危険、警告
・アニメーション：持続時間やイメージングなど
・ボーダー：幅、角丸の半径
◇デザインの要素
１．色
２．線（直線、曲線、ジグザグ線、破線など）
３．図形（円形、三角形、四角形などの幾何学的図形や有機的図形）
４．質感・テクスチャ
５．空間（オブジェクト間の空間）
６．フォーム（幅、高さ、奥行きを感じさせる三次元的な視覚情報がある要素）
◇視覚デザインの原則
１．統一
２．バランス（要素の位置や大きさなどの視覚バランスで安定感や躍動感といった印象を制御する）
３．階層（視覚情報の優先度を階層的に整理することで視線をより大事な情報に誘導する）
４．尺度・比率（要素同士の相対的な面積比率を制御することは視覚に心地良いリズムを生む）
５．占有・強調（全体を占める法則を意図的に無視することで焦点を当ててもらいたい要素を目立たせる）
６．類似と対比（各所のデザインを類似させることでユーザーは迷わず情報を探せるが、類似したデザインばかりだと単調すぎて飽きてしまう。重点を置きたい情報には、ほど良く対比的な構造を与える）

2020/02/23

Atomic Designの解説書。Atomic Design 自体が機能についてのデザインの話なので当然ともいえるけれど、内容はかなり実装より。最初にAtomosやMoleculesといった特有の概念を解説した後は、Reactを利用した具体的な実装を通して設計から開発、テストまで解説となっている。内容盛りだくさんのため細かい実装部分についてはサンプルに頼ってる感じはあるけれど、内容は実践的でストーリーブックを利用した開発や、ユニットテストだけにとどまらないリグレッションテストなども含めた包括的なテストについても大きく紙幅をとっているのが良い。フロントエンド開発をするものにはとても学ぶところの多い有益な本。

2019/05/31

UIコンポーネントベースで開発をするフローというのに、長年課題を感じているので読了。
AbemaTVのフロント開発では本書のような開発が行われているらしい。

Atomicはまさに原子的なという意味で、UIの責務をきちんと分割し、最小のAtom単位でコンポーネントをデザインし、それをリスト化、きちんとテストもこなしてリリースできるようにすることで、非エンジニアや非デザイナーでもGitを使PRで修正が出せるというある意味現時点での理想形のフローだった。
中のReact実装は比較的読み飛ばしたが、そこも含めて確認できる本書はかなりよかった。

■目次
はじめに

第1章 UI設計における現状の問題を振り返る
1-1 アプリケーションのUIに求められる直感性
1-2 UI開発の現場1:JavaScriptの進化
1-3 UI開発の現場2:CSSの努力
1-4 UI開発の現場3:スタイルガイドの普及
1-5 UI開発の現場4:デザインカンプ・ファーストなUI開発ワークフロー
1-6 UI開発の現場5:UIフレームワークの普及
1-7 UI開発の現場6:Single Page Applicationの普及

第2章 コンポーネント・ベースのUI開発
2-1 なぜコンポーネント・ベースで開発するのか
2-2 堅牢なUI開発を実現する
2-3 開発作業を効率化する
2-4 コンポーネント・ベースUI開発がもたらすユーザー・メリット
2-5 コンポーネント設計の基本を知る
2-6 コンポーネント・ベースUI開発の現状

第3章 Atomic DesignによるUIコンポーネント設計
3-1 Atomic Designとは
3-2 UIコンポーネントの分割基準を考える
3-3 Atoms(原子)を設計する
3-4 Molecules(分子)を設計する
3-5 Organisms(有機体)を設計する
3-6 Templates(テンプレート)、Pages(ページ)

第4章 UIコンポーネント設計の実践
4-1 開発環境を準備する
4-2 UIコンポーネントの設計を考える
4-3 UIコンポーネントを実装する
4-4 コンポーネント実装におけるポイント
4-5 コンポーネントに適切なスタイルを与える
4-6 アプリケーションにおける統一性担保
4-7 UIコンポーネントを適切に命名する
4-8 アプリケーションとコンポーネントを接続する

第5章 UIコンポーネントのテスト
5-1 テスタブルなUIコンポーネントを作って高速で堅牢な開発
5-2 UIコンポーネントの単体テスト
5-3 リグレッション・テスト
5-4 ロジック・テスト
5-5 インタラクション・テスト
5-6 コード・カバレッジ
5-7 レイアウト・テスト
5-8 パフォーマンス・テスト
5-9 インクルーシブ・ユーザビリティ・テスト
5-10 A/Bテスト
5-11 CIツールを利用して継続的に自動テストする

第6章 現場におけるコンポーネント・ベース開発のポイント
6-1 エンジニアとデザイナーの問題解決におけるアプローチの違いを知る
6-2 デザインカンプとコンポーネント・ベース開発のかい離を解決する
6-3 長期の開発でコンポーネント・リストを死なせない工夫
6-4 平行実装で開発を加速する
6-5 小規模プロダクトにおけるコンポーネント・ベース開発のメリット
6-6 Webフロントエンドエンジニア以外の関心を引く
6-7 サービスに合わせてAtomic Designをカスタマイズする
6-8 サービスのフェースに応じて進化するデザイン・システム