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
180
デザイントークンの適用率計測とその活用
myoshiro
0
1.1k
画像の減色処理とOctree
myoshiro
1
380
CSS Houdiniであそぶ
myoshiro
0
190
Template Literal Typesであそぶ
myoshiro
1
200
Selector-2-regexp というツールを作った
myoshiro
0
250
わたしたちのコーディングのUX
myoshiro
1
310
Data Studio Community Visualizationを触ってみた
myoshiro
1
580
UIデザインと関わろう
myoshiro
0
550
Other Decks in Design
See All in Design
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
3.1k
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
270
kintone_aroma
kintone
0
480
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
740
decksh object reference
ajstarks
2
1.4k
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
portfolio.pdf
onof003
0
210
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
160
高卒公務員から Webデザイナーになるまで
kinomidesign
0
120
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
290
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
Site-Speed That Sticks
csswizardry
13
940
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
640
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Building Applications with DynamoDB
mza
96
6.7k
Mobile First: as difficult as doing things right
swwweet
225
10k
Agile that works and the tools we love
rasmusluckow
331
21k
Speed Design
sergeychernyshev
32
1.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
How to Ace a Technical Interview
jacobian
280
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
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