Atomic Design って何ですか？

どうも。 最近胸筋がついてきたのか、ただ太ってきたのか、胸が大きくなってきたひろろです。

今回の記事は、個人的な偏見も含んでるので、間違ってたりおかしい部分があれば、ご指摘頂けると幸いです。

Atomic Design(アトミックデザイン) とは

2013年にアメリカのBrad Frost(ブラッド・フロスト)さんが、Webフロントエンド用に考案したUIデザイン手法。 ざっくり言うと、UI要素の粒度を細かくして、それを共通化して再利用していきましょう。みたいなことです。多分。

各UIの部品をコンポーネントと考えて、それを繋ぎ合わせてページを構成しましょう。ってことです。

Atomic Designでは、以下の5つのステージに分け、それぞれの役割を明確にします。

• Atom(アトム) - 原子
• Molecules(モルキュールズ) - 分子
• Organisms(オルガニズム) - 有機体
• Templates(テンプレート) - テンプレート
• Pages(ページ) - ページ

個人的な考え

このコンポーネント的な指向で、デザイナーさんとかとの疎通を合わせることが容易になるらしい・・・。 のは、分からんでもないんですが、粒度を細かく考えてみると、どれが分子でどれが原子か分からない。

まあ、習うより慣れろ！って先人の偉い人が言ってたので、その言葉に従いたいと思います。

ステージ

Atoms(原子)

検索フォームなどのパーツです。ラベル・テキスト入力欄というように、UIを構築する最小単位です。

Molecules(分子)

Atomsを組み合わせて作った検索フォームなど。

Organisms(有機体)

Moleculesを組み合わせて作った段落など。

Templates(テンプレート)

Organismsを組み合わせてページの枠組みを構成します。 構成時の中身は全てダミーです。

Pages(ページ)

Tempaltesに画像やテキストなど、具体的なコンテンツ情報を入れ込んだものです。 Pagesが最終的なアウトプットとなります。

Atomic Design のメリット・デメリット

メリット

• 共通性
• 拡張性
• 一貫性

デメリット

• ファイル数が多くなる

とかですかね。

まとめ

これだけ書くと、良いのか悪いのかよく分からないですが、慣れてしまえば恩恵はたくさん受けられるのではないか。と思ってます。

大雑把に説明するぐらいの方が自分の理解力的にいいなと思ったので、こんな感じで終わります。 次回は実際にフォルダ構成やソースコードなど載せれたらいいな。