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
Think Design for Future.
Search
Kazuki YAMASHITA
March 08, 2016
Design
5
1.3k
Think Design for Future.
これからのデザインを考える
FRONTEND CONFERENCE 2016, 5th Mar 2016
Designed by IMPATH
Kazuki YAMASHITA
March 08, 2016
Tweet
Share
More Decks by Kazuki YAMASHITA
See All by Kazuki YAMASHITA
What Was UX Design All About?
ykazu
2
840
Core skills of the Design for Front-end
ykazu
17
50k
Primer of Information Architecture 2018
ykazu
5
550
Think of the User Experience not UX
ykazu
6
1.2k
Sustinable Frontend Design
ykazu
8
1.6k
Primer of Information Architecture 2016
ykazu
5
2k
Other Decks in Design
See All in Design
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
310
portfolio_YumiYasuda
yum0418
0
140
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
130
Tableau曲線表現講座(2024.11.21)
cielo1985
0
310
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
3
160
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
140
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5k
LayerX DesignersDeck
layerx
PRO
0
6.5k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
ito aya Portfolio
itoaya116
0
130
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
570
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Code Review Best Practice
trishagee
67
18k
Practical Orchestrator
shlominoach
187
10k
Being A Developer After 40
akosma
90
590k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
102
18k
4 Signs Your Business is Dying
shpigford
183
22k
Making Projects Easy
brettharned
116
6.1k
We Have a Design System, Now What?
morganepeng
51
7.5k
Done Done
chrislema
183
16k
Scaling GitHub
holman
459
140k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Transcript
Λߟ͑Δ ͜Ε͔Βͷ 5 Mar. 2016 - FRONTEND CONFERENCE 2016 σβΠϯ
ࢁ Լ Ұ थ ΠϯϑΥϝʔγϣϯΞʔΩςΫτ 69σΟϨΫλʔ ਓؒத৺ઃܭਪਐػߏࢍॿձһ ώϡʔϚϯΠϯλϑΣʔεֶձࢍॿձһ
ҙঊͷܭը ઃܭ ػೳඒతܗ designare design “Design is how it works.”
Why Design? ͳͥσβΠϯ͠ͳ͚ΕͳΒͳ͍ͷͰ͠ΐ͏ʁ͜Ε·ͰσβΠϯʹ͍ͭͯٞ͞Εਚ͘͞Ε͖ͯ·ͨ͠ɻ
ϑϩϯτΤϯυʹ͓͚ΔσβΠϯͭ͘ΔͨΊͷͷٕज़͕ᷓΕɺͦͷεϐʔυ૿͍ͯ͠·͢ɻ
UI UX IA accessibility ΤϯδχΞʹ͜ͷΑ͏ͳΩʔϫʔυͰσβΠϯࢹΛٻΊΒΕ͍ͯ·͢ɻ
UX 69ᴷᴷϢʔβʔத৺ʹαʔϏεΛσβΠϯ͢Δͱ͍͏ຐ๏ͷΑ͏ʹײ͡ΒΕΔΩʔϫʔυͰ͕ͨ͘͢͞Μͷཁૉ͕แׅ͞Ε͍ͯ·͢ɻ
UX *" ใઃܭ *Y% 6* 6& ϢʔβϏϦςΟֶ )$* ίϯϐϡʔλֶ *%
ۀσβΠϯ %&4*(/*/('03*/5&3"$5*0/CZ%BO4BGGFS ͱͱϢʔβʔͱϞϊαʔϏεͷ૬ޓ࡞༻ΛσβΠϯ͢ΔΠϯλϥΫγϣϯσβΠϯ͕த৺తͳׂͰͨ͠ɻ
σβΠϯʁ ͜͜Ͱ͓͢ΔσβΠϯͱʁ
ϏδϡΞϧ ࢹ֮ใσβΠϯ IUUQXXXKKHOFUFMFNFOUTQEGFMFNFOUTQEG ࠎ֨ ใߏ ཁ݅ త σβΠϯϏδϡΞϧ͚ͩͰͳ͘ɺతΛ۩ମԽ͍ͯ͘͜͠ͱσβΠϯͰ͢͠ɺͻͱͭͻͱͭΛߟ͑Δ͜ͱσβΠϯͰ͢ɻ
σβΠϯʺͭ͘Δ ͭ͘Δ Ή͠ΖσβΠϯͷଟ͘ͷ෦ͭ͘ΔҎ֎ͷ͜ͱͩͱݴͬͯաݴͰ͋Γ·ͤΜɻ
ͭ͘Δ #PPUTUSBQ4UVEJP 8FCqPX 1JOHFOEP MBOEJOHQBHFJP "44&.#-: ͭ͘ΔͨΊͷαʔϏεͨ͘͞Μ͋Γ·͢ɻྫ͑8FCαΠτ͏ίʔσΟϯά͢Δ࣌Ͱͳ͍ͷ͔͠Ε·ͤΜɻ
ͭ͘Δ "QQMF)VNBO*OUFSGBDF(VJEFMJOF (PPHMF.BUFSJBM%FTJHO(VJEF σβΠφʔͷҙٛʁ ΤϯδχΞͷͨΊͷσβΠϯΨΠυϥΠϯᴷᴷσβΠφʔͷҙٛͲ͜ʹ͋ΔͷͰ͠ΐ͏͔ʁ
σβΠφʔ ΤϯδχΞ σβΠφʔͱΤϯδχΞᴷᴷ৬ೳʹۀ͞Ε͍ͯͯͨΓલͷΑ͏ʹײ͡ΒΕ·͕͢ɺͦͦҰॹͰ͋ͬͨͣͰͳ͍Ͱ͠ΐ͏͔ɻ
σΟϨΫλʔ ܦӦ Ϣʔβʔ σβΠφʔ ΤϯδχΞ ͞ΒʹࢲͨͪϢʔβʔͷͨΊʹͳʹ͔Λͭ͘Δɺͱ͍͏͜ͱΛߟ͑ͨ߹ʹɺ͜ͷϢʔβʔ·Ͱʹ͋ΒΏΔਓ͕հࡏ͠·͢ɻ
Ϣʔβʔ͕͍͍͢Α͏ʹσβΠϯͨ͠ ΠϯλϑΣʔεͱͯ͠ͷಓ۩ɺ͔ͭͯ͏ਓ͕͍͘͢࡞Δɺͭ·Γ͏ਓ͕σβΠϯΛ͍ͯ͠·ͨ͠ɻ
ݐங σβΠϯ ϓϩμΫτ σβΠϯ άϥϑΟ οΫ σβΠϯ ΠϯςϦΞ σβΠϯ ࢈ۀֵ໋Ҏ߱ɺͦΕͧΕͷۀͰσβΠφʔͱͯ͠ͷઐੑཱ͕֬͞Ε·ͨ͠ɻ
ݐங σβΠϯ ϓϩμΫτ σβΠϯ ΠϯςϦΞ σβΠϯ άϥϑΟ οΫ σβΠϯ Ͱߟ͑ͯΈΕɺࢲͨͪͷීஈͷੜ׆ͷதͰͦΕͧΕͷσβΠϯྖҬΛҙࣝ͢Δ͜ͱͳ͘ɺମݧҰຊͷઢͷΑ͏Ͱ͢ɻ
ݐங σβΠϯ ϓϩμΫτ σβΠϯ άϥϑΟ οΫ σβΠϯ ΠϯςϦΞ σβΠϯ ༏ΕͨͦΕͧΕͷσβΠφʔɺ͓ޓ͍ͷྖҬΛΧόʔ͠߹͍ͳ͕ΒɺϢʔβʔʹҧײͳ͘Ұຊͷମݧʹͭͳ͍͛ͯ·͢ɻ
͜ΕΒΛʮͭͳ͙ʯɻ͜Ε·͞ʹσβΠφʔͰ͔͠Ͱ͖ͳ͍͜ͱͩͱࢥ͍·͢ɻ ͦΕͧΕͷσβΠϯྖҬ͕ࣾձΛߏ͢Δݱʹ͓͍ͯɺͦΕҒେͳྗΛ͍࣋ͬͯΔͱݴ͑·͢ɻ
σβΠϯʹͭͳ͙ Ϟϊ αʔϏε ͜ͷΑ͏ʹɺσβΠϯͱͭ͘ΔͷͰͳ͘ʮͭͳ͙ʯ͜ͱʹ͋Δɺͱ͍͏͜ͱ͕͔͖ͬͯ·ͨ͠ɻ ϞϊͱαʔϏεͷͦΕͧΕͷσβΠϯ͕͋ΓɺͦΕΒΛߦ͖དྷ͢ΔϢʔβʔͷͨΊʹͭͳ͙͜ͱ͕σβΠϯɺͱ͍͏ߟ͕͑͋Γ·͢ɻ ϑϩϯτΤϯυͦͷද໘తͳͷʹࢹ͕ͪ͠ʹͳΓ·͕͢ɺ͜ͷʮͭͳ͙ʯͱ͍͏͜ͱ͕σβΠϯࢹͰ͢ɻ
ϞϊͷσβΠϯ Ϟϊ ʮϞϊ͔ΓσβΠϯͯ͠ͳΒͳ͍ʯᴷᴷࠓϞϊͷ࣌Ͱͳ͘ɺίτɺମݧͷ͔࣌ͩΒͱ͍͏͜ͱͩͱࢥ͍·͢ɻ ͔͠͠ϞϊΛσβΠϯ͍ͯͨ͠ɺ͔ͭͯͷܳۀσβΠϯʹɺͱ͋Δߟ͕͑ਫ਼௨͍ͯ͠·ͨ͠ɻ
༻ ඒ ͷ ༄फӻ 1889-1961 ຽܳӡಈ IUUQXXXNJOHFJLBOPSKQBCPVUZBOBHJTPFUTVIUNM
༄फӻ 1889-1961 ༻ͱඒ͕݁ΕΔͷɺ ͜Ε͕Ͱ͋Δ ༻ͱ͍͏ͷػೳͰͳ͘ɺ ৺ͷ༻Ͱ͋Δ ʮͷಓʯ ༻ ඒ ͷ
Ұൠతʹػೳඒͱ͍͏ͷ͕͋Γ·͕͢ɺ͜ͷʮ༻ͷඒʯʮ৺ʯͱ͍͏ݴ༿Ͱ৺ͷॆΛॏཁࢹ͍ͯ͠·͢ɻ ৺ͷॆͱࠓͰݴ͏69ͰಘΒΕΔͷͰ͢ɻඒ͠͞ɺ͏ͷͷ৺͕ຬͨ͞Εɺ ͦ͜ʹඋΘΔػೳΛࢦ͍ͯ͠Δͱ͔࣌Βݴ͍ͬͯͨ͜ͱʹͳΓ·͢ɻ
σβΠϯͷࢹ σβΠϯʺͭ͘Δʜͭͳ͛Δ σβΠφʔͱΤϯδχΞ ͭ͘Δ͜ͱͬͱ؆୯ʹ
ײੑΛຏ͘ ͦͯ͠σβΠϯʹͲ͏ͯ͠֎ͤͳ͍ඞཁͳʮײੑʯσβΠφʔ͚ͩͷͰ͋Γ·ͤΜɻײੑΛຏ͘ͱ͍͏͜ͱɺͦΕͧΕͷࣄͷྖҬΛ ͛ͯϞϊΛݟΔ͜ͱ͕Ͱ͖·͢ɻྗษֶͰͳ͘ɺϞϊͷݟํΛগ͠ม͑Δ͜ͱͰײੑ্͕Δͱࢥ͍ͬͯ·͢ɻ ײੑΛຏ͖ɺࠓ͓ͨ͠Α͏ͳσβΠϯࢹΛ࣋ͭ͜ͱͷํ͕ࣄͷ࣭Λม͑ΒΕΔͱࢥ͍·͢ɻ
ඒ͍͠ Ԓ͔ ͔ ࣸਅΛࡱΔతมΘΓ·͕ͨ͠ɺ͖Ε͍ͩͳͱࢥ͏ॠؒΛ͙͢ʹ4/4ʹྲྀͯ͠͠·͍ͬͯ·͢ɻ σδλϧԽࣗવʹ͍ͨ͢Δײੑ͑͞σδλϧͷதʹ͠·͍ͬͯΔ͜ͱ͕͋Γ·͢ɻͦΕͰײੑʹ͔ͭͳ͍··ʹͳΓͦ͏Ͱ͢ɻ ͦͦײੑඒ͍͠ɺԒ͔ɺ͔ͳͲɺͦ͏ײ͡ΔॠؒͰ͢ɻ
ۭΛͳ͕Ίͯ៉ྷͩͳͱࢥ͏͚ͩͰ͍͍ͱࢥ͍·͢ɻۭຖҧ͏৭Ͱɺຖܾͯ͠ಉ͡৭ͳ͍ͱݴΘΕ͍ͯ·͢ɻ ؟Ͱݟͯɺ4/4Ͱͳ͘৺ʹײΛೖΕΔ͜ͱ͕ײੑΛຏ͘ҰาʹͳΓ·͢ɻ ͳʹࣸਅʹࡱΒͳͯ͘ɺهԱͷதʹೖΕ͓͚ͯͩ͘Ͱ͍͍ͱࢥ͍·͢ɻ
͓͍͍͠ɺ͓͍ͦ͠͏ɻͦ͏ࢥ͑ΔͷײੑͰ͢ɻྉཧͷϓϩηεσβΠϯʹࣅ͍ͯ·͢ɻ ͍͠ςΫχοΫݟͨͷΓ͚Ͱͳ͘ɺ०ͷͷͦͷͱ͖৯͍ͨɺ৯ͯΒ͍͍ͨͳͱࢥ͏ͷΛߟ͑ͯɺΈ߹ΘͤΔɻ Ͳ͏ͬͨΒ͖Ε͍ʹͰͳ͘ɺ͓͍͘͠ͳΔ͔Λௐཧͯ͠ߟ͑Δ͜ͱσβΠϯͷϓϩηεͰ͢ɻ
ཧղ ؍ ఆٛ ૾ ࢼ࡞ ͏ Կ͕͖ʁ ०ͷͷʁ ݙཱΛߟ͑ ম͖Ճݮʁ
ຯݟΛͯ͠ ঌ্͕͠Ε σβΠϯࢥߟͱ͍͏ͷ͕͋Γ·͕͢ɺͷΛ࡞ΔલʹԿ͕ඞཁͳͷ͔Λཧղ͢ΔɺͲ͏ͳͷ͔ͬ͘͡Γ؍͠ɺΛఆٛ͢Δɻ ఆٛ͞Εͨͷ͔Β૾͠ɺࢼ࡞ͯ͠Έ࣮ͯࡍʹͬͯͲ͏͔Λςετ͢ΔΓํྉཧಉ͡Ͱ͢ɻ
࠷ޙʹ
ػೳ͚ͩͰղܾͰ͖ͳ͍ෆ߹ཧ͕͋͞Δɻ ࠷ޙʹͰ͕͢ɺࢲ͕σβΠϯͱ͍͏ͷΛ௨͍ͯ͠·ߟ͍͑ͯΔ͜ͱͰ͢ɻ ػೳ͚ͩͰղܾͰ͖ͳ͍ෆ߹ཧ͞ᴷᴷ͜Ε͜Ε͔ΒͲΜͳʹศརͳͷ͕Ͱ͖ͯͦͷͷ͚ͩͰຬ͠ͳ͍ෆ߹ཧ͞ ඞͣΔͱݴ͏͜ͱͰ͢ɻෆ߹ཧ͞Λগͳ͘͢ΔͨΊʹମݧΛҰຊʹ͢ΔͨΊʹσβΠϯͷߟ͑ํΛେʹ͍ͨ͠Ͱ͢ɻ
ྖҬͷதͰٕज़Λڝͬͯྑ͔͔ͬͨ࣌Βɺ ྖҬΛ֦ு͠ͳ͕Βͭͳ͕ΓΛ͍ͭͬͯ࣌͘͘ɻ ࠓ͔ͭͯͷͦΕͧΕͷྖҬͰ/PΛͱΔ͜ͱͰͳ͘ɺͦΕΒΛ֦ுͯͭ͠ͳ͕ΓΛ͍ͭͬͯ࣌ͩ͘͘ͱࢥ͍·͢ɻ ྖҬͱσβΠϯͰ͋ͬͨΓΤϯδχΞϦϯάͰ͋ͬͨΓͰ͢ɻ ৬ҬʹͱΒΘΕͳ͍ΓํͰσβΠϯͷྗͰͭͳ͍͖͍͛ͯͨͱࢥ͍ͬͯ·͢ɻ
σβΠφʔ͕ৗʹҙࣝ͠ɺ ຊͷྑ͞Λࠜఈ͔Βม͍͑ͯ͘༐ؾ͕ඞཁɻ ͋ΒΏΔͷσβΠϯ͞Ε͍ͯ·͢ɻଟ͘ͷແ໊ͳσβΠφʔʹΑͬͯɺಛʹ*5ͷσβΠϯ͢Ͱʹࣗવ౫ଡ͞Ε͍ͯΔ͔͠Ε·ͤΜɻ ͰσβΠφʔਅͬਖ਼໘͔Βຊͷྑ͞Λৗʹҙࣝͯ͠ม͍͑ͯ͘༐ؾ͕ඞཁͩͱࢥ͍ͬͯ·͢ɻ ؆୯ʹͭ͘ΕΔ͔Βͱ͍ͬͯσβΠϯ͢Δ͜ͱΛΊͳ͍Ͱ͍ͩ͘͞ɻ
ͦΕʹଟ͘ͷײੑΛඞཁͱ͢Δɻ ײੑ͕ͳ͍··ͰɺඞͣյΕΔၪ͍ͷɻ ײੑʮײͨ͡ऀউͪʯ ײੑਓؒͰ͋Ε୭͕ຏ͚ΔͷɻಛʹຊਓͷײੑૉΒ͍͠ͱݴΘΕ͍ͯ·͢ɻσβΠϯͱ͍͏ߦҝɺײੑ͕ͳ͍··औΓΉͱɺ ؆୯ʹର͕͜ΘΕͯ͠·͏͔ͳ͍ͷͰ͢ɻ͔ͩΒײੑΛຏ͘͜ͱΛࢭΊ͍͚ͯͳ͍ͱࢥ͍ͬͯ·͢ɻ ͦͷײੑײͨ͡ऀউͪͰ͢ɻੜ׆ࣗવͷதʹͨ͘͞Μ͋Γ·͢ɻ
Why Design? ΤϯδχΞɺσβΠφʔؔͳ͘ࠓσβΠϯ͕ٻΊΒΕ·͢ɻͳͥ࡞Δͷ͔ʁΛߟ͑Δ͜ͱ͏σβΠϯࢹͰ͢ɻ ͜Ε͔Βࢲແ໊ͳσβΠφʔͱͯ͠ɺ͍ͭͷؒʹ͔ͦ͜ʹ͋ΔΑ͏ͳσβΠϯΛ৺͕͚͍ͨͰ͢ɻಛʹ6*ͳͲۭؾͷΑ͏ʹɺͳʹײ͡Β Εͳ͍͘Β͍ͳͷͰ͋Ε͍͍ͳͱࢥ͍·͢ɻօ͞ΜͷσβΠϯͲΜͳͷͰ͠ΐ͏͔ʁ·ͨσβΠϯʹ͍ͭͯߟ͑Λ͓ฉ͔͍ͤͩ͘͞ɻ
Thank you http://ykazu.com/