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
880
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
Bulletproof Design System with TypeScript
takanorip
6
3.9k
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
260
CMS管理画面のアクセシビリティ
magi1125
8
2.4k
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
200
Saudade typeface
tiagoporto
0
340
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
550
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
2
3.2k
CursorでAI活用のナレッジベースを構築する
kanzaki
0
620
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.2k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
7 Core Values of Round-L
wired888
0
1.4k
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Optimizing for Happiness
mojombo
379
70k
Typedesign – Prime Four
hannesfritz
42
2.8k
Thoughts on Productivity
jonyablonski
69
4.8k
Writing Fast Ruby
sferik
628
62k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Six Lessons from altMBA
skipperchong
28
4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A Modern Web Designer's Workflow
chriscoyier
695
190k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The World Runs on Bad Software
bkeepers
PRO
70
11k
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/