Patterns of UI Design - Speaker Deck

Patterns of UI Design

by Takuji Ikeda

Slide 1

Slide 1 text

6*σβΠϯͷύλʔϯԽ FOR SMART PHONE ஑ా୓࢘ 2013/05/16 CSS Nite @Co-Edo, Vol.11 ͍ ͚ ͩ ɹ ͨ ͘ ͡

Slide 2

Slide 2 text

ࣗݾ঺հ • ஑ా୓࢘ɹTakuji Ikeda • ΫοΫύουגࣜձࣾɹσβΠφʔ • εϚʔτϑΥϯαΠτͳͲͷαʔϏεσβΠϯΛ୲౰ σβΠϯͷந৅Խ΍ΨΠυϥΠϯԽ SassΛ༻͍ͨUIσβΠϯϑϨʔϜϫʔΫͷߏங • http://tikeda.net/ɹhttp://tikeda.hatenablog.com/ɹ • Twitter: @tikedaɹ

Slide 3

Slide 3 text

͜ͷηογϣϯʹ͍ͭͯ ຊηογϣϯͷେ࿮͸ɺ݄೔ʹൃച͞Εͨॻ੶ εϚʔτϑΥϯͷͨΊͷ6*σβΠϯ Ϣʔβʔମݧʹେ੾ͳϧʔϧͱύλʔϯ ͷ಺༰Λத৺ʹߦ͍·͢ɻ IUUQXXXBNB[PODPKQEQ

Slide 4

Slide 4 text

AGENDA 1. UIͷύλʔϯԽɾϧʔϧԽͱ͸ 2. ϓϥοτϑΥʔϜͷྲّྀ 3. ը໘ύλʔϯ 4. UIίϯϙʔωϯτ 5. ࣮ફࣄྫ 6. ύλʔϯͱϧʔϧ͕΋ͨΒ͢ϝϦοτ

Slide 5

Slide 5 text

1 6*ͷύλʔϯԽɺϧʔϧԽͱ͸ 6*ͷύλʔϯԽɾϧʔϧԽͱ͸ ϓϥοτϑΥʔϜͷྲّྀ ը໘ύλʔϯ 6*ίϯϙʔωϯτ ࣮ફࣄྫ ύλʔϯͱϧʔϧ͕΋ͨΒ͢ϝϦοτ

Slide 6

Slide 6 text

6*ͷύλʔϯԽɺϧʔϧԽͱ͸ • ը໘શମΛίϯϙʔωϯτ୯Ґʹ෼ׂ • ػೳ΍Ϣʔβʔମݧʹ߹Θ֤ͤͯίϯϙʔωϯτʹ ద੾ͳύλʔϯΛબͿ • ֤ίϯϙʔωϯτ͸ϓϥοτϑΥʔϜʹΑͬͯ ద੾ͳσβΠϯΛߟ͑Δ

Slide 7

Slide 7 text

6*ͷύλʔϯԽɺϧʔϧԽͱ͸ • ը໘શମΛίϯϙʔωϯτ୯Ґʹ෼ׂ ΞΫςΟϏςΟ χϡʔε ϗʔϜ ͓ؾʹೖΓ ͓஌Βͤ ઃఆ ͔͋͞Θ͞Μ͕ϑΥϩʔ͠·ͨ͠ খྛ͞Μ͕͓ؾʹೖΓʹ௥Ճ͠·ͨ͠ ΄ͩ͞Μ͕ϑΥϩʔ͠·ͨ͠ ઒ଜ͞Μ͕͓ؾʹೖΓʹ௥Ճ͠·ͨ͠ ๺ඌ͞Μ͕ϑΥϩʔ͠·ͨ͠ ϝϞҰཡ Ωϟϯηϧ ެ։ઃఆ શһʹެ։ ͱ΋ͩͪʹެ։ ඇެ։ ֬ఆ λΠτϧ ௨஌͠ͳ͍ શһʹެ։ ൐͞Μ͕͓ؾʹೖΓʹ௥Ճ͠·ͨ͠ ᖒా͞Μ͕ϑΥϩʔ͠·ͨ͠ Ϟʔμϧ ΢Οϯυ΢ ϥδΦϘλϯ ςΩετϑΟʔϧυ όοΫφϏήʔγϣϯ λϒܕφϏήʔγϣϯ Ϧετ ϔομʔ ηάϝϯςου ίϯτϩʔϧ ΞΠίϯ ϑολʔ

Slide 8

Slide 8 text

6*ͷύλʔϯԽɺϧʔϧԽͱ͸ • ػೳ΍Ϣʔβʔମݧʹ߹Θ֤ͤͯίϯϙʔωϯτʹ ద੾ͳύλʔϯΛબͿ

Slide 9

Slide 9 text

6*ͷύλʔϯԽɺϧʔϧԽͱ͸ • ֤ίϯϙʔωϯτ͸ϓϥοτϑΥʔϜʹΑͬͯ ద੾ͳσβΠϯ͕ҟͳΔ৔߹͕͋Δ

Slide 10

Slide 10 text

6*ͷύλʔϯԽɺϧʔϧԽͱ͸ ύλʔϯA ύλʔϯB ύλʔϯC ίϯϙʔωϯτ ը໘ભҠ ը໘ભҠ ը໘ ಋೖ τοϓ Ұཡ ৄࡉ ೖྗɾ؅ཧ ϓϥοτϑΥʔϜʢiPhone App, Android App, Smartphone Siteʣ

Slide 11

Slide 11 text

6*ͷύλʔϯԽɺϧʔϧԽͱ͸ UIΛίϯϙʔωϯτԽͯ͠ߟ͑Δ͜ͱ͸ σβΠϯͷҾ͖ग़͠Λ૿΍͢͜ͱͱ΋ݴ͑Δ͕ 6*ߏங͢Δ্Ͱɺ αʔϏε։ൃΛ͢Δ্Ͱͷͭͷ ํ๏࿦

Slide 12

Slide 12 text

2 ϓϥοτϑΥʔϜͷྲّྀ 6*ͷύλʔϯԽɾϧʔϧԽͱ͸ ϓϥοτϑΥʔϜͷྲّྀ ը໘ύλʔϯ 6*ίϯϙʔωϯτ ࣮ફࣄྫ ύλʔϯͱϧʔϧ͕΋ͨΒ͢ϝϦοτ

Slide 13

Slide 13 text

ϓϥοτϑΥʔϜͷྲّྀ iPhone Android iPhone App Android App Smart Phone Site

Slide 14

Slide 14 text

ϓϥοτϑΥʔϜʹΑΔը໘ͷҧ͍ ৯΂ϩά Android App A B C Smart phone Site iPhone App

Slide 15

Slide 15 text

2VPSB iPhone App A B C Android App Smartphone Site ϓϥοτϑΥʔϜʹΑΔը໘ͷҧ͍

Slide 16

Slide 16 text

'BDFCPPL A B C Android App Smart phone Site ϓϥοτϑΥʔϜʹΑΔը໘ͷҧ͍ iPhone App ? ? ?

Slide 17

Slide 17 text

? ϓϥοτϑΥʔϜʹԊ͏ϝϦοτͱ͸ʁ ϓϥοτϑΥʔϜ໰Θͣଗ͑ΔϝϦοτͱ͸ʁ

Slide 18

Slide 18 text

ϓϥοτϑΥʔϜʹԊ͏৔߹ͷϝϦοτͷࣄྫ • ͍ͭ΋࢖ͬͯΔ΋ͷͱಉ͡UIʹ͢Δ͜ͱͰ Ϣʔβʔ͕ҧ࿨ײͳ͍ૢ࡞͕ՄೳʹͳΔ • ֤ϓϥοτϑΥʔϜͷಛ௃తͳػೳΛ࢖͏͜ͱ͕Ͱ͖Δ • ։ൃͷ෼཭͕͠΍͍͢

Slide 19

Slide 19 text

ϓϥοτϑΥʔϜʹԊΘͳ͍৔߹ͷϝϦοτͷࣄྫ • Ϣʔβʔ͕ϓϥοτϑΥʔϜΛม͑ͯ΋ ͜Ε·Ͱ௨Γͷ࢖͍উखΛఏڙͰ͖Δ • ଍ฒΈΛἧ͑ͨػೳͷఏڙ΍ ϒϥϯσΟϯάΛ͢Δ͜ͱ͕Ͱ͖Δ • σβΠϯ΍։ൃͷϓϥοτϑΥʔϜΛ౷߹Ͱ͖Δ

Slide 20

Slide 20 text

3 ը໘ύλʔϯ 6*ͷύλʔϯԽɾϧʔϧԽͱ͸ ϓϥοτϑΥʔϜͷྲّྀ ը໘ύλʔϯ 6*ίϯϙʔωϯτ ࣮ફࣄྫ ύλʔϯͱϧʔϧ͕΋ͨΒ͢ϝϦοτ

Slide 21

Slide 21 text

৭ΜͳλΠϓͷΞϓϦͦͯ͠ ৭ΜͳλΠϓͷը໘͕͋Γ·͕͢

Slide 22

Slide 22 text

ը໘ύλʔϯҰཡ ಋೖը໘ τοϓը໘ Ұཡը໘ ৄࡉը໘ ೖྗ ɾ ؅ཧը໘ छྨఔ౓ʁ 5

Slide 23

Slide 23 text

ը໘ύλʔϯҰཡ ಋೖը໘ • εϓϥογϡ • ΢ΥʔΫεϧʔ • ίʔνϚʔΫ • ΤϯϓςΟϝοηʔδ τοϓը໘ • ϙʔλϧ • Ϣʔβʔ • ECɹ • ίʔϙϨΠτ Ұཡը໘ • ݕࡧ݁Ռ • λΠϜϥΠϯ • ΪϟϥϦʔ • ΞΫςΟϏςΟ ৄࡉը໘ • ࣸਅɾಈը • هࣄ • Ϛοϓ • ঎඼ ೖྗ ɾ ؅ཧը໘ • αΠϯΞοϓɾαΠϯΠϯ • ౤ߘ • ΧϝϥΩϟϓνϟ • ઃఆɾ؅ཧ छྨ 5 ֤ύλʔϯ

Slide 24

Slide 24 text

ಋೖը໘ τοϓը໘ Ұཡը໘ ৄࡉը໘ ೖྗ ɾ ؅ཧը໘ ը໘ύλʔϯҰཡ छྨ͕େ׆༂ʂ 2

Slide 25

Slide 25 text

Ұཡը໘ ݕࡧ݁Ռ λΠϜϥΠϯ ΪϟϥϦʔ

Slide 26

Slide 26 text

ৄࡉը໘ هࣄ ࣸਅɾಈը ঎඼

Slide 27

Slide 27 text

ݕࡧαʔϏε ΫοΫύου ʢSMART PHONE SITEʣ τοϓ Ұཡ Ұཡ ৄࡉ Ұཡ Ұཡ Ұཡ Ұཡ Ұཡ Ұཡ ݕࡧ݁Ռ ݕࡧ݁Ռ ΧςΰϦ αϒΧςΰϦ ఼ಊೖΓϨγϐ ΧςΰϦ ϨγϐҰཡ .:ϝχϡʔ Ϩγϐ αʔνϑΥʔϜ ηάϝϯςουίϯτϩʔϥ υϦϧμ΢ϯ υϦϧμ΢ϯ λϒܕφϏήʔγϣϯ ਨ௚ܕϦετ μογϡϘʔυ

Slide 28

Slide 28 text

ը໘ΛύλʔϯԽ͢Δҙٛ • ໨తΛ͸͖ͬΓͱͤ͞Δ͜ͱͰγϯϓϧͰ εϐʔσΟͳը໘ઃܭ͕͠΍͘͢ͳΔ • ը໘ͱը໘ͷߦ͖དྷʢಋઢʣΛҙࣝͨ͠ UIίϯϙʔωϯτͷ഑ஔ͕Ͱ͖Δ • ։ൃ్தஈ֊Ͱ΋Ҿ͍ͨࢹ఺ͰϓϩδΣΫτΛ ݟͭΊ௚͢͜ͱ͕Ͱ͖Δ

Slide 29

Slide 29 text

4 6*ίϯϙʔωϯτ 6*ͷύλʔϯԽɾϧʔϧԽͱ͸ ϓϥοτϑΥʔϜͷྲّྀ ը໘ύλʔϯ 6*ίϯϙʔωϯτ ࣮ફࣄྫ ύλʔϯͱϧʔϧ͕΋ͨΒ͢ϝϦοτ

Slide 30

Slide 30 text

6*ίϯϙʔωϯτ • جຊίϯϙʔωϯτ • φϏήʔγϣϯ / ίϯτϩʔϧ • Ϧετ • ϑΥʔϜ • ϝοηʔδ • ৘ใͷϏδϡΞϧԽ • ΞΠίϯ • Ϟʔγϣϯ • ϏδϡΞϧελΠϧ

Slide 31

Slide 31 text

جຊίϯϙʔωϯτ ଟ͘ͷεϚʔτϑΥϯΞϓϦ΍αΠτͰ ༻͍ΒΕ͍ͯΔɺը໘Λߏ੒͢Δ্Ͱ ͔ܽ͢͜ͱͷͰ͖ͳ͍جຊతͳ ϨΠΞ΢τཁૉ΍6*ཁૉɻ

Slide 32

Slide 32 text

ϔομʔ wը໘ͷ্෦ͷΤϦΞ wJ1IPOFͰ͸φϏήʔγϣϯόʔɺ"OESPJEͰ͸ ϝΠϯΞΫγϣϯόʔͱݺͿɻΞϧϑΝΛ෇͚Δ৔߹΋͋Δ wݱࡏͷը໘΍λΠτϧΛࣔ͢ɻτοϓͰͳ͍৔߹͸ લͷը໘ʹ໭ΔφϏήʔγϣϯΛ഑ஔɻ ओཁͳΞΫγϣϯΛ഑ஔ͢Δ wεϚʔτϑΥϯαΠτͷ৔߹͸άϩʔόϧφϏήʔγϣϯͷ ໾ׂΛ୲͏ࣄ͕ଟ͍

Slide 33

Slide 33 text

ϔομʔ

Slide 34

Slide 34 text

λϒܕφϏήʔγϣϯ wJ1IPOFͰ͸φϏήʔγϣϯόʔɺ"OESPJEͰ͸ ϝΠϯΞΫγϣϯόʔͱݺͿɻΞϧϑΝΛ෇͚Δ৔߹΋͋Δ ը໘தԝʹը໘λΠτϧɻ ࠨଆʹલͷը໘ͷλΠτϧ໊ΛೖΕͨόοΫϘλϯɻ ӈଆʹओཁͳΞΫγϣϯϘλϯ ը໘ࠨଆʹը໘λΠτϧɻ ͦͷ͞ΒʹࠨʹόοΫϘλϯɻ ը໘ӈଆʹओཁͳΞΫγϣϯϘλϯ J1IPOFφϏήʔγϣϯόʔ "OESPJEϝΠϯΞΫγϣϯόʔ

Slide 35

Slide 35 text

௨஌ɾϝοηʔδ Ϣʔβʔ͕࣮ߦ͠Α͏ͱ͍ͯ͠Δߦಈ͕ ؒҧ͍Ͱ͸ͳ͍͔ࣄલʹܯࠂͯ֬͠ೝ͢Δ ͱ͖΍Ϣʔβʔ͕औͬͨߦಈͷޙʹ ϑΟʔυόοΫͯ͠΍ΓऔΓΛ͢Δͱ͖ ͳͲʹ༻͍·͢ɻ

Slide 36

Slide 36 text

Ϟʔμϧϝοηʔδ wը໘ʹΦʔόʔϨΠ͢Δɻ ΞΫγϣϯΛ׬ྃͤ͞ͳ͍ݶΓ ݩͷը໘ͷૢ࡞͕Ͱ͖ͳ͍ wJ1IPOFͰ͸Ξϥʔτɺ"OESPJEͰ΋ ඪ४తʹ࢖ΘΕΔϝοηʔδύλʔϯɻ ಛʹ"OESPJEͷ৔߹ɺϞʔμϧ͸ ϝοηʔδʹݶΒͳͣར༻͞ΕΔ

Slide 37

Slide 37 text

Ϟʔμϧϝοηʔδ w6*͚ͩͰ͸ͳ͘ར༻͢Δࡍ͸Ϙλϯͷϥϕϧʹ΋஫ҙ͕ඞཁ A B

Slide 38

Slide 38 text

Ϟʔμϧϝοηʔδ w׬ྃϘλϯ͚ͩ wࣗಈతʹด͡Δ

Slide 39

Slide 39 text

Ϟʔμϧϝοηʔδ wJ1IPOFͷ৔߹͸Ωϟϯηϧͷ Ґஔ͸ࠨଆͱ͸ݶΒͳ͍ wഁյߦҝͷଓߦ͸ࠨଆʹϘλϯ͕ ͘Δ͜ͱ΋͋Δ wͨͩ͠ɺڧௐ͞ΕΔϘλϯ͸ ӈଆʹݻఆ͞Ε͍ͯΔ J04)VNBO*OUFSGBDF(VJEFMJOF

Slide 40

Slide 40 text

ϞʔυϨεϝοηʔδ wը໘ʹΦʔόʔϨΠ͢Δɻ ݩͷը໘ͷૢ࡞΋ࣗ༝ʹՄೳɻ ϝοηʔδ͸ࣗಈϑΣʔυΞ΢τ͢Δ w"OESPJEͰ͸5PBTU͕ඪ४తʹ࢖ΘΕΔ ϝοηʔδύλʔϯ

Slide 41

Slide 41 text

ϞʔυϨεϝοηʔδ

Slide 42

Slide 42 text

? ϞʔμϧͷϝϦοτͱ͸ʁ ϞʔυϨεͷϝϦοτͱ͸ʁ

Slide 43

Slide 43 text

ϞʔμϧͱϞʔυϨεͦΕͧΕͷར఺ͷࣄྫ wϢʔβʔͷߦಈΛࣄલʹ ஫ҙ͢Δͷʹద͍ͯ͠Δͷ͕ Ϟʔμϧɺࣄޙʹ֬ೝ͢Δͷ͕ ϞʔυϨε wϞʔμϧ͸࣮֬ʹϝοηʔδΛ ఻͑ΒΕΔ൓໘ɺଟ༻͢Δͱ ϢʔβʔʹετϨεɻ ϞʔυϨε͸࣮֬ʹ఻͑Δ ༻్ʹ͸޲͔ͳ͍ɻϢʔβʔͷ ҙਤͨ͠ߦಈͰ࢖͏ͷʹద͢

Slide 44

Slide 44 text

৘ใͷϏδϡΞϧԽ ৘ใΛϏδϡΞϧԽ͢Δ͜ͱͰจষͰ આ໌͢ΔͷͰ͸ͳ͘ແݴޠͰࢹ֮తʹ ෼͔Γ΍͘͢఻͑ΔͨΊͷޮՌ͕͋Γ·͢ɻ ·ͨϏδϡΞϧදݱΛ޻෉ָ͠͠͞΍ ໘ന͞ͷԋग़ޮՌ΋࣋ͪ߹Θ͍ͤͯ·͢ɻ

Slide 45

Slide 45 text

৘ใͷϏδϡΞϧԽ ಡΈࠐΈத ఺ ౦ژ౎ ਆಸ઒ݝ ઍ༿ݝ ࡛ۄݝ ܈അݝ ҵ৓ݝ

Slide 46

Slide 46 text

ϨʔςΟϯά wίϯςϯπΛ౤ߘͨ͠Ϣʔβʔʹରͯ͠ϑΟʔυόοΫΛฦ͢ ʢධՁɾڞײͳͲʣ wίϯςϯπͷධՁΛୈࡾऀʹ఻͑Δ wࣗ෼ͷͨΊͷ෼ྨͱ͢Δ ϨΠςΟϯάͷओཁͳͭͷ໾ׂ

Slide 47

Slide 47 text

ϨʔςΟϯά ϓϥεධՁͷΈ ϓϥεධՁͱϚΠφεධՁ දݱͷ෯͕ڱ͍ දݱͷ෯͕޿͍

Slide 48

Slide 48 text

ϨʔςΟϯά w΋ͬͱ΋γϯϓϧͳදݱͳͷͰ ෼͔Γ΍͘͢ɺ ίετ΋௿͍ wʮ͍͍Ͷʂʯͱ͍͏ϥϕϦϯάʹ པΑΔ͜ͱͰίϯςϯπʹΑͬͯ ධՁ͠ʹ͍͕࣠͘ੜ·Ε ળ͠ѱ͠ΛܭΔ͜ͱʹ͸೉͍͠ wࣗ෼ͷͨΊͷ෼ྨʹ΋࢖͑ ར༻ൣғ͕޿͍

Slide 49

Slide 49 text

ϨʔςΟϯά wྑ͍ධՁͱѱ͍ධՁΛ૬ରతʹ ݟΔ͜ͱ͕Ͱ͖ΔͷͰɺ ୈࡾऀʹͱͬͯ͸ίϯςϯπͷ ࣝผ͕͠΍͍͢ wѱ͍ධՁ΋Φʔϓϯʹ͓ͯ͘͠ ͜ͱͰɺίϯςϯπ౤ߘऀ͕ ѱ͍ධՁ͕ू·ΔͰ͋Ζ͏ ίϯςϯπͷ౤ߘΛ཈ࢭ͢Δ ޮՌ͕͋Δ

Slide 50

Slide 50 text

ϨʔςΟϯά wແݴޠͰϨʔςΟϯάͷҙਤ΋ ಡΈऔΓ͕Մೳ wΞΠίϯΛ޻෉͢Δ͜ͱͰ ίϛϡχςΟΛָ͘͠ԋग़Ͱ͖ ੈք؍ͷߏங͕Մೳ

Slide 51

Slide 51 text

ϨʔςΟϯά wஈ֊͕ෳ਺͋Δ͕ݸਓʹΑͬͯ ج४ͷײ͕֮ҟͳΔɻ ͦͷͨΊϨʔςΟϯά͢Δଆ͸ োน͕ߴ͍ wෳ਺ʹ౉ͬͯஈ֊͕͋ΔͨΊ ୈࡾऀ͕ड͚औΕΔ৘ใ͸ ଞͷύλʔϯΑΓ΋༗ӹ

Slide 52

Slide 52 text

ΞΠίϯ ࢹ֮తͳϝλϑΝʔΛ༻͍ͯ ػೳ΍ը໘ͷ৅௃Λදݱͨ͠΋ͷɻ ϥϕϧʹཔΔ͜ͱͳ͘ࠃࡍతͰ ίϯύΫτͳ6*ΛߏஙͰ͖Δͷ͕ར఺ɻ ͔͠͠ແཧͳΞΠίϯԽ΍ແடংͳ ΞΠίϯ͸ࠞཚΛ༩͔͑Ͷͳ͍ɻ

Slide 53

Slide 53 text

ΞΠίϯ A B C D E F G H I J

Slide 54

Slide 54 text

? ͦΕͧΕͷΞΠίϯͷ໾ׂ͸ʁ

Slide 55

Slide 55 text

6 ࣮ ફ ࣄ ྫ 6*ͷύλʔϯԽɾϧʔϧԽͱ͸ ϓϥοτϑΥʔϜͷྲّྀ ը໘ύλʔϯ 6*ίϯϙʔωϯτ ࣮ફࣄྫ ύλʔϯͱϧʔϧ͕΋ͨΒ͢ϝϦοτ

Slide 56

Slide 56 text

Engineer + Designer 50ਓ

Slide 57

Slide 57 text

࣮ફࣄྫ COOKPAD

Slide 58

Slide 58 text

࣮ફࣄྫ ΫοΫύου಺ͰͷύλʔϯԽɾϧʔϧԽͷ࣮ફ 1. COOKPAD UI Design Rules (Document) 2. COOKPAD UI Development Rules (Document) 3. COOKPAD CSS / Sass Coding Style (Document) 4. Sara Design Framework (Sass)

Slide 59

Slide 59 text

࣮ફࣄྫ COOKPAD UI Desgin Rules •Ϩγϐ΁ͷϦϯΫ৭͸྘ʹ͢Δ •ਨ௚ܕϦετίϯϙʔωϯτͰ Ϩγϐը૾ͷճΓࠐΈ͸جຊతʹࠨ •ϥϯΩϯάίϯϙʔωϯτͰ্ԼΛ ࣔ͢໼ҹͷ৭͸ Ξοϓ͕ΦϨϯδɺμ΢ϯ͕ϒ ϧʔɺεςΠ͕ΞΠϘϦʔͱ͢Δ

Slide 60

Slide 60 text

࣮ફࣄྫ COOKPAD UI Desgin Rules PC Smartphone Site iPhone App

Slide 61

Slide 61 text

࣮ફࣄྫ Sara Design FrameworkʢSassʣ

Slide 62

Slide 62 text

࣮ફࣄྫ Sara Design FrameworkʢSassʣ

Slide 63

Slide 63 text

࣮ફࣄྫ Sara Design FrameworkʢSassʣ

Slide 64

Slide 64 text

࣮ફࣄྫ •UI͸ύλʔϯԽͰ͖ͯ΋Ϣʔβʔମݧ·ͰύλʔϯԽͯ͠ ϩδΧϧʹߟ͑Δ͜ͱ͸Ͱ͖ͳ͍ •ύλʔϯԽ͞ΕͨUIΛ༻͍ͯ΋ҙਤͨ͠࢖͍ํʹͳ͍ͬͯΔ͔͸ ։ൃऀͷཧղ͍ͩ͠ •ύλʔϯʹറΒΕ͗ͯ͢ɺඞཁͰ͋Δ΂͖ίϯϙʔωϯτ͕ ࡞ΒΕʹ͍͘ ՝୊ʹײ͍ͯ͡Δ͜ͱ υΩϡϝϯςʔγϣϯ΋େ੾ ͪΌΜͱߟ͑Δ͜ͱ͕େ੾ ࣗ༝ͳൃ૝Ͱߟ͑Δ͜ͱ΋େ੾

Slide 65

Slide 65 text

7 ύλʔϯͱϧʔϧ͕΋ͨΒ͢ϝϦοτ 6*ͷύλʔϯԽɾϧʔϧԽͱ͸ ϓϥοτϑΥʔϜͷྲّྀ ը໘ύλʔϯ 6*ίϯϙʔωϯτ ࣮ફࣄྫ ύλʔϯͱϧʔϧ͕΋ͨΒ͢ϝϦοτ

Slide 66

Slide 66 text

αʔϏε։ൃͰͷՁ஋ ։ൃνʔϜ ։ൃνʔϜ ։ൃνʔϜ • σβΠφʔ͕গͳ͍৔߹ σβΠφʔ ΤϯδχΞ ΤϯδχΞ ΤϯδχΞ ύλʔϯͱϧʔϧʹͷͬͱͬͨ6*ߏஙʹΑΓϦιʔεΛܰݮͯ͠ɺ ͦΕҎ֎ͷ৬छͷਓͰҰఆҎ্ͷΫΦϦςΟ·Ͱಋ͘ σΟϨΫλʔ σΟϨΫλʔ σΟϨΫλʔ ύλʔϯͱϧʔϧ

Slide 67

Slide 67 text

։ൃνʔϜ • ૊৫͕େ͖ͳ৔߹ σβΠφʔ ΤϯδχΞ ύλʔϯͱϧʔϧΛશελοϑ͕஌Δ͜ͱʹΑΓڞ௨ݴޠ΍ڞ௨ͷ Ձ஋؍Λϕʔεʹͨ͠։ൃ͕͠΍͘͢ͳΔ σΟϨΫλʔ ΤϯδχΞ ϓϩσϡʔαʔ σβΠφʔ σΟϨΫλʔ ύλʔϯͱϧʔϧ αʔϏε։ൃͰͷՁ஋

Slide 68

Slide 68 text

։ൃνʔϜ ։ൃνʔϜ ։ൃνʔϜ • ։ൃຖʹσβΠφʔ͕ผΕΔ৔߹ ύλʔϯͱϧʔϧ ΤϯδχΞ ΤϯδχΞ ΤϯδχΞ ҟͳΔϓϩδΣΫτͰ͋ͬͯ΋ɺύλʔϯ΍ϧʔϧ͸มΘΒͳ͍Α͏ʹ ͢Δ͜ͱͰɺϦιʔεͷܰݮɺϢʔβʔମݧͷඪ४Խ͕Ͱ͖Δ σΟϨΫλʔ σΟϨΫλʔ σΟϨΫλʔ σβΠφʔ σβΠφʔ σβΠφʔ αʔϏε։ൃͰͷՁ஋

Slide 69

Slide 69 text

։ൃνʔϜ • ܧଓతͳ։ൃΛଓ͚Δ৔߹ ύλʔϯͱϧʔϧ ΤϯδχΞ ύλʔϯ΍ϧʔϧΛ࣋ͭ͜ͱͰɺϢʔβʔ͔ΒಘͨϑΟʔυόοΫ͕ ՃΘΓΑΓՁ஋ͷߴ͍6*։ൃͷج൫Λ࣋ͭ͜ͱ͕Ͱ͖Δ σΟϨΫλʔ σβΠφʔ ։ൃνʔϜ ΤϯδχΞ σΟϨΫλʔ σβΠφʔ ։ൃνʔϜ ΤϯδχΞ σΟϨΫλʔ σβΠφʔ ύλʔϯͱϧʔϧ ύλʔϯͱϧʔϧ αʔϏε։ൃͰͷՁ஋

Slide 70

Slide 70 text

࠷ޙʹ • ύλʔϯ΍ϧʔϧԽͷಋೖ͸ͻͱͭͷํ๏࿦Ͱ͋ΓɺશͯͰ͸ͳ͍ • ύλʔϯ΍ϧʔϧʹ࢖ΘΕΔଆͰ͸ͳ͘࡞ͬͯߦཱ͘৔ͱͯ͠ ͍ͭ΋ΫϦΤΠςΟϒʹ • ։ൃํ๏ͱͯ͠ͷଊ͑ํ͚ͩͰ͸ͳ͘ɺ ϢʔβʔϝϦοτͷͨΊͰ͋Δ͜ͱΛ๨Εͣʹ • ύλʔϯԽ΍ϧʔϧԽͷٯɺʮҰաੑʯʮܳज़ੑʯʮݸੑʯͳͲ ϢχʔΫͳཁૉʹ΋໨Λ޲͚ɺ৺ऒ͔ΕΔσβΠϯΛ

Slide 71

Slide 71 text

Ҏ্ɺ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ ஑ా୓࢘ɹ!UJLFEBUBLVKJJLFEB!DPPLQBEDPN ΫοΫύουͰ͸ σβΠφʔɾΤϯδχΞΛ ੵۃ࠾༻தͰ͢ʂ ͝ڵຯ͋Δํ͸ੋඇΞΫηε͠ ͍ͯͩ͘͞ɻ ຊ೔ͷ಺༰ͷଟ͘͸ ʮεϚʔτϑΥϯͷ ͨΊͷ6*σβΠϯ Ϣʔβʔମݧʹඞཁͳ ϧʔϧͱύλʔϯʯ ͔Βൈਮ͍ͯ͠·͢ɻ http://info.cookpad.com/jobs/?affcd=eetmm http://www.amazon.co.jp/dp/4797372303/