Frontend Academy · レッスン

Atomic Design：Atoms・Molecules・Organisms

コンポーネントをAtoms、Molecules、Organisms、Templates、Pagesに分類し、デザインとエンジニアリングの間で共通の語彙を作ります。

「Atomic Design：Atoms・Molecules・Organisms」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Atomic Designとは

Atomic Design（Brad Frost、2013年）は、UIコンポーネントを複雑さの異なる5つのレベル、Atoms、Molecules、Organisms、Templates、Pagesに整理するための思考モデルです。デザイナーとエンジニアが共通の語彙を持てるようにします。

Atoms — 最小の構成要素

これ以上分解できない単一目的のコンポーネントです。ボタン、入力フィールド、アイコン、ラベル、カラースウォッチなどが該当します。抽象度が高く、どのようなコンテキストでも再利用できます。

// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>

Molecules — 単純なコンポーネントのグループ

Atomsを組み合わせて、役に立つ機能を実現します。SearchBarはInput + Button + Icon、FormFieldはLabel + Input + ErrorMessageで構成されます。依然として汎用的なコンポーネントです。

function SearchBar({ onSearch }) {
  return (
    <div className="search-bar">
      <Input placeholder="Search..." />
      <Button onClick={onSearch}>
        <Icon name="search" />
      </Button>
    </div>
  );
}

Organisms — 複雑なセクション

インターフェースの明確なセクションを構成する、より大きな組み合わせです。Header（ロゴ + ナビゲーション + 検索バー + ユーザーメニュー）、ProductCard（画像 + タイトル + 価格 + ボタン）、SignupFormなどがあります。よりコンテキストを意識した構成になります。

function Header({ user }) {
  return (
    <header>
      <Logo />
      <Navigation links={navLinks} />
      <SearchBar onSearch={handleSearch} />
      <UserMenu user={user} />
    </header>
  );
}

Templates — ページの骨格

実際のコンテンツを持たず、Organismsを配置するワイヤーフレームレベルのレイアウトです。BlogTemplateには、Header、Articleスロットを持つMain、Sidebarがあります。

function BlogTemplate({ header, article, sidebar, footer }) {
  return (
    <div className="blog-layout">
      {header}
      <div className="main">
        <main>{article}</main>
        <aside>{sidebar}</aside>
      </div>
      {footer}
    </div>
  );
}

Pages — 実際のコンテンツ

実際のコンテンツを持つTemplatesです。/blog/[slug]ページは、実際の記事、サイドバーウィジェット、UIの共通要素を含むBlogTemplateをレンダリングします。

フォルダー構成

多くのチームでは、コンポーネントをレベルごとに整理します。

src/components/
  atoms/
    Button.tsx
    Input.tsx
    Icon.tsx
  molecules/
    SearchBar.tsx
    FormField.tsx
  organisms/
    Header.tsx
    ProductCard.tsx
  templates/
    BlogTemplate.tsx
  pages/
    BlogPage.tsx

メリット

デザイナーと開発者の間で共通の語彙を持てます。重複ではなく合成を促します。デザインシステムを構築しやすくなります。まず最小の再利用可能な単位から考える習慣が身につきます。

批判：厳密な分類は難しい

実際には、MoleculeとOrganismの境界は曖昧です。多くのチームでは、あるものをどこに分類するかについて議論になり、明確さという本来の目的が損なわれます。

現代的な代替案：機能ベース

大規模なReact/Vueのコードベースでは、厳密なAtomicレベルよりも、機能（auth/、checkout/、dashboard/）ごとに整理する方法が好まれることがあります。Atomic Designは、共有デザインシステムのレイヤーには今でも有効です。

StorybookでのAtomic Design

StorybookはAtomic Designと相性がよく、最上位のカテゴリをAtoms、Molecules、Organismsにすると、コンポーネントライブラリを簡単に閲覧できます。

Atomic Designを使う場面

適しているのは、複数のアプリで共有するデザインシステムライブラリ、共通の思考モデルを必要とする大規模チーム、デザイナーが積極的に関わるプロジェクトです。小規模なアプリ、プロトタイプ、コンポーネントの近接配置を優先する機能中心のSPAでは、使わないほうがよいでしょう。

理解度チェック

Atomic Designにおいて、Input + Button + Iconから構成されるSearchBarは、どの種類のコンポーネントですか。

まとめ：Atomic Design

5つのレベルがあります。Atoms（Button、Input、Icon）、Molecules（SearchBar、FormField）、Organisms（Header、ProductCard）、Templates（レイアウト）、Pages（実際のコンテンツ）です。共通の語彙と、合成を優先する考え方を使います。フォルダー構成は各レイヤーを反映します。共有デザインシステムには適していますが、アプリのコードでは機能ベースのフォルダーのほうがAtomic Designより適していることがよくあります。

よくある質問

「Atomic Design：Atoms・Molecules・Organisms」レッスンは無料ですか？

はい。「Atomic Design：Atoms・Molecules・Organisms」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Atomic Design：Atoms・Molecules・Organisms」で何を学びますか？

コンポーネントをAtoms、Molecules、Organisms、Templates、Pagesに分類し、デザインとエンジニアリングの間で共通の語彙を作ります。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Atomic Design：Atoms・Molecules・Organisms」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る