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...
Search
hiloki
May 13, 2019
Design
3
260
理想のカラーパレットをもとめて / 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.5k
私はいかにしてUXエンジニアになったのか / ux_engineer_meetup
hiloki
4
18k
理想のカラーパレットをもとめて / color-palette-name-convention
hiloki
2
8.3k
Other Decks in Design
See All in Design
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
320
役立つシステムを作るためのAI活用
kanzaki
0
110
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
130
「UXとUIの違い」v2
shirasu3
0
250
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
520
Liquid GlassとApp Intents
touyou
0
410
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
370
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
180
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.9k
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
110
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
410
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
A designer walks into a library…
pauljervisheath
209
24k
Embracing the Ebb and Flow
colly
88
4.8k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
Optimizing for Happiness
mojombo
379
70k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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