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
m-yoshiro
April 27, 2017
Design
3
300
Atomic Designとデザインとプロダクト
社内イベント ホスTechMTG #3で発表したスライドです。
Atomic Designを通して、デザインがプロダクト(とチーム)ともっと関われるのでは!というお話です。
m-yoshiro
April 27, 2017
Tweet
Share
More Decks by m-yoshiro
See All by m-yoshiro
雑に出してみるデザイントークン適用率
myoshiro
0
120
デザイントークンの適用率計測とその活用
myoshiro
0
1k
画像の減色処理とOctree
myoshiro
1
280
CSS Houdiniであそぶ
myoshiro
0
130
Template Literal Typesであそぶ
myoshiro
1
170
Selector-2-regexp というツールを作った
myoshiro
0
220
わたしたちのコーディングのUX
myoshiro
1
240
Data Studio Community Visualizationを触ってみた
myoshiro
1
520
UIデザインと関わろう
myoshiro
0
490
Other Decks in Design
See All in Design
root COMPANY DECK / We are hiring!
root_recruit
1
16k
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
450
Personal Story Sequence - Vendetta(WIP)
elrns88
0
340
Карта реализации историй — убийца USM
ashapiro
0
260
発表資料テンプレート / My slide template
thatblue
0
130
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
720
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
510
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
970
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
380
Dive Deep into Communication
yomtsu
0
110
実利の世界で、表現者である
kiyou77
3
110
Slip N Slime - Character Design Ideation
thebogheart
0
340
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Facilitating Awesome Meetings
lara
50
6.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Why Our Code Smells
bkeepers
PRO
335
57k
Visualization
eitanlees
146
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Transcript
"UPNJD%FTJHOͱσβΠϯͱ ϓϩμΫτ (.0ϖύϘגࣜձࣾϗεςΟϯάࣄۀ෦ϩϦϙοϓʂάϧʔϓদຊ๕
Θͨ͠Α͠Ζ͏ɺσβΠφʔʜ NJOOFͷσβΠφʔͱͯ͠ೖࣾ ͖ͯ͠Ό͖ͬΌͯͨ͠ !CFOOLZPVHJSBJ দຊ๕ ϩϦϙοϓʂʹҠΓ͖Ό͖ͬΌ ͯ͠Δ
$POUFOUT w ͡Ίʹ w "UPNJD%FTJHOͱ w ͜Ε͔ΒͷσβΠϯͱϓϩμΫτͷؔΘΓํ
͡Ίʹ
ࠔͬͨʂ ಉ͡ύʔπΛ ࡞ͬͯ͠·ͬͨʂ ϩάΠϯ͠ͳ͍ͱ ݟΕͳ͍ʂ ೝࣝͷζϨ͕͋Δʂ σβΠϯ͕όϥόϥʂ
Ψείϯϩ͕յΕͨʂ ࠔͬͨʂʂʂ αʔϏεͷ༷Λ Ѳ͢Δͷ͕େมʂ ػೳͷݺͼ໊͕ ਓʹΑͬͯҧ͏ ػೳΛܾΊ͍ͨͷʹ ݟͨͷʹͳͬͯ͠·͏ɻ ܾΊࣄͰຖճ ಉ্͕͕͡Δ
w ϓϩμΫτͷػೳΛ୳ͮ͠Β͍ w σβΠϯʹҰ؏ੑ͕ͳ͍ w ೝࣝͷζϨ w ৬ʹΑͬͯϓϩμΫτͷ6*Λࢦ͢ݴ༿͕ҟͳΔ ࠔͬͨ͜ͱ͕৭ʑ͋Δ͚ͲɺՌͨͯ͠ผʑͷͩΖ͏͔ʁ
͔ͯ͠͠ɺ σβΠϯͱνʔϜ͕͏·ؔ͘ΘΕ͍ͯͳ͍ʁ
ʮॿ͚ͯʂʯ
l"UPNJD%FTJHOz όόʔϯ
"UPNJD%FTJHOͬͯͳʹʁ
"UPNJD%FTJHOͱ #&.Έ͍ͨͳ$44ͷίʔσΟϯάϧʔϧͷ͜ͱʁ ɹΑ͋͘Δޡղ σβΠϯͷύʔπԽͱ࠶ར༻ͷ͜ͱͰ͠ΐʁ ͢ͰʹͬͯΔϫϯ "UPNJD໊ͯલɺΧοί͚ͭͯΠέ͔͢ͳ͍Θ
"UPNJD%FTJHOͱ "UPNJD%FTJHOσβΠϯγεςϜ w σβΠϯͷҰ؏ੑ w ϓϩμΫτͷ։ൃεϐʔυΞοϓ w ։ൃऀɾσΟϨΫλʔͷΛΘͳ͍ڞ௨ݴޠΛͨΒ͢ w σβΠϯͷ࠷ॳͷஈ֊͔ΒσβΠφҎ֎ͷϝϯόʔ͕ؔΘΕΔ
w ஈ֊ʹ͚Δ͜ͱͰ֤εςʔδͰूத͖͢࡞ۀΛߦ͑Δ
"UPNJD%FTJHO Έ
"UPN .PMVFDFVMFT 0SHBOJTN 5FNQMBUFT 1BHFT ݪࢠ ࢠ ༗ػମ ςϯϓϨʔτ ϖʔδ
ίϯϙʔωϯτ ͷ࠷খ୯Ґ "UPN͔ΒΔ ίϯϙʔωϯτ .PMVFDFVMFT͔ Β ུ ϨΠΞτύλ ʔϯ ϓϩμΫτಉ ͷϖʔδ FY ϘλϯɺϑΥʔ Ϝ୯ମ FY ݕࡧϑΥʔϜ FY ϔομʔ FY ೖྗϑΥʔϜͷ ϨΠΞταϯϓϧ FY ࣮ࡍͷςΩετ Λૠೖͨ͠ϖʔδ Έ w ݪࢠɾࢠɾ༗ػମΛϞνʔϑͱͨͭ͠ͷϨΠϠʔΛ࣋ͭ
"UPN 5FNQMBUFT .PMFDVMFT 0SHBOJTNT 1BHFT MBCFM %P MBCFM MBCFM %P
MBCFM %P MBCFM MBCFM MBCFM ͜ͷͭࠓճ৮Ε·ͤΜɻ
݁ہͳʹ͕͍͍ͷʁ
νʔϜશһ͕ ֤ϨΠϠʔʹΞΫηεͰ͖Δ
"UPN .PMFDVMFT 0SHBOJTNT MBCFM %P MBCFM MBCFM %P MBCFM %P
MBCFM MBCFM MBCFM ͦΕͧΕͷϨΠϠʔʹ νʔϜશһ͕ࢀՃ͢Δʂ ྫ͑͜ͷͭ
νʔϜશһͰΔ ྫ͑͜Μͳํ๏ w ͰνʔϜશһͰඞཁͳύʔπΛϐοΫΞοϓ w શͯΛҹͯ͠นʹషΔ w νʔϜશһͰΧςΰϥΠζ͢Δ w ݸผͷ໋໊ʹམͱ͠ࠐΉ
"UPN .PMFDVMFT 0SHBOJTNT
νʔϜશһͰΔ ͍͍͜ͱ w νʔϜશһ͕ڞ௨ͷೝࣝΛ͍࣋ͯͯΔ w σβΠϯ͕ͯ͠ͳͯ͘ɺϑϩϯτɾόοΫͷΤϯδχΞ͕४ උʹऔΓ͔͔ΕΔ w σβΠϯ͕ͯ͠ͳͯ͘ɺϓϩμΫτͷ͕ࣝڞ༗Ͱ͖͍ͯΔ "UPN
.PMFDVMFT 0SHBOJTNT
ࠓ·ͰͷελΠϧ ' ϞοΫΞοϓ Λ࡞ ϖʔδ σβΠϯ ( Α͘Θ͔Βͳ͍ͱ͍͏น Λ͑Δඞཁ͕͋Δ )
"UPNJDͳελΠϧ ' "UPN 5FNQMBUF ( ΈΜͳ͕ࢀՃ͢Δ ) .PMVFTDFVT 0SHBOJTN 1BHF
σβΠϯͷϨΠϠʔׂ͕͞Ε͍ͯΔ͔Βɺ ͦΕͧΕͷஈ֊ͰΈΜͳ͕ࢀՃͰ͖Δ
"UPNJD%FTJHOΛ࣮ߦ͢ΔͨΊʹ 1BUUFSOMBC 'SBDUBM "UPNJDͳσβΠϯΛҡ࣋͠ ͍ͯͨ͘ΊʹɺৗʹΈΜͳ ͕ӾཡͰ͖Δॴ͕ඞཁ ελΠϧΨΠυ IUUQGSBDUBMCVJME IUUQQBUUFSOMBCJP ͦͷͨΊͷڧྗͳπʔϧ͕
ελΠϧΨΠυʂ ͜͜ͷ͍͔ͭ·ͨ
͜Ε͔ΒͷσβΠϯͱ ϓϩμΫτͷؔΘΓํ
νʔϜશһ͕σβΠϯͱؔΘΔʂ σβΠϯ͕ϓϩμΫτͱ͍ൣғʹؔΘ͍ͬͯ͘ɻ ͜Ε͔ΒͷσβΠϯͷؔΘΓํ
"UPN 5FNQMBUFT .PMFDVMFT 0SHBOJTNT 1BHFT MBCFM %P MBCFM MBCFM %P
MBCFM %P MBCFM MBCFM MBCFM ͕࣍͋Ε͜͜ʂ
4FFZPV