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

DIST.26 「Webサービスの個性を支えるデザイン」LT

Transcript

1. ໋໊ฤ
   ΧϥʔύϨοτΛ΋ͱΊͯ
   ཧ૝ͷ
   DIST.26 | WebαʔϏεͷݸੑΛࢧ͑ΔσβΠϯ 2019.04.26
   

   View Slide

2. UXΤϯδχΞ
   αΠόʔΤʔδΣϯτ
   ୩ ୓थ
   CyberAgent Advanced Technology Studio
   

   View Slide

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

   View Slide

4. View Slide

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

   View Slide

6. Ѝ㗯㗙㗹㗦㗮
   COLORS SPEAK ALL LANGUAGES.
   Joseph Addison | English Eessayist
   ԊႧ㘒༑㗙
   

   View Slide

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

   View Slide

8. View Slide

9. blue_500
   

   View Slide

10. blue_500
    blue_400
    blue_600
    

    View Slide

11. azure_500
    azure_400
    azure_600
    

    View Slide

12. primary_base
    primary_light
    primary_heavy
    

    View Slide

13. primary_base
    primary_lighter_15
    primary_darker_10
    

    View Slide

14. button_primary_base
    button_primary_hover
    button_primary_active
    

    View Slide

15. button_primary_base
    button_primary_hover
    button_primary_active
    button_primary_text
    button_primary_text
    button_primary_text
    

    View Slide

16. $color_primary: #155AEE;
    $color_primary_light: #4D82F3;
    $color_primary_heavy: #114CCA;
    $button_primary: $color_primary;
    $button_primary_hover: $color_primary_light;
    $button_primary_active: $color_primary_heavy;
    $button_primary_text: #FCFDFD;
    Sass
    

    View Slide

17. @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

18. .button {
    @include button_primary_color;
    }
    Sass
    

    View Slide

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

    View Slide

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

    View Slide

21. Thank you
    @hiloki
    @shiba_mamehiko
    

    View Slide

22. Special Guest Speaker
    Felix Rieseberg
    and more Speakers!
    https://inside-frontend.com/
    

    View Slide