際際滷

際際滷Share a Scribd company logo
ともに深え、ともにつくる
Ichitani Toshihiro
偏?
仝リ`ン?ジャ`ニ`?スタイル々の
プロダクト_k
(My KeyWord)
偏? 
h編^侏アジャイル_k
屎しいものを屎しくつくる
埆廠
Ichitani Toshihiro
ともに深え、ともにつくる ?リ`ン?ジャ`ニ`?スタイル?
https://ichitani.com/
Pro?le
云?のテ`マ
ともに深え、ともにつくる
音_g來?い?のプロダクトづくりの?}でのMめ?
鵑臨r、俳gなn}、mしたソリュ`ション
蛍かっていることより、蛍からないことの?が謹い
xkの嫌恷?
┘札奪肇扎`ス
編^
鮫
h?宛
(モデル晒)
編^
u
フ祝
屎しいものを冥す
MVP蒙協
_k鮫
(リリ`スプラ
ンニング)
スプリントプ
ランニング
スプリント
_k
スプリント
レビュ`
スプリント
レトロスペクティ
ブ
MVP編^
アジャイル_k
屎しくつくる
肝の編^鮫
(フ祝)へ
xkの尅れ嫌恷?
┘櫂ぅ鵐肇扎`ス
h編^侏アジャイル_k
音_g來?い?のプロダクトづくりの?}でのMめ?
hキャンバスによるh?宛 インタビュ`やQ賀を宥じた
彜rの委燐(エスノグラフィ`)
?咼侫踪`ベ`スで
駅勣な碧MみのO
プロトタイプ崙恬
と{屁
プロトタイプ編^
hのupdate
☆KY粁Aでhキャンバス式び
?駅勣な間いプロダクトバックログがBう
モデル
Fg
モデル
Fg
蛍からないことを蛍かるようにする
仝蛍からないものを蛍かるようにする々藺
屎しいものを屎しくつくる
蛍からないからxk岔をレく隔つ
★ Qめ嬉ちしてg`えるとrg議p払が?きい
? (rgあたりで誼られる僥びが富ない)
恷も仝蛍かる々のは誅颪任呂覆Fgに
岷?したr
★ いかにFgに除い彜rを(コスパ措く)つくるか
仝蛍かる々に聞う鉦x(rg|嚠麻)を粁A議に
★ 僥びを試かす仝肝々のO=粁A晒
? (サンクコストの恷?晒)
xkの嫌恷?
┘札奪肇扎`ス
編^
鮫
h?宛
(モデル晒)
編^
u
フ祝
屎しいものを冥す
MVP蒙協
_k鮫
(リリ`スプラ
ンニング)
スプリントプ
ランニング
スプリント
_k
スプリント
レビュ`
スプリント
レトロスペクティ
ブ
MVP編^
アジャイル_k
屎しくつくる
肝の編^鮫
(フ祝)へ
xkの尅れ嫌恷?
┘櫂ぅ鵐肇扎`ス
?議xkの
粁A
g悶xkの
粁A
?粁xkの
粁A
コンセプトの編^ ユ`ザ`に
とって嗤?
かつ駅勣恷
?泙旅
のC嬬蒙協
ア`キテクチャ
O、
UIデザイン、
デ`タO
會xkの
粁A
プロダクトバックログ
のリファインメント
xkを ̄粁A ̄にすることで音_g來をIする
?箭えば、?粁xkの粁Aでコンセプトを
笋┐Q協の唹の?きさは苧らか
僥と吭房Q協の郡畯かつ粁A晒
音_g來へのm鬉箸蓮∂xkを恷m晒するために
を?峺すこと
xkの嫌恷?
┘札奪肇扎`ス
編^
鮫
h?宛
(モデル晒)
編^
u
フ祝
屎しいものを冥す
MVP蒙協
_k鮫
(リリ`スプラ
ンニング)
スプリントプ
ランニング
スプリント
_k
スプリント
レビュ`
スプリント
レトロスペクティ
ブ
MVP編^
アジャイル_k
屎しくつくる
肝の編^鮫
(フ祝)へ
xkの尅れ嫌恷?
┘櫂ぅ鵐肇扎`ス
ザ?プロダクトオ`ナ`
ワ`ルド
ザ?_kチ`ム
ワ`ルド
 ̄深える ̄ を??のプロダクトオ`ナ`がすべて嘘う弊順
xkの恷?晒に郡する
Toshihiro Ichitani All Rights Reserved. Photo credit: Steven Penton on VisualHunt / CC BY
プロダクトオ`ナ`の恙を
プロダクトの貧(ボトルネック)にしない
Photo credit: afagen on Visualhunt.com / CC BY-NC-SA
"プロダクトオ`ナ` ̄の?麼晒
PO??の恙、勸から
チ`ムの恙、勸へ
輝隼こうなるので
hと編^を嶄?に崔いて
プロダクトの児覆鬚垢
g悶としてはhキャンバス
h編^をPOだけではなく
チ`ムで?う
プロダクトにvする児覆鬟践`ムに凡す
(編^Y惚と僥びを慌揖侭嗤する)
歌鮫宀の謹來でもって
プロダクトの音_g來に森する
Photo on VisualHunt
謹來 ? C嗤
プロダクトづくりに謹來を函りzむ、では肝に?峺すことは
謹來によってレがるxkに恷?渤m鬉靴討い
ともに深え、ともにつくる
嶷怙議h編^
ジャ`ニ`スタイル
フォ`メ`ション?パタ`ン
m宀?贋侏ア`キテクチャ
h編^
プロセス
チ`ム
ア`キ
嶷怙議h編^
h編^の翌壓晒
及1粁A
1?の盾を??議に擦┐ hキャンバスでhを翌壓晒
(lでも燕苧が竃栖る)
(盾を^から函り竃す)
h編^
嶷怙議h編^
h編^の嶷怙晒
及2粁A
(それぞれが盾し譴浦呂錣擦)
それぞれの嶄にhを隔ち、
慌宥の尖盾にして譴浦呂錣擦
?謹なメンバ`=謹な盾への豚棋
?編^を宥じてのh?宛が念戻
?h編^のg仏リ`ドや盾の
?メンタ`叨は駅勣(h編^リ`ド)
h編^
嶷怙議h編^
坪何冥沫と翌何冥沫の住餓
g樹
プロダクト
レビュ`
PR
プロダクトレビュ`(坪何冥沫)
畠T歌紗で麼勣ユ`スケ`スの
ウォ`クスル`(gHに聞う)
プロダクトレビュ`のY惚
m卷hやupdate
ユ`ザ`テスト(翌何冥沫)
?チ`ムのhをユ`ザ`
にgHに戻工してQ賀する
★仟たなhを誼る
h編^
ともに深え、ともにつくる
嶷怙議h編^
ジャ`ニ`スタイル
フォ`メ`ション?パタ`ン
m宀?贋侏ア`キテクチャ
h編^
プロセス
チ`ム
ア`キ
ジャ`ニ`スタイル
プロダクトづくりもチ`ムもC嗤圓?めながら(詞竍)
それでいてきっちり彭仇はしたい(嵌會)
プロセス
rgとお?とともに?の吭Rも嗤泙淵螢秋`ス
决?と吭R?く、あるいは鹿嶄しAけられるわけではない
ビジョンだけではhくすぎる (彭仇嚠yが音辛嬬、吭RもAかない)
スプリントゴ`ルだけでは?さすぎる (レンガをeみ貧げ?を?峺す)
粁A(ジャ`ニ`)のO
ゆえに、タイムボックスの夛晒でm鬉垢
ジャ`ニ`スタイル プロセス
スプリント < }方スプリント < ?議仇
1Lg まとまったg了のテ`マ
に護り輝てる豚g
並I貧の
マイルスト`ン
粁A(ジャ`ニ`)のO
?欺_したい?議仇の委燐から、剃麻して
?駅勣なジャ`ニ`を護り竃す
?光ジャ`ニ`での欺_彜B、峺砲
??、?Z晒、協楚晒する
?ジャ`ニ`をKえる業にふりかえり、
??議仇にむきなおる。m卷、ジャ`ニ`
?の决?(スプリント弖紗)、仟しいジャ`
?ニ`の弖紗を?う
?(スプリントは耕協、ジャ`ニ`は辛)
MVPの頼撹
u瞳の?鯉頼撹
(箭) チ`ムビルド
ジャ`ニ`スタイル プロセス
タイムボックスも、バックログも夛晒する
辛粮I囃を恬ることでC嗤圓?める (?鯰圓忙づく指の否叟さ)
プロダクトバックログ
ジャ`ニ`バックログ
スプリントバックログ
及1ジャ`ニ`のバックログはここまで
及2ジャ`ニ`のバックログは兵めるrに
リファインメントする
(プロダクトレビュ`を豫む辛嬬來が?い)
秤鵑料6筏弔縫献礬`ニ`
バックログでプロダクト
チ`ムとステ`クホルダ`で
コミュニケ`ションしたい
ジャ`ニ`バックログg了で
チ`ムをY撹するので、チ`
ムをやすスケ`ルポイント
になりうる
ともに深え、ともにつくる
嶷怙議h編^
ジャ`ニ`スタイル
フォ`メ`ション?パタ`ン
m宀?贋侏ア`キテクチャ
h編^
プロセス
チ`ム
ア`キ
フォ`メ`ション?パタ`ン チ`ム
ミッションC
ミッションB
ミッションA
光ジャ`ニ`阿傍淳_したい
仝ミッション々はなる
輝隼、ミッションgFに駅勣な
チ`ムのC嬬來も、?もなる
ジャ`ニ`にあわせて、
?チ`ムのフォ`メ`ション
?チ`ムのファ`スト(麼x)
を辛笋砲垢
箭)ジャ`ニ`ミッション
仝UIの個鋲々
箭)ジャ`ニ`ミッション
仝プロダクト個鋲瘁のu々
フロント_kメンバ`謹? 編^メンバ`謹?
フォ`メ`ションとして仝リ`ド々
を崔く。箭えば、フロントエンド
リ`ドはフロントエンドの_kの
g廾と吭房Q協、fPを枠Г垢
ミッションに駅勣なリ`ドを崔く
刄?專蝕k
/papanda/ss-142143920
しくはこちら
仝刄?專蝕k々
☆フォ`メ`ションの?箭
フォ`メ`ション?パタ`ン チ`ム
チ`ムイズムを笋┐
ジャ`ニ`をMむにあたって、チ`ムで採を枠するか
?のうち、どの業栽いを?めるか織潺奪轡腑鵑鳳慴な
ファ`スト(麼x)のxkを?う
(ジャ`ニ`スタイルだからこそチ`ムイズムを笋┐笋垢)
チ`ムファ`スト
?麼議な壓り?を、及?
とする。栽吭による吭房Q協。
チ`ムのfP湖を?める仏貨
のg仏に嶷泣を崔く。
プロダクトファ`スト
プロダクトで撹惚をあげるこ
とを及?とする。そのために
駅勣なアウトプットを恷枠
にする。
タスクファ`スト
タスクの晒を恷枠とする。
コマンド&コントロ`ルもしく
は?斌糾になりがち。?豚
晒するとFがq詐晒する。
ファ`ストのパタ`ン箭
ともに深え、ともにつくる
嶷怙議h編^
ジャ`ニ`スタイル
フォ`メ`ション?パタ`ン
m宀?贋侏ア`キテクチャ
h編^
プロセス
チ`ム
ア`キ
m宀?贋侏ア`キテクチャ ア`キ
ア`キテクチャのxkを、プロダクトにvする尖盾の
侮まりに栽わせる。
尖盾とは、彜rの、n}の、盾Q貨の採が蛍かったのか。
蛍かった業栽いに鬉犬董鹸里坊屬りたいこと々を
し、そのためのア`キテクチャをxkする。
https://blog.crisp.se/2016/01/25/henrikkniberg/making-sense-of-mvp
Fg浴爆爆
もっともリアリティのある仝蛍かる々は、覿┘罘`ザ`に
Fgのプロダクトそのものを聞ってもらうこと。
編^の鮫づくりにあたっては、いかに仝Fg湖のある々
(でもFgのプロダクトではない)?粁で覿┘罘`ザ`の
郡鬉?るかが醜泣となる。
m宀?贋侏ア`キテクチャ ア`キ
R宜議にハリボテを
つくる
R宜議に蛍xして
つくる
(フロントエンドとバックエンド)
まだ採が駅勣なのか
篇ついていない
採が}なのか蛍かって
きた。乾れるもの戻工。
どんなC嬬來が駅勣なのか
蛍かってきた。夛恷m晒
Fg浴爆爆のMみ?イメ`ジ
\?、スケ`ルを覿┐
夛嶷のO
箭えばXDや?gmaで
ビジュアルプロトタイプ
を軟す
箭えばフロントはvue.jsで
バックエンドは?rebaseで
つくる
箭えばフロントのvue.jsは
火し、バックエンドを
?rebaseからRDBやGraphQL
念戻に卞砿する
m宀?贋侏ア`キテクチャ ア`キ
Fgを浴爆させながら(ユ`ザ`にとってはほぼFg)、
編^Y惚からの仝僥びの@覚々と念r旗のzを旋?した
仝夛Q々を?う
箭えばXDや?gmaで
ビジュアルプロトタイプ
を軟す
箭えばフロントはvue.jsで
バックエンドは?rebaseで
つくる
箭えばフロントのvue.jsは
火し、バックエンドを
?rebaseからRDBやGraphQL
念戻に卞砿する
デザインの岑R@覚 フロントの夛@覚
m宀?贋侏ア`キテクチャ ア`キ
g樹
あるプロダクトでのm宀?贋ア`キテクチャm?
2018定
恬をK阻 ?gmaで
ビジュアル恬り
zみ
屡に恬を?ってい
た蕁▲咼献絅▲襪
イメ`ジがある。
この粁Aで?業娼@
なビジュアルプロト
で莿弋弔閉擴震祝
HTML恬撹
+
AtomicDesign
恬Cによる覿
ユ`ザ`での編^は
g仏g。PS?tの?
zみをつける。
ただし僥のY惚
兜豚のデ`タモデル
は篤`。
Vue.js
+
GraphQL
?稀HTMLベ`スで
?宥り鮫?をつくり
コンポ`ネントO
を?う。
夛Qが枠?で?
いやすように。
HTMLの⊇Mみをベ`スに
Vue.jsでフロント_kを枠
?。
フロントだけで咾侘に
してさらに坪何冥福Wれ
てバックエンドは夛Q
しやすいようGraphQL
m宀?贋侏ア`キテクチャ ア`キ
Atomic Design★?チ`ム送の夛晒
輝兜Atomic Designでコンポ`ネントOを?っていたが
仝協x貧の屎盾は採腎咫垢砲呂泙襦
チ`ムの翌から協xを函ってつけようとするのではなく
エンジニアとデザイナ`の輝並宀でコンポ`ネント協x。
a?
?レイヤ`夛をチ`ムで協x、兆念原けする
?光レイヤ`の佞鬟践`ムでQめること
? (蒙にロジックの佞魍屬辰織譽ぅ筴`のJRBえる)
?CSSの夛をて協xしたレイヤ`夛に栽わせる (ベ`スはFLOCSS)
?カタログ晒はStorybookで
m宀?贋侏ア`キテクチャ ア`キ
GraphQLでのバックエンドB
a?
仟しい悶YをgFするプロダクトほどデ`タ夛をQめ
きることができない(僥びによって壓るべきがl訓に笋錣)
デ`タ夛のQの唹を竃栖る泙蠑嵋晒したい。
Schemal嚔_k (フロントとバックのgはschemaの夛栽吭で割?)
?フロントとバックでそれぞれが鏡?して_kをMめられる
?バック箸魯禰`タ夛とAPIの餓蛍をg廾で托められる
?筝がk?する栽どう筝するのかをschemaに郡啌する
?ことでコミュニケ`ションミスをpらせる
m宀?贋侏ア`キテクチャ ア`キ
プロダクト_kのh廠隠畠
a?
GitHub CircleCI
Code
Build
Project
EKS-cluster
Production-Node-
Group
Staging-Node-Group
Production-
namespace
Staging-
namespace
Demo-namespace
CI/CDでプロダクト_kのh廠を隠畠。
ブランチ\?はgit feature ?ow。C嬬リリ`スの枠瘁を裏に砿尖。
m宀?贋侏ア`キテクチャ ア`キ
clickupでカンバン_k
a?
_kメンバ`がそれぞれの彜rによって蛍僅しがち (リモ`トワ`ク、}I)
揖豚イベントを恷?泙砲靴(☆1)、彜B砿尖をめに = カンバン
(☆1)揖豚イベントが富ない=
プロダクトについての慌宥尖盾を
圄みにくい。だからこそプロダク
トレビュ`の了崔づけが嶷勣。
(☆2)Clickupのスロット砿尖が
バックログの夛晒にmしている
con?dential con?dential
(☆2)
ともに深え、ともにつくる
嶷怙議h編^
ジャ`ニ`スタイル
フォ`メ`ション?パタ`ン
m宀?贋侏ア`キテクチャ
h?宛
プロセス
チ`ム
ア`キ
Y
仝蛍からないものを蛍かるようにする々ために
xkの嫌を隠ちつつ、h編^によってgっていく
(リ`ンu瞳_kのセットベ`スがベ`ス)
xkの嫌をレげるために、チ`ムの謹來を峺鬚垢
(揖rにプロダクトについての尖盾(児)をh編^で栽わせる)
謹な僥びに恷?渤m鬉垢襪燭瓩法▲廛蹈瀬トづくりの
C嗤圓?める
(嶷怙議h編^、ジャ`ニ`スタイル、フォ`メ`ションパタ`ン、
m宀?贋侏ア`キテクチャ)
リ`ン?ジャ`ニ`?スタイル
ともに深え、ともにつくるプロダクト_k
屎盾のoい弊順でそれでも念にMむために。
いに鬚栽うジャ`ニ`をAけよう。
x看
ともに深え、ともにつくるにあたるチ`ムメンバ`へ
Takahashi Toshiaki
Numata Keisuke
Okada Takumi
Matsuda Yasuaki
Kutsu Hirokazu?
Ogata Yuto
Masuda Kyohei
Abe Tadanori

More Related Content

ともに深え、ともにつくる ?リ`ン?ジャ`ニ`?スタイル?