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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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.9k
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
16
7.5k
デザイナーの帽子をかぶりながら、チームとの関わり方を考えつづけている話/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
230
はじめての Sencha Touch2 / First Sencha Touch2
hiromitsuuuuu
0
190
Other Decks in Design
See All in Design
【2026】ポートフォリオ_大坪明日香
tsubo52
0
120
noteらしさを織り込むハーネスエンジニアリング
uto
0
2.1k
速く作れるかではなく、速く学べるか ― 学習ループを回すパイロットの途中報告
nagata03
0
700
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
securecat
1
310
設計の進め方と 品質特性品質特性
harakeishi
0
1.4k
Frontier
rwang05
0
340
Bet AI Day 2026丨デザインハーネス:専門職の判断基準をコードのように運用する
layerx
PRO
6
7.1k
「惜しいデザイン」 を生み出さないための AIレビューループ
0b1tk
3
4.6k
Техники структурирования беседы с собой, заказчиком и командо
ashapiro
0
320
自社プロダクトのUIをAIが再現するデザインビルドシステム
toy1618
0
1.3k
AVI 2026 Keynote "Vision-Driven Design"
ishii_mit
0
190
MUUUUU.ORG 協賛バナーのご案内
quoitworks999
0
310
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
174
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.6k
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
530
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
260
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
Being A Developer After 40
akosma
91
590k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
3.3k
Building an army of robots
kneath
307
47k
Scaling GitHub
holman
464
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 ΤϯδχΞ͕σβΠϯʹؔΘΕΔ͜ͱ