「Atomic Design」を読んでみました

書籍 / 、 / 2022年3月29日

最近フロントエンドの開発が多くなり、デザイン周りで何か良い設計思想がないかと思ってたところで「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周りの動作確認のツールも日々進化しているんですね。

https://storybook.js.org/

リグレッション・テスト

UIコンポーネントのリグレッションテストについても説明されていました。Storybookを使用してテストを実施していきます。開発しているとどうしても意図しないUIのレイアウト崩れなどが起こることがあるので、そういった不具合にリグレッションテストでいち早く気づくことができるのは良いと思います。

アクセシビリティについて

アクセシビリティをテストする方法についても説明されています。最近のWebアプリケーションでは障害を持つ利用者の方でも問題なく使用できることが要求されます。まぁ、昔からそうだったかもしれませんが、最近はよりその傾向が強いみたいです。

Chromeを使用したアクセシビリティ・テストの方法が紹介されているので、興味がある方は是非確認してみてください。

最後に

この書籍ではプログラムのサンプルはReactで書かれています。自分がメインで使用しているのはVueなので、サンプルの実装については都度、Vueに読み替えながら実装方法を確認していました。Atomic Designといったコンポーネント・ベース設計の考え方はこれからのフロントエンド開発でスタンダードになるんじゃないかと思います。FacebookやGoogleもコンポーネント・ベースでの設計を行っているので、既にスタンダードな設計思想なのかもしれませんが・・・。

フロントエンドは最低限の知識って感じであまりしっかりと勉強はしてこなかったんですが、jQuery Mobileなどの時代と比べ、設計や実装方法が変わってきているので、しっかり最新の情報をキャッチアップしていきたいと思いました。

コメントする

メールアドレスが公開されることはありません。