Slide 1
Slide 1 text
© 2019 CLIPLA Inc.
ిࢠΧϧςͳΒͰͷཁʹԠ͑ΔUI/UX
2019/09/14 UX MILK Fest 2019
@shokolateday
Slide 2
Slide 2 text
© 2019 CLIPLA Inc.
2
@shokolateday
20187݄ΫϦϓϥೖࣾ
σβΠϯશൠ
༷ܾΊɺ࣮(VueɺRailsɺRuby)
ϓϩτ࡞
ओ࠵ษڧձ
RESTful
ͱ
̏σβΠφ
3ਓͷ͓͞Μ!"#
͓લ୭ʁ
Slide 3
Slide 3 text
© 2019 CLIPLA Inc.
3
Slide 4
Slide 4 text
© 2019 CLIPLA Inc.
4
ಉ͡άϧʔϓձࣾͷϧφϧφͱఏܞ
Slide 5
Slide 5 text
© 2019 CLIPLA Inc.
5
࢈්ਓՊ൛։ൃத…. ʂʂ
Slide 6
Slide 6 text
© 2019 CLIPLA Inc.
6
Χϧς͔ͩΒͦ͜ҙ͍ࣝͯ͠Δ͜ͱ
؟Պ҉ࣨͰݟΔ͜ͱ͕ଟ͘ɺᚶ͍͠ɻͦ͜ͰμʔΫϞʔυ
(ϞʔυΓସ͑ΛSassͷมͰ৭Λมߋ͍ͯ͠·͢)
Slide 7
Slide 7 text
© 2019 CLIPLA Inc.
7
Ϩηϓτιϑτ
ͱͷ༷౷Ұ
͍ճ͢͠͞
Do
հঢ়ͷςϯϓϨ
ΩʔϘʔυೖྗͷগͳ͞ ηοτ୯Ґͷ
ΧελϚΠζੑ
બͷ͢͠͞
ใͷೖྗ͢͠͞
Slide 8
Slide 8 text
© 2019 CLIPLA Inc.
8
ηΩϡϦςΟΨΠυϥΠϯ ۃྗলུ͠ͳ͍ ϞʔμϧΛݮΒ͢
আͷ͠ʹ͘͞ ͍ͬͯΔͱग़ͯ͘Δػೳ ϥϕϧۃྗຊޠ
ใͷਖ਼֬ੑɺ҆શͷ୲อ
͍͋͏
͓͑
Slide 9
Slide 9 text
© 2019 CLIPLA Inc.
9
؟Պ҉ࣨͰݟΔ͜ͱ͕ଟ͘ɺᚶ͍͠ɻͦ͜ͰμʔΫϞʔυ
(ϞʔυΓସ͑ΛSassͷมͰ৭Λมߋ͍ͯ͠·͢)
ΧϧςͳΒͰͷཁͱͦΕʹԠ͑ͨػೳྫ
Slide 10
Slide 10 text
© 2019 CLIPLA Inc.
10
(ϞʔυΛఆ͠SassͷΈͰ৭Λมߋͯ͠ରԠ)
؟Պ༻ʹμʔΫϞʔυόʔδϣϯΛ༻ҙ
҉ࣨͰݟͯ
ᚶ͘͠ͳ͍Α͏ʹ
Slide 11
Slide 11 text
© 2019 CLIPLA Inc.
11
؟Պ҉ࣨͰݟΔ͜ͱ͕ଟ͘ɺᚶ͍͠ɻͦ͜ͰμʔΫϞʔυ
(ϞʔυΓସ͑ΛSassͷมͰ৭Λมߋ͍ͯ͠·͢)
؟Պݕ߲ࠪ
ݕࠪͳͷͰτϯτϯ
ೖྗͰ͖ΔΑ͏ʹ
͕෯͍ͷͰɺ
ೖྗ͕େม
࣮ࡍಈըͰ͢
Slide 12
Slide 12 text
© 2019 CLIPLA Inc.
12
࣍ճࢦࣔॻΛҰຕʹ
ࢦࣔॻΛ
ઈର1ຕʹೲΊ͍ͨ
(ڧ͍ࢥ͍)
ҹͯ͠ΫϦΞϑΝΠϧʹ
ೖΕΔͷͰ
ͻͬ͘Γฦ͢ͷ͕खؒ
Slide 13
Slide 13 text
© 2019 CLIPLA Inc.
ইප໊ͷम০ޠػೳ
13 อݥྍͷཧղͷͨΊʹ - ްੜ࿑ಇল
ࢀߟ:
ӈࣖ + தࣖԌ
म০ޠ
಄ޠ
+ ͷ͍ٙ
म০ޠ
ඌޠ
ইප໊
Slide 14
Slide 14 text
© 2019 CLIPLA Inc.
ইප໊ͷम০ޠػೳͰମݧͯ͠΄͍͜͠ͱ
14
ೖྗ͍͢͠
ॻ͖͍͢͠
ϊϯ
ΩʔϘʔυͰ
ݴ༿ΛΈ
ཱ͍ͯ͢
࣌ؒͷ
ॖ
ϚεҠಈ
ڑͷ͞
͍͠ػೳ͚ͩͲ
ݟͨ͜ͱ͋Δͷ
Slide 15
Slide 15 text
© 2019 CLIPLA Inc.
ελΠϧʹ͍ͭͯ
εϥΠυαΠζ
ɾA4αΠζʢ29.7cm x 21cmʣ
จࣈ৭(ΧελϜΧϥʔ͔ΒબͰ͖·͢ʣ
ςϯϓϨʔτͰ༻͍ͯ͠Δจࣈ৭
ɾλΠτϧɾຊจɿਂ ◆ #004350
ɾαϒλΠτϧɿάϨʔ ◆ #7c8789
ଞΧελϜΧϥʔ
ɾϩΰΧϥʔɿ੨ ◆ #0090a9
ɾΞΫηϯτΧϥʔɿΦϨϯδ ◆ #e5860c
15
ܗͰ಄ޠɺඌޠ͕
Θ͔ΔΑ͏ʹ
બͯ͠ප໊Λ
ΈཱͯΔͱ͜͏͍͏ײ͡
Slide 16
Slide 16 text
© 2019 CLIPLA Inc.
ҩྍۀքߟ͑Δ͜ͱ͕͍ͬͺ͍ɻ
ະ։ͳ෦͍ͬͺ͍ɻ
Γ͕͍͍ͬͺ͍ɻ
͍͠ɻָ͍͠ɻ
ҩྍ ✖ σβΠϯ =
Slide 17
Slide 17 text
© 2019 CLIPLA Inc.
͋Γ͕ͱ͏͍͟͝·ͨ͠