Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
PLAIDのデザイナーから見た「正しいものを正しくつくる」
hagipen
August 21, 2019
Design
0
1.4k
PLAIDのデザイナーから見た「正しいものを正しくつくる」
『正しいものを正しくつくる』について、エンジニア、デザイナー、BizDevそれぞれの現場から考える
https://devlove.doorkeeper.jp/events/95482
hagipen
August 21, 2019
Tweet
Share
More Decks by hagipen
See All by hagipen
Directorだった私がDesignerになった理由
hagipen
2
410
Other Decks in Design
See All in Design
マルチブランドの実装としてのペパボのデザインシステム「Inhouse」
shikakun
1
280
「気持ちのよい朝」をつくるデザイン
zhikto
0
150
2022年Webデザイントレンド総まとめ
satoshi_shimoyama
1
110
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
visional_design
3
3.4k
メンタルモデルとは? カスタマーサポート向けズレ埋め勉強会
aguringo
1
620
The Triangle
wallabites
0
140
Night at the Conbini
clarissechua
1
170
サイボウズ デザイン&リサーチ ポートフォリオ勉強会2022
0b1tk
2
3.4k
tsunasapo_branch-concept202007
tsunasapo
0
190
アプリデザインの 難しさ
yutaabe200
1
200
Nobel Finds a Staryu
innsamity
0
420
若手広告プランナーのキャリアについて
cyberagentdevelopers
PRO
0
210
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
127
5.5k
Docker and Python
trallard
27
1.6k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
KATA
mclloyd
7
8.8k
Building an army of robots
kneath
298
40k
The Mythical Team-Month
searls
210
39k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
6k
Designing for humans not robots
tammielis
241
24k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Intergalactic Javascript Robots from Outer Space
tanoku
260
25k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Transcript
1 ɹɹʛɹɹൃදࢿྉɹɹʛɹɹ2019.08.21ɹɹʛɹʰਖ਼͍͠ͷΛਖ਼ͭ͘͘͠Δʱʹ͍ͭͯɺΤϯδχΞɺσβΠφʔɺBizDevͦΕͧΕͷݱ͔Βߟ͑Δɹ ʛ ɹ© 2019 PLAID DESIGN ਖ਼͍͠ͷΛਖ਼ͭ͘͘͠Δ PLAIDのデザイナーからみた
2 ɹɹʛɹɹൃදࢿྉɹɹʛɹɹ2019.08.21ɹɹʛɹʰਖ਼͍͠ͷΛਖ਼ͭ͘͘͠Δʱʹ͍ͭͯɺΤϯδχΞɺσβΠφʔɺBizDevͦΕͧΕͷݱ͔Βߟ͑Δɹ ʛ ɹ© 2019 PLAID DESIGN 萩⾕ 都未 株式会社プレイド
デザイナー 2019/1 ⼊社 ゲーム好き Nickname : hagi ⾃⼰紹介 元ディレクター Twitterコミュ症 LINEスタンプについ課⾦しちゃう 発表不慣れで緊張中
3 話すこと 1. Why 2. How 3. What 4. Realize
৫ͱͯ͠ͷಈ͖ ͳͥΔͷ͔ ۩ମతʹͲ͏։ൃ͍ͯ͠Δͷ͔ Α͔ͬͨ͜ͱ/՝/͜Ε͔Β
4 話すこと 1. Why 2. How 3. What 4. Realize
৫ͱͯ͠ͷಈ͖ ͳͥΔͷ͔ ۩ମతʹͲ͏։ൃ͍ͯ͠Δͷ͔ Α͔ͬͨ͜ͱ/՝/͜Ε͔Β
Why / なぜやるのか 5 ੑ֨ ਓछ ׂ ܦݧ ಇ͖ํ ݴޠ
৬ ਓ ࢤ πʔϧ Ϗδωε ཁٻ ։ൃख๏ ༷ ࢢ ཁ݅ ϓϩμΫτ Ϗδϣϯ 多様性に溢れる時代
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 ग़యɿUser Experience Honeycomb ग़యɿUXD Force Fields ग़యɿThe Disciplines of
User Experience Why / なぜやるのか どこからどこまでがデザイン?
8 難しい ! Why / なぜやるのか
9 ユーザー、エンドユーザー、 そして会社の幸せ Why / なぜやるのか わたしたちが⽬指しているのは = プロダクトを通じて⼈や社会を幸せにしたい
10 難しいけれど、 実現に向けて模索しながら進める必要がある Why / なぜやるのか
11 話すこと 1. Why 2. How 3. What 4. Realize
৫ͱͯ͠ͷಈ͖ ͳͥΔͷ͔ ۩ମతʹͲ͏։ൃ͍ͯ͠Δͷ͔ Α͔ͬͨ͜ͱ/՝/͜Ε͔Β
12 σʔλʹΑͬͯ ਓͷՁΛ ࠷େԽ͢Δ PLAIDのミッション How / 組織としての動き
13 ϑΥʔΧε ϛογϣϯ Ϗδϣϯ ϑΥʔΧε ϑΥʔΧε ϑΥʔΧε ϑΥʔΧε ϑΥʔΧε ϑΥʔΧε
ϑΥʔΧε ϑΥʔΧε How / 組織としての動き PLAIDの多様性
14 12 migita kazuto yukiko.okada takahashikazuki koba wataru.inaba sanshiro yamanoku
tomo kim su satomi.hagiya How / 組織としての動き 現在のデザインチーム
How / 組織としての動き 15 for MARKETINGɹ認知や⾏動を促す for PRODUCTɹ価値をみがく for CUSTOMER
SUCCESSɹ顧客を成功に導く for PRODUCTɹ価値をつくる for ASSETSɹ武器をつくる for COMMUNITYɹ顧客の交流や学びを促す デザインの対象領域
How / 組織としての動き 16 for MARKETINGɹ認知や⾏動を促す for PRODUCTɹ価値をみがく for CUSTOMER
SUCCESSɹ顧客を成功に導く for PRODUCTɹ価値をつくる for ASSETSɹ武器をつくる for COMMUNITYɹ顧客の交流や学びを促す デザインの対象領域 領域はない
17 オフラインイベントのVIやWebサイト for MARKETING やっていること やっている⼈ CX DIVE 最先端のCX (顧客体験)
を学び、 体 験できるカンファレンス。 イベントのVIとWebサイトを制作。
18 やっていること デザインシステムの既存画⾯への適⽤ for PRODUCT やっている⼈ 杞ְ걄㚖ד䞔㜠㢳ֻⰅ鴥זָծ〳铣䚍䬐⥂ׅח妌俑דכ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 鋅⳿׃הז俑㶵銲稆ח㼎׃ג黝欽կؐؑ؎ 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 アイデア検証のためのプロトタイピング for PRODUCT やっていること やっている⼈ Communication コミュニケーションの⽂脈で価値提 供できるプロダクトアイデアの企画。
提供価値を伝えるMVPとしての資料 やパネルをデザインし、 コアとなる価 値の検証をしている。
20 for Community 印象に残るノベルティ やっていること やっている⼈ KARTE Goods 対⾯した際に⼿渡すウォーターボト ルやノベルティなど。
オフラインコミュ ニケーションでの種になる仕掛けを 施したグッズのデザイン。
21 UIデザインの仮説検証を可能にするデータ整備 for ASSETS やっていること やっている⼈ Analytics組 これまで計測できていなかった細か な操作レベルの⾏動を計測すること で、
データに基づく仮説発⾒と検証 が可能になることを⽬指す活動。
22 Frontend Engineering UI Design Direction Customer Success Marketing Community
Product How / 組織としての動き デザイナー全員がオーバーラップしていく
23 KARTE User End User Business Design Technology How /
組織としての動き PLAIDメンバー全員がオーバーラップしていく
1. Why 2. How 4. Realize ৫ͱͯ͠ͷಈ͖ ͳͥΔͷ͔ Α͔ͬͨ͜ͱ/՝/͜Ε͔Β 24
話すこと 3. What ۩ମతʹͲ͏։ൃ͍ͯ͠Δͷ͔
25 やっていること デザインシステムの既存画⾯への適⽤ の場合 What / 具体的にどう開発しているのか やっている⼈ 杞ְ걄㚖ד䞔㜠㢳ֻⰅ鴥זָծ〳铣䚍䬐⥂ׅח妌俑דכ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 鋅⳿׃הז俑㶵銲稆ח㼎׃ג黝欽կؐؑ؎ 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 全画⾯に デザインシステムを適⽤ reBAISUのミッション What / 具体的にどう開発しているのか % ユーザー⽬線 統⼀された使いやすいUI
* 開発⽬線 管理や開発がしやすくなる
27 - デザインシステムを古い画⾯に適⽤ - 対象画⾯においてボトルネックとなってい る課題の解消 - より使いやすい操作や新しいパーツをデザ インシステムに適⽤ reBAISUでやること/やらないこと
What / 具体的にどう開発しているのか やること やらないこと - MUSTではない機能開発
28 - デザインシステムを古い画⾯に適⽤ - 対象画⾯においてボトルネックとなってい る課題の解消 - より使いやすい操作や新しいパーツをデザ インシステムに適⽤ reBAISUでやること/やらないこと
What / 具体的にどう開発しているのか やること やらないこと - MUSTではない機能開発 ·ͣશը໘ΛσβΠϯγεςϜʹ ద༻͢Δ͜ͱΛ༏ઌʂ ʢ͑ͨޙͰ͋ΕଞνʔϜಈ͖͘͢ͳΔͷͰʣ
29 チームの役割 Business Design Technology プロダクトオーナーという役割は置いていない ʘ 6݄͔ΒJOIN ʗ What
/ 具体的にどう開発しているのか
30 チームの役割 Business Design Technology 必要なときに必要なひとが⾳頭をと って進めていく これ調査しておきますね! What /
具体的にどう開発しているのか
31 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε What / 具体的にどう開発しているのか
32 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
33 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
34 - チームで⽅針を決める - 2ヶ⽉後の⽬標 - やること - やらないこと フォーカス計画
. 開発全体で⽅向性確認 What / 具体的にどう開発しているのか
35 / ざっくりスケジュール - 2ヶ⽉後までの流れを確認 - 修正前提で全体感を把握 フォーカス計画 What /
具体的にどう開発しているのか
36 フォーカス計画 0 ざっくりカンバン - スクラム⾵で独⾃のルール(極⼒管理しない) - 可視化とストックが⽬的 - 1週間スプリント
What / 具体的にどう開発しているのか
37 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
38 - 仕様を知る・課題を出す - エンジニアメンバーからの仕様共有 - ⾃分たちが思う課題 - 課題に対する解決案 現状を知る
What / 具体的にどう開発しているのか
39 . Issueの棚卸 1) どんな経路で⼊ってきたか 2) どんなジョブを解決したいか 3) どの画⾯に対するものか 4)
どのβプロダクトに対してか 現状を知る ͓͍߹Θͤཁɺ શࣾһ͕ϥϕϧ͚ͯ͠Issueʹʂʢ༗Γ͍ʣ What / 具体的にどう開発しているのか
40 / 社内ヒアリング - 社内の有識者 - 対象の機能・画⾯に熱い想いがある⽅ 現状を知る ͔Βͳ͍͜ͱΛΔɾҰॹʹͭ͘Δ What
/ 具体的にどう開発しているのか
41 0 ユーザーヒアリング - 要望・お問い合わせをくださった⽅ - 対象の機能・画⾯をよく利⽤されている ⽅をランダムに 現状を知る ͔Βͳ͍͜ͱΛΔɾβ൛ͷར༻ঢ়گΛΔ
What / 具体的にどう開発しているのか
42 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
43 - 課題まとめ・スコープ - 「現状を知る」で調査したことをmiroで まとめる - チームでスコープ決め 課題を⾒つける What
/ 具体的にどう開発しているのか
44 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
45 - スコープの共有 - ヒアリングに協⼒いただいたメンバーに 今回のスコープを共有 フィードバック What / 具体的にどう開発しているのか
46 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
47 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
48 - 進め⽅の⾒直し - 最初に引いたスケジュールをチームで⾒ 直す 開発計画 What / 具体的にどう開発しているのか
49 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
50 - こまめに共有 - Slackで連絡 - 今⽇やること(毎朝) - 確認・共有事項 開発
What / 具体的にどう開発しているのか
51 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
52 - デザイン案のFB - ヒアリング協⼒メンバーに、miroの画⾯ 遷移図上にコメントを貰う - MTGでユースケースや仕様を細かくヒア リング フィードバック
What / 具体的にどう開発しているのか
53 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
54 - 毎週振り返り会 - 今週やったこと - 困っていること - フリートーク -
KPT - Keep(継続中/習慣化) - Problem(もやもや/様⼦⾒) - Try(挑戦予定/挑戦中/pend) 振り返り ࢀߟɿ,15ʹ$PHHMFͱ͍͏8FCαʔϏε͕Φεεϝʂ What / 具体的にどう開発しているのか
55 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
56 - 社内でテスト - フィードバックで抜け漏れや課題を⾒ つける - 仕様を知ってもらう 社内リリース What
/ 具体的にどう開発しているのか
57 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
58 - βリリース - 利⽤頻度が⾼い画⾯は新旧を切り替え られるかたちでリリース - KARTE Friends Meetupでお知らせ
- チャットサポートに⼊る - KARTE Liveでどのように使っている かを知る What / 具体的にどう開発しているのか 社外リリース
59 . 本番リリース - β期間を決めてクリティカルなものに 対応後、切り替え 社外リリース What / 具体的にどう開発しているのか
60 トライ中の開発⽅法 ϑΥʔΧ εܭը ݱঢ়ΛΔ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ είʔϓܾఆ
։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める What / 具体的にどう開発しているのか
1. Why 2. How 3. What 4. Realize ৫ͱͯ͠ͷಈ͖ ͳͥΔͷ͔
۩ମతʹͲ͏։ൃ͍ͯ͠Δͷ͔ Α͔ͬͨ͜ͱ/՝/͜Ε͔Β 61 話すこと
62 KARTE User End User Business Design Technology 役割を決めすぎない Realize
/ 良かったこと 視点や視座が広がる
63 2ヶ⽉ ϑΥʔΧ εܭը ݱঢ়Λ Δ ՝Λ ݟ͚ͭΔ ϑΟʔυ όοΫ
είʔϓܾఆ ։ൃܭը ։ൃ ৼΓฦΓ ϑΟʔυ όοΫ ࣾϦϦʔε ࣾ֎ϦϦʔε 正しいものを探す 正しいものをつくる 精度を⾼める 早く出して改善していく Realize / 良かったこと
64 改善に時間が割けない デザインシステムで ⼟台を整えるのと並⾏して 改善も動けるかたちにできれば… Realize / 課題
65 デザインの フィードバックは難しい… フィードバック⽅法 Realize / 課題
66 より良くするために まだまだできていないことが多い… Realize / 課題
Realize / これから 67 ⽬指す先のゴールはみんな⼀緒。 みんなでつくる KARTE Friends 2 *
% & 3 4 5 6 7 8
68 正しいものはなに?正しくつくるにはどうしたらいい? を問い続けてより良く していきたい ! Realize / これから
69 まとめ 1. 早くリリース→振り返って改善をすることで確実性を上げていく 2. みんなでつくる、みんなで視点や視座を変えていく 3. 正しいものとはなに?正しくつくるにはどうしたらいい?を問い続ける
70 まだまだ試⾏錯誤中ですが、 きっとどんどん良くなっていくはず !
71 ぜひみなさんの 実体験や⼯夫も聞かせてください
72 ありがとうございました☺