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
890
Core skills of the Design for Front-end
ykazu
17
50k
Primer of Information Architecture 2018
ykazu
5
570
Think of the User Experience not UX
ykazu
6
1.3k
Sustinable Frontend Design
ykazu
8
1.6k
Primer of Information Architecture 2016
ykazu
5
2k
Other Decks in Design
See All in Design
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
530
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
190
高卒公務員から Webデザイナーになるまで
kinomidesign
0
110
役立つシステムを作るためのAI活用
kanzaki
0
110
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
410
root COMPANY DECK / We are hiring!
root_recruit
PRO
1
24k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.9k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
460
minpaku-community-scrum-patterns
norinity1103
1
460
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
320
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
310
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
430
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
GitHub's CSS Performance
jonrohan
1032
470k
Automating Front-end Workflow
addyosmani
1371
200k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
How to Ace a Technical Interview
jacobian
280
24k
For a Future-Friendly Web
brad_frost
180
9.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Language of Interfaces
destraynor
162
25k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
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/