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

五藤佑典

「1画面を変更したつもりが，アプリ全体のUIが崩れてしまった」
「理想のデザイン通り実装したのにユーザーが使いにくい」
「コードが複雑に入り組んでいてもはやメンテナンス不能」
こんな課題の数々は，Atomic Designの考え方を使えば解決できます。
本書では，UI設計のこれまでの問題をあぶり出し，設計の本質から，具体的な手順，UIテスト，現場でひっかかりやすいポイントまでを，インターネットテレビ「Abema TV」のUI設計で実践導入した著者が解説。フロントエンドの方にオススメの1冊です。

• カテゴリ: ビジネス・実用
• ジャンル: IT・コンピュータ / 言語・プログラミング
• 出版社: 技術評論社
• ページ数: 320ページ
• 電子版発売日: 2018年05月04日
• コンテンツ形式: EPUB
• サイズ(目安): 12MB

[ブクログ · ★★★★☆]

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

[ブクログ · ★★★★☆]

・Frontend Frameworkの隆盛からComponent志向の転換
・サイロ化を排した組織論からデザイナーとプログラマーのコミュニケーションが増加したこと
などの急速な変化の中で、Atomic Designという1つの指針が生まれたのは必然にも思う。

Atomic Design自体はあくまで１つの指針であり、抽象的なものだ。
そのため購入前は「ふわっとした感じだろうなぁ？」と思いながら必要に迫られて購入した。
が、良い意味で裏切られることになった。

本書ではその考え方から、具体的なReactのサンプルコード、Storybookを使った開発やフロントエンドのテスト手法などを余すことなく書き記している。
そのためAtomic Designだけでなく、「最先端のFrontend開発」について具体的・体型的に学ぶことができる内容だった。
何よりReactのサンプルコードが美しく、純粋にコーディング指針としても勉強になる点が多くあった。

あくまで今にフォーカスした内容で1年後に読むような内容ではないと思うが、急速なフロントエンドの進化に追いつくためにも得るものが多い本だった。

[ブクログ · ★★★☆☆]

molecule とか実際には再利用しないコンポーネントの方が多そうだけど、実際に再利用するかどうかよりも、どの階層に入るのかを意識することで、変にロジックと結びついたりとかせずに、責任がきちんと分離されたコンポーネントを書けるようになるところが、このフレームワークのえらいところかなと思った。
読者層を無理に広げずに React で開発経験がある人を想定して書かれているから、読みやすいし実践的だった。

[ブクログ · ★★★☆☆]

‪書名のデザインフレームワークを解説した一冊。デザイナーやUI/UXからやや遠い業務の担当なので少しでも理解できればと読んでみた。小さい単位で開発し、それを部品のように組み合わせるのはUI設計にも通じる考え方だったのか。AbemaTVのような大規模サービスで使われているという実績も頼もしい。‬

[ブクログ · ★★★☆☆]

コーディングと同じように、関数を切り出す、機能を切り出す感じで、デザインも切り出して管理することで堅牢になるんだな。

[ブクログ · ★★★★☆]

　デザインのお勉強。

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


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

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