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
エンジニアであるわたしがデザインを知り乗りこなすまで / a story of an engineer and design
Search
Hiromi Morikawa
February 14, 2018
Design
2
1.8k
エンジニアであるわたしがデザインを知り乗りこなすまで / a story of an engineer and design
DevLOVE「エンジニアがデザインに関われること」資料
https://devlove.doorkeeper.jp/events/69310
Hiromi Morikawa
February 14, 2018
Tweet
Share
More Decks by Hiromi Morikawa
See All by Hiromi Morikawa
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5.4k
デザイナーの帽子をかぶりながら、チームとの関わり方を考えつづけている話/How does a designer fit in a Scrum Team?
hiromitsuuuuu
7
9.1k
ユーザー候補を目の前にすることでわかること/freee Design Night in Fukuoka
hiromitsuuuuu
0
27k
新しいCSSの仕様を色々調べてみた / css3 new spec
hiromitsuuuuu
0
100
はじめての Sencha Touch2 / First Sencha Touch2
hiromitsuuuuu
0
73
Other Decks in Design
See All in Design
Another works Brand Guidelines
designdoor
0
100
生成AIを活用したサービス設計のススメ〜仮説構築編〜
tomo1215
2
1.1k
Sensitive Texter Storyboard
ctagulao98
0
160
複業クラウド Brand Guidelines
designdoor
0
110
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
380
Sociotechnical design for software and human systems
xinyao
2
560
ホワイト化するこの世界の片隅に
hisayosky
0
190
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
720
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2k
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
5
920
PdMを始めたUIデザイナーのリアルな課題
muture
0
620
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
100
Featured
See All Featured
Embracing the Ebb and Flow
colly
81
4.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Navigating Team Friction
lara
181
13k
How GitHub (no longer) Works
holman
305
140k
Side Projects
sachag
451
42k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Web development in the modern age
philhawksworth
203
10k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Transcript
ΤϯδχΞͰ͋ΔΘ͕ͨ͠ σβΠϯΛΓ Γ͜ͳ͢·Ͱ ΤϯδχΞ͕σβΠϯʹؔΘΕΔ͜ͱ
)$%/FUೝఆਓؒத৺ઃܭઐՈ ࠷ۙδόϯγΠͱϙʔΧʔʹ֮Ίͨ ώϩϛπ !IJSPNJUTVVVVV
'SPOUFOE%FWFMPQNFOU 6*%FTJHO )$% 69 ͍·͜͜ 4*FSతͳ͓ࣄ8FCडୗͬͯΔձࣾʹ͍·͢ ࣗࣾडୗ ৽نࣄۀ Ϣʔβʔ ςετ
3FBDU 3FEVY 6*ઃܭ
ࠓͳ͢͜ͱ • σβΠϯΛΔ·͑ͱ͋ͱͰมΘͬͨ͜ͱ • มΘΔ͖͔͚ͬ • େʹ͍ͯ͠Δ͜ͱ before after
ͦΕ·ͰͷΘͨ͠
ͦͷ·͑ʹʜΤϯδχΞʹͳΔ͖͔͚ͬ ΠϯλʔωοπͰΘ͘Θ͘͢Δͷͭ͘ΔͶΜ 引用元:h"ps://a"labo.com/blog/web/mixi_with_google_account/
ʰΤϯδχΞϦϯάΒͳ͍ͱ ֆʹ͔͍ͨṷ͡Όͳ͍ ʱ
ΤϯδχΞΩϟϦΞͷ͡·Γ 6.- ୯ମςετFUDʜ +BWBͰͷόοΫΤϯυͷڭҭΛܦͯϑϩϯτ
Θ͕ͨؔ͠Θ͍ͬͯͨͻͱͨͪ اը σβΠφʔ σΟϨΫλʔ ϑϩϯτΤϯυ ΤϯδχΞ Biz Design Dev ϚʔΫΞοϓ
ΤϯδχΞ )5.-$44 ϑϩϯτΤϯυ ΤϯδχΞ +4
ཁ݅ͷཧʙ࣮ݱੑΛߟྀͨ͠6*ઃܭ ։ൃ ϓϩδΣΫτͷؔΘΓํ γφϦΦ ࡞ ϑϩϯτ ࣮ ɾཁ݅ͷཧ ʢۀϑϩʔͳͲʣ ɾϑϩϯτٕज़ͷ3ˍ%
ɾ)5.-$44+4࣮ 6*ઃܭ σβΠϯ ɾใઃܭ ɾޮతͳ࣮Λ ɹߟྀͨ͠6*ઃܭ ։ൃݱ ड͚͠ اը͔Βͷ ։ൃ૬ஊ
͔Μ͕͍͑ͯͨ͜ͱ 6*ઃܭ • Ͳ͏͍͏ྲྀΕͰ͏͔ • Ϣʔβʔͷใ֓೦ ϑϩϯτ࣮ • ͍͔ʹ࣮͢Δ͔ •
ͦͷٕज़͔ͩΒ࣮ͦ͜ݱͰ͖Δ͜ͱͳ͍͔ • ύϑΥʔϚϯεΛ͍͔ʹ্͛Δ͔ • ͍͔ʹ͍͍͢ϥΠϒϥϦΛఏڙ͢Δ͔
ྗ͍ͯͨ͜͠ͱ པ·Εͨཁ݅ͷൣғͰ͍қ͍6*Λઃܭ͢Δ ػೳΛ͍͔ʹ࣮ݱ͢Δ͔
ͱ͋Δ$͚ͷ৽نαʔϏεͰʜ ཁ݅ʹԊͬͯઃܭͨ͠ʂ ظؒ༧ࢉେ͖ͳϒϨͳ͠ʂ ։ൃϓϩδΣΫτޭʂ
ऩࢧ͕Θͣ ̍ͰαʔϏεΛऔΔ͜ͱʹʜ
πʔϧΛຒΊͯશ વͬ͘͠Γ͜ͳ͍ʜ ڝ߹ʹࣅͨγφϦΦ 6*ʹͳΔʜ ԾઆΛग़͢ͷʹ࣌ؒ ͕͔͔Δʜ 69ؔ࿈πʔϧ ͍͚ͬͯͨΕͲʜ
πʔϧʹৼΓճ͞Ε͚ͯͨͩͩʜ ར༻͞Εͳͯ͘ڏ͍͠ʜ Ձ͋Δػೳ 6*ʹۙͮ͘ʹͲ͏͢Εʜ
ਓؒத৺σβΠϯͷΛ͙͘Δ ਓؒத৺ઃܭͷܭը ར༻ঢ়گͷѲͱ ໌ࣔ ϢʔβͷཁٻΛຬͨ ͢ղܾࡦͷ࡞ Ϣʔβͷ ཁٻࣄ߲ͷ໌ࣔ ཁٻࣄ߲ʹର͢Δ ઃܭͷධՁ
ղܾࡦ͕Ϣʔβʔͷ ཁٻࣄ߲Λຬͨ͢ ௐ ࠪ ੳ ධ Ձ ࡞ Ϣʔβʔ ϢʔβΛͱ Γ·͘ঢ়گ ʹ͍ͭͯ Δ σβΠϯ ઃܭҊͷଥ ੑΛධՁ ͢Δ Ϣʔβʔͷ χʔζຊ ࣭తͳཁٻ ΛΔ ΞΠσΞΛ ߟ͑ͯɺγ εςϜϞ ϊʹ͢Δ Human Centered Design (HCD) ʮ*40ʯͰࠃࡍن֨Խ͞Ε͍ͯΔ ΠϯλϥΫςΟϒγεςϜͷਓؒத৺ઃܭʹؔ͢Δن֨
ߏԽγφϦΦ๏
Ϣʔβʔ ใ Ϗδωε ใ ϓϩδΣΫτͷ ඪ Ϣʔβʔͷ ຊ࣭త ཁٻՁ Ϗδωεͷ
ఏڙՁ όϦϡʔ γφϦΦ ΞΫςΟ ϏςΟ γφϦΦ 69 ϑϩʔ ΥʔΫ εϧʔ ධՁ ΞΫςΟ ϯά Ξτ )$%ͷαΠΫϧΛ Ұ௨Γճͯ͠Έͨ
શ෦ɺܨ͕ͬͯΔΜͩʂ Ͳ͏ͯ͠࡞͍ͬͯΔ͔ ͕͔ͬͨʂ ϖϧιφ γφϦΦ ใϚοϓ ཧϞσϧ 6*ઃܭ Ϣʔβʔςετ
খ͘͞͡Ί࣮ͯΛͭ͘Δ ࣗࣾࣄۀͰউखʹϢʔβʔώΞϦϯάͯ͠ɺ উखʹϢʔβϏϦςΟςετ͠͡Ίͨ ؆୯ͳϢʔβϏϦ ςΟςετͳΒ ͏ͪͰΕ·͢Αʂ ฉ͖ࣖʜ
Ҋ݅૬ஊதʜ
ͦͨ͠ΒҊ݅ʹݺΕ࢝Ίͨ ৽نαʔϏεͷ ϢʔβϏϦςΟςετͱड༰ੑௐࠪ ͍ʹ͍͘ʂ ࠓͷΞϓϦ͔Β Γ͑͠ͳ͍Ͷ ͋ΘΘʜ
ͦͷػೳ͕ɺ ͳͥඞཁͱ͞ΕͯΔ͔ ͔ͬͨʂʂ
ؔऀͷҙ͕ࣝมΘͬͨ • ػೳΛ٧ΊࠐΈ͗ͯ͢Ձ͕ΘΒͳ͍ʜ • ίΞʹযΛͯͨํमਖ਼ ؔऀΛר͖ࠐΊΔʂ ͜Εͩʂʂ ΑΓίΞʹػೳΛߜ Βͳ͖ΌͩΊͩ
Θͨ͠ ͦ͏͓͏ʂ
σβΠϯͷޫ͕ ݟ͑ͨ͋ͱͷΘͨ͠
͍·ͷϓϩδΣΫτΛͱΓ·͘ਓͨͪ ࣄۀऀ ϓϩμΫτΦʔφʔ εΫϥϜϚελʔ σβΠφʔ ϑϩϯτΤϯυ ΤϯδχΞ +4 όοΫΤϯυ
ΤϯδχΞ ϚʔΫΞοϓ ΤϯδχΞ )5.-$44 σΟϨΫλʔ Πϯϑϥ ΤϯδχΞ 69% Biz Design Dev
ϓϩδΣΫτͷؔΘΓํ Ϣʔβʔ ௐࠪ γφϦΦ ࡞ ϑϩϯτ ࣮ New ɾαʔϏεͱͷग़ձ͍ ɹ͔Β6*ར༻·Ͱ
ɾ8FCҎ֎ͷ Ϣʔβʔ ݕূ New ɾϢʔβϏϦςΟ ɾड༰ੑ ϑϩϯταϙʔτ ɾελΠϧΨΠυ ɾ3FBDU3FEVY࣮ ɾΞʔΩςΫνϟඋ 6*ઃܭ σβΠϯ σβΠϯαϙʔτ ɾใઃܭ
ͳʹ͕มΘ͔ͬͨ ϢʔβʔΛத৺ʹΛ͢Δ ͙͢ʹ࣮ͤͣݕূΛڬΉ ػೳͷҙຯ ༏ઌΛҙࣝ͢Δ
ϢʔβΛத৺ʹΛ͢Δ • ओ؍ͰϖϧιφɾγφϦΦΛ࡞Βͳ͍ • ࣄۀଆͷใ '4݁ՌͳͲ Λͬͯ࡞Δ • ͕ͳ͍߹ࣾͰϦΫϧʔςΟϯά •
5XJUUFSͰͻͨ͢ΒωοτετʔΩϯάͱ͔ • ϖϧιφͷΛ࣋ͪग़͢ • Λ͢Δͱ͖ʹৗʹ࣋ͪา͘ • ʮ͜ͷͻͱͩͬͨΒʙʯͰ͢
ϖϧιφ͕ͻͱΓา͖͢ΔΑ͏ʹͳͬͨ ಉ͡ͷΛޠΕΔ༧ײʜʂ ࣄۀऀ ͋ɺͻΖΈͭʂ ͋ͷࢿྉɺਃࢿྉ ʹͬͱ͍ͨʂ ͳΜͱʂ εΫϥϜϚελʔ
ࠓͷ6*ɺ ͋ͷਓͨͪʹ ෳࡶ͗͢͡Όͳ͍ʁ ͔ͨ͠ʹʂ
͙̎͢ʹ࣮ͤͣݕূΛڬΉ • νϟϯε͕͋ΕϢʔβϏϦςΟςετ • ϦϦʔεޙͷখ͞ͳݕূ͔ΒऔΓೖΕΔ • ؔऀΛר͖ࠐΉ • ࣄۀଆɺ։ൃଆɺσβΠφʔͳͲ •
ۭؾײΛײͯ͡Β͏
ը໘ΠϝʔδϨϕϧ͔ΒͰ ݕূͰ͖ΔΑ͏ʹͳͬͨ ࣄۀऀ ͬͺϢʔβʔʹ ग़ͯ͠Έͳ͍ͱμϝ ͩΘ εΫϥϜϚελʔ ͣͬͱ࡞ͬͯΔͱ
ͳʹ͕͍͍͔Θ͔Μ ͳ͘ͳͬͪΌ͏Ͷ ͔࣍Βݕূ Γ·͠ΐʂ ͜Ε·Ͱࢲ Կނࢥ͍ࠐΈઃ ܭͰϦϦʔεͰ͖ ͨͷ͔ʜ
ػೳͷҙຯɺ༏ઌΛҙࣝ͢Δ • ػೳͱγφϦΦʹҰ؏ੑ͕͋Δ͔ • ࢥ͍͖ͭػೳΓ͗͢ʹͳ͍ͬͯͳ͍͔ • ϝΠϯγφϦΦΛ࠷খݶʹอͭ • ՁΛఏڙͰ͖Δ࠷খݶͷػೳԿ͔ •
αϒػೳ͋ͱͷϑΣʔζʹ࣋ͪӽ͠ • αʔϏεͷࠜװͷ෦ʹྗΛ͙
ϢʔβʔʹՁΛಧ͚ΔͨΊʹ ࠷খݶͷ։ൃ͔Β࢝ΊΔΑ͏ʹͳͬͨ ϓϩμΫτΦʔφʔ ͍͍͜ͱߟ͑ͨʂ ͜Ε͋ͬͨ΄͏ ͕ઈରศརʂ εΫϥϜϚελʔ ͬͱγϯϓϧʹ
͍͍ͯ͠ͱ ࢥ͏Μ͚ͩͲͳʙ ϦϦʔεͯ͠ ԠΛݟͯʹ ͠·͠ΐ͏
ߟ͑ΔΑ͏ʹͳͬͨ͜ͱ ΤϯδχΞ σβΠφʔͱ ࣌͢ʹେʹ͍ͯ͠Δ͜ͱ ΤϯδχΞͱͯ͠ͷมԽ
ΤϯδχΞͱͯ͠ ߟ͑ΔΑ͏ʹͳͬͨࣄ • ͦͷػೳ 6*ϢʔβʔʹϚον͍ͯ͠Δ͔ • ։ൃίετͱඞཁੑͷόϥϯε • ॳظʹͦͷϦον͞༗༻ʁ࠷খݶͷ6*ʁ •
ՁΛఏڙ͢ΔͨΊʹͳʹ͕Ͱ͖Δʁ • 6*తʹൈ͚͍ͯΔ෦ͳ͍͔ʁ • &NQUZ ঢ়ଶҧ͍ʜ • κʔχϯάͱίϯϙʔωϯτͷҰ؏ੑ • κʔχϯάʙ$44ઃܭʙ3FBDUίϯϙʔωϯτ
ΤϯδχΞ σβΠφʔͱ͢ ͱ͖ʹେʹ͍ͯ͠Δ͜ͱ • ͳͥͦͷػೳʹՁ͕͋Δ͔ɺ ɹϖϧιφɾγφϦΦΛϕʔεʹ͑Δ • ͋͘·ͰઐྖҬʹ౿Έࠐ·ͣɺ ɹϙΠϯτΛ͑Ұॹʹߟ͑Δ
ͱ͋ΔΤϯδχΞ͔Βͷ૬ஊ 有効期限 カード番号 ϑϩϯτΤϯυ ΤϯδχΞ ༗ޮظݶͷʮʯ ʹܻೖΕͦ͏͔ͩ Β6*ม͍͑ͨ
Ͳ͏͠Α͏ʁ
Θ͕ͨ͑ͨ͜͠ͱ • ΫϨδοτΧʔυ൪߸Λೖྗ͢Δͱ͖ɺ ɹͲ͏͍͏ߦಈΛͱ͍ͬͯΔʁ • ΫϨδοτΧʔυ൪߸ͬͯهԱ͍ͯ͠Δͷʁ ͲΜͳঢ়گͰ ͏͔ߟ͑ͯ ΈΑ͏
γφϦΦʹԊͬͯͬͯΈΔ ʰ͋ͳͨࠓɺ8FCαΠτͰങ͍Λ͍ͯ͠·͢ɻ ࢧ͍ʹΫϨδοτΧʔυΛ͏͜ͱʹ͠·ͨ͠ɻ ͍ͭΔΑ͏ʹ࣮ࡍʹͬͯΈ͍ͯͩ͘͞ʱ
ͦͷ6*Ͱ͋Δ͖ཧ༝Λߟ͑Δ • Χʔυͷฒͼॱ௨ΓʹೖྗͰ͖Εೝෛՙ͍ʁ • ܻʹ͢Δ͜ͱͰٯʹΘ͔Γʹͯ͘͘͠͠·͏͔ • ܻͷαΠζʹͯ͠จࣈҎ্ೖྗͰ͖ͳ͚Εؾ͚ͮ Δ͔͠Εͳ͍ • ܻܻͰͲͪΒ͕ྐྵ͔໎ͬͯ͠·͏͜ͱ͕
• ϑϩϯτΤϯυͷػೳ࣮Ͱ͛Δ͜ͱ͕͋Δ ࡒ͔Βग़͠ ͯݟͳ͕Βೖ ྗ͠·͢Ͷɻ
ར༻γʔϯΛݩʹಉ͡ઢͰ͕Ͱ͖Δ ࢦఠͷཧෆਚ͕͞ݮΔ ΤϯδχΞ͔ΒػೳΛఏҊͰ͖Δ
͖ΐ͏ͷ ·ͱΊ
after before ؔऀɿଟ ϢʔβʔΛத৺ʹΛ͢Δ ͙͢ʹ࣮ͤͣݕূΛڬΉ ػೳͷҙຯ ༏ઌΛߟ͑Δ ؔऀɿগ པ·Εͨཁ݅ͷൣғͰ ɹΑΓΑ͍6*Λઃܭ͢Δ
ػೳΛ͍͔ʹ࣮ݱ͢Δ͔
ؔऀͷଟ͍ϓϩδΣΫτ͔ͩΒͦ͜ ކ͚ʹͳΔ
Θ͕ͨ͠ඃͬͯΔࢠ ΤϯδχΞͩͱࢥ͏͠ɺ )$%୭͕ؔΘ͍͍ͬͯͷͩͱࢥ͏ ίʔυॻ͍ͯ ಈ͘ͷ ͨͷ͍͠ʂ lσβΠϯz ͬͯ୭ͷͷʁ
design と DESIGN ͦ͏͍͑ʜ
b`ӳޠͰݴ͏߹ͷখจ ࣈͷEFTJHOද໘Λඒ͠ ͘͢Δࣄɺରͯ͠େจࣈ ͷ%&4*(/ɺੈͷதͷ ༷ʑͳࣄฑΛσβΠϯత ؍͔Βվળ͢ΔҝͷՁ Λදݱ͍ͯ͠Δ`` 引用元:h"p://blog.btrax.com/jp/2016/01/02/design-‐trends2016/
֤ઐՈͷύϫʔΛ ಉ͡ํʹ͚ͯ͏·͘ग़ͤΔΑ͏ʹ EFTJHO ઐྖҬઐՈͷͷɺ৵ུͤͣิ͍͋͏ %&4*(/ ΈΜͳͷͷɺڞ༗͋͠͏
Αʔ͠ɺ ͓͍͍͠Μ ͭͬͨ͘Δ͔Βͳʂ
ͦͨ͠Βɺ࡞ۀऀ͡Όͳͯ͘ νʔϜʹͳΕΔ
Θͨ͠ɺΈΜͳͰ ͍͍ͷ͕ͭ͘Γ͍ͨ 5IBOLZPV ΤϯδχΞ͕σβΠϯʹؔΘΕΔ͜ͱ