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

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

Transcript

1. ໋໊ฤ ΧϥʔύϨοτΛ΋ͱΊͯ ཧ૝ͷ DIST.26 | WebαʔϏεͷݸੑΛࢧ͑ΔσβΠϯ 2019.04.26
2. UXΤϯδχΞ αΠόʔΤʔδΣϯτ ୩ ୓थ CyberAgent Advanced Technology Studio
3. https://ameblo.jp/shiba-mamehiko/
5. 90 ੡඼͕޷͖͔Ͳ͏͔ sec % 90 ৭͚ͩʹجͮ͘
6. Ѝ㗯㗙㗹㗦㗮 COLORS SPEAK ALL LANGUAGES. Joseph Addison | English Eessayist ԊႧ㘒༑㗙
7. Θ͔Γ΍໊͍͢લΛఆٛ͢Δ ίϯτϥετΛߟྀ͢Δ ඞཁͳ৭ΛߜΓࠐΉ
9. blue_500
10. blue_500 blue_400 blue_600
11. azure_500 azure_400 azure_600
12. primary_base primary_light primary_heavy
13. primary_base primary_lighter_15 primary_darker_10
14. button_primary_base button_primary_hover button_primary_active
15. button_primary_base button_primary_hover button_primary_active button_primary_text button_primary_text button_primary_text
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
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
18. .button { @include button_primary_color; } Sass
19. .button { background-color: #155AEE; color: #FCFDFD; } .button:hover { background-color: #4D82F3; } .button:active { background-color: #114CCA; } CSS
20. ίϯτϥετൺΛอͭ޻෉Λ͢Δ ڞ௨ݴޠͱͯ͠ѻ͍΍໊͍͢લʹ͢Δ ύϨοτͰఆٛͨ͠৭Ҏ֎͸࢖Θͳ͍
21. Thank you @hiloki @shiba_mamehiko
22. Special Guest Speaker Felix Rieseberg and more Speakers! https://inside-frontend.com/