Atomic DesignとCSS設計 | 第1回 Atomic Designとは何か

Atomic DesignとCSS設計第1回 Atomic Designとは何か

「Atomic Design」という言葉を聞いたことがある人は多いかと思いますが、実際それがどのようなものなのか、理解しにくい部分があります。本記事ではAtomic Designについて学び、それをCSS設計に活かすにはどうしたらよいかを考えます。

カテゴリー: HTML/CSS >; CSS設計

2017年12月28日発行

著者高津戸壮テクニカルディレクター

Atomic DesignとCSS設計シリーズの記事一覧

はじめに

Atomic Designという言葉を聞いたことがあるでしょうか。Atomic Designとは、デザインシステムを中心とした設計の方法について書かれた書籍です。

Atomic Design by Brad Frost

著者のBrad Frost氏は、書籍の内容をすべてWeb上で公開しているため、上記サイトで読むことができます。

Atomic DesignについてWebで検索していろいろな記事を眺めていると、このAtomic Designの設計思想がコードの設計について書かれていると思っている人がいるという印象を受けました。

Atomic DesignはUI設計の考え方であり、コードの設計について書いたものではないと、その著の中に書かれています。しかしながら、Atomic Designについて知ることは、UI設計の理解を深め、コードの設計について考えを深めるのに役立つものと筆者は考えます。

このシリーズでは、Atomic Designがどのようなものかを紹介し、その内容を参照しつつ、CSSの設計をどのように行えば良いかという点について考えてみたいと思います。

Atomic Designの概要

Atomic Designではまず、我々はWebページを作っているという考えを改める必要があると説いています。10ページのWebサイトを作るのと、1000ページのWebサイトを作るのでは、労力が100倍違うわけではありません。なぜなら、そのようにたくさんのページを持つWebサイトを作る場合、多数の画面において共通使用するUIを用意するからです。

たとえばボタン。同じ見栄えのボタンがいろいろなページに登場します。

そして、それらは同一のHTMLとCSSで表現することが多いでしょう。それは、HTMLとCSSのコードとして同一にしたほうが効率が良いという側面もありますが、なにより、UIがサイト全体で一貫していることがユーザーを迷わせないからという意味合いが大きいです。

我々は1ページ1ページ、手づくりでページのデザインを考えているわけではなく、サイト全体のまとまりを考えてUIを設計し、HTMLとCSSに落とし込みます。そうでないケースもありますが、ページ数の多いWebサイトでは、画面をこのようにパターン化したUIの集合であると考え、コンポーネント化して制作するという方法を採ることがあります。

そのようなケースを想定した場合、我々は具体的なページを作るためのステップとして、各UIがおのおののページでどのように使われるべきかを考え、サイト全体で共通使用するUIのライブラリのようなものを作る必要があると言えます。ざっくり言うと、こうして作られたUIのライブラリ、コード集、それらをどう使うか、体制やルール、ワークフローがAtomic Designのいうデザインシステムで、このデザインシステムの確立と運用がサイト全体のUIを統合された状態に保つのに必須であるというのが、Atomic Designの主張です。

デザインシステムとは

ところでこの「デザインシステム」という言葉、その言葉が示す内容がかなりフワっとしています。デザインのシステム？体系？方法？でしょうか。これはどこかにハッキリとした定義があるわけではなく、その実態もさまざまだと筆者は認識しています。

その定義をうまく言い表せないかとWebを参照している中で、これがなかなかわかりやすそうであると筆者が感じた、デザインシステムの定義を次に紹介します（筆者がざっくり訳したものです）。

たいていの場合、デザインシステムは視覚的スタイルとコンポーネントのライブラリを提供する。それはドキュメント化され、開発者には再利用可能なコード集、デザイナーにとっては有用なツールとなるものである。

デザインシステムは、アクセシビリティ、ページレイアウト、編集のための手引きとなることがある。中には、ブランディング、データビジュアライゼーション、UXパターン、その他ツールの手引ともなることもある。

Defining Design Systems – EightShapes

具体的なアウトプットとしては、デザインガイドラインやスタイルガイドがデザインシステムの一部と言えるであろうと思われます。しかし、著を読み進めていくと、デザインシステムという言葉が表すのは、そのようなドキュメントにとどまらず、それらドキュメントを作る土台となる考え方、運用するための体制、ワークフローなども含めて「デザインシステム」であると著者が考えていることがわかります。

ひとまずAtomic Designとは、このデザインシステムを作ることがいかに有効な手段であるか、どのように考えればよいか、どのようにそれを実現すればよいかということについて書かれた著です。

Atomic Designのコンポーネント感

Atomic Designで有名なのは、UIの構造を次の5段階で考えるというところでしょう。Atomic Designのことについてよく知らなくても、この話は有名なので知っている人が多いのではないでしょうか。

Atoms（原子）
Molecules（分子）
Organisms（有機体）
Templates（テンプレート）
Pages（ページ）

あらゆるものが原子の集まりでできているように、ページもAtoms（原子）の集まりであると考え、Atomsが組み合わさってMolecules（分子）になり、Molecules（分子）が組み合わさってOrganisms（有機体）となる。

Organisms（有機体）の集まりでページのフレームであるTemplates（テンプレート）を作るが、このTemplatesは具体的なコンテンツの入っていない空っぽのページの枠組み。そこに具体的なテキストや画像を入れ込んでPages（ページ）を作る……というふうに、UIを階層構造で考えます。

具体的には次のような例が、著で挙げられています。

まずAtomsの例は、検索フォームのパーツです。ここでは「ラベル」「テキスト入力欄」「ボタン」というように、これ以上分けられないような単位のUIをAtomとしています。

「ラベル」「テキスト入力欄」「ボタン」といったAtomを組み合わせて作った「検索フォーム」がMoleculeです。

そして、この「検索フォーム」やその他「メニュー」や「サイトのロゴ」など、他のMoleculeらが集まってできている「ヘッダ」がOrganismです。

Organismを組み合わせ、ページの枠組みを構成します。ただ中身はすべてダミーです。これがTemplate。

Templateに具体的なコンテンツを入れ込んだのが、最終的なアウトプットとなるPageです。

このように、UIを分解して考え、他の画面でも共通で使えるAtom、Moleculeをどう設計するか、細部を作りながら全体を俯瞰し、また細部が適切かどうか、具体的にコンテンツを入れながら考えるというのが、Atomic DesignのUIデザイン方法論です。このようにしてUIを考え、サイト全体として共通のUIライブラリを作り上げます。

Atomic Designの考え方は、CSSやJavaScriptなど、Webに限定された方法ではなく、UIをどう構築すればよいかということにフォーカスしたものであると著では述べられています。著ではinstagramのUIを例にしてこれを紹介しているので、理解の参考としてみてください。

Chapter 2 Atomic Design Methodology - Atomic design is for user interfaces

実装ツールPattern Lab

著では、Pattern Labというオープンソースのプロジェクトを紹介しています。

Pattern Lab | Build Atomic Design Systems

これは、静的サイトジェネレータで、Atomic Designの思想を実装に落としこんだものといえます。前章のUI設計方法論では、具体的な実装とは関係ないと書いてあるので、Pattern Labはあくまで、Atomic Designを実現するための実装のアプローチ、ツールの一つとして考えるのが適切ではないかと思われます。

Pattern Labは、端的にいうと、各コンポーネントをテンプレートエンジンのコードで手軽に利用できるようにし、入れ子になったコンポーネントや、その最終アウトプットとなるページ自体を、簡潔でDRY（Don't Repeat Yourself）なコードで作れるようにしたものです。

サイトにデモがあるので、オンラインでどんなものか確認することができます。

Pattern Lab - demo

Pattern Labでは、各コンポーネントについて、その概要やコードを手軽に参照することができるようになっています。たとえば次の画面はFooterというOrganismの画面です。

上部にはFooterの見た目が再現され、画面右上の設定ボタンより「SHOW PATTERN INFO」を選ぶと下部のパネルが開きます。下部左にはこのFooterが含んでいる別のコンポーネントと、Footerが含まれている別のコンポーネントが一覧され、下部右にはこのFooterのコード自体が表示されます。

コードの欄には、MustacheとHTMLの両方のコードを表示することができます。

HTML形式では、次のようなコードが表示されます。

<footer class="c-footer" role="contentinfo">

  <div class="l">
    <a href="../../patterns/04-pages-00-homepage/04-pages-00-homepage.html" class="c-logo-footer-link">
      <img src="../../images/logo-footer.svg" class="c-logo c-logo-footer-link__img" alt="HikeTracker" />
    </a><!-- end c-logo -->
    <nav class="c-footer-nav">

      <ul class="c-footer-nav__list">

        <li class="c-footer-nav__item"><a href="../../patterns/04-pages-05-about/04-pages-05-about.html" class="c-footer-nav__link">About</a></li>
        <li class="c-footer-nav__item"><a href="../../patterns/04-pages-03-blog-index/04-pages-03-blog-index.html" class="c-footer-nav__link">Blog</a></li>
        <li class="c-footer-nav__item"><a href="../../patterns/04-pages-06-contact/04-pages-06-contact.html" class="c-footer-nav__link">Contact</a></li>
        <li class="c-footer-nav__item"><a href="../../patterns/04-pages-01-login/04-pages-01-login.html" class="c-footer-nav__link">Login</a></li>

      </ul><!--end c-footer-nav__list-->

    </nav><!--end c-footer-nav-->  
    <p class="c-footer__info">This is a demonstration of what's possible with <a href="http://patternlab.io" rel="external">Pattern Lab</a>. <a href="http://patternlab.io/download.html">Download Pattern Lab</a>, check out the <a href="http://patternlab.io/docs/">documentation</a>, or learn more about <a href="http://atomicdesign.bradfrost.com/">atomic design</a>.</p>
    <p class="copyright">&copy; 2016 HikeTracker. All rights reserved.</p>
  </div><!-- end l -->

</footer><!-- end c-footer -->

Mustache形式では、次のようなコードが表示されます。

<footer class="c-footer" role="contentinfo">

  <div class="l">
    {{> molecules-logo-footer-link }}
    {{> molecules-footer-nav }}
    <p class="c-footer__info">This is a demonstration of what's possible with <a href="http://patternlab.io" rel="external">Pattern Lab</a>. <a href="http://patternlab.io/download.html">Download Pattern Lab</a>, check out the <a href="http://patternlab.io/docs/">documentation</a>, or learn more about <a href="http://atomicdesign.bradfrost.com/">atomic design</a>.</p>
    <p class="copyright">&copy; {{ year }} {{ company.name }}. All rights reserved.</p>
  </div><!-- end l -->

</footer><!-- end c-footer -->

{{> molecules-logo-footer-link}}や{{> molecules-footer-nav}}と書かれているのは、別のコンポーネントのソースコードをそのまま入れ込むことを示しています。ここでは、Footer Logo Linkというmoleculeと、Footer Navigationというmoleculeのソースコードをそのまま、この箇所にそのまま入れるということを示しています。HTML形式では、この部分のHTMLも展開されていることが確認できます。

入れ子になったコンポーネント構造が存在すると、小さい粒度のコンポーネントは多くの別のコンポーネントの中で使われることになりますが、このPattern Labを使えば、そのようなケースでも効率的にコードの設計を行うことができるようです。

このように、コンポーネントの入れ子を考慮したスタイルガイドを生成し、この仕組を使って具体的なページまで作れるというのがPattern Labの機能の主となる部分です。

筆者は実際にPattern Labを使ったことがあるわけではないので、紹介はこの程度にとどめておきます。著では、このPattern Labのようなツールを使い、デザインシステムを運用すると良いという旨が書かれています（「Atomic Designをするならこのツールを使わないとダメ」と言っているわけではないことに注意してください）。

次回も引き続きAtomic Designの内容を紹介します。Atomic Designのワークフローやデザインシステムのメンテナンスについて触れます。