Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
理想のカラーパレットをもとめて / color-palette-name-convention-at-wic
Search
hiloki
May 13, 2019
Design
3
240
理想のカラーパレットをもとめて / color-palette-name-convention-at-wic
WIC meetup(社内イベント) LT
hiloki
May 13, 2019
Tweet
Share
More Decks by hiloki
See All by hiloki
SPA/PWA時代のWebデザインのお作法 / Stateful Web Design
hiloki
10
3.2k
私はいかにしてUXエンジニアになったのか / ux_engineer_meetup
hiloki
4
17k
理想のカラーパレットをもとめて / color-palette-name-convention
hiloki
2
7.3k
Other Decks in Design
See All in Design
We Baby Bears-Triple T Tiger
yvonnehsuanho
PRO
0
410
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
160
PdMを始めたUIデザイナーのリアルな課題
muture
0
620
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
350
B/43プラスカードができるまで
putchomsmartbank
1
630
For My Dad- teaser
pdqsketch
PRO
0
170
Mitra Manual
nnidhz
0
140
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
3
1.2k
他人事じゃないWebアクセシビリティ入門
arihiro17
0
370
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
370
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.4k
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
220
Featured
See All Featured
Infographics Made Easy
chrislema
238
18k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Design by the Numbers
sachag
277
18k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
In The Pink: A Labor of Love
frogandcode
139
22k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
BBQ
matthewcrist
82
9k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Building an army of robots
kneath
301
42k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Transcript
໋໊ฤ ΧϥʔύϨοτΛͱΊͯ ཧͷ WIC Meetup 2019.05.13
UXΤϯδχΞ͔ͩσβΠϯΤϯδχΞ͔ͩ ୩ थ CyberAgent Advanced Technology Studio
https://www.winticket.jp/
https://ameblo.jp/shiba-mamehiko/
None
None
90 ͕͖͔Ͳ͏͔ sec % 90 ৭͚ͩʹجͮ͘
Θ͔Γ໊͍͢લΛఆٛ͢Δ ίϯτϥετΛߟྀ͢Δ ඞཁͳ৭ΛߜΓࠐΉ
Θ͔Γ໊͍͢લΛఆٛ͢Δ ίϯτϥετΛߟྀ͢Δ ඞཁͳ৭ΛߜΓࠐΉ
None
blue_500
blue_500 blue_400 blue_600
azure_500 azure_400 azure_600
https://atlassian.design/guidelines/brand/color
Snorlax https://atlassian.design/guidelines/brand/color
Snorlax https://atlassian.design/guidelines/brand/color ΧϏ̋ϯ
primary_base primary_light primary_heavy
primary_base primary_light primary_heavy
Primary Button LABEL Primary Color
Primary Button LABEL Primary Color
azure_base azure_light azure_dark
azure_base azure_lighter_15 azure_darker_10
blue? azure_base? azure_dark_10?
$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
button-primary-base button-primary-hover button-primary-active button-primary-text button-primary-text button-primary-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)
@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
.button { @include button_primary_color; } Sass
.button { background-color: #155AEE; color: #FCFDFD; } .button:hover { background-color:
#4D82F3; } .button:active { background-color: #114CCA; } CSS
ίϯτϥετൺΛอͭΛ͢Δ ڞ௨ݴޠͱͯ͠ѻ໊͍͍͢લʹ͢Δ ύϨοτͰఆٛͨ͠৭Ҏ֎Θͳ͍
Thank you @hiloki @shiba_mamehiko