こんにちは。宮水です。
今回は、Atomic Design 〜堅牢で使いやすいUIを効率よく設計する〜 を読みました。
本記事について
この記事では、本の内容の具体的な部分には触れず、各章を抽象的にまとめています。
この本を読んだ理由
弊社では、フロントの開発はReactでAtomic Designを用いて開発しています。
普段ReactやTypeScriptの勉強に追われてしまって、新規開発のときにUIや今作っているコンポーネントをどこに書くべきか？などの理解を曖昧にしています。
デザイナーさんから上がってきたデザインを見たときにコンポーネント・ベースの設計がシュッとできるようになりたいので、この本で学ぶことにしました。
対象読者
- ユーザーが使いやすいサービスをより少ない工数で作りたい
- UI開発を効率的に行いたい Webフロントエンジニア
この本で学べること
第1章 UI設計における現状の問題を振り返る
1章では、タイトルの通りUI設計における問題について振り返ります。
- UIが良いとユーザーがどう感じるのか。
- 逆にUIが悪いと、ユーザーはどんなことを感じるのか。
- 直感的なUIの定義
- CSSの取り扱いの難しさ
- デザイナーが存在しない現場
- SPAの普及について
問題点については、共感できるものが多く的確に言語化していただいてました。
私自身、CSSの取り扱いの難しさや、SPAの考え方を理解するのにとても時間がかかりました。
第2章 コンポーネント・ベースのUI設計
2章では、コンポーネント・ベースでUIを開発するメリットやコンポーネント設計について書かれていました。
メリットとして、
などが挙げられていました。
コンポーネント設計のポイントのところで印象に残ったのが、「単一責任の原則」（1コンポーネントが持つ責任は1つにする）と「関心の分離」（担当する機能を目的別に分類すること）です。
どの単位でコンポーネントを分けるか迷うので、一つ指標になると思いました。
また、「HTMLやCSS, JavaScriptはコンポーネント化が苦手で、それを手助けしてくれるのがReact」という話は二年前くらいに読みたい文章でした。
第3章 Atomic DesignによるUIコンポーネント設計
Atomic Designは、デザインフレームワークで、UIデザインの関心ごとを階層化します。
Templatesは画面全体のレイアウト、Organismsはユーザーの行動を促すコンテンツ、Moleculesは行動を阻害しない操作性、Atoms はデザインの統一性だそうです。デザイナー目線で考えたことがなかったので、この分類の仕方は目から鱗でした。
特にMoleculesとOrganismsの違いや、Templates とPageの違いはかなり曖昧にしていたので、知見が溜まりました。
本書にとても詳しく具体例が載っているので、ぜひ読んでみてください。
ちなみにどうして化学用語と開発用語が混ざっているのかちょっと気になっていたのですが、以下のような豆知識もコラムとして記載されていました。
Atoms、Molecules、Organisms、と化学用語が続いた後で、Templates、Pagesと通常の開発用語が登場することです。ここには、「開発者だけで使う用語」と「開発者以外に対しても使う用語」という区別が表現されています。つまり、化学用語のAtoms、Molecules、Organismsというコンポーネントの概念は開発者だけが認識していればよいものであり、一般的な用語のTemplatesとPagesについては、開発者以外の経営者やクライアントと話す際にも説明する必要がある概念だという意味が込められています。
へぇ〜。
第4章 UIコンポーネント設計の実践
4章は、実践編です。あるページのデザインが与えられ、実際にAtomicDesignで分割していきます。
- Atoms、Molecules、Organisms、Templates、Pagesに実際に分割する
- 分割する際のポイントや基準の解説
- Atomsは抽象度が高いコンポーネントにするよ
- ロジックと表示に関する責任は分離するよ（諸説あり）
など
などなど、実際に実務で使える知識が満載でした。
エンジニアには馴染みのない、アプリケーションのデザインの統一性の話など、デザイン観点での解説もとても有意義だと思いました。
一方で、SFCやHOCに関する話題が載っていたので、Reactに関する情報は少し古いと感じました。
第5章 UIコンポーネントのテスト
5章は、コンポーネントのテストについてです。
フロントのテストに関する、テストのポイントや用語がたくさん載っていて、とても勉強になりました。
- UIが適切に分かれていれば、テストが簡単になる
- Enzymeを使ってインタラクションテストをする
インタラクションとは、ユーザーのアクションを適切にUIが処理しているかどうかのテスト。
- レスポンシブデザインのテスト
- パフォーマンスのテスト
- 「情報アクセシビリティ」「Webアクセシビリティ」という考え方
視力や聴力の違いのような身体的特徴による差異だけではなく、ユーザーが一時的に片手でスマートフォンで利用している場面やネットワーク帯域が狭い場所でも利用している場面などでも利用しやすくすること。
感想
この本を読んで一番よかったなと思ったのは、デザイナーさん視点の話が多く書かれていたことです。
デザイナーさんの問題解決がエンジニアとは異なることや、どんなことを考えてデザインをされているのか少し理解できました。
「Atomic Designって、Atoms、Molecules、Organisms、Templates、Pagesにいい感じに分割して再利用が楽になるんでしょ？」くらいの認識しかなかったのですが、このフレームワークを使うメリットを知ることができました。
特に、先ほども書いたのですが、MoleculesとOrganisms、TemplatesとPagesは分割を曖昧にしていたので、実践的に学ぶことができてよかったです。
これからAtomic Designを使用したReactの開発をされる方には、オススメの１冊です！
ここまで読んでくださりありがとうございました。
