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 engi...
Search
Hiromi Morikawa
February 14, 2018
Design
2
2k
エンジニアであるわたしがデザインを知り乗りこなすまで / 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
16
6.5k
デザイナーの帽子をかぶりながら、チームとの関わり方を考えつづけている話/How does a designer fit in a Scrum Team?
hiromitsuuuuu
7
14k
ユーザー候補を目の前にすることでわかること/freee Design Night in Fukuoka
hiromitsuuuuu
0
32k
新しいCSSの仕様を色々調べてみた / css3 new spec
hiromitsuuuuu
0
180
はじめての Sencha Touch2 / First Sencha Touch2
hiromitsuuuuu
0
130
Other Decks in Design
See All in Design
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
120
Storyboard Honey
rocioparronrubio
0
270
オープンデータを利用して色々なものを作った話
hjmkth
1
110
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
120
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
150
Liquid Iron
mcduckyart
1
100
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
600
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
430
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
400
私とデザインの10年
iflection
0
130
今日から意識できるアクセシビリティ
fumiko
0
240
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
130
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Six Lessons from altMBA
skipperchong
28
3.8k
Documentation Writing (for coders)
carmenintech
71
4.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Faster Mobile Websites
deanohume
307
31k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How GitHub (no longer) Works
holman
314
140k
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 ΤϯδχΞ͕σβΠϯʹؔΘΕΔ͜ͱ