Slide 51
Slide 51 text
51
ɹɹʛɹɹ© 2019 PLAID Inc. 2019.11.12ɹɹʛɹɹDESIGN CAREER LTɹɹʛɹ
プロダクト改善
既存画⾯へのデザインシステム適⽤による
利⽤体験の改善
どのように取り組んできたか？
杞ְ걄㚖ד䞔㜠㢳ֻⰅ鴥זָծ〳铣䚍䬐⥂ׅח妌俑דכ3PCPUP䱰欽կㄤ俑כ/PUP4BOT竰竲կ醱侧遤ذؗأزך㜥さծぐ؟؎ؤך㛇彊⦼הזMJOF
IFJHIU㹀纏׃גְֻկ
TYPOGRAPHY
BAISU DESIGN SYSTEM for KARTE
Noto Sans CJK JP
֮
font-family:
ㄤ俑ה妌俑כ〸鎸䱰欽
Roboto
Aa
for title:
font-weight:bold
鋅⳿׃הז俑㶵銲稆ח㼎׃ג黝欽կؐؑ؎
زכCPMEךկ鋅⳿׃ח♧顐䚍䭯ׇ
חծOPSNBMכ黝欽׃זְկ
typo-default
rgba(0,16,14,0.8)
font-size:24px
line-height:36px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせ
כת搀ְկוֿד欰
ַהה鋅䔲ָא
ַטկ
font-size:20px
line-height:32px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת
搀ְկוֿד欰ַה
ה鋅䔲ָאַטկ
font-size:16px
line-height:28px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀
ְկוֿד欰ַהה鋅䔲ָ
אַטկ
for title:
font-weight:bold
鋅⳿׃הז俑㶵銲稆ח㼎׃ג黝欽կؐؑ؎
زכCPMEךկ鋅⳿׃ח♧顐䚍䭯ׇ
חծOPSNBMכ黝欽׃זְկ
typo-default-invert
rgba(255,255,255,1)
font-size:24px
line-height:36px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせ
כת搀ְկוֿד欰
ַהה鋅䔲ָא
ַטկ
font-size:20px
line-height:32px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת
搀ְկוֿד欰ַה
ה鋅䔲ָאַטկ
font-size:16px
line-height:28px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀
ְկוֿד欰ַהה鋅䔲ָ
אַטկ
؝ٝه٦طٝز⚥ך鸐䌢ך俑㶵ח黝欽կ䞔
㜠ך珏겲⮚⯓䏝➰׃ծꅾ銲䏝ח䘔ׄגؐؑ
؎ز⢪ְⴓֽկ
typo-default
rgba(0,16,14,0.8)
for paragraph: font-size:14px
line-height:24px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկו
ֿד欰ַהה鋅䔲ָאַטկ⡦
ד謬农ְׄׄ׃䨽דصٍ٦
صٍ٦岛ְגְ✲ֽכ鎸䥉׃גְ
կ
font-size:12px
line-height:20px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկוֿד欰
ַהה鋅䔲ָאַטկ⡦ד謬农ְׄ
ׄ׃䨽דصٍ٦صٍ٦岛ְגְ✲
ֽכ鎸䥉׃גְկグ鰳כֿֿד㨣ג➂
הְֲך鋅կ
font-size:10px
line-height:16px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկוֿד欰ַה
ה鋅䔲ָאַטկ⡦ד謬农ְׄׄ׃䨽דصٍ٦
صٍ٦岛ְגְ✲ֽכ鎸䥉׃גְկグ鰳כֿֿד
㨣ג➂הְֲך鋅կ׃ַ֮הד耀ֻה
כ剅欰הְֲ➂⚥ד♧殢样䝤ז珏做דֲ֮կ
font-weight:normal
line-height:24px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկו
ֿד欰ַהה鋅䔲ָאַטկ⡦
ד謬农ְׄׄ׃䨽דصٍ٦
صٍ٦岛ְגְ✲ֽכ鎸䥉׃גְ
կ
font-weight:normal
line-height:20px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկוֿד欰
ַהה鋅䔲ָאַטկ⡦ד謬农ְׄ
ׄ׃䨽דصٍ٦صٍ٦岛ְגְ✲
ֽכ鎸䥉׃גְկグ鰳כֿֿד㨣ג➂
הְֲך鋅կ
font-weight:normal
line-height:16px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկוֿד欰ַה
ה鋅䔲ָאַטկ⡦ד謬农ְׄׄ׃䨽דصٍ٦
صٍ٦岛ְגְ✲ֽכ鎸䥉׃גְկグ鰳כֿֿד
㨣ג➂הְֲך鋅կ׃ַ֮הד耀ֻה
כ剅欰הְֲ➂⚥ד♧殢样䝤ז珏做דֲ֮կ
for caption:
؝ٝه٦طٝز⚥ך鸐䌢ך俑㶵ח黝欽կ䞔
㜠ך珏겲⮚⯓䏝➰׃ծⶰ如涸ז䞔㜠ח㼎׃
ג黝欽ׅկ
typo-caption
rgba(0,16,14,0.55)
font-size:14px
line-height:24px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկו
ֿד欰ַהה鋅䔲ָאַטկ⡦
ד謬农ְׄׄ׃䨽דصٍ٦
صٍ٦岛ְגְ✲ֽכ鎸䥉׃גְ
կ
font-size:12px
line-height:20px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկוֿד欰
ַהה鋅䔲ָאַטկ⡦ד謬农ְׄ
ׄ׃䨽דصٍ٦صٍ٦岛ְגְ✲
ֽכ鎸䥉׃גְկグ鰳כֿֿד㨣ג➂
הְֲך鋅կ
font-size:10px
line-height:16px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկוֿד欰ַה
ה鋅䔲ָאַטկ⡦ד謬农ְׄׄ׃䨽דصٍ٦
صٍ٦岛ְגְ✲ֽכ鎸䥉׃גְկグ鰳כֿֿד
㨣ג➂הְֲך鋅կ׃ַ֮הד耀ֻה
כ剅欰הְֲ➂⚥ד♧殢样䝤ז珏做דֲ֮կ
font-weight:normal
line-height:24px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկו
ֿד欰ַהה鋅䔲ָאַטկ⡦
ד謬农ְׄׄ׃䨽דصٍ٦
صٍ٦岛ְגְ✲ֽכ鎸䥉׃גְ
կ
font-weight:normal
line-height:20px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկוֿד欰
ַהה鋅䔲ָאַטկ⡦ד謬农ְׄ
ׄ׃䨽דصٍ٦صٍ٦岛ְגְ✲
ֽכ鎸䥉׃גְկグ鰳כֿֿד㨣ג➂
הְֲך鋅կ
font-weight:normal
line-height:16px
グ鰳כ枾ד֮կ
グ鰳כ枾ד֮կせכת搀ְկוֿד欰ַה
ה鋅䔲ָאַטկ⡦ד謬农ְׄׄ׃䨽דصٍ٦
صٍ٦岛ְגְ✲ֽכ鎸䥉׃גְկグ鰳כֿֿד
㨣ג➂הְֲך鋅կ׃ַ֮הד耀ֻה
כ剅欰הְֲ➂⚥ד♧殢样䝤ז珏做דֲ֮կ
bg-palegray
rgba(0,16,14,0.03)
ك٦أؕٓ٦ה׃גծ⟃♴ך葿㹀纏׃גְתׅկIPWFSװBDUJWFזו朐䡾㢌⻉ך葿חאְגכծךBUPNTװDPNQPOFOUTⰻדꟗׄג㹋鄲ׅךה׃ծ害欽DMBTTה׃ג
כ佝׃זְֿהד醱꧟ָׁ㟓ִֿהֺתׅկ
COLOR
BAISU DESIGN SYSTEM for KARTE
bg-lightgray
rgba(0,16,14,0.06)
bg-darkgray
rgba(0,16,14,0.8)
bg-gray
rgba(0,16,14,0.55)
bg-karte
#2AAB9F
bg-white
#FFFFFF
bg-transparent
transparent
typo-default
rgba(0,16,14,0.8)
typo-critical
#C42F27
typo-success
#1D76BF
typo-attention
#EF9816
bg-critical
#C42F27
bg-success
#1D76BF
bg-attention
#EF9816
text color
俑㶵כرؿٕؓزהٍؗفءّٝ欽
ך珏겲ك٦أחծ农ְ胜兝欽ך
⿾鯄晛欽䠐կ
ؕٓ٦؝٦سדכזֻSHCBד䭷㹀ׅ
ֿהדծ胜兝葿ח꼧厩״ֲח׃
גְתׅկ
ך➭ծ،ٓ٦ز邌爙װ،ٓ٦ز،
؎؝ٝ䟝㹀׃葿珏겲欽䠐կ
background color
葿ך؎ً٦آ䊩〸ֻׁזְ
ךـٓٝسؕٓ٦ծ،ٓ٦زؕ
ٓ٦חאְגכؕٓ٦؝٦سד䭷
㹀կ
鷲僇䏝䭯ׇֿהדծꅾיה
ֹך䭁䓸䚍ְׇؚٖ٦أ
؛٦ٕ禸ך葿חאְגכSHCBד䭷㹀
׃גְתׅկ
typo-caption
rgba(0,16,14,0.55)
typo-default-invert
rgba(255,255,255,1)
typo-caption-invert
rgba(255,255,255,0.55)
BUTTON
BAISU DESIGN SYSTEM for KARTE
rule
نةٝ銲稆כ〸鎸ך銲稆ך穈さ
ׇד圓䧭׃גְתׅկ
theme
俑㶵؟؎ؤծ俑㶵葿ծ胜兝葿ծ
ぐ珏أذ٦ز㹀纏
_primary
_basicLight
_basicDark
_support
size
넝ׁծ俑㶵؟؎ؤ♳剅ֹ
small
middle
large
decoration
،؎؝ٝך剣搀ծ⡘縧㹀纏
plain
icon-left
icon-right
icon
text color
typo-default-invert
rgba(255,255,255,1)
alpha:0.3
rgba(255,255,255,0.3)
_basicDark
CBTJDכծQSJNBSZך如חꅾ銲ז،
ؙءّٝח欽ְنةٝדׅկ胜兝
葿ח䘔ׄגծMJHIUהEBSL⢪ְⴓ
ֽגְֻׁկ
نةٝٓكٕ
default :hover :active :disabled
aria-busy="false"
aria-busy="true"
نةٝٓكٕ نةٝٓكٕ نةٝٓكٕ
نةٝٓكٕ
نةٝٓكٕ نةٝٓكٕ نةٝٓكٕ
preview
bg-white
preview
bg-dark
bg color
bg-gray
rgba(0,16,14,0.55)
bg-gray
rgba(0,16,14,0.55)
alpha:75%
rgba(0,16,14,0.75)
alpha:75%
rgba(0,16,14,0.75)
alpha:30%
rgba(0,16,14,0.3)
_basicLight
CBTJDכծQSJNBSZך如חꅾ銲ז،
ؙءّٝח欽ְنةٝדׅկ胜兝
葿ח䘔ׄגծMJHIUהEBSL⢪ְⴓ
ֽגְֻׁկ
text color
نةٝٓكٕ
default
نةٝٓكٕ
:hover
نةٝٓكٕ
:active
نةٝٓكٕ
:disabled
preview
typo-default
rgba(0,16,14,0.8)
alpha:0.2
rgba(0,16,14,0.2)
bg color
bg-lightgray
rgba(0,16,14,0.06)
bg-lightgray
rgba(0,16,14,0.06)
alpha:20%
rgba(0,16,14,0.2)
alpha:20%
rgba(0,16,14,0.2)
alpha:3%
rgba(0,16,14,0.03)
aria-busy="false"
aria-busy="true"
_primary
QSJNBSZכծ♧鸬ךفٗإأך㨣
♧鸬ךفٗإأ如ח鹌♧
鸬ךفٗإأך㸣✪זוծ歗ⰻד
剑ꅾ銲ז،ؙءّٝ爙ׅꥷח欽
ְתׅկ
نةٝٓكٕ
default
نةٝٓكٕ
:hover
نةٝٓكٕ
:active aria-busy="false"
aria-busy="true"
bg-karte
#2AAB9F
bg-karte
#2AAB9F
+black20%
#21887F
+white20%
#54BBB2
typo-default-invert
rgba(255,255,255,1)
alpha:0.3
rgba(255,255,255,0.3)
نةٝٓكٕ
:disabled
+black20%
#21887F
_critical
DSJUJDBMכծꤐװ鍑秈זוծ灶㠨
涸٥♶〳鷞涸ז،ؙءّٝ爙ׅꥷ
ח欽ְתׅկ
نةٝٓكٕ
default
نةٝٓكٕ
:hover
نةٝٓكٕ
:active aria-busy="false"
aria-busy="true"
bg-critical
#C42F27
bg-critical
#C42F27
+black20%
#9C251F
+white20%
#CF5852
typo-default-invert
rgba(255,255,255,1)
alpha:0.3
rgba(255,255,255,0.3)
نةٝٓكٕ
:disabled
+black20%
#9C251F
_support
TVQQPSUכծQSJNBSZװCBTJDח➰ꥤ
׃ծ㼎חז،ؙءّٝח欽ְن
ةٝדׅկ⢽⥂㶷ח㼎ٍׅؗ
ٝإٕկ鷄⸇ח㼎ׅꤐ
text color
نةٝٓكٕ
default
نةٝٓكٕ
:hover
نةٝٓكٕ
:active
نةٝٓكٕ
:disabled
preview
typo-default
rgba(0,16,14,0.8)
alpha:0.2
rgba(0,16,14,0.2)
bg color
transparent
rgba(0,16,14,0)
alpha:6%
rgba(0,16,14,0.06)
alpha:10%
rgba(0,16,14,0.1)
transparent
rgba(0,16,14,0)
alpha:3%
rgba(0,16,14,0.03)
aria-busy="false"
aria-busy="true"
bg-white
#FFFFFF
FORM
BAISU DESIGN SYSTEM for KARTE
input text
input type
DIFDLCPY
٥醱侧갪湡ⰻַ⟣䠐ךא⟃♳ך
갪湡鼅䫛遤ֲ㜥さ
٥אך갪湡ח㼎ׅPOPךⴖ
剏ִַאծ⽯儗⿾僥ׁזְ갪湡ך
㜥さ
חⵃ欽ׅկ
SBEJP
٥醱侧갪湡ⰻַ⟣䠐ך갪湡ך鼅
䫛⤛ׅ㜥さ
checkbox
radio
toggle
QMBDFIPMEFS
bg-white
#FFFFFF
1px solid
rgba(0,16,14,0.2)
1px solid
rgba(0,16,14,0.2)
1px solid
rgba(0,16,14,0.1)
˒
2px solid
#EF9816
bg-white
#FFFFFF
bg-white
#FFFFFF
bg-white
#FFFFFF
bg-white
#FFFFFF
bg color
border
text color
preview QMBDFIPMEFS QMBDFIPMEFS
default
ذؗأز
disable
ذؗأز
inputed
hover focus
ذؗأز
error
validarion
message
ذؗأز
ؒٓ٦ⰻ㺁铡僇ׅذؗأز
default disable
inputed
hover
button-hover button-click
focus error
涯胜兝晛㹀纏կ
랲胜兝晛חאְגכ歗⡲䧭ך堣⠓
ָדֹة؎ىؚٝד嗚鎢ׅկ
˒
˒ ˒
typo-default
rgba(0,16,14,0.8)
typo-default
rgba(0,16,14,0.8)
alpha:0.3
rgba(0,16,14,0.3)
alpha:0.2
rgba(0,16,14,0.2)
2px solid
rgba(0,16,14,0.06)
2px solid
#2AAB9F
floating
label color
˒
typo-default
rgba(0,16,14,0.8)
typo-default
rgba(0,16,14,0.8)
alpha:0.3
rgba(0,16,14,0.3)
alpha:0.2
rgba(0,16,14,0.2)
˒
ٓكָٕⰅתׅ
QMBDFIPMEFS
ٓكָٕⰅתׅ
QMBDFIPMEFS
ٓكָٕⰅתׅ
Ⰵ⸂幥ذؗأز
QMBDFIPMEFS
ٓكָٕⰅתׅ ٓكָٕⰅתׅ
IPHF
ٓكָٕⰅתׅ
ذؗأزذؗأز
floating
label
ذؗأزذؗأز
_middle
_large
font-size
padding
height
12px
14px
32px
40px
ذؗأزذؗأز
size
넝ׁה䊩〸ךQBEEJOHծ
俑㶵؟؎ؤ㹀纏կ
ذؗأزذؗأز
ذؗأزذؗأز
12px
12px
preview
ٓكָٕⰅתׅ ٓكָٕⰅתׅ
ٓكָٕⰅתׅ ٓكָٕⰅתׅ
ٓكָٕⰅתׅ
ٓكָٕⰅתׅ
ٓكָٕⰅתׅ
ٓكָٕⰅתׅ
x-small
default :hover :disabled
selected
toggle : off :hover :disabled
toggle : on
karte-green
#2AAB9F
˒