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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
1.3k
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
16
7.2k
デザイナーの帽子をかぶりながら、チームとの関わり方を考えつづけている話/How does a designer fit in a Scrum Team?
hiromitsuuuuu
7
15k
ユーザー候補を目の前にすることでわかること/freee Design Night in Fukuoka
hiromitsuuuuu
0
32k
新しいCSSの仕様を色々調べてみた / css3 new spec
hiromitsuuuuu
0
200
はじめての Sencha Touch2 / First Sencha Touch2
hiromitsuuuuu
0
160
Other Decks in Design
See All in Design
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
870
AI情報に溺れながら、それでも頑張って泳ぐための思考法
yoriss67
0
130
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
680
kintone_aroma
kintone
0
1.4k
Drawing for Animation
lynteo
2
190
AIでデザインをつくる:基礎編
kenichiota0711
3
2.5k
hicard_credential_202601
hicard
0
160
Spacemarket Brand Guide
spacemarket
2
170
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
0
280
Figmaレクチャー会Part1 基本のき編@千株式会社 社内勉強会
designer_no_pon
2
250
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
1.9k
AIスライドデザインを生成する仕組みを社内共有する
kenichiota0711
5
4.3k
Featured
See All Featured
Amusing Abliteration
ianozsvald
0
110
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
830
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
180
A Modern Web Designer's Workflow
chriscoyier
698
190k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
0
160
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
200
Fireside Chat
paigeccino
41
3.8k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
120
Navigating Team Friction
lara
192
16k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.2k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Google's AI Overviews - The New Search
badams
0
910
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 ΤϯδχΞ͕σβΠϯʹؔΘΕΔ͜ͱ