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
フロントエンド最前線に流されない Atomic Design という考え方
Search
yuuki79
November 05, 2016
Design
1
5.1k
フロントエンド最前線に流されない Atomic Design という考え方
Forkwell という会社の勉強会で登壇したときの資料。フロントエンドの人たちはデザインに近いところで仕事しているのに、小手先のツールに支配されすぎているので目線を上げるためのアンチテーゼ的な資料
yuuki79
November 05, 2016
Tweet
Share
More Decks by yuuki79
See All by yuuki79
暗号屋の稼業 @ AWS Blockchain Webinar
79yuuki
0
100
暗号屋の稼業
79yuuki
0
500
NFTビジネス活用の可能性
79yuuki
1
470
サルでもわかるブロックチェーン講座
79yuuki
0
430
仮想通貨これからどうなる?
79yuuki
1
340
ビットコインに対する所有権は認められるのか
79yuuki
0
5.5k
Blockchain x Startup
79yuuki
0
5.6k
Ripple で学ぶ DEX の世界
79yuuki
0
6.3k
日本と海外の放送禁止文化の違い
79yuuki
0
760
Other Decks in Design
See All in Design
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
310
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
800
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
520
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
880
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
450
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
380
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
2
1.2k
harutaka Vision Deck
zenkigenforrecruit
0
220
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
160
佐藤千晶|ポートフォリオ
chimi_chia
0
150
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
How GitHub (no longer) Works
holman
315
140k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Unsuck your backbone
ammeep
671
58k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Music & Morning Musume
bryan
46
6.8k
Transcript
ϑϩϯτΤϯυ࠷લઢʹྲྀ͞Εͳ͍ "UPNJD%FTJHOͱ͍͏ߟ͑ํɻ αΠόʔΤʔδΣϯτࢵ༎ٍ
ࣗݾհ ࢵ༎ٍ ࡀ αΠόʔΤʔδΣϯτ৽ଔ ܳೳਓϒϩάɺ"OESPJEΞϓϦϚʔέοτɺҭήʔϜɺιγϟήϓϩσϡʔ αʔɺιγϟήΤϯδχΞ ɺ".&45"(& +BWB1./PEFKT'SPOUFOE+43JPUKT4XJGUษڧதগ͠Ӧۀ ݸਓͰσβΠϯҊ݅ɺ#B1"̍ظੜɺTDIPPͰ/PEFKTͷઌੜɺஶॻʹʮ8FC
࡞ऀͷͨΊͷ(JU)VCͷڭՊॻʯ ࠷ۙ࡞ͬͨͷɿݰؔʹஔ͍ͨ-*/&CFBDPOͰఱؾ༧ใCPUɺޫΔͷඃΓ
None
ܳೳਓͱ༡Δʂίʔφʔػೳ
ຊ
React, ES6, TypeScript, babel, Browserify, webpack, Ramda, Grunt, gulp, JSX,
Angular, Vue, KnockoutJS, bluebird, node.js, CommonJS, Flow, Mimosa, Virtual DOM, async, underscore lodash, fetch, promise, Jade, pug ect, handlebars, Flux, Redux ... ࠷ۙಡΜͩهࣄ ʲ༁ʳʹ+BWB4DSJQUΛֶΜͰͲ͏ײ͔ͨ͡ IUUQLJLVDIJIBUFCMPKQFOUSZ
·͞ʹϑϩϯτΤϯυ࠷લઢ
͜Μͳ࣌ͦ͜ Σϒඪ४
Σϒඪ४ )5.- $44 %0. &$."4DSJQU 47(ʜ جຊతʹ8FC੍࡞ʹ͓͍ͯΓ͘͢͢ΔͨΊͷن֨ɻ )5.-ߏɺ$44දࣔํ๏ɻ&$."4DSJQU&4Έ͍ͨʹݴޠͱͯ͠ਐԽ͍ͯ͘͠ɻ ʜΈ͍ͨͳɻ
8FC$PNQPOFOUT w 8$͕ࡦఆ͍ͯ͠Δ8FCͷ෦Խٕज़ w 6*ͷίϯϙʔωϯτԽ ྫ͑5XFFU#VUUPO͕͋ͬͨͱͯ͠ <tweet-button> Έ͍ͨͳλάҰ͚ͭͩͰ )5.- $44
+4 ػೳ ·Ͱ͕༻ҙ͞ΕΔ
8FC$PNQPOFOUTͷࠓ w ͔͠͠·ͩ·࣮ͩ༻తͰͳ͍ w (PPHMFͷ߈ΊͯΔ1PMZNFSΈ͍ͨͳ࣮ෳࡶͰະདྷײ ͕ڧ͍ɻ w ίϯϙʔωϯτ࣮ͷ࣮ݱʹ͚ͯಠࣗ࿏ઢͰΓग़͢ϑϨʔ ϜϫʔΫୡ w
3FBDU "OHVMBS 1PMZNFS 7VFKT 3JPUKTʜ w ͲΕڞ௨͍ͯ͠Δͷ͕)5.-ཁૉΛ֦ுͯ͠࠶ར༻Մೳͳ ίϯϙʔωϯτͱίʔυͰ6*ΛߏஙͰ͖ΔΑ͏ʹ͍ͯ͠Δɻ
8FC6*ͷίϯϙʔωϯτԽࠓޙΠέͦ͏ͩͧʜʁ
"UPNJD%FTJHO ίϯϙʔωϯτԽͷࢦඪɺઃܭͷϧʔϧɻ
"UPNT
ϥϕϧʢςΩετʣɺϘλϯɺΠϯϓοτͳͲɺ͜ΕҎ্ׂͰ͖ͳ͍ίϯϙʔωϯτ
.PMFDVMFT
ෳͷ"UPNT͕·ͱ·ͬͨͷɻ ʢྫɿϘλϯͱϥϕϧɺΠϯϓοτΛ·ͱΊͯ̍ͭͷϑΥʔϜʹͳΔʣ
0SHBOJTNT
ෳͷ.PMFDVMFT"UPNT͕·ͱ·ͬͨͷɻ ʢྫɿϩΰͱϝχϡʔϦετɺݕࡧϑΥʔϜΛ߹ΘͤͯϔομʔʹͳΔʣ
5FNQMBUFT
0SHBOJTNTΛ·ͱΊͨίϯςϯπ͕ͳ͍ঢ়ଶͷͷɻ ʢྫɿ͜͜·ͰདྷΔͱ΄΅ϫΠϠʔϑϨʔϜͷ༷ͳΠϝʔδʣ
1BHFT
None
*OTUBHSBNͰͷྫ
".&45"(&Ͱ4UZMF(VJEFΛ࡞ͬͯӡ༻
࣮ࡍʹ࡞ͬͨλάΛຊ൪Ͱͦͷ··࠶ར༻
ͬͯͯΑ͔ͬͨ͜ͱ
είʔϓ͕ྑ͍ w ίϯϙʔωϯτԽͷϧʔϧ͕໌֬ʹͳΔͷͰ໎Θͳ͍ɻ w ͦͷλά͚ͩͷ࣮Λ͢Ε͍͍ͷͰѹతʹݟ͍͢ w TDPQFEͳDTT͕ϝΠϯʹͳΔ͕ɺػೳ͕গͳ͘DMBTT͕ Ϳ͔ͭΒͣݟ௨͕͠ྑ͘ͳΓɺ#&.Έ͍ͨͳཧΛ͠ͳ ͯ͘ྑ͍ɻ w
ͦΕʹͱͳͬͯ%0.ʹର͢Δ+4ͷૢ࡞গͳ͘ݟ ָͯ͘͢ɻJEDMBTTࢦఆͰΘ͟Θ͟K2VFSZ͕ඞཁͳ͍
ѹతʹࣄ͕͍͢͠ w ϧʔϧ͕ܾΊ͘͢ͳͬͯɺ6*ͷ৭ͱ͔ύʔπͱ͔ʹ໊લ͕͍͍ͭͯ ΔͷͰଞͷϝϯόʔͱ͕͍͢͠ w σβΠϯʹରͯͬͯ͠ͳ͍৭αΠζɺύʔπ͕͋Δͱ͍͏͕Ͱ͖ Δɻ࠶ར༻Ͱ͖ͳ͍ͷ͔ฉ͚Δ͠ɺඍົͳσβΠϯ͕͛Δɻ w ΧελϜλάͷ໊લͱϑΝΠϧ໊͕ҰॹͳͷͰίʔυΛ୳͢ͷָʹͳ Δɻ
w ༷શମ͕ܾ·͍ͬͯͳͯ͘ɺύʔπ͔Βઌʹ࡞͓ͬͯ͘͜ͱ͕Ͱ͖ Δ͠ɺσβΠϯมߋָɻ w ͍ܰελΠϧௐͳΒσβΠφʔʹͦͷ··ͯ͠Βͬͯྑ͍ w ࠶ར༻Ͱ͖Δλά͕͋Δ࣌ͷշײ͕ؾ͍͍࣋ͪʜ
ͬͨ΄͏͕͍͍͜ͱ w ύʔπ৭ʹ໊લΛ͚ͭΔɻ w ˞4.-Έ͍ͨͳ໊લޙͰζϨΔࣄ͕͋ΔͷͰࣈͰ ཧͨ͠ํ͕͍͍͔ɻ w 'MVYͱ͔ͱΈ߹ΘͤΔͱɺσʔλͷΓऔΓ·Ͱ͔ͬͪΓϋ Ϛͬͯؾ͍͍࣋ͪɻ w
؆୯Ͱ͍͍͔Β4UZMF(VJEFΛ༻ҙͯ͠ɺ࡞ͬͨίϯϙʔωϯ τΛ֬ೝͰ͖ΔखஈΛ༻ҙ͢Δɻ w ίϯϙʔωϯτຖʹςετ͕ॻ͚Δʂ
͜ΕΒ8FC͚ͩͷϞϊͰͳ͍ʂʂ w 6*Λίϯϙʔωϯτຖʹ࣮ΛࡉԽ͠ɺػೳ͝ ͱ࠶ར༻͢Δɻ w ίϯϙʔωϯτʹ໊લΛ͚ͭͯ։ൃऀͰڞ༗͠ɺ σβΠϯΛ౷Ұ͢Δɻ w 4UZMF(VJEFͰίϯϙʔωϯτͷཧΛͯ͠ɺσ βΠϯͷݟ௨͠Λྑ͘͢Δɻ
8FC $PNQPOFOUT "UPNJD%FTJHO ίϯϙʔωϯτΛͬͨϑϩϯτΤϯυ։ൃ ͷπʔϧΛબͳ͍ҰͭͷσβΠϯख๏
͓·͚ 3JPUKT͍͍ͧ w ͠Έͷ͋Δ)5.-෩ͷ࣮͕Ͱ͖ΔͷͰɺ8FC $PNQPOFOUTΛҰ൪γϯϓϧʹ࣮ݱͯ͘͠ΕΔɻ w σβΠφʔ+4ΰϦΰϦॻ͘Α͏ͳਓ͔ΓͰͳ ͍8FC੍࡞ۀքશൠͷਓʹ؆୯ʹίϯϙʔωϯτମ ݧͤ͞Δ͜ͱ͕Ͱ͖Δɻ w
3FBDUͰ͖Δਓͷ࠾༻͍ͬͯ͠ɻ+4ॻ͚ΔਓͬͯϐϯΩϦͩͬͨΓ͢Δɻ
·ͱΊ w 8FCDPNQPOFOUTඪ४Խ͚ͩͰͳ͍͘ΖΜͳ ϑϨʔϜϫʔΫ͕͔͍ͬͯΔ͠ɺ͍͍ྲྀΕɻ w ίϯϙʔωϯτԽͱ͍͏ॴʹΛ͚ͯߦͬͨ࣌ɺ ϑϩϯτΤϯυ͞Μͱͯ͠Ͳ͏͢Δ͔ʁ w "UPNJD%FTJHOͷΑ͏ͳίϯϙʔωϯτΛ্ख͘σ βΠϯͰ͖Δߟ͑ํΛʹ͚ͯɺϑϩϯτΤϯυ
ք۾ͷߥΛΓӽ͑·͠ΐ͏ʂ
ϑϩϯτΤϯυ࠷લઢʹྲྀ͞Εͳ͍ "UPNJD%FTJHOͱ͍͏ߟ͑ํɻ