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
940
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
3.2k
ケースに応じたUICollectionViewのレイアウト実装パターン
to4iki
1
4.7k
ビューインプレッションの計測方法
to4iki
1
1.1k
秘伝の `gitconfig`
to4iki
1
440
Abema iOS Architecture
to4iki
12
3.4k
timetable-bot
to4iki
0
14k
BLoC Pattern Introduction with Swift
to4iki
2
1.3k
nel
to4iki
0
150
[iOS] ビデオチームのスモールスクラム
to4iki
0
66
Other Decks in Programming
See All in Programming
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.6k
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
抽象データ型について学んだ
ryounasso
0
210
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
570
從零到一:搭建你的第一個 Observability 平台
blueswen
0
220
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
710
インターフェース設計のコツとツボ
togishima
2
490
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
衛星の軌道をWeb地図上に表示する
sankichi92
0
250
TypeScript LSP の今までとこれから
quramy
0
110
SpringBootにおけるオブザーバビリティのなにか
irof
1
890
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Producing Creativity
orderedlist
PRO
346
40k
The Invisible Side of Design
smashingmag
299
50k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to train your dragon (web standard)
notwaldorf
92
6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Facilitating Awesome Meetings
lara
54
6.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
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