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

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

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

本のキャプチャ

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

書籍の表紙

Atomic Design
〜堅牢で使いやすいUIを効率良く設計する
[Amazonでみる]
[楽天でみる]

著:
五藤 佑典
出版社:
技術評論社
発売日:
2018/4/25

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をカスタマイズする
    サービスのフェースに応じて進化するデザイン・システム

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

書籍の表紙

Atomic Design
〜堅牢で使いやすいUIを効率良く設計する
[Amazonでみる]
[楽天でみる]

著:
五藤 佑典
出版社:
技術評論社
発売日:
2018/4/25

献本の御礼

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

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

sponsors

top of page

©2018 coliss