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
170
デザイントークンの適用率計測とその活用
myoshiro
0
1.1k
画像の減色処理とOctree
myoshiro
1
360
CSS Houdiniであそぶ
myoshiro
0
180
Template Literal Typesであそぶ
myoshiro
1
200
Selector-2-regexp というツールを作った
myoshiro
0
250
わたしたちのコーディングのUX
myoshiro
1
300
Data Studio Community Visualizationを触ってみた
myoshiro
1
570
UIデザインと関わろう
myoshiro
0
540
Other Decks in Design
See All in Design
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
240
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
Installing and Running decksh/pdfdeck
ajstarks
1
830
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
760
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
740
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
600
How to get a Tiger to Tulsa
mcduckyart
0
120
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
1.3k
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
100
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Visualization
eitanlees
146
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
GitHub's CSS Performance
jonrohan
1031
460k
Faster Mobile Websites
deanohume
308
31k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
We Have a Design System, Now What?
morganepeng
53
7.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Measuring & Analyzing Core Web Vitals
bluesmoon
8
550
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