フロントエンドの制作者が知っておきたい、Atomic Designを使用したコンポーネントベースのUI設計が分かる良書

ここ数年で、WebページやスマホアプリのUIを開発する際に、コンポーネントベースの実装が増えてきました。元々はソフトウェア開発で一般的な考え方でしたが、メンテナンス性に優れ、再利用性も高く、UIもより効率的に実装できます。

Atomic Designを使用したコンポーネントベースのUI設計が実務レベルで詳しく解説されたオススメの本を紹介します。

今よりもっと効率的にUIに取り組みたい、メンテナンス性に優れたCSSやJavaScriptはどうすればよいのか、Atomic Designに興味があるので具体的な方法を学びたい、そんなフロントエンドのデザイナー・エンジニアにぴったりの一冊です。

Kindle版はお値段が、少しお得です。

• Atomic Design　〜堅牢で使いやすいUIを効率良く設計する（Kindle版）

紙面のキャプチャで、中身を少しだけご紹介。

著者はサイバーエージェントの中の人で、「AbemaTV」で導入したAtomic DesignのUI設計をベースに、コンポーネントベースの実装について学ぶことができます。UIのデザインやコードなども豊富に掲載されています。

6章構成で、1章はUI設計における現状の問題を洗い出しています。
例えば、CSSは1ページ分であれば簡単です。しかし、数百数千ページに渡るスタイルや長期間運用するスタイルを定義することは非常に困難です。スタイルの継承、詳細度、命名規則をはじめ、再利用やメンテナンス性も考慮しないといけません。

2章はコンポーネントベースのUI開発について。
コンポーネントベースでUIを実装するのには、たくさんの利点があります。コンポーネントという小さい単位でデザイン・実装ができ、テストが行えます。それにより不具合が生じた際が最小限になり、リスクも軽減され、メンテナンスも非常に楽になります。また、コンポーネントを再利用することも簡単になり、実装負荷も軽減され、より効率的に開発することができます。仕様の変更があった際でも、手戻りは最小限になります。

3章ではいよいよ、Atomic DesignによるUIコンポーネントの設計について学びます。
Atomic Designとは小さなUIコンポーネント（原子: Atoms）を組み合わせて、大きなコンポーネントにすることです。例えば、ボタンやラベルといった小さな要素からはじめ、次にボタンとラベルを組み合わせた分子: Molecules、それらで構成されたカードが有機体: Organisms、という感じで、小さなコンポーネントが大きなコンポーネントを含まないという関係性を持っています。

Atomic Designについての解説は、豊富な事例もあり、非常に分かりやすいと思います。

4章と5章が、非常に充実しています。4章はいよいよUI設計の実践で、デザインカンプを元に、Atomic Designにどのように落とし込み、実装するのかが分かります。

UIをコンポーネント化する際に注意したいのが、デザインの統一性です。余白の大きさ、書体、フォントのサイズ、ボーダー、カラー、アニメーションなど、基本的なデザイン要素のトーン&マナーを統一させておく必要があります。

基本的なデザイン要素の定義ができたら、CSSでそれらの要素を定義しておくと便利です。SassやLESSの変数として、またはCSSのカスタムプロパティで定義しておくと、一元管理できます。

命名規則に悩む人は、Atomic DesignのAtoms, Molecules, Organismsらの各層を利用するとスムーズにいくかもしれません。

5章ではUIコンポーネントのさまざまなテストについて解説されています。コンポーネント化することによって、テストを効率化できる、というのも大きな特徴です。

バナーをどちらに配置する方が効果的かなど、A/Bテストなども、コンポーネント化することで、簡単にコンテンツの組み合わせを変更させることができます。

最後の6章は、実際の現場におけるノウハウ集。小さなコンポーネントからはじめ、大きなコンポーネント、ページのレイアウトを実装するボトムアップのアプローチは、エンジニア寄りです。逆にデザナーはトップダウン型で、デザインの問題を解決するために全体像からはじめ、最後にディテールを作り込みデザインを仕上げます。
トップダウンとボトムアップが協業することで、効率的なワークフローが確立されます。

Atomic Design　〜堅牢で使いやすいUIを効率良く設計するの目次

1. UI設計における現状の問題を振り返る

   アプリケーションのUIに求められる直感性

   UI開発の現場1: JavaScriptの進化

   UI開発の現場2: CSSの努力

   UI開発の現場3: スタイルガイドの普及

   UI開発の現場4: デザインカンプ・ファーストなUI開発ワークフロー

   UI開発の現場5: UIフレームワークの普及

   UI開発の現場6: Single Page Applicationの普及

2. コンポーネント・ベースのUI開発

   なぜコンポーネント・ベースで開発するのか

   堅牢なUI開発を実現する

   開発作業を効率化する

   コンポーネント・ベースUI開発がもたらすユーザー・メリット

   コンポーネント設計の基本を知る

   コンポーネント・ベースUI開発の現状

3. Atomic DesignによるUIコンポーネント設計

   Atomic Designとは

   UIコンポーネントの分割基準を考える

   Atoms（原子）を設計する

   Molecules（分子）を設計する

   Organisms（有機体）を設計する

   Templates（テンプレート）, Pages（ページ）

4. UIコンポーネント設計の実践

   開発環境を準備する

   UIコンポーネントの設計を考える

   UIコンポーネントを実装する

   コンポーネント実装におけるポイント

   コンポーネントに適切なスタイルを与える

   アプリケーションにおける統一性担保

   UIコンポーネントを適切に命名する

   アプリケーションとコンポーネントを接続する

5. UIコンポーネントのテスト

   テスタブルなUIコンポーネントを作って高速で堅牢な開発

   UIコンポーネントの単体テスト

   リグレッション・テスト

   ロジック・テスト

   インタラクション・テスト

   コード・カバレッジ

   レイアウト・テスト

   パフォーマンス・テスト

   インクルーシブ・ユーザビリティ・テスト

   A/Bテスト

   CIツールを利用して継続的に自動テストする

6. 現場におけるコンポーネント・ベース開発のポイント

   エンジニアとデザイナーの問題解決におけるアプローチの違いを知る

   デザインカンプとコンポーネント・ベース開発のかい離を解決する

   長期の開発でコンポーネント・リストを死なせない工夫

   平行実装で開発を加速する

   小規模プロダクトにおけるコンポーネント・ベース開発のメリット

   Webフロントエンドエンジニア以外の関心を引く

   サービスに合わせてAtomic Designをカスタマイズする

   サービスのフェースに応じて進化するデザイン・システム

かなり現場寄り、実務レベルの解説書です。
コンポーネントベースに取り組んでみようと考えているフロントエンドの方には、学べることが非常に多いと思います。

献本の御礼

最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス