Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
esaのWIPの話 2019 / wip-2019
Search
ken_c_lo / TAEKO AKATSUKA
June 29, 2019
Design
6
2.4k
esaのWIPの話 2019 / wip-2019
とちぎRuby会議08でお話させていただきました。
http://regional-gh.rubykaigi.org/tochigi08/
https://esa.io
ken_c_lo / TAEKO AKATSUKA
June 29, 2019
Tweet
Share
More Decks by ken_c_lo / TAEKO AKATSUKA
See All by ken_c_lo / TAEKO AKATSUKA
認知パターンから考えるesaらしさのデザイン / Thinking esa-like design
ken_c_lo
35
7.7k
The esa way - Creating a Profitable Product from a Hobby Project
ken_c_lo
1
480
エンジニアのためのスライドデザイン実践講座 / How to design presentations for engineers
ken_c_lo
185
80k
esaのデザインの話 - 自分たちのWebサービスを作るデザイナーとしてやっていること / Design Talk of esa
ken_c_lo
50
10k
ノンデザイナーのためのコンセプト & ロゴ作り実践講座 feat. savanna.io
ken_c_lo
46
9.9k
esa.io - 趣味から育てるWebサービスの、仲間・会社・お金のつくりかた
ken_c_lo
33
7.6k
esaとRubyistとわたし
ken_c_lo
12
5k
デザイナー兼プロダクトオーナーのススメ
ken_c_lo
48
5.9k
たのしいesa #esa_io #devKan
ken_c_lo
12
3.3k
Other Decks in Design
See All in Design
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
200
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
360
Arborea Art Book
thebogheart
1
290
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
260
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.8k
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
610
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
32k
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
49k
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
3
170
202409_会社概要資料_Englishver.pdf
zakkerooni
0
210
ito aya|Portfolio2409
itoaya116
0
260
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
190
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.3k
Become a Pro
speakerdeck
PRO
25
5k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Embracing the Ebb and Flow
colly
84
4.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
For a Future-Friendly Web
brad_frost
175
9.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Faster Mobile Websites
deanohume
305
30k
Docker and Python
trallard
40
3.1k
Building an army of robots
kneath
302
43k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Designing for Performance
lara
604
68k
Transcript
esaͷWIPͷ 2019 by @ken_c_lo at esa LLC June 29, 2019
ͱͪ͗Rubyձٞ 08 WIP
!2 • ௩ ົࢠ • @ken_c_lo (@taea) • esa LLC
• ۀऀɾσβΠφʔ • ΤϯδχΞ2ਓ + σβΠφʔ1ਓ • ࠷ॳझຯͰαʔϏεΛ࡞͍ͬͯͨ • 5લ͔Β๏ਓԽ
https://esa.io
• MarkdownͰॻ͚Δใڞ༗αʔϏε • Wikiతͳ͍ํ͕Ͱ͖Δ esaΛ͝ଘͷํʁ ůŢ
None
esaͷWIPͷ 2019 by @ken_c_lo at esa LLC June 29, 2019
ͱͪ͗Rubyձٞ 08 WIP
WIP ͱʁ
WIP ʹ Work in Progress ਐߦதɾ࡞ۀதɾॲཧதɾະ ෆશͰ͋Δ͜ͱΛप͢Δه߸ͱͯ͠ΘΕΔ řŎŕŲƅ
ͱΓ͋͑ͣɺڞ༗ ࡶʹڞ༗ ·ͩશ෦Ͱ͖ͯͳ͍͚Ͳڞ༗
͜Μͳײ͡ͷ͜ͱΛਐΊ͍ͯΔ͚Ͳɺ ·ͩ͡Όͳͯ͘ɺ ͜Ε͔Βͬͱྑ͘ͳΔΜͰ… [WIP] Λ͚ͭͯԿ͔Λڞ༗͢Δͱ͖ͷ͖ͪ • ͳͷͰݫ͗͢͠Δποίϛ·ͩצหͯ͠Ͷ • ͚Ͳɺؒ͘͢͝ҧͬͯͨΒڭ͑ͯͶ •
ࠔͬͯͨΒॿ͚ͯͶ • Δؾ͋ͬͯ͜Ε͔ΒΔͭΓͰ͋ΔΜͩΑ • ͬ͘͟Γ͜͏͍͏͜ͱͬͯΔ͔ΒͳΜͱͳͬͯͯ͘Ͷ • ͞Γؾͳ͘΄Ίͯ͘ΕͨΒΔؾग़Δ͔ • ·ͣࣗͷϝϞతʹॻ͍ͯΔ͚ͩͳΜͩ …ׂͱɺݴ͍༁͕·͍͔͠͠Εͳ͍ʂ
ͭ·ΓɺWIPͱ ΤΫεΩϡʔζͷҰछ ʢݴ͍༁ɾหղɾݐલʣ Excuse me
ਓɺ ݴ͍༁ɾݐલ͕ඞཁ • ஏ͔͍ͣ͜͠ͱ • ݴ͍ͮΒ͍͜ͱ • ͩ͘Βͳ͍͜ͱ • ෆશͳ͜ͱ/ࣗ৴ͳ͍͜ͱ
• ࣄతͰͳ͍͜ͱ …ͳͲΛݴ͏࣌ʹ
ͪͳΈʹ…ʮϙΤϜʯҰछͷΤΫεΩϡʔζ • pplog.net • ࠷৽ͷهࣄ͔͠ެ։Ͱ͖ ͳ͍ϒϩάͷΑ͏ͳͷ • ʮϙΤϜʯΛॻ͘ॴ • ϙΤϜ͔ͩΒ
• Web্ʹΒͳ͍͔Β ݴ͍ʹ͍͘͜ͱɺஏͣ ͔͍͜͠ͱɺϙΤϜ ͳΒݴ͑Δοʂ
ΤΫεΩϡʔζҙਤతͳ੍ݶΛՃ͠ɺ Έʹ͋ΔछͷʮϢϧ͞ʯΛ༩͑Δ͜ͱͰɺ ʮΏΔ͠ͷσβΠϯʯͱউखʹݺΜͰ͓Γ • ࠓ·Ͱݴ͑ͳ͔ͬͨ͜ͱ͕ݴ͑Δ • ॻ͚ͳ͔ͬͨਓ͕ॻ͚Δ • Ͱ͖ͳ͔ͬͨ͜ͱ͕Ͱ͖Δ ݸਓతʹڵຯΛ࣋ͬͯΔ
WIP esa.ioͷWIPػೳʹ͍ͭͯ
อଘϘλϯ͕ 2ͭʁʁ
࡞ۀதͷͱ͖ɺWIPͰอଘ ϒϩάͳͲͰ͍͏ͱ͜ΖͷԼॻ͖ʹ͋ͨΔײ͡ Լॻ͖ஈ֊͔Βଞਓʹݟ͑ΔΑ͏ʹͳͬͯΔ
WIPͰอଘ͢Δͱɺ λΠτϧ͕άϨʔΞτ • WIPͰߋ৽ͯ͠WebhookͰSlackͱ͔ʹ௨͕ඈͳ͍ • ߋ৽ҰཡʹάϨʔΞτͯ͠ग़ΔʢHomeը໘Ͱͳ͍ʣ • Կߋ৽͢Δ͜ͱ͕Ͱ͖Δʢ㵰+Sʣ • ΈΜͳʹੵۃతʹΒͤ͠ͳ͍͚Ͳɺڵຯ͋ΔਓΘ͟Θ͟ݟʹདྷΕ
ݟΔ͜ͱ͕Ͱ͖Δঢ়ଶ
͍͍ͩͨͰ͖ͨΒɺShip It!
Ship It! ͢Δͱ Webhook ͷ௨͕ඈͿ ƻ ΈΜͳ͕ݟʹདྷΔ
Almost done? ≠ Done! ʮ͍͍ͩͨͰ͖ͨʯ͕ϙΠϯτ • 70 - 80%͘Β͍ͱ͔Ͱ͍͍ͷ͔ʁ
• ·ͱ·͖͔ͬͯͨΒҰ୴प͍ͨ͠ͳʔͱࢥͬͨλΠϛϯάͰShip it • ͬͱϒϥογϡΞοϓ͍ͨ͠ͳʔͱࢥͬͨλΠϛϯάͰɺWIPʹ ͢͜ͱͰ͖Δʢ݁ߏΑ͘Δʣ
WIP ͰใΛॻ͍ͯΈΔ Case Study
ग़ࣾͨ͠Β…WIPͰใΛॻ͘ śŰżŖ લͷใΛίϐʔͯ͠ฤू ͬΆ͍ࣈ͕λΠτϧʹೖͬͯΔهࣄΛί ϐʔ͢Δͱɺউखʹࠓͷʹͯ͘͠ΕΔ TODOϦετΛॻ͘ w <>ˠ<Y>ͰνΣοΫϘοΫεॻ͚Δ w ࠓΔ༧ఆͷ͜ͱ͕ࣗͰ၆ᛌͰ͖Δ
w Ϧετʹॻ͍͓ͯ͘ͱɺΕͯΔΘ͚͡Όͳ͘ ͯɺΔͭΓ͋ΔΜͩͳͬͯ͜ͱΘΔ
ࣄத… ใΛԿߋ৽ ŹŞŹŞʜ λεΫΛ͜ͳͨ͢ͼɺใΛߋ৽ w 50%0ϦετʹνΣοΫΛೖΕΔ w ਵ͢ΔղઆඋɺϋϚͬͨͱ͜Ζݒ೦ɺ ͦͷ࣌ͷؾ࣋ͪͳͲه͠ͱ͘ͱศར w
ಥൃతͳλεΫՃͯ͠ߋ৽ w ͷऴΘΓʹʮࠓԿ͚ͬͨͬʜʯͬͯͳΒ ͣʹࡁΉ
ୀࣾ࣌ʹ…ใΛShip It! śŨŜƀŖ SlackͳͲʹ௨͕ඈΜͰɺΈΜͳ͕ݟʹདྷΔ ࠓͷॴײ૯ׅΛॻ͍ͯɺShip It!
ͦͷଞͷใTIPS • ใλΠτϧʹࠓͬͨ͜ͱɺࠓͷؾ࣋ ͪΛॻ͘ਓ͍Δ • ࠓͷϥϯνɺࠓͷςʔϚۂΛॻ͘ਓ • ͋ͱͰͲΜͳ͔ͩͬͨࢥ͍ग़ͤͯศར • ୀࣾ࣌ʹ໌ͷใΛWIPͰॻ͍͓ͯ͘έʔε
͋Δ • ໌ͷݟ௨ཱ͕ͯ͠ΒΕͯศར • ேձͳͲͰɺࡢͱࠓͷใΛڞ༗ͯ͠ɺͦ ΕΛݟͳ͕Βใڞ༗૬ஊΛͨ͠Γ͢Δ • ʮॴײʯίʔφʔʢϑϦʔςΩετͷ෦ʣͰ ࣌ંΓ্͕ͬͨΓ͢Δ
WIPͰใΛॻ͘ͱ… ŬŕŴƅŖ ேɺࣗͷͨΊʹॻ͍ͨTODOϦετ͕ɺ ؼΔͱ͖ʹΈΜͳʹڞ༗Ͱ͖Δใʹʂ w ʮใࠂɾڞ༗ͷͨΊͷυΩϡϝϯτʯΛॻ͔ͳͯ͘ྑ͘ͳΔΜͰ͢Ͷ w ಉ͡Α͏ͳײ͡ͰɺʮΞδΣϯμʯ͕ձٞऴΘΔࠒʹʮٞࣄʯʹͳͬͨΓ͠·͢
WIP ใ͚ͩ͡Όͳ͍ɺ͍ΖΜͳΑ͍͜ͱ
Case 1: WIPͰॻ͘ͱɺணख͍͢͠ • ࣄલʹෆ࣮֬ͳཁૉͷଟ͍ࣄ΄ͲɺखΛ͚ͭΔͷ͕ԯ߷ʢεϥΠυͱ͔ʂʣ • WIPͳΒ࠷ॳͷҰา͕౿Έग़͍͢͠ • ࠷ॳλΠτϧͷΈɺࢥ͍͖ͭΛՕॻ͖ʹ͢Δ͚ͩͰΑ͍ •
࠷ॳʹࡶʹWIPͰͬ͘͟Γॻ͍ͯڞ༗͢ΔͱɺपғͷϑΟʔυόοΫΛड͚ͳ͕ ΒɺঃʑʹυΩϡϝϯτΞΠσΞΛྑ͍ͯ͘͘͜͠ͱ͕Ͱ͖Δ • ్தͰୈࡾऀͷϦΞΫγϣϯΛΒ͑ΔͱɺϞνϕʔγϣϯ্͕Δ Ұؾʹ͕ߴ͍ͷΛॻ͘ͷ ϋʔυϧߴ͍͚ͲɺWIPͩͱղ૾͕ ͍ঢ়ଶ͔Βॻ͖ग़͍͢͠ɻ
Case 2: WIPͰެ։͢ΔͱɺपΓͷཧղΛಘ͍͢ • ʮͳΔ΄Ͳɺ͜͏͍͏ϓϩδΣΫτ͕ࠓಈ͘༧ఆͳͷ͔ʯͱ͍͏प͕Ͱ͖Δ • ΔΑʂΖ͏Αʂ ΛपғʹॊΒ͔͘Ξϐʔϧ → पΓ৺ͷ४උ͕Ͱ͖Δ
• اը͕ॊΒ͔͍͏͔ͪΒΈΜͳ͕ࣄऀʹͳΕΔ༨͕Ͱ͖Δ • ݻ·͔ͬͯΒݴ͏ͱˠʮͬͱૣ͘ݴͬͯ͘ΕΕ…ʯʮͦΜͳٸʹݴΘΕͯ ࠔΔ…ʯ ࢀߟʣϝυϨʔ͞ΜͷΠϯλϏϡʔ : https://docs.esa.io/posts/153 اը্ཱ͕͕ͪͬͨͱ͖ʹɺৄࡉ͕ܾ ·ͬͯͳͯ͘ɺ·ͣλΠτϧ͚ͩ ͷWIPͷυΩϡϝϯτΛ࡞͓ͬͯ͘ɻ
• WIPͱॻ͍ͯ͋Δͱɺॻ͖खͷߟ͑Λ಄͔Β൱ఆ͠ͳ͘ͳΔ • ͜Ε͔Βࡉ͔͍ͱ͜ΖΛྑ͍ͯͭ͘͘͠ΓͳͷͩΖ͏ɺͱ͍͏͜ͱ Λલఏʹ͢Δ͜ͱ͕Ͱ͖Δ • ʮ·ͩॻ͍ͯͳ͍͚͔ͩ͠Εͳ͍͚Ͳɺ͕̋̋Γͯͳ͍͔ʙʯ ˠ ࢦఠࣗવʹؾΛͬͨײ͡ʹͳΔ •
͕େ͖͍ਓɾϋʔτ͕ڧ͍ਓҎ֎ൃ৴͘͢͠ͳΔ ☺ Case 3: WIPͩͱɺಡΈख͕༏͘͠ͳΕΔ ͪΐͬͱπϝ͕͍ΞΠσΞ͚ͩͲɺ ·͋WIP͔ͩΒ͋Μ·ΓποίϛΛೖ ΕΔͷͳ͊…
WIP WIPਓͷͨΊͳΒͣ
• ϩʔΧϧͷςΩετΤσΟλ • ݸਓ༻ͷEvernote • ࣗѼͯͷϝʔϧ ࣗͷͨΊʹॻ͘ʮυΩϡϝϯτʯ උɾϝϞɾTODOϦετɾاըΞΠσΞɾઃܭΞΠσΞ ༩݅ͷཧɾվળҊɾࠒࢥ͍ͬͯΔ͜ͱɾ ॻ్͖தͷΖΖ…
ྫ͑͜Μͳͱ͜Ζʹ
ࣗͷϩʔΧϧ (͋Δ͍) ʹ͋Δ ࣗͷͨΊͷͷΛɺ ૣ͍ஈ֊ͰνʔϜϝΠτʹݟ͑Δॴʹɻ ͦΕΛΓ͘͢͢ΔΈ͕WIP ΈΜͳॻ͍ͯͳ͍Θ͚͡Όͳ͍ɻ ਓʹݟͤͯͳ͍͚ͩͳΜͩʂ
ࣗͷͨΊʹͬͨ͜ͱ͕ɺ ୭͔ͷͨΊʹͳΔ͜ͱ͕͋Δ ࣗͷͨΊʹॻ͍ͨTODOϦετ͕ؼΔͱ͖ʹใʹͳͬͯΔʂ ʢͳΒͳ͍͜ͱ͋Δʣ
ࣗͷͨΊʹͬͨ͜ͱ͕ɺ ୭͔ͷͨΊʹͳΔ • OSSͷϓϩδΣΫτɺݸਓ։ൃ • ϒϩά࡞ͷΞτϓοτɺಉਓ׆ಈͱ͔ʁ • WebαʔϏεͷυοάϑʔσΟϯάͱ͔ • esa͕ࣾେʹ͍ͯ͠Δߦಈࢦͷͻͱͭ
• ʮ͕ࣗͨͪࣗཉ͍͠ͷɾ͏ͷΛͭ͘Δʯ • αʔϏεάοζ͕ࣗͨͪཉͯ͘͠࡞ͬͯΔ ʬ͜ͷݪཧͰճ͍ͬͯͦ͏ͳͷͨͪʭ
ࣗͷͨΊʹͬͨ͜ͱ͕ɺ ୭͔ͷͨΊʹͳΔ ߦҝͦͷͷ͕ใुͰ͋Δঢ়ଶ Ϟνϕʔγϣϯ͕ߴ͍ ͦΕͧΕ͕ࣗతʹಈ͚ΔνʔϜ
ࣗతͳνʔϜ = Α͍νʔϜ …ͩͱesaߟ͑ͯΔ
WIP ·ͱΊ: શ͕ͯWIPʹͳΔ
͜ΕFIXͰ͔͢ʁ ֬ఆࣄ߲Ͱ͔͢ʁ ݱͰΑ͋͘Δ࣭
͔֬ʹࣄΛ͢Δ্Ͱɺ ʮ͜ΕͰ֬ఆ(FIX)ʯݐલ্ඞཁɻ ͳ͍ͱ্ख͘ճΒͳ͍ɻ ͚ΕͲຊདྷɺ શͯͷͷ͝ͱෆશͰɺ ൃల్্Ͱɺ Ͳͷ͔࣌ΒͰมΘ͍͚ͬͯΔ͠ɺ ͬͱྑ͘͢Δ͜ͱ͕ Ͱ͖ΔͷͰͳ͍͔ʁ
WIP ͜Ε͔Βͬͱͬͱྑ͘ͳΔՄೳੑ͕ ͋Δͱ͍͏͜ͱ ͋Εʁ࣮ੈͷதͷ৭Μͳͷɺ͍͍ͩͨ8*1ʹͰ͖ΔͷͰʁ
શ͕ͯWIPͱͯ͠ ίϛϡχέʔγϣϯͰ͖ΔΑ͏ʹͳΔͱɺ ΑΓࣗతͰ͍͖͍͖ͱͨ͠ Α͍ͷ͕࡞ΕΔνʔϜʹͳΕΔͷ͔
Everything is in Progress Thank you (\( ⁰⊖⁰)/)