Upgrade to Pro — share decks privately, control downloads, hide ads and more …

あきらめる Atomic Design

TomPenguin
June 02, 2021

あきらめる Atomic Design

がんばらない

TomPenguin

June 02, 2021
Tweet

More Decks by TomPenguin

Other Decks in Design

Transcript

  1. ④ 感覚をつかむ これはどのレベルでしょう? Atom https://atomicdesign.bradfrost.com/chapter-2/ • 分割できない最小要素 • デフォルトのUI •

    トンマナを合わせる 例)ボタン、入力欄、ラベル、見出し、 画像、カード、配色・フォントなど (あとむ)
  2. ④ 感覚をつかむ これはどのレベルでしょう? Molecule https://atomicdesign.bradfrost.com/chapter-2/ • Atom の組み合わせ • 汎用的な機能を提供する

    • 単体では意味を成さない 例)検索フォーム、カードリスト、シェア ボタンリストなど (もる[れ]きゅーる)
  3. ④ 感覚をつかむ これはどのレベルでしょう? https://atomicdesign.bradfrost.com/chapter-2/ • Atom か Molecule の組み合わせ •

    特定のサービスを知っている • 独立して使用できる要素 例)ヘッダー、フッター、ナビゲーション、記事 要素のような独立したコンテンツなど (おーがにずむ) Organism
  4. ⑤ Molecule と Organism こんなものは Molecule https://www.futurelearn.com/info/blog/atomic-desi gn-molecules-organisms • 単体では何ができるか分からない

    • 他の要素を「補助」している • 分解すると構成要素がボタン、ラベ ル、見出しなどになる (Helper)
  5. ⑤ Molecule と Organism こんなものは Organism https://www.futurelearn.com/info/blog/atomic-design-molecules-organisms • 単体で何ができるのか分かる •

    独立して存在することができる • 分解すると構成要素がシェアボタン リスト、検索フォームなどになる (Standalone)