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

070d33664df274636dad3da21c9b21fc?s=47 rockname
February 05, 2020

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

070d33664df274636dad3da21c9b21fc?s=128

rockname

February 05, 2020
Tweet

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ͱͯ͠ఆٛ͢Δ
  30. None
  31. None
  32. None
  33. None
  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!!!