Practice of design guidelines in production

Transcript

1. αʔϏεӡ༻ͷޮ཰Λ্͛ΔͨΊ ͷσβΠϯΨΠυϥΠϯ੍࡞ DeNAɹUI designer Marika Jufuku Young Donuts vol.1
2. ৽ଔͰ%F/"ʹೖࣾͯ͠ ৽نࣄۀ։ൃ෦ͰͭͷϓϩδΣΫτͷϦʔυσβΠφʔΛ͍ͯ͠·͢ ͨͩσβΠφʔ͕ਓͳ͚ͩ ࣗݾ঺հ
3. ͱ͜ΖͰσβΠϯΨΠυͬͯ ԿͷͨΊʹ࡞Δͷʁ ຊ୊
4. l
   ೰Ή͕࣌ؒѹ౗తʹݮΔ
   l l
   τϯϚφ͕ͿΕͳ͍
   z l
   σβΠϯͷ֬ೝ࡞ۀ͕ݮΔ
   z l
   ίʔυ͕៉ྷʹͳΔ
   z 
   ೲಘͨ͠΋ͷͮ͘ΓΛ࠷୹ίʔεͰ࣮ݱ ͰͦΕͳΓʹ࡞ΕΔ
   z ϥϯσΟϯάڧԽ
   z l
   ࣗ෼ͰͦΕͳΓʹ࡞ΕΔ
   z l
   ϒϥϯσΟϯάڧԽ
   z ඞཁ࠷௿ݶͷύʔπΛ ૊Έ߹Θ͍ͤͯ͘࡞ۀͰɺ σβΠϯͷઆ໌ॻΛ࣋ͬͨͷͱ ಉવ σβΠφʔͷखΛआΓΔ ΄ͲͰ΋ͳ੍͍࡞෺Λ Designer Engineer Business Business ࢲͷղऍ
5. ͍ͪ͹Μ࠷ॳʹ΍Δ͜ͱ͸ɺζόϦ ϝΠϯͰ࢖༻͢Δ਺ࣈͷબఆ 0123456789 ࣮ફ
6. ࢲͷ৔߹ ͜ΕͰ΋͏਺஋ʹ໎͏͜ͱ͸ͳ͍ͧʂ ϝΠϯɿͷഒ਺ɹɹαϒɿͷഒ਺ ͦͷଞɿۮ਺ 0123456789 ਺஋ͷબఆ
7. ࠷খɹɹɹɹɹɹϝΠϯɹɹɹɹɹɹݟग़͠ɹɹɹɹɹɹڧௐ 10px 10px 12px 12px 14px 14px 16px 16px 0123456789 ϑΥϯταΠζ ͜ΕͰ΋͏ϑΥϯταΠζʹ໎͏͜ͱ͸ͳ͍ͧʂ αΠζ͝ͱʹ໾ׂΛৼΓ෼͚Δ
8. ΧϥʔɿάϨʔεέʔϧ ͜ΕͰ΋͏഑৭ʹ໎͏͜ͱ͸ͳ͍ͧʂ ͱɺ͜͜Ͱ͓ؾ͖ͮͩΖ͏͔ʜ σβΠϯΛ͢Δ্Ͱ࠷௿ݶ࢖͏άϨʔεέʔϧΛબఆ #5C646C #999999 #CCCCCC #F2F2F2 #FFFFFF #272727 จࣈ ϝΠϯ จࣈ ิ଍ ΞΠίϯ /
   จࣈ ϑΥʔϜ಺ ઢ / എܠ จࣈ
   
   ΞΠίϯ
   
   എܠ Disabled / എܠ
9. େࣄͳ͜ͱɿͦͷ ͨͩ਺஋΍৭ΛఆΊΔ͚ͩ͡Όޙ͔Β໎͍͕ੜͯ͡ҙຯ͕ͳ͍ͷͰ Ͱ͖Δ͚ͩ۩ମతͳ࢖༻༻్Λॻ͘ ϥϕϧ͕͋Δͱ Θ͔Γ΍͍͢Ϛϯʂ
10. Χϥʔɿ͞͠৭ ࠷ߴͰ΋৭ʹ཈͑Δͷ͕Φεεϝ #FFCD00 #29CCB1 #FFD01E ͢΂ͯ ϝΠϯΧϥʔ ϝΠϯΧϥʔ #FF5858 #FF5858 -JWF ΞΠίϯ
    
    Ϙλϯ #FFB800 #FF5858 /FX ࿥ը #44C0EA 5XJUUFS Young_donuts Mirrativ Mirracle Mirracle
11. Χϥʔɿಁա ಁա΋ࠁΈͰແ਺ʹଘࡏͤ͞ΔΑΓܾΊ·͠ΐ͏ ࢲ͸ಁաʹ͸༻్͸͚ͭͣɺλΠϛϯάͰ߹ͬͨ΋ͷΛ࢖͍·͢ #FFFFFF 80% #000000 50% #FFFFFF 50% #000000 30% #FFFFFF 30% #000000 80%
12. Χϥʔɿάϥσʔγϣϯ άϥσʔγϣϯ͸ࢹೝੑͱॏ͘ͳΓ͗͢ͳ͍ͷॏࢹͰ Λɺ͍ͭ΋࢖༻ #000000 0% - 80%
13. େࣄͳ͜ͱɿͦͷ 4LFUDIͰσβΠϯ͢Δਓ͸ΧϥʔΨΠυ͕ܾ·Ε͹ ύϨοτͰ৭Λ؅ཧͯ͠ޮ཰Խʂ 4LFUDIͰσβΠϯ͢Δਓ͸ΧϥʔΨΠυ͕ܾ·Ε͹ ύϨοτͰ৭Λ؅ཧͯ͠ޮ཰Խʂ ಁա΋άϥσʔγϣϯ΋ هԱͰ͖ΔͷͰ௒ศརʙ
14. ϘλϯɿαΠζͱύλʔϯ ࢲ͸Ϙλϯͷ)FJHIUͷαΠζͱจࣈαΠζΛϦϯΫͯ͠هࡌ͍ͯ͠·͢ 24px Size Height Pattern 32px 40px 12px Font 12px 14px 4px ؙ֯ શؙ֯
15. ϘλϯɿޮՌ ͍Ζ͍Ζࢼͨ݁͠Ռɺ͜ͷදͩͱൈ͚࿙Ε͕ͳ͍ 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
16. ࣮ફɿϒϩάΛσβΠϯͯ͠ΈΔ ४උ͸੔͍·ͨ͠ʂ:PVOH
    %POVUTͷϒϩάͷσβΠϯͰ࣮ફͯ͠Έ·͠ΐ͏ Header ϩΰ ϝχϡʔϘλϯ هࣄ ɹ
    αϜωΠϧը૾ ɹ
    λΠτϧ ɹ
    චऀΞΠίϯ ɹ
    චऀ*% ɹ
    ΧςΰϦλά ɹ
    7JFX਺ ɹ
    ϖʔδΠϯδέʔλ هࣄ ɹ
    αϜωΠϧը૾ ɹ
    λΠτϧ ɹ
    චऀΞΠίϯ ɹ
    චऀ*% ɹ
    ΧςΰϦλά ɹ
    7JFX਺ ɹ
    ϖʔδΠϯδέʔλ ϦϯΫ ɹ
    :PVOH
    %POVUTͱ͸ ɹ
    ར༻ن໿ ɹ
    ϓϥΠόγʔϙϦγʔ ɹ
    ͓໰͍߹Θͤ ɹ
    ϩΰ ɹ
    4/4ΞΠίϯ ϦϯΫ ɹ
    :PVOH
    %POVUTͱ͸ ɹ
    ར༻ن໿ ɹ
    ϓϥΠόγʔϙϦγʔ ɹ
    ͓໰͍߹Θͤ ɹ
    ϩΰ ɹ
    4/4ΞΠίϯ Contents Contents Footer Footer
17. ࣮ફɿϫΠϠʔϑϨʔϜ 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
18. ࣮ફɿάϥϑΟοΫૠೖ 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ͷ৔߹ ʹΞοϓ͢Ε͹σβΠφʔͷ࢓ࣄ͸ ͓ΘΓ
19. ·ͱΊ ͋Δఔ౓ͷറΓ ΨΠυ ͕͋Δͱ ࡞ۀޮ཰͕࣮֬ʹ্͕Δ ࡞Δ਺ͱΠϯϓοτྔ͔͠εΩϧʹܨ͕Βͳ͍ʂ ࡞Δ਺ͱΠϯϓοτྔ͔͠εΩϧʹܨ͕Βͳ͍ʂ
20. ͓͠·͍ Thanks! 'BDFCPPLਃ੥଴ͬͯΔ͓ 'BDFCPPLਃ੥଴ͬͯΔ͓