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

Slide 1

Slide 1 text

ϞόΠϧΞϓϦΛ։ൃ͢Δ্Ͱ ཧ૝తͳ৭ͷ໋໊نଇ ϩΫωϜ @_rockname גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ΈͯͶͷMeetup #6

Slide 2

Slide 2 text

ࣗݾ঺հ ؠ໊༐ً • 2018೥৽ଔ • iOSϝΠϯͰॻ͍ͯΔ • VTuber (ʹ͡͞Μ͡) ͕޷͖ ϩΫωϜ / rockname

Slide 3

Slide 3 text

ϞόΠϧΞϓϦʹ͓͚Δ৭ͷ໋໊ Accent Blue Light Gray Text White

Slide 4

Slide 4 text

ϞόΠϧΞϓϦʹ͓͚Δ৭ͷ໋໊ Accent Blue Light Gray Text White

Slide 5

Slide 5 text

Dark Mode, Dark theme • iOSͰ͸Dark Mode, AndroidͰ͸Dark theme͕ొ৔ • 1ͭͷ৭͕Light / Darkͷ2ͭͷ৭Λ࣋ͭ • Lightʹ͓͚ΔʮBlackʯ͸Darkʹ͓͍ͯ͸ʮWhiteʯ • ໋໊Λ޻෉͢Δඞཁ͕͋Δ

Slide 6

Slide 6 text

Human Interface Guidelines

Slide 7

Slide 7 text

System Colors - Standard Colors / Adaptable Colors • Blue, GreenͳͲͷඪ४తͳ৭ • Light / DarkʹରԠ

Slide 8

Slide 8 text

System Colors - Standard Colors / Adaptable Gray Colors • Gray͕6छྨ • Light / Dark ʹରԠ • ং਺͕େ͖͘ͳΔʹͭΕͯLightͰ͸ബ͘ɺ DarkͰ͸ೱ͘ͳ͍ͬͯΔ

Slide 9

Slide 9 text

Standard Colors / Fixed Colors • Dark Mode͕ొ৔͢ΔҎલ͔Βଘࡏ͢Δ৭ • Light / Dark ʹରԠ͍ͯ͠ͳ͍ • Dark ModeͰ͸നࠇͷೱ୶͕ٯస͢ΔͨΊɺ System ColorsͰ͸ `light` ΍ `dark` ͱ͍ͬͨද ݱ͸ආ͚ΒΕ͍ͯΔ • Fixed Colors: lightGray, darkGray, … • System Colors: systemGray, systemGray2, …

Slide 10

Slide 10 text

Dynamic System Colors - UI Element Colors • UI ComponentʹରԠͨ͠৭ • Label • Fill • Placeholder • Background • Separator • Link • ͦΕͧΕͷ৭ʹ Primary, Secondary, Tertiaryͷ ֊૚͕༻ҙ͞Εͯ͋Δ

Slide 11

Slide 11 text

Dark Mode / Elevation – WWDC2019 ʮImplementing Dark Mode on iOSʯ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Material Design

Slide 14

Slide 14 text

Color theme creation

Slide 15

Slide 15 text

Primary • ΞϓϦͰ࠷΋ଟ͘࢖༻͞ΕΔ৭ • App Bar΍Buttonʹద༻

Slide 16

Slide 16 text

Secondary • PrimaryʹՃ͑ͯΞΫηϯτΛ෇͚͍ͨ࣌ʹ࢖ ͏৭ • Floating action button΍Progress barʹద༻

Slide 17

Slide 17 text

Surface, background, and error colors • Surface color • Card΍Sheets, Menusͷ৭ • Background color • εΫϩʔϧͰ͖Δίϯςϯπͷഎܠ৭ • Error color • ແޮͳςΩετͳͲɺίϯϙʔωϯτ ͷΤϥʔΛࣔ͢৭

Slide 18

Slide 18 text

Typography and iconography colors • ίϯϙʔωϯτͷ্ʹॏͶΔςΩετͳ Ͳͷཁૉͷ৭Λ On colors ͱݺͿ • ྫ͑͹ On Primary ͸ Primary color ͷϘ λϯͷςΩετͷ৭ʹద༻͢Δ • ଞͷςΩετ৭͸ textColorPrimary ΍ textColorSecondary ʹΑͬͯରԠ͢Δ TextViewʹద༻͞ΕΔ

Slide 19

Slide 19 text

Dark theme / Elevation • Dark themeͰ͸ElevationΛදݱ͢Δࡍʹʮߴ ͍elevation͸ΑΓ໌Δ͍৭߹͍ʹͳΔʯͱ͍ ͏ݪଇʹै͏ • elevationͷߴ͞ʹԠͯ͡ On Surface color ͷ ಁ໌౓Λม͑ͯoverlayͤ͞Δ ᶃ - Surface ᶄ - Elevation overlay

Slide 20

Slide 20 text

Tertiary Label color Primary color Background color Surface color Fill color On Secondary color Error color

Slide 21

Slide 21 text

ػೳϕʔεͷ໋໊ - Functional color • Human Interface GuidelinesͰ͸Dynamic System ColorsͰɺMaterial DesignͰ͸ ͢΂ͯͷ৭Ͱɺػೳϕʔεͷ໋໊͕͞Ε͍ͯΔ • Dark Mode(theme) ͷ୆಄ʹΑΓ1ͭͷ৭͕2ͭͷ৭Λࢦ͢ඞཁੑ͕ੜ·Εͨ͜ͱ ʹΑΔӨڹͩͱߟ͑ΒΕΔ • ͜ͷΑ͏ͳ໋໊Λ͞Εͨ৭Λ Functional color ͱݺͿ͜ͱʹ͢Δ

Slide 22

Slide 22 text

Functional colorͷݒ೦఺ - ৑௕͞ • ଘࡏ͢ΔίϯϙʔωϯτશͯʹରԠͨ͠Functional colorΛఆٛ͢Δ͔ͱ͍͑͹ͦ͏ ͸ͳΒͳ͍ • Button color, Indicator color, Card color, … • ͜Εͩͱɺಉ͡৭͕ෳ਺ͷίϯϙʔωϯτʹࢄҳͯ͠৑௕ͩͬͨΓɺίϯϙʔωϯ τΛ࢖༻͠ͳ͘ͳͬͨͱ͖ͷ৭ͷ؅ཧίετͳͲݒ೦͕͋Δ ͢΂ͯͷίϯϙʔωϯτʹରͯ͠ผʑͷFunctional colorΛద༻͢ΔͷͰ͸ͳ͘ɺ  ͋Δఔ౓ ಉ͡ଐੑΛ༗͢Δίϯϙʔωϯτ܈ΛଋͶͯFunctional colorΛద༻ ͤ͞Δ

Slide 23

Slide 23 text

Functional colorͷݒ೦఺ - ᐆດ͞ • Functional color͸1ͭͷ໊લͰLight / Darkͷ2ͭͷ৭Λࢦ͢ • σβΠϯͷٞ࿦Λ͢Δ্ͰʮLightͷBackground color͕ʙʯͷΑ͏ͳ൥Θ͠͞ɺ ͓Αͼͦͷ৭͕࣮ࡍԿ৭Ͱ͋Δ͔Θ͔Γʹ͍͘ͱ͍͏ᐆດ͕͞࢒Δ blue΍redͷΑ͏ͳ৭͕ݩདྷ΋໊ͭલΛϕʔεʹ໋໊͞Εͨ৭ఆٛɺ Natural color (ͱݺͿ͜ͱʹ͢Δ) Λ࡞Γɺͦ͜ΛFunctional color͕ࢀর͢ΔΑ͏ͳߏ੒ʹ͢Δ

Slide 24

Slide 24 text

Functional color Natural color Text color Gray White - Light - Dark

Slide 25

Slide 25 text

Define your Color Palette

Slide 26

Slide 26 text

Step1 - Natural color • Natural color͸σβΠφʔ͕ٞ࿦͢Δ্Ͱ౔୆ͱͳΔΧϥʔύϨοτͱͳΔ • ۩ମతͳఆٛͷΞϓϩʔνΛ2ͭ঺հ͢Δ

Slide 27

Slide 27 text

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 ΑΓ

Slide 28

Slide 28 text

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 ΑΓ

Slide 29

Slide 29 text

Step2 - Functional color • ػೳϕʔεͰ໋໊͠ɺNatural colorͷΧϥʔύϨοτ͔ΒLight / DarkͦΕͧΕʹద੾ͳ ৭Λબ୒͢Δ • ΋͠৽͍͠ίϯϙʔωϯτ͕௥Ճ͞Εͨ৔߹ɺ·ͣ͸طଘͷFunctional colorΛ࢖༻Ͱ͖ ͳ͍͔Λߟ͑Δ • طଘͷ΋ͷͰ͸දݱͰ͖ͳ͍৔߹͸ɺͦͷίϯϙʔωϯτͷಛੑΛද͢৽͍͠ Functional colorΛఆٛ͢Δ • ಉ͡Natural colorΛࢀর͢ΔFunctional color͕૿͖͑ͯͨΒɺ౷߹ͯ͠৽͍͠Functional colorͱͯ͠ఆٛ͢Δ

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

࠷ޙʹ • 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

Slide 35

Slide 35 text

ࢿྉͰ঺հͰ͖͍ͯͳ͍ͦͷଞࢀߟࢿྉ • ࣮ફ 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

Slide 36

Slide 36 text

Thank you!!!