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
950
proposal-on-desing-from-engineers
- デザイン is 何
- 様々なデザインの方法
- 既存の運用フローに関して
- エンジニアから見た運用フローの問題点
- 解決案の提案 `Abstract`
to4iki
May 27, 2018
Tweet
Share
More Decks by to4iki
See All by to4iki
Claude Code の活用事例
to4iki
0
100
Swift Concurrencyを利用したUIViewController表示の排他制御の実装
to4iki
0
3.4k
ケースに応じたUICollectionViewのレイアウト実装パターン
to4iki
1
4.9k
ビューインプレッションの計測方法
to4iki
1
1.1k
秘伝の `gitconfig`
to4iki
1
450
Abema iOS Architecture
to4iki
12
3.4k
timetable-bot
to4iki
0
14k
BLoC Pattern Introduction with Swift
to4iki
2
1.3k
nel
to4iki
0
160
Other Decks in Programming
See All in Programming
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
340
iOSDC.pdf
chronos2500
2
650
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
880
CSC305 Lecture 03
javiergs
PRO
0
230
CSC509 Lecture 01
javiergs
PRO
1
430
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
230
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
670
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.2k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.5k
dynamic!
moro
9
5.8k
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.6k
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Become a Pro
speakerdeck
PRO
29
5.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Unsuck your backbone
ammeep
671
58k
Why Our Code Smells
bkeepers
PRO
339
57k
Writing Fast Ruby
sferik
629
62k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
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