Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
あきらめる Atomic Design
Search
TomPenguin
June 02, 2021
Design
5
740
あきらめる Atomic Design
がんばらない
TomPenguin
June 02, 2021
Tweet
Share
More Decks by TomPenguin
See All by TomPenguin
Domain Modelを共有していい感じにプロダクトを作る
tompenguin
0
330
【JavaScript】Strategy Patternっぽいのをちょい使いしてif分を駆逐する
tompenguin
0
210
【JavaScript】クロージャを理解して正しく使う
tompenguin
0
520
Git ゼンゼン ムズカシクナイ
tompenguin
0
550
Other Decks in Design
See All in Design
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
640
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
140
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.7k
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
120
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
240
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
860
Liquid GlassとApp Intents
touyou
0
370
Memory Man v3 (WIP)
storybychad
PRO
0
2.6k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
910
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
160
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
210
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Site-Speed That Sticks
csswizardry
11
880
BBQ
matthewcrist
89
9.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing for humans not robots
tammielis
254
25k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
RailsConf 2023
tenderlove
30
1.2k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Code Review Best Practice
trishagee
72
19k
Context Engineering - Making Every Token Count
addyosmani
5
180
Transcript
あきらめる Atomic Design TomPenguin karabiner. inc 2021/06/02 案件が回ればいいじゃない
あなたは誰ですか? Vue.jsばっかりさわっているエンジニア 仙台から福岡のシステム開発会社へフル リモートで勤務 昔は仙台の某百貨店の店員 TomPenguin tompenguin_ Work at karabiner,
inc
話を聞いて欲しい人 • デザイナー • エンジニア
あきらめるまでの手順 ① まずは知る ② 嫌なところ ③ 何がうれしいのか ④ 感覚をつかむ ⑤
Molecule と Organism ⑥ 頑張ることをあきらめる
話さないこと • コンポーネントのI/F周り • データの扱い方 • 具体的な実装方法 • テスト
① まずは知る
Atomic Design とはデザインシステムを構築するための方法論です。 ① まずは知る
None
① まずは知る デザインシステム とはこれです Material Design / https://material.io
つまり、Atomic Design とは フロントエンドのためのものではない ① まずは知る
とはいえフロントエンドの設計とは 親和性が高いので 良いトコどりをしていこう というのが本日のスタンス ① まずは知る 原典通り運用するのは あきらめたよ
② 嫌なところ
② 嫌なところ • なんかちょっと難しい • 小さいプロジェクトには向かない • 命名で悩みがち • ビルドが重くなりがち
• データの管理が難しくなりがち
② 嫌なところ 嫌なところはありつつも、 それを上回るメリットが大きい!
③ 何がうれしいのか
From the designer ③ 何がうれしいのか • UI/UXの一貫性が高まる • デザインを理解しやすくなる •
適切な要素を素早く見つけられる
From the engineer ③ 何がうれしいのか • コンポーネントの再利用性が高まる • 仕様やUIの変更に強くなる •
作業分担がしやすくなる
From the team ③ 何がうれしいのか • 要素の分割時の指針ができる • 共通言語で会話のコストが減る
④ 感覚をつかむ
5つのレベルに分類する ④ 感覚をつかむ https://atomicdesign.bradfrost.com/chapter-2/
5つのレベルに分類する ④ 感覚をつかむ https://atomicdesign.bradfrost.com/chapter-2/ ボトムアップ的手法
④ 感覚をつかむ ボトムアップで作るのは難しい ボトムアップは あきらめたよ
④ 感覚をつかむ まずはデザインカンプを一つ作り そこから要素を分割していく のがおすすめ デザインカンプができている 前提で話をすすめるよ
分割するときの観点 ④ 感覚をつかむ https://atomicdesign.bradfrost.com/chapter-2/ 再掲
分割するときの観点 ④ 感覚をつかむ https://atomicdesign.bradfrost.com/chapter-2/ 再掲 ✘ Page はビルドされてクライアン トで表示されたものだよ
④ 感覚をつかむ これはどのレベルでしょう? https://atomicdesign.bradfrost.com/chapter-2/
④ 感覚をつかむ これはどのレベルでしょう? Atom https://atomicdesign.bradfrost.com/chapter-2/ (あとむ)
④ 感覚をつかむ これはどのレベルでしょう? Atom https://atomicdesign.bradfrost.com/chapter-2/ • 分割できない最小要素 • デフォルトのUI •
トンマナを合わせる 例)ボタン、入力欄、ラベル、見出し、 画像、カード、配色・フォントなど (あとむ)
④ 感覚をつかむ これはどのレベルでしょう? https://atomicdesign.bradfrost.com/chapter-2/
④ 感覚をつかむ これはどのレベルでしょう? Molecule https://atomicdesign.bradfrost.com/chapter-2/ (もる[れ]きゅーる)
④ 感覚をつかむ これはどのレベルでしょう? Molecule https://atomicdesign.bradfrost.com/chapter-2/ • Atom の組み合わせ • 汎用的な機能を提供する
• 単体では意味を成さない 例)検索フォーム、カードリスト、シェア ボタンリストなど (もる[れ]きゅーる)
④ 感覚をつかむ これはどのレベルでしょう? https://atomicdesign.bradfrost.com/chapter-2/
④ 感覚をつかむ これはどのレベルでしょう? https://atomicdesign.bradfrost.com/chapter-2/ (おーがにずむ) Organism
④ 感覚をつかむ これはどのレベルでしょう? https://atomicdesign.bradfrost.com/chapter-2/ • Atom か Molecule の組み合わせ •
特定のサービスを知っている • 独立して使用できる要素 例)ヘッダー、フッター、ナビゲーション、記事 要素のような独立したコンテンツなど (おーがにずむ) Organism
④ 感覚をつかむ これはどのレベルでしょう? https://atomicdesign.bradfrost.com/chapter-2/
④ 感覚をつかむ これはどのレベルでしょう? Template https://atomicdesign.bradfrost.com/chapter-2/ (てんぷれーと)
④ 感覚をつかむ これはどのレベルでしょう? Template https://atomicdesign.bradfrost.com/chapter-2/ • 組み合わせてレイアウトする • 1ページに1つ (てんぷれーと)
⑤ Molecule と Organism
⑤ Molecule と Organism 要素を分割していくときに頻出する問題 え、これ Molecule? Organism?
⑤ Molecule と Organism こんなものは Molecule https://www.futurelearn.com/info/blog/atomic-desi gn-molecules-organisms • 単体では何ができるか分からない
• 他の要素を「補助」している • 分解すると構成要素がボタン、ラベ ル、見出しなどになる (Helper)
⑤ Molecule と Organism こんなものは Organism https://www.futurelearn.com/info/blog/atomic-design-molecules-organisms • 単体で何ができるのか分かる •
独立して存在することができる • 分解すると構成要素がシェアボタン リスト、検索フォームなどになる (Standalone)
⑤ Molecule と Organism それでもやっぱり分からない https://www.futurelearn.com/info/blog/atomic-design-molecu les-organisms
⑤ Molecule と Organism それでもやっぱり分からない https://www.futurelearn.com/info/blog/atomic-design-molecu les-organisms ぱっと見は Organism だよなあ
いやでもこれ なにがシェアされるか分からんな (じゃあ Molecule か?)
⑤ Molecule と Organism そういう時はデザインを変更するという手もある https://www.futurelearn.com/info/blog/atomic-design-molecu les-organisms たとえばここにコース名を 入れてみたらどうだろう
⑥ 頑張ることをあきらめる
⑥ 頑張ることをあきらめる あまりこだわりすぎない • 厳密に分類することにあまり価値は ない • 正直なところ Atom と
Molecule の 分割はそんなに重要ではない 肩の力をぬいていこうね
⑥ 頑張ることをあきらめる すべてをAtomで作らなくてもよい • やりたくなっちゃうけど我慢 • 特定のMoleculeでしか使われない AtomはMoleculeの中で実装しても 良い 肩の力をぬいていこうね
かえって実装増えちゃうからね
⑥ 頑張ることをあきらめる 決まった区分・分割は尊重する • 後から蒸し返したりしない • 十分な根拠のある反対意見でもなけ れば尊重しよう 肩の力をぬいていこうね リスペクトは大事よ
参考文献 • https://atomicdesign.bradfrost.com/ • https://www.futurelearn.com/info/blog/atomic -design-molecules-organisms • https://design.dena.com/design/atomic-design- %E3%82%92%E5%88%86%E3%81%8B%E3%81 %A3%E3%81%9F%E3%81%A4%E3%82%82%E3
%82%8A%E3%81%AB%E3%81%AA%E3%82%8B • https://www.amazon.co.jp/dp/B07CJ5TLK2/ref =dp-kindle-redirect?_encoding=UTF8&btkr=1