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
420
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
Adopting Sorbet at Scale
ufuk
77
9.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
How to Ace a Technical Interview
jacobian
277
23k
A Modern Web Designer's Workflow
chriscoyier
694
190k
RailsConf 2023
tenderlove
30
1.1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Into the Great Unknown - MozCon
thekraken
39
1.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Docker and Python
trallard
44
3.4k
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