理想のカラーパレットをもとめて / color-palette-name-convention-at-wic

WIC meetup（社内イベント） LT

Transcript

1. ໋໊ฤ
   ΧϥʔύϨοτΛ΋ͱΊͯ
   ཧ૝ͷ
   WIC Meetup 2019.05.13
   

   View Slide

2. UXΤϯδχΞ͔ͩσβΠϯΤϯδχΞ͔ͩ
   ୩ ୓थ
   CyberAgent Advanced Technology Studio
   

   View Slide

3. https://www.winticket.jp/
   

   View Slide

4. https://ameblo.jp/shiba-mamehiko/
   

   View Slide

5. View Slide

6. View Slide

7. 90
   ੡඼͕޷͖͔Ͳ͏͔
   sec
   %
   90
   ৭͚ͩʹجͮ͘
   

   View Slide

8. Θ͔Γ΍໊͍͢લΛఆٛ͢Δ
   ίϯτϥετΛߟྀ͢Δ
   ඞཁͳ৭ΛߜΓࠐΉ
   

   View Slide

9. Θ͔Γ΍໊͍͢લΛఆٛ͢Δ
   ίϯτϥετΛߟྀ͢Δ
   ඞཁͳ৭ΛߜΓࠐΉ
   

   View Slide

10. View Slide

11. blue_500
    

    View Slide

12. blue_500
    blue_400
    blue_600
    

    View Slide

13. azure_500
    azure_400
    azure_600
    

    View Slide

14. https://atlassian.design/guidelines/brand/color
    

    View Slide

15. Snorlax
    https://atlassian.design/guidelines/brand/color
    

    View Slide

16. Snorlax
    https://atlassian.design/guidelines/brand/color
    ΧϏ̋ϯ
    

    View Slide

17. primary_base
    primary_light
    primary_heavy
    

    View Slide

18. primary_base
    primary_light
    primary_heavy
    
    

    View Slide

19. Primary Button
    LABEL Primary Color
    

    View Slide

20. Primary Button
    LABEL Primary Color
    
    

    View Slide

21. azure_base
    azure_light
    azure_dark
    

    View Slide

22. azure_base
    azure_lighter_15
    azure_darker_10
    

    View Slide

23. 
    blue? azure_base? azure_dark_10?
    

    View Slide

24. $azure-base: #155AEE;
    $azure-lighter-15: #4D82F3;
    $azure-darker-10: #114CCA;
    $silver-lighter-20: #FCFDFD;
    $button_primary: $azure-base;
    $button_primary_hover: $azure-lighter-15;
    $button_primary_active: $azure-darker-10;
    $button_primary_text: $silver-lighter-20;
    Sass
    

    View Slide

25. button-primary-base
    button-primary-hover
    button-primary-active
    button-primary-text
    button-primary-text
    button-primary-text
    ☺
    

    View Slide

26. button-primary-base
    button-primary-hover
    button-primary-active
    button-primary-text
    button-primary-text
    button-primary-text
    
    Minimum contrast
    3.5
    (AA18)
    5.5
    (AA)
    7
    (AAA)
    

    View Slide

27. @mixin button_primary_color {
    background-color: $button_primary;
    color: $button_primary_text;
    &:hover {
    background-color: $button_primary_hover;
    }
    &:active {
    background-color: $button_primary_active;
    }
    }
    Sass
    

    View Slide

28. .button {
    @include button_primary_color;
    }
    Sass
    

    View Slide

29. .button {
    background-color: #155AEE;
    color: #FCFDFD;
    }
    .button:hover {
    background-color: #4D82F3;
    }
    .button:active {
    background-color: #114CCA;
    }
    CSS
    

    View Slide

30. ίϯτϥετൺΛอͭ޻෉Λ͢Δ
    ڞ௨ݴޠͱͯ͠ѻ͍΍໊͍͢લʹ͢Δ
    ύϨοτͰఆٛͨ͠৭Ҏ֎͸࢖Θͳ͍
    

    View Slide

31. Thank you
    @hiloki
    @shiba_mamehiko
    

    View Slide