モバイルアプリを開発する上で理想的な色の命名規則 / Ideal color naming convention for developing mobile apps

Transcript

1. ϞόΠϧΞϓϦΛ։ൃ͢Δ্Ͱ ཧ૝తͳ৭ͷ໋໊نଇ ϩΫωϜ @_rockname גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ΈͯͶͷMeetup #6
2. ࣗݾ঺հ ؠ໊༐ً • 2018೥৽ଔ • iOSϝΠϯͰॻ͍ͯΔ • VTuber (ʹ͡͞Μ͡) ͕޷͖ ϩΫωϜ / rockname
3. ϞόΠϧΞϓϦʹ͓͚Δ৭ͷ໋໊ Accent Blue Light Gray Text White
4. ϞόΠϧΞϓϦʹ͓͚Δ৭ͷ໋໊ Accent Blue Light Gray Text White
5. Dark Mode, Dark theme • iOSͰ͸Dark Mode, AndroidͰ͸Dark theme͕ొ৔ • 1ͭͷ৭͕Light / Darkͷ2ͭͷ৭Λ࣋ͭ • Lightʹ͓͚ΔʮBlackʯ͸Darkʹ͓͍ͯ͸ʮWhiteʯ • ໋໊Λ޻෉͢Δඞཁ͕͋Δ
6. Human Interface Guidelines
7. System Colors - Standard Colors / Adaptable Colors • Blue, GreenͳͲͷඪ४తͳ৭ • Light / DarkʹରԠ
8. System Colors - Standard Colors / Adaptable Gray Colors • Gray͕6छྨ • Light / Dark ʹରԠ • ং਺͕େ͖͘ͳΔʹͭΕͯLightͰ͸ബ͘ɺ DarkͰ͸ೱ͘ͳ͍ͬͯΔ
9. Standard Colors / Fixed Colors • Dark Mode͕ొ৔͢ΔҎલ͔Βଘࡏ͢Δ৭ • Light / Dark ʹରԠ͍ͯ͠ͳ͍ • Dark ModeͰ͸നࠇͷೱ୶͕ٯస͢ΔͨΊɺ System ColorsͰ͸ `light` ΍ `dark` ͱ͍ͬͨද ݱ͸ආ͚ΒΕ͍ͯΔ • Fixed Colors: lightGray, darkGray, … • System Colors: systemGray, systemGray2, …
10. Dynamic System Colors - UI Element Colors • UI ComponentʹରԠͨ͠৭ • Label • Fill • Placeholder • Background • Separator • Link • ͦΕͧΕͷ৭ʹ Primary, Secondary, Tertiaryͷ ֊૚͕༻ҙ͞Εͯ͋Δ
11. Dark Mode / Elevation – WWDC2019 ʮImplementing Dark Mode on iOSʯ
12. Dark Mode / Elevation • Dark ModeͰ͸Elevation͸ࠇͷshadowͰ͸ͳ ͘৭ͷೱ୶Ͱදݱ͞ΕΔ • sheet styleͰmodalදࣔΛ͢Δࡍɺ਌View͕ base levelɺࢠView͕elevated levelͱͳΓɺ elevated levelͷViewͷ৭͕ബ͘ඳը͞ΕΔ • ͜ͷ࢓૊ΈΛར༻͢Δʹ͸OS͕ఏڙ͢Δ systemBackground ͓Αͼ systemGroupedBackground Λ࢖༻͢Δඞཁ͕ ͋Δ – Apple UI Design Resources for iOS
13. Material Design
14. Color theme creation
15. Primary • ΞϓϦͰ࠷΋ଟ͘࢖༻͞ΕΔ৭ • App Bar΍Buttonʹద༻
16. Secondary • PrimaryʹՃ͑ͯΞΫηϯτΛ෇͚͍ͨ࣌ʹ࢖ ͏৭ • Floating action button΍Progress barʹద༻
17. Surface, background, and error colors • Surface color • Card΍Sheets, Menusͷ৭ • Background color • εΫϩʔϧͰ͖Δίϯςϯπͷഎܠ৭ • Error color • ແޮͳςΩετͳͲɺίϯϙʔωϯτ ͷΤϥʔΛࣔ͢৭
18. Typography and iconography colors • ίϯϙʔωϯτͷ্ʹॏͶΔςΩετͳ Ͳͷཁૉͷ৭Λ On colors ͱݺͿ • ྫ͑͹ On Primary ͸ Primary color ͷϘ λϯͷςΩετͷ৭ʹద༻͢Δ • ଞͷςΩετ৭͸ textColorPrimary ΍ textColorSecondary ʹΑͬͯରԠ͢Δ TextViewʹద༻͞ΕΔ
19. Dark theme / Elevation • Dark themeͰ͸ElevationΛදݱ͢Δࡍʹʮߴ ͍elevation͸ΑΓ໌Δ͍৭߹͍ʹͳΔʯͱ͍ ͏ݪଇʹै͏ • elevationͷߴ͞ʹԠͯ͡ On Surface color ͷ ಁ໌౓Λม͑ͯoverlayͤ͞Δ ᶃ - Surface ᶄ - Elevation overlay
20. Tertiary Label color Primary color Background color Surface color Fill color On Secondary color Error color
21. ػೳϕʔεͷ໋໊ - Functional color • Human Interface GuidelinesͰ͸Dynamic System ColorsͰɺMaterial DesignͰ͸ ͢΂ͯͷ৭Ͱɺػೳϕʔεͷ໋໊͕͞Ε͍ͯΔ • Dark Mode(theme) ͷ୆಄ʹΑΓ1ͭͷ৭͕2ͭͷ৭Λࢦ͢ඞཁੑ͕ੜ·Εͨ͜ͱ ʹΑΔӨڹͩͱߟ͑ΒΕΔ • ͜ͷΑ͏ͳ໋໊Λ͞Εͨ৭Λ Functional color ͱݺͿ͜ͱʹ͢Δ
22. Functional colorͷݒ೦఺ - ৑௕͞ • ଘࡏ͢ΔίϯϙʔωϯτશͯʹରԠͨ͠Functional colorΛఆٛ͢Δ͔ͱ͍͑͹ͦ͏ ͸ͳΒͳ͍ • Button color, Indicator color, Card color, … • ͜Εͩͱɺಉ͡৭͕ෳ਺ͷίϯϙʔωϯτʹࢄҳͯ͠৑௕ͩͬͨΓɺίϯϙʔωϯ τΛ࢖༻͠ͳ͘ͳͬͨͱ͖ͷ৭ͷ؅ཧίετͳͲݒ೦͕͋Δ ͢΂ͯͷίϯϙʔωϯτʹରͯ͠ผʑͷFunctional colorΛద༻͢ΔͷͰ͸ͳ͘ɺ
 ͋Δఔ౓ ಉ͡ଐੑΛ༗͢Δίϯϙʔωϯτ܈ΛଋͶͯFunctional colorΛద༻ ͤ͞Δ
23. Functional colorͷݒ೦఺ - ᐆດ͞ • Functional color͸1ͭͷ໊લͰLight / Darkͷ2ͭͷ৭Λࢦ͢ • σβΠϯͷٞ࿦Λ͢Δ্ͰʮLightͷBackground color͕ʙʯͷΑ͏ͳ൥Θ͠͞ɺ ͓Αͼͦͷ৭͕࣮ࡍԿ৭Ͱ͋Δ͔Θ͔Γʹ͍͘ͱ͍͏ᐆດ͕͞࢒Δ blue΍redͷΑ͏ͳ৭͕ݩདྷ΋໊ͭલΛϕʔεʹ໋໊͞Εͨ৭ఆٛɺ Natural color (ͱݺͿ͜ͱʹ͢Δ) Λ࡞Γɺͦ͜ΛFunctional color͕ࢀর͢ΔΑ͏ͳߏ੒ʹ͢Δ
24. Functional color Natural color Text color Gray White - Light - Dark
25. Define your Color Palette
26. Step1 - Natural color • Natural color͸σβΠφʔ͕ٞ࿦͢Δ্Ͱ౔୆ͱͳΔΧϥʔύϨοτͱͳΔ • ۩ମతͳఆٛͷΞϓϩʔνΛ2ͭ঺հ͢Δ
27. Approach 1 - Material palette generator • Material DesignͰ͸৭Λܾఆ͢ΔͨΊͷπʔϧͱͯ͠Material palette generator͕ఏڙ͞Ε͍ͯΔ • ͜͜ͰΞϓϦͷϒϥϯυΧϥʔΛϕʔεʹ 50, 100, 200, …, 800, 900 ͱ10छྨͷvariantΛੜ੒͢Δ https://material.io/design/color/the-color-system.html#tools-for-picking-colors ΑΓ
28. Approach 2 - HSL based • ·ͣ͸ΞϓϦͷϕʔεͱͳΔ৭Λఆٛ • HSL஋ͷً౓͕50%ʹͳΔΑ͏ʹͯ͠ɺ͜ΕΛ base color ͱ͢Δ • base colorΛج४ʹً౓ΛԿ% light or dark ʹ͚͔ۙͮͨʹΑͬͯ৭Λఆٛ https://medium.com/@marcintreder/design-system-sprint-2-one-color-palette-to-rule-them-all- d0114ed1f659 ΑΓ
29. Step2 - Functional color • ػೳϕʔεͰ໋໊͠ɺNatural colorͷΧϥʔύϨοτ͔ΒLight / DarkͦΕͧΕʹద੾ͳ ৭Λબ୒͢Δ • ΋͠৽͍͠ίϯϙʔωϯτ͕௥Ճ͞Εͨ৔߹ɺ·ͣ͸طଘͷFunctional colorΛ࢖༻Ͱ͖ ͳ͍͔Λߟ͑Δ • طଘͷ΋ͷͰ͸දݱͰ͖ͳ͍৔߹͸ɺͦͷίϯϙʔωϯτͷಛੑΛද͢৽͍͠ Functional colorΛఆٛ͢Δ • ಉ͡Natural colorΛࢀর͢ΔFunctional color͕૿͖͑ͯͨΒɺ౷߹ͯ͠৽͍͠Functional colorͱͯ͠ఆٛ͢Δ
34. ࠷ޙʹ • Dark Mode(theme) Λߟྀͨ͠৭ͷఆٛख๏ͱͯ͠ɺNatural colorͱFunctional colorͷ2૚Λఆٛ͢Δͱ͍͏ΞϓϩʔνΛࠓճ͸঺հ͠·ͨ͠ • LINEͷDesign System͸ࠓճͷൃදʹ͔ͳΓ͍ۙ৭ͷ໋໊Λ͞Ε͍ͯͯɺඇৗʹ ࢀߟʹͳΔͷͰͥͻݟͯΈ͍ͯͩ͘͞ • https://speakerdeck.com/line_devday2019/line-design-system-making-line- product-faster-without-losing-consistency
35. ࢿྉͰ঺հͰ͖͍ͯͳ͍ͦͷଞࢀߟࢿྉ • ࣮ફ iOS13μʔΫϞʔυରԠ • https://qiita.com/hirothings/items/4834481d170332e173f5 • Master of Android Theme • https://speakerdeck.com/konifar/master-of-android-theme • Building a design system — where to start? • https://uxdesign.cc/building-a-design-system-where-to-start-part-2-colour- 54fbe9b76d85
36. Thank you!!!