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
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
650
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
110
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.9k
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
190
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
310
mento Design Team Portfolio
mento0fficial
1
850
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
620
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.5k
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
120
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.6k
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
130
Yumika Yamada Portfolio
yumii
0
1.7k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Designing for Performance
lara
610
69k
Scaling GitHub
holman
463
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
How GitHub (no longer) Works
holman
315
140k
Building Adaptive Systems
keathley
43
2.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Bash Introduction
62gerente
615
210k
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/