PLAIDのデザイナーから見た「正しいものを正しくつくる」

『正しいものを正しくつくる』について、エンジニア、デザイナー、BizDevそれぞれの現場から考える
https://devlove.doorkeeper.jp/events/95482

Transcript

1. 1 ɹɹʛɹɹൃදࢿྉɹɹʛɹɹ2019.08.21ɹɹʛɹʰਖ਼͍͠΋ͷΛਖ਼ͭ͘͘͠Δʱʹ͍ͭͯɺΤϯδχΞɺσβΠφʔɺBizDevͦΕͧΕͷݱ৔͔Βߟ͑Δɹ ʛ ɹ© 2019 PLAID DESIGN ਖ਼͍͠΋ͷΛਖ਼ͭ͘͘͠Δ PLAIDのデザイナーからみた
2. 2 ɹɹʛɹɹൃදࢿྉɹɹʛɹɹ2019.08.21ɹɹʛɹʰਖ਼͍͠΋ͷΛਖ਼ͭ͘͘͠Δʱʹ͍ͭͯɺΤϯδχΞɺσβΠφʔɺBizDevͦΕͧΕͷݱ৔͔Βߟ͑Δɹ ʛ ɹ© 2019 PLAID DESIGN 萩⾕ 都未 株式会社プレイド デザイナー 2019/1 ⼊社 ゲーム好き Nickname : hagi ⾃⼰紹介 元ディレクター Twitterコミュ症 LINEスタンプについ課⾦しちゃう 発表不慣れで緊張中
3. 3 話すこと 1. Why 2. How 3. What 4. Realize ૊৫ͱͯ͠ͷಈ͖ ͳͥ΍Δͷ͔ ۩ମతʹͲ͏։ൃ͍ͯ͠Δͷ͔ Α͔ͬͨ͜ͱ/՝୊/͜Ε͔Β
4. 4 話すこと 1. Why 2. How 3. What 4. Realize ૊৫ͱͯ͠ͷಈ͖ ͳͥ΍Δͷ͔ ۩ମతʹͲ͏։ൃ͍ͯ͠Δͷ͔ Α͔ͬͨ͜ͱ/՝୊/͜Ε͔Β
5. Why / なぜやるのか 5 ੑ֨ ਓछ ໾ׂ ܦݧ ಇ͖ํ ݴޠ ໾৬ ਓ ࢤ޲ πʔϧ Ϗδωε ཁٻ ։ൃख๏ ࢓༷ ࢢ৔ ཁ݅ ϓϩμΫτ Ϗδϣϯ 多様性に溢れる時代
6. Why / なぜやるのか 6 CX Leader Team Success Personal Success Onboarding ࢪࡦͷPDCAΛճ͢ KARTE׆༻ͷ෯Λ֦େ ɾෳ਺νʔϜʹԣஅͯ͠CX ɹ޲্΁ͷऔΓ૊ΈΛ࣮ࢪ ɾKARTEͷػೳΛΑΓ׆༻͢Δ ࣾ֎΁ͷCXൃ৴ ɾCXϦʔμʔͱͯ͠ ɹࣾ಺֎Ͱ৘ใΛൃ৴͢Δ ɾࢪࡦͷ഑৴/վળΛ܁Γฦ͢ ɾABςετΛ࣮ߦ͢Δ ɾKARTEಋೖ໨తΛৼΓฦΔ KARTEͷػೳΛशಘ ɾӡ༻ମ੍ͷཱ֬ ɾKARTEͷඞਢػೳͷཧղ ɾࢪࡦͷݕ౼/ܾఆ ձࣾશମͰΤϯυϢʔβʔͷ ମݧΛྑ͍ͨ͘͠ ۀք / CX ΛϦʔυ͍ͨ͠ KARTEΛ࢖͍͜ͳ͍ͨ͠ KARTEͰޮՌΛײ͍ͨ͡ 3ϲ݄ ·ͣ͸ # $ % & & & % 使い始めてからがSTART
7. 7 ग़యɿUser Experience Honeycomb ग़యɿUXD Force Fields ग़యɿThe Disciplines of User Experience Why / なぜやるのか どこからどこまでがデザイン？
8. 8 難しい ！ Why / なぜやるのか
9. 9 ユーザー、エンドユーザー、 そして会社の幸せ Why / なぜやるのか わたしたちが⽬指しているのは = プロダクトを通じて⼈や社会を幸せにしたい
10. 10 難しいけれど、 実現に向けて模索しながら進める必要がある Why / なぜやるのか
11. 11 話すこと 1. Why 2. How 3. What 4. Realize ૊৫ͱͯ͠ͷಈ͖ ͳͥ΍Δͷ͔ ۩ମతʹͲ͏։ൃ͍ͯ͠Δͷ͔ Α͔ͬͨ͜ͱ/՝୊/͜Ε͔Β
12. 12 σʔλʹΑͬͯ
 ਓͷՁ஋Λ ࠷େԽ͢Δ PLAIDのミッション How / 組織としての動き
13. 13 ϑΥʔΧε ϛογϣϯ Ϗδϣϯ ϑΥʔΧε ϑΥʔΧε ϑΥʔΧε ϑΥʔΧε ϑΥʔΧε ϑΥʔΧε ϑΥʔΧε ϑΥʔΧε ૊ ૊ How / 組織としての動き PLAIDの多様性
14. 14 12 migita kazuto yukiko.okada takahashikazuki koba wataru.inaba sanshiro yamanoku tomo kim su satomi.hagiya How / 組織としての動き 現在のデザインチーム
15. How / 組織としての動き 15 for MARKETINGɹ認知や⾏動を促す for PRODUCTɹ価値をみがく for CUSTOMER SUCCESSɹ顧客を成功に導く for PRODUCTɹ価値をつくる for ASSETSɹ武器をつくる for COMMUNITYɹ顧客の交流や学びを促す デザインの対象領域
16. How / 組織としての動き 16 for MARKETINGɹ認知や⾏動を促す for PRODUCTɹ価値をみがく for CUSTOMER SUCCESSɹ顧客を成功に導く for PRODUCTɹ価値をつくる for ASSETSɹ武器をつくる for COMMUNITYɹ顧客の交流や学びを促す デザインの対象領域 領域はない
17. 17 オフラインイベントのVIやWebサイト for MARKETING やっていること やっている⼈ CX DIVE 最先端のCX （顧客体験） を学び、 体 験できるカンファレンス。 
 イベントのVIとWebサイトを制作。
18. 18 やっていること デザインシステムの既存画⾯への適⽤ for PRODUCT やっている⼈ 杞ְ걄㚖ד׮䞔㜠׾㢳ֻⰅ׸鴥׫זָ׵ծ〳铣䚍׾䬐⥂ׅ׷׋׭ח妌俑דכ3PCPUP׾䱰欽կㄤ俑כ/PUP
    4BOT׾竰竲կ醱侧遤ذؗأزך㜥さծぐ؟؎ؤך㛇彊⦼הז׷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 鋅⳿׃הז׷俑㶵銲稆ח㼎׃ג黝欽կؐؑ؎ 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 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" نةٝٓكٕ :disabled _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 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 default :hover :disabled selected karte-green #2AAB9F ˒ reBAISU デザインシステムで定義した内容を、 昔から存在している画⾯に対して適 ⽤していくプロジェクト。
19. 19 アイデア検証のためのプロトタイピング for PRODUCT やっていること やっている⼈ Communication コミュニケーションの⽂脈で価値提 供できるプロダクトアイデアの企画。 
 提供価値を伝えるMVPとしての資料 やパネルをデザインし、 コアとなる価 値の検証をしている。
20. 20 for Community 印象に残るノベルティ やっていること やっている⼈ KARTE Goods 対⾯した際に⼿渡すウォーターボト ルやノベルティなど。 オフラインコミュ ニケーションでの種になる仕掛けを 施したグッズのデザイン。
21. 21 UIデザインの仮説検証を可能にするデータ整備 for ASSETS やっていること やっている⼈ Analytics組 これまで計測できていなかった細か な操作レベルの⾏動を計測すること で、 データに基づく仮説発⾒と検証 が可能になることを⽬指す活動。
22. 22 Frontend Engineering UI Design Direction Customer Success Marketing Community Product How / 組織としての動き デザイナー全員がオーバーラップしていく
23. 23 KARTE User End User Business Design Technology How / 組織としての動き PLAIDメンバー全員がオーバーラップしていく
24. 1. Why 2. How 4. Realize ૊৫ͱͯ͠ͷಈ͖ ͳͥ΍Δͷ͔ Α͔ͬͨ͜ͱ/՝୊/͜Ε͔Β 24 話すこと 3. What ۩ମతʹͲ͏։ൃ͍ͯ͠Δͷ͔
25. 25 やっていること デザインシステムの既存画⾯への適⽤ の場合 What / 具体的にどう開発しているのか やっている⼈ 杞ְ걄㚖ד׮䞔㜠׾㢳ֻⰅ׸鴥׫זָ׵ծ〳铣䚍׾䬐⥂ׅ׷׋׭ח妌俑דכ3PCPUP׾䱰欽կㄤ俑כ/PUP
    4BOT׾竰竲կ醱侧遤ذؗأزך㜥さծぐ؟؎ؤך㛇彊⦼הז׷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 鋅⳿׃הז׷俑㶵銲稆ח㼎׃ג黝欽կؐؑ؎ 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 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" نةٝٓكٕ :disabled _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 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 default :hover :disabled selected karte-green #2AAB9F ˒ reBAISU デザインシステムで定義した内容を、 昔から存在している画⾯に対して適 ⽤していくプロジェクト。
26. 26 全画⾯に デザインシステムを適⽤ reBAISUのミッション What / 具体的にどう開発しているのか % ユーザー⽬線 統⼀された使いやすいUI * 開発⽬線 管理や開発がしやすくなる
27. 27 - デザインシステムを古い画⾯に適⽤ - 対象画⾯においてボトルネックとなってい る課題の解消 - より使いやすい操作や新しいパーツをデザ インシステムに適⽤ reBAISUでやること/やらないこと What / 具体的にどう開発しているのか やること やらないこと - MUSTではない機能開発
28. 28 - デザインシステムを古い画⾯に適⽤ - 対象画⾯においてボトルネックとなってい る課題の解消 - より使いやすい操作や新しいパーツをデザ インシステムに適⽤ reBAISUでやること/やらないこと What / 具体的にどう開発しているのか やること やらないこと - MUSTではない機能開発 ·ͣ͸શը໘ΛσβΠϯγεςϜʹ ద༻͢Δ͜ͱΛ༏ઌʂ ʢ੔͑ͨޙͰ͋Ε͹ଞνʔϜ΋ಈ͖΍͘͢ͳΔͷͰʣ
29. 29 チームの役割 Business Design Technology プロダクトオーナーという役割は置いていない ʘ 6݄͔ΒJOIN ʗ What / 具体的にどう開発しているのか
30. 30 チームの役割 Business Design Technology 必要なときに必要なひとが⾳頭をと って進めていく これ調査しておきますね！ What / 具体的にどう開発しているのか
31. 31 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε What / 具体的にどう開発しているのか
32. 32 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
33. 33 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
34. 34 - チームで⽅針を決める - 2ヶ⽉後の⽬標 - やること - やらないこと フォーカス計画 . 開発全体で⽅向性確認 What / 具体的にどう開発しているのか
35. 35 / ざっくりスケジュール - 2ヶ⽉後までの流れを確認 - 修正前提で全体感を把握 フォーカス計画 What / 具体的にどう開発しているのか
36. 36 フォーカス計画 0 ざっくりカンバン - スクラム⾵で独⾃のルール（極⼒管理しない） - 可視化とストックが⽬的 - 1週間スプリント What / 具体的にどう開発しているのか
37. 37 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
38. 38 - 仕様を知る・課題を出す - エンジニアメンバーからの仕様共有 - ⾃分たちが思う課題 - 課題に対する解決案 現状を知る What / 具体的にどう開発しているのか
39. 39 . Issueの棚卸 1) どんな経路で⼊ってきたか 2) どんなジョブを解決したいか 3) どの画⾯に対するものか 4) どのβプロダクトに対してか 現状を知る ͓໰͍߹Θͤ΍ཁ๬͸ɺ શࣾһ͕ϥϕϧ෇͚ͯ͠Issueʹʂʢ༗Γ೉͍ʣ What / 具体的にどう開発しているのか
40. 40 / 社内ヒアリング - 社内の有識者 - 対象の機能・画⾯に熱い想いがある⽅ 現状を知る ෼͔Βͳ͍͜ͱΛ஌ΔɾҰॹʹͭ͘Δ What / 具体的にどう開発しているのか
41. 41 0 ユーザーヒアリング - 要望・お問い合わせをくださった⽅ - 対象の機能・画⾯をよく利⽤されている ⽅をランダムに 現状を知る ෼͔Βͳ͍͜ͱΛ஌Δɾβ൛ͷར༻ঢ়گΛ஌Δ What / 具体的にどう開発しているのか
42. 42 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
43. 43 - 課題まとめ・スコープ - 「現状を知る」で調査したことをmiroで まとめる - チームでスコープ決め 課題を⾒つける What / 具体的にどう開発しているのか
44. 44 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
45. 45 - スコープの共有 - ヒアリングに協⼒いただいたメンバーに 今回のスコープを共有 フィードバック What / 具体的にどう開発しているのか
46. 46 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
47. 47 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
48. 48 - 進め⽅の⾒直し - 最初に引いたスケジュールをチームで⾒ 直す 開発計画 What / 具体的にどう開発しているのか
49. 49 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
50. 50 - こまめに共有 - Slackで連絡 - 今⽇やること（毎朝） - 確認・共有事項 開発 What / 具体的にどう開発しているのか
51. 51 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
52. 52 - デザイン案のFB - ヒアリング協⼒メンバーに、miroの画⾯ 遷移図上にコメントを貰う - MTGでユースケースや仕様を細かくヒア リング フィードバック What / 具体的にどう開発しているのか
53. 53 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
54. 54 - 毎週振り返り会 - 今週やったこと - 困っていること - フリートーク - KPT - Keep（継続中/習慣化） - Problem（もやもや/様⼦⾒） - Try（挑戦予定/挑戦中/pend） 振り返り ࢀߟɿ,15ʹ͸$PHHMFͱ͍͏8FCαʔϏε͕Φεεϝʂ What / 具体的にどう開発しているのか
55. 55 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
56. 56 - 社内でテスト - フィードバックで抜け漏れや課題を⾒ つける - 仕様を知ってもらう 社内リリース What / 具体的にどう開発しているのか
57. 57 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
58. 58 - βリリース - 利⽤頻度が⾼い画⾯は新旧を切り替え られるかたちでリリース - KARTE Friends Meetupでお知らせ - チャットサポートに⼊る - KARTE Liveでどのように使っている かを知る What / 具体的にどう開発しているのか 社外リリース
59. 59 . 本番リリース - β期間を決めてクリティカルなものに 対応後、切り替え 社外リリース What / 具体的にどう開発しているのか
60. 60 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়Λ஌Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
61. 1. Why 2. How 3. What 4. Realize ૊৫ͱͯ͠ͷಈ͖ ͳͥ΍Δͷ͔ ۩ମతʹͲ͏։ൃ͍ͯ͠Δͷ͔ Α͔ͬͨ͜ͱ/՝୊/͜Ε͔Β 61 話すこと
62. 62 KARTE User End User Business Design Technology 役割を決めすぎない Realize / 良かったこと 視点や視座が広がる
63. 63 2ヶ⽉ ϑΥʔΧ εܭը ݱঢ়Λ஌ Δ ՝୊Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾ಺ϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める 早く出して改善していく Realize / 良かったこと
64. 64 改善に時間が割けない デザインシステムで ⼟台を整えるのと並⾏して 改善も動けるかたちにできれば… Realize / 課題
65. 65 デザインの フィードバックは難しい… フィードバック⽅法 Realize / 課題
66. 66 より良くするために まだまだできていないことが多い… Realize / 課題
67. Realize / これから 67 ⽬指す先のゴールはみんな⼀緒。 みんなでつくる KARTE Friends 2 * % & 3 4 5 6 7 8
68. 68 正しいものはなに？正しくつくるにはどうしたらいい？ を問い続けてより良く していきたい ！ Realize / これから
69. 69 まとめ 1. 早くリリース→振り返って改善をすることで確実性を上げていく 2. みんなでつくる、みんなで視点や視座を変えていく 3. 正しいものとはなに？正しくつくるにはどうしたらいい？を問い続ける
70. 70 まだまだ試⾏錯誤中ですが、 きっとどんどん良くなっていくはず ！
71. 71 ぜひみなさんの 実体験や⼯夫も聞かせてください
72. 72 ありがとうございました☺