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
720
READING The Atomic Workflow
第1回AtomicDesignについて考える会
8845musign
December 10, 2018
Tweet
Share
More Decks by 8845musign
See All by 8845musign
Ubie Vitalsの取り組み紹介
8845musign
0
1.2k
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
250
業務システムに必要なアクセシビリティ
8845musign
1
1.1k
業務システム狂詩曲
8845musign
4
2.1k
いまさら styled components 入門した
8845musign
3
910
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.7k
チームをかえていくこと そして、泥臭さについて
8845musign
1
2.1k
感性デザインとは?
8845musign
4
1.8k
○DD駆動開発
8845musign
1
160
Other Decks in Design
See All in Design
アクセシビリティに取り組むメリット
magi1125
1
230
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
330
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
130
「UXとUIの違い」v2
shirasu3
0
190
Installing and Running decksh/pdfdeck
ajstarks
1
830
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
150
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
820
Storyboard Honey
rocioparronrubio
0
370
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
210
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2k
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
190
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Building Applications with DynamoDB
mza
96
6.5k
A better future with KSS
kneath
239
17k
Six Lessons from altMBA
skipperchong
28
3.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
800
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Side Projects
sachag
455
43k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Invisible Side of Design
smashingmag
301
51k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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!