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
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
350
harutaka Vision Deck
zenkigenforrecruit
0
250
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.6k
アクセシビリティに取り組むメリット
magi1125
2
260
Yumika Yamada Portfolio
yumii
0
1.8k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.8k
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
410
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
650
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
440
portfolio.pdf
onof003
0
180
decksh object reference
ajstarks
2
1.3k
Findyのプロデチームの 歩みとこれから
satty9556
0
290
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Why Our Code Smells
bkeepers
PRO
339
57k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Scaling GitHub
holman
463
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Statistics for Hackers
jakevdp
799
220k
Become a Pro
speakerdeck
PRO
29
5.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Raft: Consensus for Rubyists
vanstee
139
7.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
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