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
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
190
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
340
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
400
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
650
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1k
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
アクセシビリティに取り組むメリット
magi1125
2
270
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
160
CursorでAI活用のナレッジベースを構築する
kanzaki
0
790
DESIGNEAST 2025 A-3
_kotobuki_
0
100
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Documentation Writing (for coders)
carmenintech
75
5.1k
Being A Developer After 40
akosma
91
590k
Code Reviewing Like a Champion
maltzj
526
40k
GraphQLとの向き合い方2022年版
quramy
49
14k
Faster Mobile Websites
deanohume
310
31k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Thoughts on Productivity
jonyablonski
70
4.9k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Docker and Python
trallard
46
3.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
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