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
let product = [designer, engineer].reduce(0) { ...
Search
koutalou
August 02, 2016
0
410
let product = [designer, engineer].reduce(0) { $0 + $1.skill * $1.vision }
2016/07/28(木) デザイナー×エンジニアLT&交流会(マネーフォワード×ママリ×みんなのウェディング)で登壇した内容です。
koutalou
August 02, 2016
Tweet
Share
More Decks by koutalou
See All by koutalou
マネーフォワードの設計へのアプローチ
koutalou
4
3.7k
実際Xamarinってどうなの?
koutalou
3
2.1k
iOS Clean Architecture のすすめ
koutalou
26
23k
tvOS tips
koutalou
1
1.8k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
A Tale of Four Properties
chriscoyier
160
23k
Music & Morning Musume
bryan
46
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
let product = [designer, engineer].reduce(0) { $0 + $1.skill *
$1.vision } 2016/07/28 גࣜձࣾϚωʔϑΥϫʔυ ࣇۄଠ
ࣗಈՈܭαʔϏεʰϚωʔϑΥϫʔυʱ iOS.AndroidΞϓϦ։ൃΛ୲͍ͯ͠·͢ ࣇۄଠ!LPVUBMPV ΤϯδχΞ ࣗݾհ
औΓΈ 1 νʔϜͰͷ։ൃޮͷ্ 2 ૬ޓͷาΈدΓ 3 7JTJPOͷڞ༗
औΓΈ 1 νʔϜͰͷ։ൃޮͷ্ 2 ૬ޓͷาΈدΓ 3 7JTJPOͷڞ༗ 2 3
ηΫγϣφϦζϜͷ اըɺσβΠϯɺ։ൃͷϑϩʔΛׂ͝ͱʹ͚ͯ͠·͏ͱ खΓ͕ଟ͘ޮతͳ։ൃ͕Ͱ͖ͳ͍ ΤϯδχΞ σβΠφʔ σΟϨΫλʔ Ռ͕ࢥͬͨͷͱҧ͏ اըʹҰ؏ੑ͕ͳ͍ͳ͋ σβΠϯ௨Γ͡Όͳ͍ͧ ԿͩΖ͏͜ͷ༷
͜ͷ࣮Ͱ͍͍͔ͳ
νʔϜϨϏϡʔମ੍ ֤ϑΣʔζʹΦʔφʔ͍Δ͕ɺ શһ͕ͯ͢ͷϑΣʔζʹؔΘΓखΓΛ͙ ༷ܾΊ σβΠϯϨϏϡʔ ϓϩμΫτϨϏϡʔ
νʔϜϨϏϡʔମ੍ ֤ϑΣʔζʹΦʔφʔ͍Δ͕ɺ શһ͕ͯ͢ͷϑΣʔζʹؔΘΓखΓΛ͙ ༷ܾΊ σβΠϯϨϏϡʔ ϓϩμΫτϨϏϡʔ
ϓϩμΫτϨϏϡʔͷৄࡉ ։ൃ࣌ΤϯδχΞ͚ͩͰͳ͘ɺ શһ͕ϨϏϡʔΛߦ͑Δঢ়ଶʹ͢Δ ։ൃ HJUIVCϨϏϡʔ ࢼ৯ϨϏϡʔ
HJUIVCϨϏϡʔ *TTVFBOE1VMM3FRVFTUUFNQMBUFTΛ͔ͬͯΓ͘͢ɺ εΫϦʔϯγϣοτνϟοτͷ༰ΛషͬͯϨϏϡʔͷෑډΛԼ͛Δ
ࢼ৯ϨϏϡʔ 4MBDLͰࢦࣔΛग़͢ͱࣗಈͰΞϓϦΛ%FQMPZ ৗʹ։ൃதͷΞϓϦͷಈ࡞Λ֬ೝͰ͖ΔΑ͏ʹ͢Δ
ϨϏϡʔͷಋೖ ։ൃதʹ༷ʑͳࢹͰϨϏϡʔΛड͚Δ͜ͱͰ ޮతʹ։ൃ͕Ͱ͖Δ ։ൃ HJUIVCϨϏϡʔ ࢼ৯ϨϏϡʔ
νʔϜ։ൃ ΞϓϦΤϯδχΞ σβΠφʔ σΟϨΫλʔ ΈΜͳͰαʔϏε։ൃ εϞʔϧνʔϜ͜ΕͰ্ख͍͍ͬͯ͘Δʂ όοΫΤϯυΤϯδχΞ
νʔϜؒͷใڞ༗ "νʔϜ #νʔϜ $νʔϜ νʔϜྑͯ͘ଞͷνʔϜͷঢ়گΛΒͳ͍ͱɺ ࿈ܞͰ͖ͳ͔ͬͨΓແବͳ͜ͱΛ͢Δ͜ͱ͋Δ
ใΛΦʔϓϯʹ͢Δ ίϛϡχέʔγϣϯৗʹΦʔϓϯʹͯ͠ɺ શһͰڞ༗͢Δ
औΓΈ νʔϜͰͷ։ൃޮͷ্ 2 ૬ޓͷาΈدΓ 7JTJPOͷڞ༗ 1 3
ͲΜͳऔΓΈΛ͍ͯ͠Δ͔ w ΤϯδχΞ͚4LFUDIϫʔΫγϣοϓ w σβΠφʔ͚"OESPJEษڧձ w ΈΜͳͰϏσΦΛݟΔձ w νϟοτͰͷใަͳͲ
σβΠϯˠ࣮ 4UZMF(VJEF Style Guide͕͋ΕUI࣮ͰࠔΔࣄ΄ͱΜͲͳ͍͕ɺ ΤϯδχΞ㲗σβΠφʔͷϑϩʔվળΛͬͱਐΊ͍ͨ
4UZMF(VJEF"QQ 4UZMF(VJEFͰఆٛ͞ΕͨͷΛ"QQͰ֬ೝͰ͖ΔΑ͏ʹ Money Forward App Style Guide App Style Framework
4UZMF(VJEF"QQ 'SBNFXPSLʹ͢Δ͜ͱͰڞ௨ԽͰ͖ .POFZ'PSXBSEΞϓϦʹͦͷ··͑Δ Money Forward App Style Guide App Style
Framework
4UZMF(VJEF"QQ Money Forward App Style Guide App Style Framework 'SBNFXPSLʹ͢Δ͜ͱͰڞ௨ԽͰ͖
.POFZ'PSXBSEΞϓϦʹͦͷ··͑Δ
σβΠφʔʹॻ͚Δఆٛ σβΠφʔStyleΛ͍ͭͰมߋͰ͖Δ
औΓΈ 3 7JTJPOͷڞ༗ νʔϜͰͷ։ൃޮͷ্ 1 2 ૬ޓͷาΈدΓ 2
ηΫγϣφϦζϜͷ νʔϜҰؙͱͳͬͯ։ൃ͍͕ͨ͠ɺ Ͳ͏ͬͨΒͦͷঢ়ଶʹͳΕΔͷ͔ ΤϯδχΞ σβΠφʔ σΟϨΫλʔ ࢲ͕ߟ͑ͨ࠷ߴͷUIʂ ݴΘΕ༷ͨΛ ࡞Ε͍͍ ͜ΕͳΒ্͕͕Δͣ
͜Ε࡞ͬͯʔʂ
7JTJPOʹೲಘײ͕ͳ͍ͱ ࣗͷׂ͔͜͠ͳ͞ͳ͘ͳͬͯ͠·͏ ηΫγϣφϦζϜͷ ΤϯδχΞ σβΠφʔ σΟϨΫλʔ ͜ΕͳΒ্͕͕Δͣ ͜Ε࡞ͬͯʔʂ ࢲ͕ߟ͑ͨ࠷ߴͷUIʂ ݴΘΕ༷ͨΛ
࡞Ε͍͍
7JTJPOͷڞ༗ ΤϯδχΞ σβΠφʔ σΟϨΫλʔ Vision͕ڞ༗Ͱ͖͍ͯΕɺ νʔϜVisionΛ࣮ݱ͢ΔؒͰ͋Δ
ྑ͍νʔϜͷঢ়ଶ 1. શһ͕اըΛ͢Δ͠ɺ༷ΛܾΊΔ 2. Visionʹج͍ͮͯஅ͕Ͱ͖Δ 3. αʔϏεʹؔΘΔͯ͢ͷϑΣʔζʹؔ༩͢Δ اըɺ༷ܾΊ அ ֤ϑΣʔζͷϨϏϡʔ
ྑ͍νʔϜͷঢ়ଶ ΤϯδχΞ σβΠφʔ σΟϨΫλʔ Vision͕ڞ༗Ͱ͖͍ͯΕɺ ։ൃϑϩʔͰΑΓີͳίϛϡχέʔγϣϯ͕औΕ νʔϜͷύϑΥʔϚϯε্͕͢Δ
·ͱΊ
·ͱΊ %FTJHOFS &OHJOFFS 7JTJPOΛڞ༗ͯ͠ ҰؙͱͳͬͯϓϩμΫτΛ࡞ͬͯߦ͜͏ʂ w νʔϜશһ͕શͯͷϑΣʔζʹؔΘΔ͜ͱͰޮԽ͢Δ w νʔϜ7JTJPOΛ࣮ݱ͢ΔؒͰ͋Γɺ͓ޓ͍ͷࣄΛཧղ ͠ใΛఏڙ͋ͬͯ͠ҰॹʹαʔϏεΛ։ൃ͍ͯ͘͠
͓ۚΛલɻਓੜΛͬͱલɻ զʑͷαʔϏεΛ௨ͯ͠ɺݸʑਓͷ͓ۚʹର͢ΔΈෆ͕҆ ܰݮ͠ɺʑͷΒ͠ͷվળເ͕࣮ݱ͢Δɻ ͦͯ͠ɺຊࠃͷʮ͓ۚͷྲྀΕʯ͕มΘΓɺ ΑΓੈͷத͕׆ੑԽ͠ɺ৽ͨͳνϟϨϯδΛੜΈग़͍͢͠ ڥ࡞Γʹߩݙ͢Δ͜ͱ͕ɺզʑ͕ࣄۀΛߦ͏࠷େͷతͰ͋Δɻ ϚωʔϑΥϫʔυ
Ұॹʹಇؒ͘ 7JTJPOΛ࣮ݱ͢Δ͘ Ұॹʹಇؒ͘Λืू͍ͯ͠·͢ʂ
5IBOLZPV