Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
エンジニアであるわたしがデザインを知り乗りこなすまで / a story of an engi...
Search
Hiromi Morikawa
February 14, 2018
Design
2.1k
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
エンジニアであるわたしがデザインを知り乗りこなすまで / a story of an engineer and design
DevLOVE「エンジニアがデザインに関われること」資料
https://devlove.doorkeeper.jp/events/69310
Hiromi Morikawa
February 14, 2018
More Decks by Hiromi Morikawa
See All by Hiromi Morikawa
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
1.8k
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
16
7.4k
デザイナーの帽子をかぶりながら、チームとの関わり方を考えつづけている話/How does a designer fit in a Scrum Team?
hiromitsuuuuu
7
16k
ユーザー候補を目の前にすることでわかること/freee Design Night in Fukuoka
hiromitsuuuuu
0
33k
新しいCSSの仕様を色々調べてみた / css3 new spec
hiromitsuuuuu
0
220
はじめての Sencha Touch2 / First Sencha Touch2
hiromitsuuuuu
0
190
Other Decks in Design
See All in Design
凡庸を落とすハーネス
hiromimaeo
2
840
TOPOSTOPOS
shoheyey
0
190
Saving_the_King_-_Storyboard.pdf
terencebasart
0
320
なぜ、インサイトを貯めるのか?
tajima_kaho
3
2.7k
全員がアウトプットを出せる時代、 誰を採用する?
nishame
0
660
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
380
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
nagata03
0
650
Debiasing Your Software Design Decision-Making @ Flowcon '26
baasie
1
180
A Corrida Maluca - Comedy Storyboard
gioli
0
110
2026/6/26 第6回韓日リビングラボネットワークフォーラムin世宗 ー未来を作るリビングラボー アジアの社会システム転換に向けたリビングラボの可能性
a2k
2
110
Starfall (2025)
rezaline
0
120
デザイン組織の"次の"強みづくり
isaikaori
2
240
Featured
See All Featured
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
460
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
500
Tell your own story through comics
letsgokoyo
1
1.1k
The Pragmatic Product Professional
lauravandoore
37
7.4k
New Earth Scene 8
popppiees
3
2.6k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
510
Code Review Best Practice
trishagee
74
20k
How to Talk to Developers About Accessibility
jct
2
540
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Become a Pro
speakerdeck
PRO
31
6.2k
Faster Mobile Websites
deanohume
310
32k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.9k
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 ΤϯδχΞ͕σβΠϯʹؔΘΕΔ͜ͱ