Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

rockname
February 05, 2020

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

rockname

February 05, 2020
Tweet

More Decks by rockname

Other Decks in Design

Transcript

  1. Dark Mode, Dark theme • iOSͰ͸Dark Mode, AndroidͰ͸Dark theme͕ొ৔ •

    1ͭͷ৭͕Light / Darkͷ2ͭͷ৭Λ࣋ͭ • Lightʹ͓͚ΔʮBlackʯ͸Darkʹ͓͍ͯ͸ʮWhiteʯ • ໋໊Λ޻෉͢Δඞཁ͕͋Δ
  2. System Colors - Standard Colors / Adaptable Colors • Blue,

    GreenͳͲͷඪ४తͳ৭ • Light / DarkʹରԠ
  3. System Colors - Standard Colors / Adaptable Gray Colors •

    Gray͕6छྨ • Light / Dark ʹରԠ • ং਺͕େ͖͘ͳΔʹͭΕͯLightͰ͸ബ͘ɺ DarkͰ͸ೱ͘ͳ͍ͬͯΔ
  4. Standard Colors / Fixed Colors • Dark Mode͕ొ৔͢ΔҎલ͔Βଘࡏ͢Δ৭ • Light

    / Dark ʹରԠ͍ͯ͠ͳ͍ • Dark ModeͰ͸നࠇͷೱ୶͕ٯస͢ΔͨΊɺ System ColorsͰ͸ `light` ΍ `dark` ͱ͍ͬͨද ݱ͸ආ͚ΒΕ͍ͯΔ • Fixed Colors: lightGray, darkGray, … • System Colors: systemGray, systemGray2, …
  5. Dynamic System Colors - UI Element Colors • UI ComponentʹରԠͨ͠৭

    • Label • Fill • Placeholder • Background • Separator • Link • ͦΕͧΕͷ৭ʹ Primary, Secondary, Tertiaryͷ ֊૚͕༻ҙ͞Εͯ͋Δ
  6. 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
  7. Surface, background, and error colors • Surface color • Card΍Sheets,

    Menusͷ৭ • Background color • εΫϩʔϧͰ͖Δίϯςϯπͷഎܠ৭ • Error color • ແޮͳςΩετͳͲɺίϯϙʔωϯτ ͷΤϥʔΛࣔ͢৭
  8. Typography and iconography colors • ίϯϙʔωϯτͷ্ʹॏͶΔςΩετͳ Ͳͷཁૉͷ৭Λ On colors ͱݺͿ

    • ྫ͑͹ On Primary ͸ Primary color ͷϘ λϯͷςΩετͷ৭ʹద༻͢Δ • ଞͷςΩετ৭͸ textColorPrimary ΍ textColorSecondary ʹΑͬͯରԠ͢Δ TextViewʹద༻͞ΕΔ
  9. Dark theme / Elevation • Dark themeͰ͸ElevationΛදݱ͢Δࡍʹʮߴ ͍elevation͸ΑΓ໌Δ͍৭߹͍ʹͳΔʯͱ͍ ͏ݪଇʹै͏ •

    elevationͷߴ͞ʹԠͯ͡ On Surface color ͷ ಁ໌౓Λม͑ͯoverlayͤ͞Δ ᶃ - Surface ᶄ - Elevation overlay
  10. ػೳϕʔεͷ໋໊ - Functional color • Human Interface GuidelinesͰ͸Dynamic System ColorsͰɺMaterial

    DesignͰ͸ ͢΂ͯͷ৭Ͱɺػೳϕʔεͷ໋໊͕͞Ε͍ͯΔ • Dark Mode(theme) ͷ୆಄ʹΑΓ1ͭͷ৭͕2ͭͷ৭Λࢦ͢ඞཁੑ͕ੜ·Εͨ͜ͱ ʹΑΔӨڹͩͱߟ͑ΒΕΔ • ͜ͷΑ͏ͳ໋໊Λ͞Εͨ৭Λ Functional color ͱݺͿ͜ͱʹ͢Δ
  11. Functional colorͷݒ೦఺ - ৑௕͞ • ଘࡏ͢ΔίϯϙʔωϯτશͯʹରԠͨ͠Functional colorΛఆٛ͢Δ͔ͱ͍͑͹ͦ͏ ͸ͳΒͳ͍ • Button

    color, Indicator color, Card color, … • ͜Εͩͱɺಉ͡৭͕ෳ਺ͷίϯϙʔωϯτʹࢄҳͯ͠৑௕ͩͬͨΓɺίϯϙʔωϯ τΛ࢖༻͠ͳ͘ͳͬͨͱ͖ͷ৭ͷ؅ཧίετͳͲݒ೦͕͋Δ ͢΂ͯͷίϯϙʔωϯτʹରͯ͠ผʑͷFunctional colorΛద༻͢ΔͷͰ͸ͳ͘ɺ
 ͋Δఔ౓ ಉ͡ଐੑΛ༗͢Δίϯϙʔωϯτ܈ΛଋͶͯFunctional colorΛద༻ ͤ͞Δ
  12. Functional colorͷݒ೦఺ - ᐆດ͞ • Functional color͸1ͭͷ໊લͰLight / Darkͷ2ͭͷ৭Λࢦ͢ •

    σβΠϯͷٞ࿦Λ͢Δ্ͰʮLightͷBackground color͕ʙʯͷΑ͏ͳ൥Θ͠͞ɺ ͓Αͼͦͷ৭͕࣮ࡍԿ৭Ͱ͋Δ͔Θ͔Γʹ͍͘ͱ͍͏ᐆດ͕͞࢒Δ blue΍redͷΑ͏ͳ৭͕ݩདྷ΋໊ͭલΛϕʔεʹ໋໊͞Εͨ৭ఆٛɺ Natural color (ͱݺͿ͜ͱʹ͢Δ) Λ࡞Γɺͦ͜ΛFunctional color͕ࢀর͢ΔΑ͏ͳߏ੒ʹ͢Δ
  13. 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 ΑΓ
  14. 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 ΑΓ
  15. Step2 - Functional color • ػೳϕʔεͰ໋໊͠ɺNatural colorͷΧϥʔύϨοτ͔ΒLight / DarkͦΕͧΕʹద੾ͳ ৭Λબ୒͢Δ

    • ΋͠৽͍͠ίϯϙʔωϯτ͕௥Ճ͞Εͨ৔߹ɺ·ͣ͸طଘͷFunctional colorΛ࢖༻Ͱ͖ ͳ͍͔Λߟ͑Δ • طଘͷ΋ͷͰ͸දݱͰ͖ͳ͍৔߹͸ɺͦͷίϯϙʔωϯτͷಛੑΛද͢৽͍͠ Functional colorΛఆٛ͢Δ • ಉ͡Natural colorΛࢀর͢ΔFunctional color͕૿͖͑ͯͨΒɺ౷߹ͯ͠৽͍͠Functional colorͱͯ͠ఆٛ͢Δ
  16. ࠷ޙʹ • 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
  17. ࢿྉͰ঺հͰ͖͍ͯͳ͍ͦͷଞࢀߟࢿྉ • ࣮ફ 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