最近フロントエンドの開発が多くなり、デザイン周りで何か良い設計思想がないかと思ってたところで「 Atomic Design 」という UI デザインの設計思想を知り、書籍がないか探したら良さげな本があったので読んでみました。
読んでいて印象に残ったところを簡単に紹介していきたいと思います。
UI 設計の現状の問題点〜 UI コンポーネント設計について
過去の UI 設計での問題点や UI 設計における JavaScript や CSS の役割が説明されています。また、 UI が単なる画面としての位置付けから、 UX や SPA ( Single Page Application ) が普及したことで、フロントエンドに求められることがより高度なものになってきている現状があるようです。そこで登場したのが「 UI コンポーネント設計」という設計思想です。コンポーネント・ベースでの設計手法についても説明されているのでコンポーネント・ベース設計についての知識を深めることができました。
Atomic Design とは
Atomic Design とは UI コンポーネント設計のためのデザイン・フレームワークです。 Atomic Design では UI コンポーネントを5つの階層に分割します。特徴的な部分は分割したコンポーネントの階層が自然界に存在する「原子」「分子」「有機体」といった階層に分割するところです。先程の階層の他に「テンプレート」「ページ」という階層があり、この5つの階層に UI コンポーネントを分割して設計する考え方が Atomic Design という設計思想になります。
各階層の説明は以下の通りです。
- Atoms （原子）
- 特定のプロダクトについての知識を持たない
- 基本的な UI としての知識や機能しか持たない
- Molecules （分子）
- 特定のプロダクトについての知識を持たない
- いくつかのコンポーネントで組み合わされて構成される
- Molecules 単体では機能は成立しない
- Organisms （有機体）
- 特定のプロダクトについての知識を持つ
- Organisms 単体で機能が成立する
- Templates （テンプレート）
- コンポーネントをレイアウトに配置する
- デザインの基本的なコンテンツ構造を明確にする
- Pages （ページ）
- 実際にコンテンツを配置した UI で、テンプレートを具体化したもの
Atomic Design を採用する場合の注意事項としては階層が下から「 Atoms → Molecules → Organisms → Templates → Pages 」といった順番で階層が上がっていくのですが、下の階層が上の階層に依存することは禁止されています。なので、 Atoms の階層のコンポーネントから Molecules の階層のコンポーネントを呼び出すことはできません。
例外的に、 Organisms は自身のコンポーネントから他の Organisms コンポーネントを呼び出すことができます。
化学用語と Web 用語が混在している理由
「 Atoms （原子）」「 Molecules （分子）」「 Organisms （有機体）」という化学用語と「 Templates （テンプレート）」「 Pages （ページ）」という Web 用語が混在しているのですが、化学用語は「開発者だけで使う用語」、 Web 用語は「開発者以外に対しても使う用語」という区別がなされています。
Molecules と Organisms の分け方について
Atomic Design で設計していると、「 Molecules （分子）」と「 Organisms （有機体）」のどちらに分割すれば良いか分からないコンポーネントが出てきます。どちらの階層も「複数のコンポーネントを組み合わせる」という特徴があり分割する基準が分かりにくいのですが、下記のルールでコンポーネントを分割すれば良さそうです。
- Molecules : 独立して存在できるコンポーネントではなく、他のコンポーネントの機能を助けるヘルパーとしての存在意義が強いコンポーネント
- Organisms : 独立して存在できるスタンドアローンなコンポーネント
Storybook について
コンポーネントのデザインを確認することができる Storybook という開発ツールの使い方も説明されています。今回このツールのことを知らなかったのでとても参考になりました。 UI 周りの動作確認のツールも日々進化しているんですね。
リグレッション・テスト
UI コンポーネントのリグレッションテストについても説明されていました。 Storybook を使用してテストを実施していきます。開発しているとどうしても意図しない UI のレイアウト崩れなどが起こることがあるので、そういった不具合にリグレッションテストでいち早く気づくことができるのは良いと思います。
アクセシビリティについて
アクセシビリティをテストする方法についても説明されています。最近の Web アプリケーションでは障害を持つ利用者の方でも問題なく使用できることが要求されます。まぁ、昔からそうだったかもしれませんが、最近はよりその傾向が強いみたいです。
Chrome を使用したアクセシビリティ・テストの方法が紹介されているので、興味がある方は是非確認してみてください。
最後に
この書籍ではプログラムのサンプルは React で書かれています。自分がメインで使用しているのは Vue なので、サンプルの実装については都度、 Vue に読み替えながら実装方法を確認していました。 Atomic Design といったコンポーネント・ベース設計の考え方はこれからのフロントエンド開発でスタンダードになるんじゃないかと思います。 Facebook や Google もコンポーネント・ベースでの設計を行っているので、既にスタンダードな設計思想なのかもしれませんが・・・。
フロントエンドは最低限の知識って感じであまりしっかりと勉強はしてこなかったんですが、 jQuery Mobile などの時代と比べ、設計や実装方法が変わってきているので、しっかり最新の情報をキャッチアップしていきたいと思いました。
