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
READING The Atomic Workflow
Search
8845musign
December 10, 2018
Design
3
680
READING The Atomic Workflow
第1回AtomicDesignについて考える会
8845musign
December 10, 2018
Tweet
Share
More Decks by 8845musign
See All by 8845musign
Ubie Vitalsの取り組み紹介
8845musign
0
870
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
230
業務システムに必要なアクセシビリティ
8845musign
1
1k
業務システム狂詩曲
8845musign
4
2k
いまさら styled components 入門した
8845musign
3
870
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.7k
チームをかえていくこと そして、泥臭さについて
8845musign
1
2k
感性デザインとは?
8845musign
4
1.8k
○DD駆動開発
8845musign
1
140
Other Decks in Design
See All in Design
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
240
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
240
LayerX DesignersDeck
layerx
PRO
1
7.4k
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
180
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
460
Les petites aventures de CSS, saison 2025
goetter
3
4k
OLTA株式会社/デザイン紹介資料
taxy
0
230
250131_product meetup
motokoishida
0
160
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
3
320
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
160
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
470
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
530
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Visualization
eitanlees
146
16k
4 Signs Your Business is Dying
shpigford
183
22k
A Tale of Four Properties
chriscoyier
158
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
For a Future-Friendly Web
brad_frost
176
9.7k
BBQ
matthewcrist
88
9.6k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
Producing Creativity
orderedlist
PRO
344
40k
KATA
mclloyd
29
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
680
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Transcript
READING The Atomic Workflow Think Atomic Design Vol.1
ࣗݾհ • ෲےϩʔϥʔͷྗΛ৴͡Ζʢ@8845musign_ʣ • גࣜձࣾΟϧήʔτʗ෭ۀϑϦʔϥϯαʔ • UIσβΠϯͬͨΓɺϓϩάϥϜॻ͍ͨΓ
Atomic Designܦݧ • ಛʹͳ͠ • ϓϩδΣΫτ͔Βফ͠ڈͬͨ͜ͱ͋Δ • ΤϯδχΞ͔ΒఏҊ͞Εͨ͜ͱ͋Δ ʢσβΠϯΛೲͯͦ͠ͷޙফଉෆ໌ʣ •
ຊ΄΅ໝ
Atomic Designͷ͓ؾ࣋ͪʢยࢥ͍ʣ • ٞΛ࣮σβΠϯσʔλͷ࡞ํ๏͚ͩʹ ݶఆ͢Δͷ͍ͬͨͳ͍
Source:http://atomicdesign.bradfrost.com/chapter-4/
Source:http://atomicdesign.bradfrost.com/chapter-4/ ಡΜͰ·ͱΊ·ͨ͠
Workflow Waterfall
Source:http://atomicdesign.bradfrost.com/chapter-4/
Source:http://atomicdesign.bradfrost.com/chapter-4/ ͪΌͿ ฦ͠ ͕ى͜Δ
The Atomic Workflow
Source:http://atomicdesign.bradfrost.com/chapter-4/
શһ͕ಉ࣌ฒߦͰ ϑϩʔΛΛਐΊΔ
੩తͳΧϯϓͷ • εςʔΫϗϧμʔʹؒҧͬͨظΛ༩͑Δ • ͷແବ
੩తͳΧϯϓͷ • εςʔΫϗϧμʔʹؒҧͬͨظΛ༩͑Δ • ͷແବ Ұࠁૣ͘ϒϥβʹ͍͖͘
HTMLɾCSSɾJavaScriptͰݕূͰ͖Δͷ ϑϨγΩϏϦςΟ ωοτϫʔΫͷΠϯύΫτ ΠϯλϥΫγϣϯ Ϟʔγϣϯ ਓֶؒ ৭ͱςΩετͷϨϯμϦϯά ղ૾ εΫϩʔϧύϑΥʔϚϯε σόΠεͱϒϥβͷบ
Ϣʔβʔͷझ ৹ඒతʹඒ͍͠σβΠϯ͚ͩͰͳ͘ɺ σδλϧσβΠϯݻ༗ͷͷΛݕূՄೳʹ͢Δ
Method
ׂ UX Designer Visual Designer Developer (Frontend) • ϩʔϑΝΠ εέον
• جຊతͳ ใΞʔΩςΫνϟ • શମͰ༧ظ͞ΕΔ UIύλʔϯͷ֬ • νʔϜඒత Ձऩू • ॳظσβΠϯ ํͷௐࠪ • ϋΠϑΝΠΧϯϓ (զʑͷ૾͢Δ࡞Γ ࠐ·ΕͨσβΠϯΧ ϯϓͷ͜ͱ) • ڥߏங • جຊతͳελϒ ςϯϓϨʔτͷ ߏங • UIύλʔϯͷ ϚʔΫΞοϓ
UX Designer/ϩʔϑΝΠεέον Source:http://atomicdesign.bradfrost.com/chapter-4/
UX Designer/ϩʔϑΝΠεέον • ϖʔδͷߏͱ֊Λݕ౼͢Δ • ඞཁͳٞʹूதͤ͞Δ • ʮ͜ͷը໘Ͱ͍ͬͯΔ͜ͱਖ਼͍͠ͷ͔ʯ ʮॱ൪ਖ਼͍͔͠ʁʯ
UX Designer/Site-wide UI Pattern Source:http://atomicdesign.bradfrost.com/chapter-4/
UX Designer/SpreadSheet OrganismͱMoleculeͷྨ͕͋Γʢ˞Atomͳ͍ʣ આ໌ͱίϯςϯπαϯϓϧ͕هड़͞Ε͍ͯΔ Source:http://atomicdesign.bradfrost.com/chapter-4/
UX Designer/SpreadSheet • ίϯςϯπͱݟͨͷύλʔϯΛཧ • ಛఆͷςϯϓϨʔτʹؚ·ΕΔύλʔϯΛཧ • ૬ରతͳ֊ • ը໘্Ͱͷׂ
• ࠨΛಡΈऔΔͱϞόΠϧͰͷϏϡʔ͕Θ͔Δ • σβΠφʔ͕ϨΠΞτΛ࡞Βͣɺٕज़తͳԾఆͳ͠ʹ ίϯςϯπͱݟͨͷύλʔϯɺॱংΛٞͰ͖Δ
Visual Designer/The 20-Second gut test Source:http://atomicdesign.bradfrost.com/chapter-4/
Visual Designer/The 20-Second gut test • ৹ඒతՁΛ͙͢ʹཱ֬͢ΔͨΊͷΤΫααΠζ • εςʔΫϗϧμʔ20ඵ͝ͱʹΣϒαΠτΛݟͤͯ 10ஈ֊ͰධՁ͍ͯ͘͠
• ۀքಛ༗ͷαΠτʗϏδϡΞϧతʹڵຯαΠτ ϩΰΫϥΠΞϯτͷϩΰʹ͢Δ • ࣍ͷΑ͏ͳࢹ֮ಛੑΛߟྀ͢ΔɻλΠϙάϥϑΟʗ৭ʗղ૾ʗ ϨΠΞτʗΠϥετϨʔγϣϯͷελΠϧʗશମతͳงғؾ • ࠷ߴ͍ಘɺ͍ಘɺධՁͷׂΕͨαΠτʹ͍ͭͯٞ͢Δ
Visual Designer/ϋΠϑΝΠΧϯϓͷ • εςʔΫϗϧμʔڹ͔ͳ͔ͬͨ߹ʹɺ मਖ਼࣌ؒͱྗΛཁ͢Δ • ࣮ݱՄೳ͔Ͳ͏͔ʹେ͖ͳԾઆΛؚΉ͜ͱ͕͋͠͠Δ • ݱ࣮తͰͳ͍ظΛͨͤͯ͠·͏
Visual Designer/Style Tiles Source:http://atomicdesign.bradfrost.com/chapter-4/
Visual Designer/Style Tiles • ৭ʗλΠϙάϥϑΟʗςΫενϟʗΞΠίϯʗͦͷଞ ͷݕ౼ΛՄೳʹ͢Δ • ϜʔυϘʔυΑΓ໌֬Ͱɺ ϋΠϑΝΠΧϯϓఔݻ·͍ͬͯͳ͍ •
ϋΠϑΝΠΧϯϓͷظʹअຐ͞Εͳ͍ • ϨΠΞτʹ͍ͭͯͷԾઆɺ ϏδϡΞϧͷચ࿅͞ͳ͠ʹඒతՁͷݕ౼͕Ͱ͖Δ • εςʔΫϗϧμʔσβΠϯγεςϜͷڭҭΛߦ͍ɺ ύλʔϯϕʔεͷߟ͑ํΛͨͤΔ
Visual Designer/Ellement Collages Source:http://atomicdesign.bradfrost.com/chapter-4/
Visual Designer/Ellement Collages • ඒతͳํੑΛٞ͢ΔͨΊͷͷ • ΠςϨʔγϣϯ͕͘͢͠ΞΠσΞΛਐԽͤͯ͞ ͍͘ͷ͕༰қ • *ৄࡉΛ٧ΊΔલʹΑΓൣғͳऔΓܾΊΛ͢Δ
Visual Designer/ϋΠϑΝΠΧϯϓͭ͘Βͳ͍ʁ • ΧϯϓΛ·ͬͨ͘࡞Βͳ͍Θ͚Ͱͳ͍ • ΧϯϓεςʔΫϗϧμʔͱͷձΛ ଅਐ͢ΔͨΊʹΘΕΔ • UI͕Ͳ͏͍ͬͨݟͨʹͳΔ͔ શମ૾Λඳ͘ͷʹ༗ޮ
Visual Designer/͍ͭ࡞Δʁ • ͬͱʂΛٻΊΒΕͨΒ • ʮ͜ͷίϥʔδϡૉΒ͍͠Ͷɺͨͩ͜ΕඓΛݟ ͤͯإ͕ඒ͍͔͠Ͳ͏͔ࢲʹίϝϯτΛٻΊ͍ͯΔΑ ͏ͳͷͩʯ • TechCrunch
ͷϓϩδΣΫτͰ Element Collages ্͕ख͘ߦͬͨޙʹΧϯϓΛ࡞ͬͨ • Χϯϓ͕͙͢ΰϛശ͍͖ʹͳΔϦεΫΛݮΒ͢
Frontend Engineer • σβΠφʔͱ͍ۙ੮࠲Δ ʢόοΫΤϯυΤϯδχΞͱҰॹʹ͞Ε͕ͪʣ • ϑϩϯτΤϯυ։ൃΛσβΠϯϓϩηεͷ ίΞύʔτͱͯ͠ѻ͏͜ͱۃΊͯॏཁɻ • αΠτͷछྨʹΑͬͯ༧ظͰ͖ΔUIΛઌߦͯ͠ϚʔΫΞοϓ͢Δ
• ࠷ॳߥͯ͘ɺσβΠφʔͱͷίϥϘϨʔγϣϯͱ ΠςϨʔγϣϯͷॏཁͳग़ൃʹͳΔ • UXɾϏδϡΞϧσβΠφʔϚʔΫΞοϓΛݕূʹ͏
Frontend Engineer/TechCrunchͷྫ
Frontend Engineer/TechCrunchͷྫ • TechCrunchͷϓϩδΣΫτͰΧϯϓͷཪͰ ϔομʔʹ͍ͭͯ HTMLʹΑΔάϨΠεέʔϧͷϓϩτλΠϓΛ࡞ͬͨ • ΠϯλϥΫςΟϒ͔ͭղ૾ͷൣғͰ Ͳ͏ϔομʔ͕దԠ͢Δ͔ΛσϞϯετϨʔγϣϯ ͢Δͷʹʹཱͬͨ
Iteration
ϒϥβͰͷΠςϨʔγϣϯ • ϒϥβʹσβΠϯΛҠߦͯ͠ɺ͡Ίͯ σβΠϯͷԾઆΛঝೝ/൱ೝ͖͢ • ҰϒϥβͰσβΠϯͨ͠ͷͳΒϒϥβ ʹͱͲ·Γଓ͚Δ͖ • ෦తͳΧϯϓΛؚΉ͜ͱྑ͍ •
ϒϥβͰʮσβΠϯʯͱ͍͏ΑΓʮܾఆ͢Δʯ
ύλʔϯϕʔεͷϫʔΫϑϩʔ • ͜ͷϫʔΫϑϩʔͷར֤ύλʔϯ͕ݻ·Δͱ ύλʔϯΛؚΉʢ্ҐͷʣςϯϓϨʔτݻ·Δ • ৽͍͠ςϯϓϨʔτطଘͷ͍ճ͠Ͱ؆୯ʹ࡞ΕΔ
ຊ͜͜·Ͱ ৄࡉຊ͔WebͰʂ
·ͱΊ • ϒϥβʹΑΔੜ͖ͨઃܭΛ • Frontend EngineerૣظʹઃܭͷࢀՃΛ • ৄࡉͰͳ͘ৗʹશମʢํʣ͔Βߟ͑Δ • Visual
DesignerΧϯϓ͔ΒೖΔͳ • ΫϥΠΞϯτͱͷձɺνʔϜͱͷίϥϘϨʔγϣϯΛ ม͍͑ͯ͘ • UIͷཧํ๏Λม͑Δ͚ͩͰͩΊ
Atomic Designͷຊ࣭ εςʔΫϗϧμʔશһ ͱͷ߹ҙܗͷϓϩηε ཻ߹ҙܗ ʹ߹Θ͍ͤͯΔ …Ͱ
Thank You!