Practice of design guidelines in production

Slide 1

Slide 1 text

αʔϏεӡ༻ͷޮ཰Λ্͛ΔͨΊ ͷσβΠϯΨΠυϥΠϯ੍࡞ DeNAɹUI designer Marika Jufuku Young Donuts vol.1

Slide 2

Slide 2 text

৽ଔͰ%F/"ʹೖࣾͯ͠ ৽نࣄۀ։ൃ෦ͰͭͷϓϩδΣΫτͷϦʔυσβΠφʔΛ͍ͯ͠·͢ ͨͩσβΠφʔ͕ਓͳ͚ͩ ࣗݾ঺հ

Slide 3

Slide 3 text

ͱ͜ΖͰσβΠϯΨΠυͬͯ ԿͷͨΊʹ࡞Δͷʁ ຊ୊

Slide 4

Slide 4 text

l೰Ή͕࣌ؒѹ౗తʹݮΔl lτϯϚφ͕ͿΕͳ͍z lσβΠϯͷ֬ೝ࡞ۀ͕ݮΔz lίʔυ͕៉ྷʹͳΔz ೲಘͨ͠΋ͷͮ͘ΓΛ࠷୹ίʔεͰ࣮ݱ ͰͦΕͳΓʹ࡞ΕΔz ϥϯσΟϯάڧԽz lࣗ෼ͰͦΕͳΓʹ࡞ΕΔz lϒϥϯσΟϯάڧԽz ඞཁ࠷௿ݶͷύʔπΛ ૊Έ߹Θ͍ͤͯ͘࡞ۀͰɺ σβΠϯͷઆ໌ॻΛ࣋ͬͨͷͱ ಉવ σβΠφʔͷखΛआΓΔ ΄ͲͰ΋ͳ੍͍࡞෺Λ Designer Engineer Business Business ࢲͷղऍ

Slide 5

Slide 5 text

͍ͪ͹Μ࠷ॳʹ΍Δ͜ͱ͸ɺζόϦ ϝΠϯͰ࢖༻͢Δ਺ࣈͷબఆ 0123456789 ࣮ફ

Slide 6

Slide 6 text

ࢲͷ৔߹ ͜ΕͰ΋͏਺஋ʹ໎͏͜ͱ͸ͳ͍ͧʂ ϝΠϯɿͷഒ਺ɹɹαϒɿͷഒ਺ ͦͷଞɿۮ਺ 0123456789 ਺஋ͷબఆ

Slide 7

Slide 7 text

࠷খɹɹɹɹɹɹϝΠϯɹɹɹɹɹɹݟग़͠ɹɹɹɹɹɹڧௐ 10px 10px 12px 12px 14px 14px 16px 16px 0123456789 ϑΥϯταΠζ ͜ΕͰ΋͏ϑΥϯταΠζʹ໎͏͜ͱ͸ͳ͍ͧʂ αΠζ͝ͱʹ໾ׂΛৼΓ෼͚Δ

Slide 8

Slide 8 text

ΧϥʔɿάϨʔεέʔϧ ͜ΕͰ΋͏഑৭ʹ໎͏͜ͱ͸ͳ͍ͧʂ ͱɺ͜͜Ͱ͓ؾ͖ͮͩΖ͏͔ʜ σβΠϯΛ͢Δ্Ͱ࠷௿ݶ࢖͏άϨʔεέʔϧΛબఆ #5C646C #999999 #CCCCCC #F2F2F2 #FFFFFF #272727 จࣈ ϝΠϯ จࣈ ิ଍ ΞΠίϯ / จࣈ ϑΥʔϜ಺ ઢ / എܠ จࣈΞΠίϯഎܠ Disabled / എܠ

Slide 9

Slide 9 text

େࣄͳ͜ͱɿͦͷ ͨͩ਺஋΍৭ΛఆΊΔ͚ͩ͡Όޙ͔Β໎͍͕ੜͯ͡ҙຯ͕ͳ͍ͷͰ Ͱ͖Δ͚ͩ۩ମతͳ࢖༻༻్Λॻ͘ ϥϕϧ͕͋Δͱ Θ͔Γ΍͍͢Ϛϯʂ

Slide 10

Slide 10 text

Χϥʔɿ͞͠৭ ࠷ߴͰ΋৭ʹ཈͑Δͷ͕Φεεϝ #FFCD00 #29CCB1 #FFD01E ͢΂ͯ ϝΠϯΧϥʔ ϝΠϯΧϥʔ #FF5858 #FF5858 -JWF ΞΠίϯϘλϯ #FFB800 #FF5858 /FX ࿥ը #44C0EA 5XJUUFS Young_donuts Mirrativ Mirracle Mirracle

Slide 11

Slide 11 text

Χϥʔɿಁա ಁա΋ࠁΈͰແ਺ʹଘࡏͤ͞ΔΑΓܾΊ·͠ΐ͏ ࢲ͸ಁաʹ͸༻్͸͚ͭͣɺλΠϛϯάͰ߹ͬͨ΋ͷΛ࢖͍·͢ #FFFFFF 80% #000000 50% #FFFFFF 50% #000000 30% #FFFFFF 30% #000000 80%

Slide 12

Slide 12 text

Χϥʔɿάϥσʔγϣϯ άϥσʔγϣϯ͸ࢹೝੑͱॏ͘ͳΓ͗͢ͳ͍ͷॏࢹͰ Λɺ͍ͭ΋࢖༻ #000000 0% - 80%

Slide 13

Slide 13 text

େࣄͳ͜ͱɿͦͷ 4LFUDIͰσβΠϯ͢Δਓ͸ΧϥʔΨΠυ͕ܾ·Ε͹ ύϨοτͰ৭Λ؅ཧͯ͠ޮ཰Խʂ 4LFUDIͰσβΠϯ͢Δਓ͸ΧϥʔΨΠυ͕ܾ·Ε͹ ύϨοτͰ৭Λ؅ཧͯ͠ޮ཰Խʂ ಁա΋άϥσʔγϣϯ΋ هԱͰ͖ΔͷͰ௒ศརʙ

Slide 14

Slide 14 text

ϘλϯɿαΠζͱύλʔϯ ࢲ͸Ϙλϯͷ)FJHIUͷαΠζͱจࣈαΠζΛϦϯΫͯ͠هࡌ͍ͯ͠·͢ 24px Size Height Pattern 32px 40px 12px Font 12px 14px 4px ؙ֯ શؙ֯

Slide 15

Slide 15 text

ϘλϯɿޮՌ ͍Ζ͍Ζࢼͨ݁͠Ռɺ͜ͷදͩͱൈ͚࿙Ε͕ͳ͍ Default (OFF) Disabled Pressed ON Button Text Solid #29CCB1 #29CCB1 # #009980 #29CCB1 #29CCB1 / 30% #FFFFFF #FFFFFF # #F2F2F2 #FFFFFF #FFFFFF / 30% #999999 # - #000000 50% #FFFFFF # - #29CCB1 bg Button Button Button #5C646C # - #FFFFFF Button Button Button

Slide 16

Slide 16 text

࣮ફɿϒϩάΛσβΠϯͯ͠ΈΔ ४උ͸੔͍·ͨ͠ʂ:PVOH%POVUTͷϒϩάͷσβΠϯͰ࣮ફͯ͠Έ·͠ΐ͏ Header ϩΰ ϝχϡʔϘλϯ هࣄ ɹαϜωΠϧը૾ ɹλΠτϧ ɹචऀΞΠίϯ ɹචऀ*% ɹΧςΰϦλά ɹ7JFX਺ ɹϖʔδΠϯδέʔλ هࣄ ɹαϜωΠϧը૾ ɹλΠτϧ ɹචऀΞΠίϯ ɹචऀ*% ɹΧςΰϦλά ɹ7JFX਺ ɹϖʔδΠϯδέʔλ ϦϯΫ ɹ:PVOH%POVUTͱ͸ ɹར༻ن໿ ɹϓϥΠόγʔϙϦγʔ ɹ͓໰͍߹Θͤ ɹϩΰ ɹ4/4ΞΠίϯ ϦϯΫ ɹ:PVOH%POVUTͱ͸ ɹར༻ن໿ ɹϓϥΠόγʔϙϦγʔ ɹ͓໰͍߹Θͤ ɹϩΰ ɹ4/4ΞΠίϯ Contents Contents Footer Footer

Slide 17

Slide 17 text

࣮ફɿϫΠϠʔϑϨʔϜ Citrrus 100% 12 11 Name View Title Name View Title Category Image Category Logo Menu Citrrus 100% 12 11 Logo Menu ʜ Logo -JOL 4/4 Margin 4px 8px 12px 24px Icon / Image 24px 32px 48px 160px Tap Area 40px 88px Line 1px

Slide 18

Slide 18 text

࣮ફɿάϥϑΟοΫૠೖ Citrrus 100% 12 11 DESIGN CORDING Marika_Jufuku 295 View Makibao 9267 View GOGO 1285 View एख*5ΫϦΤΠλʔूஂʮ:PVOH %POVUTʯઃཱͷ͓஌Βͤͱࠓޙͷ EVENT CORDING GOGO 1285 View ϙέϞϯGOͰײͨ͡UX→UI UI UX Makibao 808 View Jam_Donuts 1285 View Sprint : Monday ( Design Sprint 1೔໨ ) :PVOH%POVUTͷϒϩάͷσβΠϯͰ࣮ ફͯ͠Έ·͠ΐ͏ Citrrus 100% 12 11 ʜ :PVOH%POVUTͱ͸ ར༻ن໿ ϓϥΠόγʔϙϦγʔ ͓໰͍߹Θͤ ͔͔ͬͨ࣌ؒ 35෼ఔ౓ Sprint : Tuesday ( Design Sprint 2೔໨ ) ϙέϞϯGOͰײͨ͡UX→UI UI UX Makibao 808 View Jam_Donuts 1285 View Sprint : Monday ( Design Sprint 1೔໨ ) :PVOH%POVUTͷϒϩάͷσβΠϯͰ࣮ ફͯ͠Έ·͠ΐ͏ 1 2 3 17 ΨΠυΛΤϯδχΞ͞Μʹڞ༗͠ɺ ૉࡐॻ͖ग़ͯ͠ ͜ͷσʔλΛ;FQMJO 4LFUDIͷ৔߹ ʹΞοϓ͢Ε͹σβΠφʔͷ࢓ࣄ͸ ͓ΘΓ

Slide 19

Slide 19 text

·ͱΊ ͋Δఔ౓ͷറΓ ΨΠυ ͕͋Δͱ ࡞ۀޮ཰͕࣮֬ʹ্͕Δ ࡞Δ਺ͱΠϯϓοτྔ͔͠εΩϧʹܨ͕Βͳ͍ʂ ࡞Δ਺ͱΠϯϓοτྔ͔͠εΩϧʹܨ͕Βͳ͍ʂ

Slide 20

Slide 20 text

͓͠·͍ Thanks! 'BDFCPPLਃ੥଴ͬͯΔ͓ 'BDFCPPLਃ੥଴ͬͯΔ͓