クオリティとスピードが同時に求められるUI開発の現場

アプリが生活に欠かせないものになった今，新しいサービスを開発するたびにアプリの規模は大きくなり，求められるUI画面も複雑で大量になっています。一方，競争が激化するなかで，開発側に与えられる期間はどんどん短くなっています。

これまでの開発フローや手法では，「⁠1つのボタンの形を変えたら，アプリ全体のボタンが変更されてしまった」「⁠デザイナーの作ったカンプ（下書き）どおりに実装したのに，ユーザーが使いにくいUIになってしまった」ということが絶えませんでした。これでは，堅牢で使いやすいUIには程遠く，手戻りばかりの非効率な開発しかできないでしょう。これらの課題は，Atomic Designという手法が，一気に解決してくれます。

UIを，化学の原子（＝Atom）に見立てて設計（＝Design）する

Atomic Design（アトミック・デザイン）とは，その意味が示すとおり，原子（Atoms⁠）⁠，分子（Molecules）などに見立てた部品（コンポーネント）を組み合わせて，UIを設計する手法です。アメリカ・ピッツバーグのWebデザイナー・Brad Frost氏によって提唱されました。

設計に使われる部品は，小さいもの順に，次の5つの大きさに分けます。

1. Atoms（アトム，原子）
2. Molecules（モレキュール，分子）
3. Organisms（オーガニズム，有機体）
4. Templetes（テンプレート）
5. Pages（ページ）

H（水素原子）とO（酸素原子）が組み合わさって，H₂O（水）ができあがるように，部品（ボタン，アイコン，テキストなど）をAtomsなどに見立て，UIを組み立てていきます。

UIを部品で組み立て，部品をきちんと管理することで，変更に強い堅牢なUIができあがります。各部分の繋がりが明確なため，意図せず画面が崩れてしまうことがなくなるからです。また，部品ごとにデザインを揃えれば，ユーザーにとって「検索はどこか」「⁠ほしいコンテンツはどこか」など，UIの機能が明確になるので，使いやすいUIになります。さらに，部分ごとに開発を同時進行できるため，効率良い開発も実現できるのです。

「Abema TV」に実践導入した著者が伝授するUI設計

では、具体的にどのようにUIを部品に分けて設計すればよいのでしょうか。じつは，Brad Frost氏がAtomic Designを提唱するWebページでは，「⁠5つの大きさに部品をどう分けるのか」「⁠どのように組み合わせて大きなUIを作るのか」という具体的なノウハウまでは示されていません。この考え方を元に，自らのサービスに合わせて実践するしかありません。

そこで，書籍『Atomic Design』では，インターネットTVサービス「Abema TV」のUI設計でAtomic Designを実践導入した著者が，具体的な部品の分割方法から実装コードまで，惜しみなく伝授します。

また，これまでのUI開発の問題を振り返りつつ，「⁠なぜ，部品に分けると堅牢で使いやすいUIになるのか」というUI設計の本質を探り，実装後のUIテストや現場導入への障害を乗り越えるノウハウまで網羅できます。ぜひ，堅牢で使いやすいUIを効率良く設計するノウハウを体感してみてください。