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.6k
ケースに応じたUICollectionViewのレイアウト実装パターン
to4iki
1
4.2k
ビューインプレッションの計測方法
to4iki
0
900
秘伝の `gitconfig`
to4iki
1
400
Abema iOS Architecture
to4iki
12
3.1k
timetable-bot
to4iki
0
14k
BLoC Pattern Introduction with Swift
to4iki
2
1.1k
nel
to4iki
0
120
[iOS] ビデオチームのスモールスクラム
to4iki
0
48
Other Decks in Programming
See All in Programming
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
940
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
820
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
Polars入門
daikikatsuragawa
1
100
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
ゆるい個人開発のススメ
kuroppe1819
10
990
Ruby GitHub Packages
bkuhlmann
0
630
Featured
See All Featured
Navigating Team Friction
lara
178
13k
Optimizing for Happiness
mojombo
370
69k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Documentation Writing (for coders)
carmenintech
60
3.9k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
How GitHub (no longer) Works
holman
304
140k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
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