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

この本の概要

「1画面を変更したつもりが，アプリ全体のUIが崩れてしまった」
「理想のデザイン通り実装したのにユーザーが使いにくい」
「コードが複雑に入り組んでいてもはやメンテナンス不能」

こんな課題の数々は，Atomic Designの考え方を使えば解決できます。

本書では，UI設計のこれまでの問題をあぶり出し，設計の本質から，具体的な手順，UIテスト，現場でひっかかりやすいポイントまでを，インターネットテレビ「Abema TV」のUI設計で実践導入した著者が解説。フロントエンドの方にオススメの1冊です。

こんな方におすすめ

  • 良いUIを効率良く設計したいフロントエンド・エンジニア／デザイナー
  • Atomic Designを現場で実践する方法を知りたいエンジニア／デザイナー

著者の一言

UIをより効率良く開発したい

私は長らくWebフロントエンド・エンジニアとして，複数のWebサービスのUI開発に携ってきました。最近の開発では，新しくサービスを作るたびにそのアプリケーションの開発規模は大きくなり，開発するUIの数は増すばかりです。UIの数が増えると，その機能を実装するために書かなければいけないコードが増えます。コードが増えるということは，工数もそれ相応に増えます。しかし，開発に当てられる期間は，競合サービスがどんどん出てくるなか，想定よりもどんどん短くなっています。
また，書くコードが増えれば，バグが生まれやすくなります。どんな場合であってもバグは好ましくありませんが，特にUIのバグは，ユーザーの体験に直接的な影響を与えるため，より慎重に実装しなければいけません。

「ユーザーが使いやすいサービスをより少ない工数で作りたい」

こう私と同じように感じている読者の方は多いのではないでしょうか。

コンポーネント・ベースで，確実で効率が良い開発を実現する

本書は「WebアプリケーションのUI開発を効率的に行いたい」というWebフロントエンド・エンジニアのために書きました。大規模なアプリケーション開発でも不具合を生みにくく一貫性があるUIを作るために，Atomic Designを使ったコンポーネント・ベースでの開発方法を説明しています。
「機能をコンポーネントに分ける」という考え方は，ソフトウェア開発では一般的なものですが，UIについては，きれいにコンポーネントに分けて実践するのは難しいです。なぜなら，UIというものは，画面を通してユーザーが実際に触って感じるものであり，ブランディングされた見た目を伝えるための役割も担うので，人間の感性や感覚に大きく依存する要素を持っているためです。また，デザインやマーケティング的な戦略も含めチーム全体で向き合う要素が強いため，実際の開発では，ほかの職種のチームメンバーとの深いコミュニケーションを必要とします。それもUIのコンポーネント化をより複雑にする要因となっています。
しかし，コンポーネント・ベースでUI開発を進めることには，以下のようなさまざまなメリットがあります。

  • 複雑なUIも確実に組み立てることができる
  • しっかりとコンポーネントごとに分けられたUIの機能は再利用性が高い
  • 多くの画面に対して少ないコードで実装できる
  • 再利用性が高いコンポーネントは，統一された使い勝手をユーザーに提供できる
  • 画面別ではなく機能別に分けられたUI設計が複数人の平行実装を実現し，開発速度がアップ

そして，この開発方法はテストにも大きく力を発揮します。UIは，1度アプリケーションに組み込まれると，アプリケーション全体の状態にUIの状態が依存するため，テストで状態のパターンを網羅することがかなり難しくなります。しかし，コンポーネントに分割されたUIは，さまざまな種類のテスト手法を組み合わせることで，効率良くテストすることが可能です。
本書では，始めにこれまでUI開発の現場を振り返りつつ，コンポーネント・ベースのUI開発の具体的な手順から，テストの方法，現場のUI開発においてエンジニアリング以外で問題になりがちなチームメンバーとのコミュニケーションの問題へのアプローチ方法までを説明しています。

Atomic DesignとReactによる実践

本書では，UIのコンポーネント化を行う道具として，Atomic Designという設計手法とReactというライブラリを取り上げています。Atomic Designは，スケールしやすくメンテナンスしやすいUIの開発を実践できるデザイン手法です。私も2014年にカナダで開催された「Smashing Conference Whistler」のBrad Frost氏によるワークショップでAtomic Designの実践的な手法について学んだ後，「AbemaTV」というインターネットTVサービスの開発でUI設計に採用しています。最近ではUI設計手法としての認知度も確実に上がってきていて，多くの導入事例を耳にするようになりました。また，Reactも最近のモダンなWebアプリケーションのフロントエンド開発では必ず候補に挙がるほど普及しているUI開発用ライブラリです。
Atomic DesignとReact，この2つをUI開発の道具として，掲載するコードもできる限り実践的な内容になるように心掛けました。特定の道具を例として採用してはいますが，もちろんそのUI設計の考え方は，ほかの道具や手法を採用したとしても必ず活きる内容になっています。

より良いユーザー体験を提供するために

私はモノを作る身として，「より良いユーザー体験を提供するアプリケーションが増えてほしい」と思っています。アプリケーションのUIは，ユーザー体験を直接的に大きく影響する存在なので，「UIコンポーネント設計を正しく行うで，そういったアプリケーションを生み出しやすくできる」と確信しています。本書を通して，私の経験が，これからアプリケーション開発に関わる方のUI設計の一助になれば幸いです。

（「はじめに」から）

この書籍に関連する記事があります！

堅牢で使いやすいUIを効率良く設計する
アプリが生活に欠かせないものになった今，新しいサービスを開発するたびにアプリの規模は大きくなり，求められるUI画面も複雑で大量になっています。

著者プロフィール

五藤佑典（ごとうゆうすけ）

株式会社サイバーエージェント所属のエンジニア。米国カリフォルニア州立大学サンバナディーノ校でグラフィックデザインを学んだ後，大手IT会社にてマーケティングとデザイン業務に従事。現職でエンジニアに転向。「AbemaTV」にてUI設計に携わり，実装レベルで初めて「Atomic Design」を導入した。現在は，技術領域を動画へと広げて，「AbemaTV」の動画技術戦略に携わり，国内外で動画事業における技術研究を行っている。