Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

https://www.winticket.jp/

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

blue_500

Slide 12

Slide 12 text

blue_500 blue_400 blue_600

Slide 13

Slide 13 text

azure_500 azure_400 azure_600

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

primary_base primary_light primary_heavy

Slide 18

Slide 18 text

primary_base primary_light primary_heavy

Slide 19

Slide 19 text

Primary Button LABEL Primary Color

Slide 20

Slide 20 text

Primary Button LABEL Primary Color

Slide 21

Slide 21 text

azure_base azure_light azure_dark

Slide 22

Slide 22 text

azure_base azure_lighter_15 azure_darker_10

Slide 23

Slide 23 text

blue? azure_base? azure_dark_10?

Slide 24

Slide 24 text

$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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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)

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

.button { @include button_primary_color; } Sass

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Thank you @hiloki @shiba_mamehiko