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
730
READING The Atomic Workflow
第1回AtomicDesignについて考える会
8845musign
December 10, 2018
Tweet
Share
More Decks by 8845musign
See All by 8845musign
Ubie Vitalsの取り組み紹介
8845musign
1
1.2k
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
270
業務システムに必要なアクセシビリティ
8845musign
1
1.1k
業務システム狂詩曲
8845musign
4
2.1k
いまさら styled components 入門した
8845musign
3
920
いろはとアップデート LIGHTNING DESIGN SYSTEM
8845musign
0
1.8k
チームをかえていくこと そして、泥臭さについて
8845musign
1
2.1k
感性デザインとは?
8845musign
4
1.9k
○DD駆動開発
8845musign
1
160
Other Decks in Design
See All in Design
Memory Man v3 (WIP)
storybychad
PRO
0
2.7k
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
440
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
「UXとUIの違い」v2
shirasu3
0
260
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
150
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
110
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
530
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
260
CursorでAI活用のナレッジベースを構築する
kanzaki
0
800
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
1
270
Yumika Yamada Portfolio
yumii
0
2.1k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
Faster Mobile Websites
deanohume
310
31k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
How to train your dragon (web standard)
notwaldorf
97
6.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Documentation Writing (for coders)
carmenintech
75
5.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Statistics for Hackers
jakevdp
799
220k
What's in a price? How to price your products and services
michaelherold
246
12k
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!