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
proposal-on-desing-from-engineers
Search
to4iki
May 27, 2018
Programming
0
920
proposal-on-desing-from-engineers
- デザイン is 何
- 様々なデザインの方法
- 既存の運用フローに関して
- エンジニアから見た運用フローの問題点
- 解決案の提案 `Abstract`
to4iki
May 27, 2018
Tweet
Share
More Decks by to4iki
See All by to4iki
suspend-view-controller-sample
to4iki
0
2.8k
ケースに応じたUICollectionViewのレイアウト実装パターン
to4iki
1
4.4k
ビューインプレッションの計測方法
to4iki
0
970
秘伝の `gitconfig`
to4iki
1
400
Abema iOS Architecture
to4iki
12
3.2k
timetable-bot
to4iki
0
14k
BLoC Pattern Introduction with Swift
to4iki
2
1.2k
nel
to4iki
0
130
[iOS] ビデオチームのスモールスクラム
to4iki
0
53
Other Decks in Programming
See All in Programming
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
790
Patched fetch did not work
quramy
4
380
The Shape of a Service Object
inem
0
520
マルチモジュールにおけるテスト最適化
fxwx23
0
210
A New Era of Testing
mannodermaus
2
510
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
260
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
Jakarta EE meets AI
ivargrimstad
0
380
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
210
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
The Mythical Team-Month
searls
218
43k
Rails Girls Zürich Keynote
gr2m
93
13k
The Invisible Customer
myddelton
119
13k
4 Signs Your Business is Dying
shpigford
179
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Designing for Performance
lara
604
68k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Thoughts on Productivity
jonyablonski
66
4.2k
Transcript
σβΠϯʹؔͯ͠ + ΤϯδχΞ͔ΒͷఏҊ(Ծ) 5/27/2018. ShinjukuLT#20 @to4iki 1
Me • @to4iki • • ! ☕ ♨ 2
Agenda • σβΠϯ • ࣮ӡ༻ • • ղܾࡦ 3
σβΠϯ 4
σβΠϯ1 σβΠϯͷޠݯσοαϯʢdessinʣͱಉ͘͡ɺ“ܭըΛه߸ʹ ද͢”ͱ͍͏ҙຯͷϥςϯޠdesignareͰ͋Δɻ ͭ·ΓσβΠϯͱɺ͋ΔΛղܾ͢ΔͨΊʹࢥߟɾ֓೦ͷ ΈཱͯΛߦ͍ɺͦΕΛ༷ʑͳഔମʹԠͯ͡දݱ͢Δ͜ͱͱղ ͞ΕΔɻ 1 https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3 5
de-sign ந(sign)Λ൱ఆ(de)͢Δ͜ͱ ෳࡶͳͷΛ͖ͬΓͤ͞Δ͜ͱ 6
ٛ(͜͏͗)ͷσβΠϯ ʮ(త)ʯΛୡ͢ΔͨΊʹʮઃܭʯ͢Δ͜ͱ ڱٛ(͖ΐ͏͗)ͷσβΠϯ ʮઃܭʯʹج͖ͮɺ۩ମతͳʮΧλν(ݟͨ)ʯΛ࡞Δ͜ͱ 7
σβΠϯ = ϓϩμΫτͷྖҬ(Ϗδωε)ͷղܾ + ϓϩμΫτͷݟͨ(UI/UX)ͷղܾ 8
ࠓճ ڱٛͷσβΠϯʹ͍ͭͯ۷ΓԼ͛Δ 9
ҰޱʹσβΠϯͱ͍ͬͯ ࣮ݱͷํ๏༷ʑ 10
https://brainhub.eu/blog/difference-between-wireframe-mockup-prototype/ 11
Sketch • ࠷εϐʔσΟʔʹΞΠσΞΛཧͰ͖Δํ๏ • େͷΠϝʔδΛ͔ͭΉ • 1ຕͷࢴʹϑϦʔϋϯυͰඳ͍͚ͨͩͷͨͩͷֆ, ϗϫΠτϘ ʔυ 12
13
Wireframe • αΠτσβΠϯͷઃܭਤ • ࠎΈ͚ͩɺσβΠϯ·ͰߦΘͳ͍ • ex. Cacoo, PowerPoint 14
https://big-mac.jp/recommend/web-design/flowchart-of-the-site-how-to-make-a-site-map-based- on-conductors-recommended-web-tool/ 15
Mockup • ৭ϑΥϯτɺ༨നͳͲͷఆ͕ٛ͞Εͨ੩తͳը໘Πϝʔδ Λ࡞Δ • ݫີͳఆٛ • ex. illustrator, photoshop,
Sketch 16
Prototype • ੩తͳσβΠϯ͚ͩͩͳ͘ɺભҠಈ͖ͷΠϝʔδΛڞ༗ ͢Δ • ex. Prott, InVision, OrigamiStudio, Flinto,
ProtoPie 17
https://share.protopie.io/MghbyR8J2gk 18
(༨ஊ)Prototyping Tool • τϥϯδγϣϯ(ભҠ) / ΠϯλϥΫγϣϯ(ಈ͖) ʹಛԽͨ͠πʔϧ͕ͦΕͧΕଘࡏ͢Δ 19
͜͜·Ͱͷ·ͱΊ • σβΠϯ = ྖҬ(Ϗδωε) + ݟͨ(UI/UX) ͷղܾ • σβΠϯͷख๏ͨ͘͞Μ͋ΓɺదࡐదॴͰ͍͚Δ͜ͱ
20
࣮ӡ༻ 21
ex. ΤϯδχΞͷ͓ࣄ2 1. ϞοΫΞοϓπʔϧ(Sketch)͔ΒૉࡐΛॻ͖ग़͢ 2. ࢦࣔॻ(zeplin)Λݟͯ༨നɺ৭Λௐ͢Δ 3. ϓϩτλΠϐϯάπʔϧ(protto)ʹԊͬͯભҠɺΞχϝʔγϣ ϯΛ࣮͢Δ 2
͋͘·ͰҰྫͰ͢(࣌ؒͷ߹Ͱ3skip) 22
23
Sketch • MacOS༻ͷϞοΫΞοϓπʔϧ • 100% vector • ը૾ͷॻ͖ग़ָ͕͠(x2, x3) 24
25
26
Zeplin • σβΠϯࢦࣔॻ(ϏδϡΞϧ༷ॻڞ༗πʔϧ) • ཁૉؒͷϚʔδϯɺΧϥʔͳͲΛ؆୯ʹѲͰ͖Δ • sketch͔ΒσʔλΛநग़ͯ͘͠ΕΔ 27
28
DEMO 29
Ұݟɺ͜ͷӡ༻Ͱͳͦ͞͏͕ͩɺ ࣮ࡍਏ͍έʔε͕͋Δ 30
Sketch/Zeplin͔ΒσβΠϯΛ͘ΈऔΔݶք • ͲͷUIίϯϙʔωϯτ͕มԽ͔͕͔ͨ͠ΓͣΒ͍(ຖճσβ Πφʔʹฉ͘ͷ͕खؒ) • ҙͷ࣌ͷϨΠΞτΛݟ͍ͨࡍʹḪͬͯ୳͢ͷ͕େม(ຖ ճσβΠφʔʹฉ͘ͷ͕खؒ) 31
༷ॻ/ޱ಄Ͱͷࠩڞ༗ͩͱ࿙Ε͕ൃ ੜ͢Δ ग़དྷΕɺΤϯδχΞ͕ҙਤΛΈऔ ΕΔΑ͏ʹ͍ͨ͠ 32
ͭ·Γɺ σβΠϯͷཤྺ(ࠩ)Λ ؆୯ʹѲ͍ͨ͠ʂ 33
34
Abstract • sketchϑΝΠϧͷversionཧπʔϧ3 • diffΛGUIͰ֬ೝͰ͖Δ(ϖʔδɺΞʔτϘʔυ୯ҐͰ) • σβΠφʔ͞Μ͚ͷGit, Github • ϑΝΠϧΛ࣮ࡍʹૢ࡞͢ΔσβΠφʔ͞Μಉ࢜ͷࠩղܾʹޮՌΛ
ൃش͢Δ • branch / merge / conflict ղফ 3 2018/05/27࣌Ͱbeta 35
36
37
DEMO 38
خ͍͠ޮՌ / ߟ͑ͳ͍ͱ͍͚ͳ͍ • خ͍͠ޮՌ • σβΠϯσʔλ͕1ͭͰ͢Ή • ୭͕࡞ۀ͔ͨ͠ͷཤྺΛ͑Δ •
ίϯϑϦΫτղফ • ߟ͑ͳ͍ͱ͍͚ͳ͍ • ཧ։ൃαΠυͱϒϥϯν(feature)ͷཻΛಉظͤ͞ΕΔ͔? 39
͜͜·Ͱͷ·ͱΊ • Sketch + Zeplin ͷӡ༻ۀքඪ४ʹͳ͍ͬͯΔײ͋Δ • ҙͷ࣌ͰͷσβΠϯɺલճʹൺͲ͏ͷ͕ߋ৽͞Εͨ ͔Λਖ਼֬ʹѲ͢Δͷ͍͠ •
=> AbstractͰversionΛཧ͢Δ͜ͱͰɺΤϯδχΞͰ؆ ୯ʹGUIͰࠩΛѲ͢Δ͜ͱ͕ग़དྷΔ 40
શମͷ·ͱΊ • σβΠϯ = ྖҬ(Ϗδωε) + ݟͨ(UI/UX) ͷղܾ • ࠓճڱٛͷҙຯͰͷσβΠϯ(ݟͨ)ͷ
• σβΠϯͷҙਤΛڞ༗͢Δಓ۩ͱͯ͠AbstractΛఏҊ 41
Thanks 42
SeeAlso • https://basicdesign-note.com/what-is-design/ • https://www.slideshare.net/asamieee7/prottsketchzeplin • https://appsamurai.com/5-wireframe-mockup-tools-for-the- best-mobile-app-design/ • https://www.777logos.com/blog/vector-and-raster-
graphics/ • https://blog.nagisa-inc.jp/archives/1823 43