Atomic DesignはWeb開発を救うのか
前置き
Webを便利に・高品質にしようと技術が進歩する中、コンポーネント設計に寄り添ったシステムが多く出てきました。
ただし、それらを十分に活用するにはデザインから見直さなければなりません。
コンポーネントベースのUIデザインは汎用性・再利用性の観点からも有用ですが、それを実現する際には「コンポーネントの定義」が非常に難しいことがあります。
PDCAサイクルをまわす時のようにあとから再びデザインに手を加えることが予測される環境下では、コンポーネントの粒度が曖昧なままでいると思わぬコストが発生する場合が多々存在するでしょう。
そこに対して一定のルールを持った設計システムが導入されることにより、未来の要望に対応できる柔軟なデザインが構築できるかもしれません。
そう、デザインにも設計は必要なのです！
Atomic Designとは？
Atomic Designはデザイン設計システムの方法論です。 これはそんなに新しいものではなく、出てきたのは2013年の5〜6月のようです。
Atomic design from Brad Frost
サポートツールであるPattern Labのファーストコミットも2013年の6月でした。
Atomic Design | Brad Frost
Atomic Designとは、パーツを合体させて、 繰り返し可能なエレメントやテンプレートが作成できるシステムを構築することをいいます。
Atomic Designは５つのレイヤー構造にわかれています。
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Atoms（原子）
Atomsは非常に抽象的であり、参照がしやすい最小の単位をさします。
ただのラベルのテキストであったり、プレーンなボタンがこれにあたります。
また、サイトのトンマナにあたるようなカラーパレットもAtomsになります。
これらは単体では特に明確な機能は持ちませんが、以降のすべてがこのAtomsを根元として作られるので非常に重要です。
Molecules（分子）
Moleculesは前述のAtomsを組み合わせて、意味を持たせます。
その要素が何のために存在するのか、何をしてほしいのか、が定まります。
検索のフォーム部分や、ECサイトなら１商品を表示する情報ブロックなどが該当します。
Organisms（生物・有機的）
OrganismsはここまでのAtoms/Moleculesを使い、さらに大きなコンポーネントを生成します。
実際にWebで活用するときの印象まで落とし込むことが出来るでしょう。
ヘッダー・フッターや、ユーザーを訴求するための具体的なエリアがここに当てはまります。
Templates
Templatesはわかりやすく言うとワイヤーフレーム状態のようなもので、具体的なコンテンツが入っていない、レイアウト構成のみを最適化させたレイヤーになります。
ここでそれぞれの要素に対して文脈が発生し、どういった状態でユーザーがその要素に触れるかが見えてきます。
Pages
ここまでに構築したコンポーネントたちが、意図通り、正しく動作するかをPagesではテストします。
Atomic Designでのキモはここだと私は思っていて、
ただのコンテンツが流し込まれたWebデザインではなく、綿密に作り込まれたコンポーネントが設計通りに動作するのかどうか。
Webは更新されていく生き物ですので、ここでのテストが非常に重要です。
私たちは、ページをデザインしていない。
私たちは、コンポーネントのシステムを設計しています。
We’re not designing pages, we’re designing systems of components.—Stephen Hay
ページのデザインではなく、システムをデザインしましょう。
Atomic Designを使うことの本当のメリット
私がこの概念に対して期待しているのは、優秀なコンポーネントが出来上がることももちろんですが、各レイヤーに対して名前がつけられ、粒度が定められていることで実際の開発時におけるコミュニケーションを大きく助けることです。
これら５つの構造を基準とすることで、あらゆる物事の判断が出来るようになるかもしれません。
それは例えば機能追加の際の工数算出かもしれませんし、検証時の影響範囲の把握かもしれません。
確かなことが言えるのは、Webページの構造設計が見える化されることです。
終わりに
Atomic Designを解説した日本語の記事はあまり多くありません。
ハイパフォーマンスなWebを構築していくうえで、デザインにおいてもこのような設計手法を取り入れることが主流になっていけばいいなと思ってこの記事を公開します。
果たしてAtomic Designは、開発現場を救う１つの種になるでしょうか。なったらいいな。
