アトミックデザインは、画面を構成する要素を最小の部品から画面全体まで、5段階の粒度に分けて考える設計の枠組みです。部品を組み合わせて画面を作るという考え方を、明確な階層で整理したものといえます。
有効なのは大規模で継続的に開発するサービスです。一方、企業サイトのように規模が限られる場合、分類の境界を議論する時間のほうが大きくなることがあります。
この記事では、5段階の内容、成立する条件、判断に迷う典型例、そして簡略化した運用の方法を整理します。
この記事でわかること
・5段階の粒度で部品を分類する枠組み
・成立するのは規模が大きく、継続的に開発する場合
・境界の判断に時間がかかる
・企業サイトでは簡略化した運用が現実的
・分類の議論より、再利用できることが目的
・導入の判断は規模と体制で決まる
5段階の粒度
要素を小さいものから大きいものへ、5段階に分けます。
| 段階 | 内容 | 例 |
|---|---|---|
| 最小の部品 | それ以上分割できない要素 | ボタン、入力欄、見出し |
| 組み合わせ | 最小の部品を組んだ小さな塊 | 検索欄（入力欄とボタン） |
| まとまり | 画面の一区画として機能する塊 | ヘッダー、記事一覧 |
| 雛形 | 配置を決めた枠組み | 中身の入っていない画面構成 |
| 画面 | 実際の内容を入れた状態 | 完成した各ページ |
下の段階から積み上げることで、部品の再利用が進むという考え方です。また雛形と画面を分けることで、構成と内容を分離して検討できます。
小さい部品から積み上げて画面を作る枠組み。
構成と内容を分けて検討できる利点がある。
成立するのは規模が大きい場合
この枠組みの利点が出るのは、特定の条件がそろった場合です。
| 条件 | 成立するか | 理由 |
|---|---|---|
| 画面数が多い | する | 再利用の機会が多い |
| 継続的に機能を追加する | する | 積み上げた部品が効く |
| 複数人で開発する | する | 共通の言葉が必要 |
| 数ページの企業サイト | しにくい | 再利用の機会が少ない |
| 一度作って更新しない | しない | 積み上げる意味がない |
| 1人で作る | しにくい | 分類を共有する相手がいない |
再利用の機会と、関わる人数が判断の軸になります。どちらも小さい場合、分類の枠組みを導入しても管理の手間が増えるだけです。
再利用の機会と関わる人数が、判断の軸になる。
どちらも小さければ、手間が増えるだけになる。
境界の判断に時間がかかる
この枠組みで最も問題になるのは、どの段階に分類するかの判断です。
- アイコン付きのボタンは、最小の部品か組み合わせか
- 見出しと本文の組は、組み合わせかまとまりか
- サイドバーは、まとまりか雛形の一部か
- 同じ要素でも、使われる場所で段階が変わるように見える
この議論に時間を使っても、成果物は変わりません。分類は目的ではなく手段です。判断に迷う要素が出たら、チーム内で決めて記録し、以降は同じ扱いにする。この運用のほうが実務的です。
境界の議論に時間を使っても、成果物は変わらない。
迷ったら決めて記録し、以降は同じ扱いにする。
企業サイトでは簡略化した運用が現実的
規模が限られる場合、段階を減らした運用で目的を果たせます。
| 簡略化した分類 | 内容 | 十分な規模 |
|---|---|---|
| 部品 | ボタン、入力欄、見出しなど | 全規模 |
| ブロック | ヘッダー、一覧、フォームなど | 10ページ以上 |
| ページ | 完成した画面 | 全規模 |
3段階あれば、再利用と一貫性という目的は達成できます。5段階に分けることが目的ではありません。
部品化の判断はデザインの部品化はどこまでやるべきか｜更新の手間と初期工数の分岐点を参照してください。
3段階でも、再利用と一貫性は達成できる。
5段階に分けること自体は目的ではない。
分類より再利用できることが目的
枠組みを導入する目的を見失わないでください。
| 目的 | 達成されているかの確認 |
|---|---|
| 同じ要素を作り直さない | 似た部品が重複していないか |
| 変更が一箇所で済む | 修正が全使用箇所に反映されるか |
| 一貫性が保たれる | 同じ役割の要素が同じ形か |
| 新規追加が速い | 既存の部品を組み合わせて作れるか |
分類が整っていても、これらが達成されていないなら意味がありません。逆に分類が簡略でも達成されていれば十分です。
目的は再利用と一貫性であり、分類そのものではない。
分類が整っていても、目的が達成されていなければ意味がない。
導入の判断は規模と体制で決まる
導入するかどうかは、次の順で確認してください。
- 画面数と、今後の追加の見込みを確認する
- 関わる人数と、担当の交代の可能性を確認する
- 更新の頻度を確認する
- 3つとも小さいなら、簡略化した分類で足りる
- いずれかが大きいなら、体系的な導入を検討する
担当の交代がある場合、分類の枠組みは共通言語として機能します。ただし説明を残さないと、次の担当者は意図を読み取れません。枠組みを導入するなら、判断の記録もセットで必要です。
画面の構成そのものの検討はワイヤーフレームの作り方｜構成を固めてからデザインに進む、情報の分類は情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。
画面数、人数、更新頻度の3つで判断する。
導入するなら、判断の記録もセットで残す。
他の要素との順序
デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。
よくある失敗
小規模なサイトに体系的に導入する
再利用の機会が少なく、管理の手間だけが増えます。簡略化した分類で足ります。
分類の議論に時間を使う
成果物は変わりません。迷ったら決めて記録し、以降は同じ扱いにしてください。
5段階に分けること自体を目的にする
目的は再利用と一貫性です。3段階でも達成できます。
判断の記録を残さない
担当が変わると意図が読み取れず、分類が崩れます。
分類が整っていることで満足する
似た部品の重複がないか、修正が一箇所で済むかを確認してください。
よくある質問
デザインシステムとは違うものですか
アトミックデザインは部品を粒度で分類する考え方であり、デザインシステムは規定と部品を含む仕組み全体を指します。分類の枠組みとして、デザインシステムの中で使われることがあります。全体像はデザインシステムとは？導入するメリットと作り方の基本を参照してください。
実装側も同じ分類にすべきですか
そろえられると連携しやすくなります。ただし実装側の都合で分割の単位が変わることもあります。完全に一致させることより、対応関係が説明できる状態を優先してください。
既存サイトに後から適用できますか
可能ですが、既存の要素を分類し直す工数がかかります。リニューアルのタイミングで導入するほうが現実的です。
命名はどうすべきですか
段階の名称をそのまま使うか、自社で分かりやすい名前にするかは自由です。重要なのは、チーム内で同じ言葉が同じものを指すことです。外部の呼称にこだわる必要はありません。
導入しない場合、何を代わりにすべきですか
部品として登録する要素を決め、命名規則を統一するだけでも一貫性は保てます。実装側で使い回す部品群としての整理はコンポーネントライブラリとは｜制作を効率化する仕組みと、作る前に決めることを参照してください。
まとめ
アトミックデザインは、画面を構成する要素を最小の部品から画面全体まで5段階の粒度に分けて考える枠組みです。下の段階から積み上げることで再利用が進み、構成と内容を分離して検討できる利点があります。ただしこの利点が出るのは、画面数が多く、継続的に開発し、複数人が関わる場合に限られます。
数ページの企業サイトで体系的に導入すると、再利用の機会が少ないため管理の手間だけが増えます。またこの枠組みで最も問題になるのは、どの段階に分類するかの判断です。アイコン付きのボタンは最小の部品か組み合わせか、といった議論に時間を使っても成果物は変わりません。分類は目的ではなく手段です。
規模が限られる場合、部品、ブロック、ページという3段階に簡略化しても、再利用と一貫性という目的は達成できます。確認すべきは分類の整い方ではなく、似た部品が重複していないか、修正が一箇所で済むか、新規追加が既存の組み合わせで作れるかです。これらが達成されていれば、分類が簡略でも十分です。
当社ではホームページ制作において、規模に応じた設計をご提案しています。既存サイトの整理はお問い合わせよりご相談ください。
