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
930
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.1k
ケースに応じたUICollectionViewのレイアウト実装パターン
to4iki
1
4.6k
ビューインプレッションの計測方法
to4iki
1
1k
秘伝の `gitconfig`
to4iki
1
420
Abema iOS Architecture
to4iki
12
3.3k
timetable-bot
to4iki
0
14k
BLoC Pattern Introduction with Swift
to4iki
2
1.2k
nel
to4iki
0
140
[iOS] ビデオチームのスモールスクラム
to4iki
0
59
Other Decks in Programming
See All in Programming
CloudNativePGを布教したい
nnaka2992
0
110
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
300
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
自力でTTSモデルを作った話
zgock999
0
100
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
140
color-scheme: light dark; を完全に理解する
uhyo
7
490
AIプログラミング雑キャッチアップ
yuheinakasaka
18
4.3k
Rails アプリ地図考 Flush Cut
makicamel
1
130
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
Featured
See All Featured
Statistics for Hackers
jakevdp
797
220k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Writing Fast Ruby
sferik
628
61k
Rails Girls Zürich Keynote
gr2m
94
13k
Scaling GitHub
holman
459
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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