「明日からフロントもよろしく」と言われたときに備える Atomic Design

0ef9c2d090af1a444b51e63fa463a903?s=47 akki
February 11, 2020

「明日からフロントもよろしく」と言われたときに備える Atomic Design

0ef9c2d090af1a444b51e63fa463a903?s=128

akki

February 11, 2020
Tweet

Transcript

  1. 10.

    Atomic Design • web デザイナーのBrad Frost が提唱 • ビジュアル的なデザインではなく「設計」という意味 のほうが強いです

    • インターフェイスシステムを作成するための設計 方法論 • 5つの異なる階層で構成される • UIをまとまりのある全体とパーツの集合体である ととらえるメンタルモデル 原典
  2. 13.
  3. 15.

    Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms

    (生物) 4. Templates (テンプレート) 5. Pages (ページ)
  4. 16.

    Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms

    (生物) 4. Templates (テンプレート) 5. Pages (ページ) UIの構成する基本的な要素 これ以上分解することのできない要素 最も抽象的な要素 基本的なHTML要素が含まれる ラベル、インプットフォーム、ボタン
  5. 17.

    Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms

    (生物) 4. Templates (テンプレート) 5. Pages (ページ) Atoms を組み合わせることで構成される 要素 複数のAtoms が組み合わさることにより目 的をもった具体的な要素になる 入力フォーム、テーブル
  6. 18.

    Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms

    (生物) 4. Templates (テンプレート) 5. Pages (ページ) Atoms/Molecules/ 他のOrganisms を 組合わせて構成される要素 UIとしてセクションを形成する ヘッダー、フッター
  7. 19.

    Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms

    (生物) 4. Templates (テンプレート) 5. Pages (ページ) コンポーネントのレイアウトする ページのコンテンツ構造を定義する
  8. 20.

    Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms

    (生物) 4. Templates (テンプレート) 5. Pages (ページ) コンテンツの適用、最終的なUIを表示 コンポーネントに具体的なコンテンツ(画像、 テキスト、メディア)を入れ込む
  9. 24.

    利点 • チーム内での共通概念 • 再利用性の高いコンポーネント • 階層構造でのコンポーネントの整理 • コンポーネントの責務を分けることができる 実際にやってみて感じた最大利点はこれ

    レイヤードアーキテクチャ的な考え方         + コンポーネントの責務分離(単一責任の原則) 開発と保守がしやすい、テストも適用しやすい
  10. 25.