Help us understand the problem. What is going on with this article?

Atomic Designってなんだ

More than 1 year has passed since last update.

はじめに

  • 所属しているプロジェクトにて、AtomicDesignを使うということで色々調べたりした内容のメモです。

Atomic Designとは

  • Atoms(原子)、Molecules(分子)、Organisms(有機体)、Templates(テンプレート)、Pages(ページ)の各コンポーネント同士を組み合わせて作成するデザイン手法
  • それぞれのコンポーネント詳細は下記
コンポーネント 詳細
Atoms(原子) 画面を構成する要素の最少単位 ラベルやインプット項目など
Molecules(分子) Atomsを組み合わせて作成された要素 検索フォームなど
Organisms(有機体) 複数のMoleculesやAtomsを組み合わせたもの、ヘッダーやフッターなど
Templates(テンプレート) 複数のOrganisms等を組み合わせたデータの入っていない画面 ワイヤーフレームとなるもの
Pages(ページ) 実際の文言や画像などが入ったもの、ほとんど最終的な画面と同じ
  • 実際にどんな感じにそれぞれを定義するかは参考にしたサイトを見ていただくと良いと思います。

参考にしたサイト

Atomic Design | Brad Frost
Atomic Designの考え方と利点・欠点 - I'm kubosho_
珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away