あらすじ
「1画面を変更したつもりが，アプリ全体のUIが崩れてしまった」
「理想のデザイン通り実装したのにユーザーが使いにくい」
「コードが複雑に入り組んでいてもはやメンテナンス不能」
こんな課題の数々は，Atomic Designの考え方を使えば解決できます。
本書では，UI設計のこれまでの問題をあぶり出し，設計の本質から，具体的な手順，UIテスト，現場でひっかかりやすいポイントまでを，インターネットテレビ「Abema TV」のUI設計で実践導入した著者が解説。フロントエンドの方にオススメの1冊です。
感情タグBEST3
このページにはネタバレを含むレビューが表示されています
Posted by ブクログ
デザインのお勉強。
■コンポーネントの4つの特徴
１．カプセル化されている
２．置換可能である
３．再利用可能である
４．コンポーネントを別のコンポーネントを組み合わせて作成可能である
CSSの修正をデザイナー自身が行えることは、エンジニアにとってもデザイナーにとっても大きなメリットがあります。最終的なUIの見た目に責任を持つのは、デザイナーであることが多いです。エンジニアが見た目を変更するためにCSSを修正すると、エンジニアは、デザイナーを空いている時間に捕まえて、変更を確認してもらう必要があります。もしそこでOKが出なかった場合、再修正して、またデザイナーを捕まえて、何度も確認しなければいけません。見た目に関する指定は言語化が難しいため、こういったコミュニケーションはくり返されやすいです。
しかし、そのデザイナー自身がUIの見た目を実装レベルで変更すれば、リアルタイムで変更を確認できるため、二者間のコミュニケーションによる確認待ち時間は０になります。そして、変更した見た目にデザイナー自身がOKを出した後で、GitHubにプルリクエストすることになるので、エンジニアはコード・ベースのレビューだけに集中できます。UIをコンテナ―・コンポーネントとプレゼンテーショナル・コンポーネントに分離することは、職域ごとの関心も分離できるため、開発フローもスムーズになります。
■基本的な視覚デザイン要素を一元管理する
・余白の大きさ：コンポーネントとコンポーネントの間の余白など
・書体：明朝体、ゴシック体、手書き風など
・フォントサイズ：極小、小、中、大、極大
・色：背景、テキスト、テキストリンク、強調、成功、危険、警告
・アニメーション：持続時間やイメージングなど
・ボーダー：幅、角丸の半径
◇デザインの要素
１．色
２．線（直線、曲線、ジグザグ線、破線など）
３．図形（円形、三角形、四角形などの幾何学的図形や有機的図形）
４．質感・テクスチャ
５．空間（オブジェクト間の空間）
６．フォーム（幅、高さ、奥行きを感じさせる三次元的な視覚情報がある要素）
◇視覚デザインの原則
１．統一
２．バランス（要素の位置や大きさなどの視覚バランスで安定感や躍動感といった印象を制御する）
３．階層（視覚情報の優先度を階層的に整理することで視線をより大事な情報に誘導する）
４．尺度・比率（要素同士の相対的な面積比率を制御することは視覚に心地良いリズムを生む）
５．占有・強調（全体を占める法則を意図的に無視することで焦点を当ててもらいたい要素を目立たせる）
６．類似と対比（各所のデザインを類似させることでユーザーは迷わず情報を探せるが、類似したデザインばかりだと単調すぎて飽きてしまう。重点を置きたい情報には、ほど良く対比的な構造を与える）
