最近フロントエンドの開発が多くなり、デザイン周りで何か良い設計思想がないかと思ってたところで「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
などの時代と比べ、設計や実装方法が変わってきているので、しっかり最新の情報をキャッチアップしていきたいと思いました。