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
1
1.2k
業務システムの銀の弾丸? メモ機能を考察する
8845musign
2
260
業務システムに必要なアクセシビリティ
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
mento Design Team Portfolio
mento0fficial
0
580
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
550
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
230
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
150
CMS管理画面のアクセシビリティ
magi1125
8
2.4k
Yumika Yamada Portfolio
yumii
0
1.3k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
Storyboard Honey
rocioparronrubio
0
410
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
110
Them Middle School Kids Pitch
stevie_vee
0
120
デザイナー向けフライル説明資料
toshiblues
0
110
Featured
See All Featured
It's Worth the Effort
3n
187
28k
The Cult of Friendly URLs
andyhume
79
6.5k
Scaling GitHub
holman
462
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Site-Speed That Sticks
csswizardry
10
780
Gamification - CAS2011
davidbonilla
81
5.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Code Review Best Practice
trishagee
70
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
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!