利⽤体験の改善 どのように取り組んできたか? 杞ְ걄㚖ד䞔㜠㢳ֻⰅ鴥זָծ〳铣䚍䬐⥂ׅח妌俑דכ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 ˒