Atomic Designは、ウェブデザインと開発のフローを改善するための方法論です。
この手法はブラッド・フロストによって提唱され、それ自体が生物学の原理に基づいています。
それでは、具体的な例を交えてAtomic Designについて見ていきましょう。
Atomic Designとは？
Atomic Designは、インターフェースデザインを5つの異なるレベルで考える方法を提供します。それらは以下の通りです：
- Atoms（アトム）
- Molecules（モレキュール）
- Organisms（オーガニズム）
- Templates（テンプレート）
- Pages（ページ）
出典：https://snowball.digital/blog/intro-to-atomic-design
これらの各レベルがどのように動作するのか、具体的な例を見てみましょう。
1. Atoms（アトム）
アトムは、デザインシステムの最小単位です。これらはボタン、インプットフィールド、パラグラフ、見出し、リンクなど、一つ一つのUI要素を指します。
例：ボタン（アトム）
<button>Click me</button>
2. Molecules（モレキュール）
モレキュールは、アトムを組み合わせて作られます。例えば、フォームフィールド（ラベル、入力フィールド、ボタンなど）はモレキュールと考えることができます。
例：検索フォーム（モレキュール）
<form>
<label for="search">Search</label>
<input id="search" type="text">
<button>Submit</button>
</form>
3. Organisms（オーガニズム）
オーガニズムは、モレキュールやアトムを組み合わせて作られます。これらは特定の部分（例えば、ヘッダー、フッター）を形成します。
例：ヘッダー（オーガニズム）
<header>
<h1>Site Title</h1>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<form>
<label for="search">Search</label>
<input id="search" type="text">
<button>Submit</button>
</form>
</header>
4. Templates（テンプレート）
テンプレートは、オーガニズム、モレキュール、アトムを組み合わせて作られ、特定のレイア
ウトパターンを示します。これらは実際のコンテンツを持たず、代わりにプレースホルダーやダミーテキストが使用されます。
例：ブログ記事のテンプレート
<main>
<header>
<h1>Blog Title Placeholder</h1>
<p>Author Placeholder</p>
<p>Date Placeholder</p>
</header>
<article>
<h2>Section Placeholder</h2>
<p>Text Placeholder</p>
</article>
<footer>
<button>Like</button>
<button>Share</button>
</footer>
</main>
5. Pages（ページ）
ページはテンプレートに実際のコンテンツを注入したものです。これは具体的なウェブサイトのページを指します。
例：ブログ記事のページ
<main>
<header>
<h1>My Awesome Blog Post</h1>
<p>By John Doe</p>
<p>Published on January 1, 2023</p>
</header>
<article>
<h2>Introduction</h2>
<p>This is the start of my awesome blog post...</p>
</article>
<footer>
<button>Like</button>
<button>Share</button>
</footer>
</main>
これらがAtomic Designの基本的な概念です。