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
670
READING The Atomic Workflow
第1回AtomicDesignについて考える会
8845musign
December 10, 2018
Tweet
Share
More Decks by 8845musign
See All by 8845musign
Ubie Vitalsの取り組み紹介
8845musign
0
760
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
230
業務システムに必要なアクセシビリティ
8845musign
1
990
業務システム狂詩曲
8845musign
4
2k
いまさら styled components 入門した
8845musign
3
860
いろはとアップデート 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
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.9k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
240
Masked shaman-Storyboard 2025
ashley0521
0
160
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
780
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
発表資料テンプレート / My slide template
thatblue
0
200
portfolio2025_kanakoohata
kanako106
0
660
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
140
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
TUNAG BOOK 2024
stmn
0
470
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Thoughts on Productivity
jonyablonski
69
4.5k
A designer walks into a library…
pauljervisheath
205
24k
Building Applications with DynamoDB
mza
93
6.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
How to Ace a Technical Interview
jacobian
276
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Navigating Team Friction
lara
183
15k
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!