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
20131101JAGAT_short.pdf
Search
Takuji Ikeda
February 28, 2014
1
200
20131101JAGAT_short.pdf
Takuji Ikeda
February 28, 2014
Tweet
Share
More Decks by Takuji Ikeda
See All by Takuji Ikeda
UI for everyday's cooking
tikeda
39
18k
Patterns of UI Design
tikeda
3
940
Sass for everyday's cooking
tikeda
21
1.9k
Web Fonts with Web Design
tikeda
6
6.4k
Featured
See All Featured
A better future with KSS
kneath
239
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.6k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Cost Of JavaScript in 2023
addyosmani
49
7.8k
Building Adaptive Systems
keathley
41
2.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A Tale of Four Properties
chriscoyier
159
23k
We Have a Design System, Now What?
morganepeng
52
7.6k
Transcript
6*σβΠϯͷجຊͱ εϚʔτϑΥϯ ɾ λϒϨο τରԠ ా ࢘ 2013/11/1
͍ ͚ ͩ ͨ ͘ ͡
ࣗݾհ w ా࢘UBLVKJJLFEB w ΫοΫύουגࣜձࣾɹσβΠϯ෦ w ΫοΫύουαʔϏεશମͷσβΠϯͱ Ϣʔβʔମݧͷ w σβΠϯɾϑϩϯτΤϯυج൫ͷߏங
w IUUQUJLFEBOFUɹIUUQUJLFEBIBUFOBCMPHDPN w UJXUUFS!UJLFEB
ஶॻ
ΞδΣϯμ w 6*σβΠϯͱԿ͔ w λονσόΠεͷ6*ʹ͍ͭͯ w ΞϓϦͱΣϒ w 6*σβΠϯΨΠυϥΠϯ w
ΫοΫύουͰͷ6*σβΠϯͷऔΓΈ w ·ͱΊ
6*σβΠϯͱԿ͔
ϢʔβʔΠϯλʔϑΣΠε ϢʔβΠϯλϑΣʔε 6TFS*OUFSGBDF ɺ ػցɺಛʹίϯϐϡʔλʔͱͦͷػցͷར༻ऀʢ௨ৗ ਓؒʣͷؒͰͷใΛΓͱΓ͢ΔͨΊͷΠϯλϑΣʔ εͰ͋Δɻ XJLJQFEJB
ϚεΛͬͯΣϒϒϥδϯά w ݟ͍͢จࣈ w ಡΈ͍͢จষ w ͔Γ͍͢φϏήʔγϣϯஔ w Կ͕͓͖͔͙ͨ͢ʹ͔Δදݱ
εϚʔτϑΥϯը໘Λૢ࡞ w ԡ͍͢͠Ϙλϯ w ͭͳ͕Γ͕ࣗવͳಈ͖ w Γ͍ͨࣄ͕͙͔͢ΔϨΠΞτ w ඒ͘͠৺Α͘ײ͡Δੈք؍
σδλϧΧϝϥͷૢ࡞ w ѲΓ͍͢άϦοϓײ w ͭ·Έ͍͢μΠΞϧ w ͔Γ͍͢ΞΠίϯ w ͍͍͢Ϙλϯஔ
ΧʔφϏͷૢ࡞ w తͷॴʹ୧Γ͚ͭΔ͔ w ӡస͠ͳ͕ΒεϜʔζʹ͑Δ͔ w ยखͰૢ࡞Ͱ͖Δ͔
ਓͱϞϊίτͷΛ σβΠϯ͢Δ͜ͱ
ࢲͷߟ͑ΔΑ͍6*σβΠϯͱ wϢʔβʔʹͱͬͯతͱ͢Δ͜ͱΛ ࣗવʹՄೳͱ͢ΔσβΠϯ wಧ͚खͱड͚खͱͷ Ϊϟοϓͷগͳ͍σβΠϯ wϢʔβʔʹͱͬͯڻ͖ײಈΛ ༩͑Δ͜ͱ͕Ͱ͖ΔσβΠϯ
6*σβΠϯΛͱΓ·༷͘ʑͳϫʔυ w 6*σβΠϯ w *"ʢใઃܭʣ w 69σβΠϯ w ϢʔβʔϦαʔν w
Ϣʔβʔςετ w ϏδϡΞϧϝΠΩϯά
λ ονσόΠεͷ6*ʹ͍ͭͯ εϚʔτϑΥϯλϒϨοτ
λονσόΠεͷ࠷େͷಛʁ δΣενϟʔૢ࡞
λοϓ εϫΠϓ ϑϦοΫ ϐϯνΠϯΞτ ओͳδΣενϟʔ
εϫΠϓ
ϗʔϧυυϥοά
ϐϯνΠϯΞτ
λονσόΠεͷ6* w ը໘͕ͤ·͍ w ҰఆαΠζҎ্ͷλοϓྖҬʹ͍ͯ͘͢͠ w จࣈೖྗ͕େมɻۃྗจࣈೖྗΛ߇͑Δ w ը໘ͰͰ͖Δ͜ͱ؆ܿʹ w
͏γνϡΤʔγϣϯ༷ʑ w ಈ͖ͳ͕Β͏߹͕͋ΔͷͰେࣄͳૢ࡞֬ೝΛ w ยखɺ྆खͲͪΒͰ͏͔ߟ͓͑ͯ͘ w ը໘͕ͤ·͍ w ҰఆαΠζҎ্ͷλοϓྖҬʹ͍ͯ͘͢͠ w จࣈೖྗ͕େมɻۃྗจࣈೖྗΛ߇͑Δ w ը໘ͰͰ͖Δ͜ͱ؆ܿʹ w ͏γνϡΤʔγϣϯ༷ʑ w ಈ͖ͳ͕Β͏߹͕͋ΔͷͰେࣄͳૢ࡞֬ೝΛ w ยखɺ྆खͲͪΒͰ͏͔ߟ͓͑ͯ͘
None
iPhone5 Nexus 4
Nexus 4 Galaxy SIII 2012 SH-05E 2013 HT03-A 2009
λονσόΠεͷදతͳ6* λϒܕφϏήʔγϣϯ
λονσόΠεͷදతͳ6* λϒܕφϏήʔγϣϯ ҟͳΔׂΛͬͨը໘ؒΛҠಈ͢ΔͨΊʹओʹ༻͍Δ6* ίϯϙʔωϯτͰ͢ɻը໘ྖҬͷڱ͍εϚʔτϑΥϯʹ͓ ͍ͯ͜ͷଘࡏ͕େ͖͘ײ͡ΒΕ·͢ɻεϚʔτϑΥϯͰ ࠷Α͘༻͍ΒΕΔ6*ͷͻͱͭͰ͢
λονσόΠεͷදతͳ6* ϨʔςΟϯά
λονσόΠεͷදతͳ6* ϨʔςΟϯά w ίϯςϯπΛߘͨ͠Ϣʔβʔʹରͯ͠ϑΟʔυόοΫ Λฦ͢ʢධՁɾڞײͳͲʣ w ίϯςϯπͷධՁΛୈࡾऀʹ͑Δ w ࣗͷͨΊͷྨͱ͢Δ
λονσόΠεͷදతͳ6* ϝοηʔδʢϞʔμϧɾϞʔυϨεʣ
λονσόΠεͷදతͳ6* ϝοηʔδʢϞʔμϧɾϞʔυϨεʣ Ϣʔβʔ͕࣮ߦ͠Α͏ͱ͍ͯ͠Δߦಈ͕ ؒҧ͍Ͱͳ͍͔ࣄલʹܯࠂͯ֬͠ೝ͢Δͱ͖ Ϣʔβʔ͕औͬͨߦಈͷޙʹϑΟʔυόοΫͯ͠ ΓऔΓΛ͢Δͱ͖ͳͲʹ༻͍·͢ɻ
λονσόΠεͷදతͳ6* ϝοηʔδʢϞʔμϧɾϞʔυϨεʣ A B ݟ͚ͨͩͰͳ͘ϥΠςΟϯάॏཁͳཁૉ
ΞϓϦͱΣϒ
None
ϗʔϜը໘͔Βىಈ ϒϥβ͔Βىಈ ΞϓϦ Σϒ
ΞϓϦಠࣗͷػೳ͕͑Δ w ௨ w ϐϯνΠϯΞτΛͬͨૢ࡞ w ৺Α͍5SBOTJUJPOʢಈ͖ʣ w ը໘αΠζ͕͍ ʢΞυϨεόʔ͕ͳ͍ʣ
Ϣʔβʔͷಋઢ͕ҧ͏ ΞϓϦͷ߹
w ʮΫοΫύουʯͰݕࡧ w ʮϋϩΟϯ͔΅ͪΌʯͰݕࡧ w ϒϥβͷ͓ؾʹೖΓ w ͱͩͪͷϝʔϧ w ଞͷαʔϏε
Ϣʔβʔͷಋઢ͕ҧ͏ Σϒͷ߹
ΞϓϦͱΣϒ ৯ϩά Android App Web iPhone App
ΞϓϦͱΣϒ 5XJUUFS Android App Web iPhone App
6*σβΠϯΨΠυϥΠϯ
6*σβΠϯΨΠυϥΠϯ J04)VNBO*OUFSGBDF(VJEFMJOF "OESPJE%FTJHO &OHMJTIPOMZ
J04)VNBO*OUFSGBDF(VJEFMJOFT 6*σβΠϯΨΠυϥΠϯ w ߇͑ΊͰ͋Δ͜ͱ 6*ʹͦͷ༰Λ͔Γ͘͢දࣔ͠ɺϢʔβͱΓऔΓ͢Δಇ͖ ͕͋Γ·͕͢ɺͦΕࣗͷํཱ͕ͭΑ͏Ͱ͋ͬͯͳΓ·ͤΜɻ w ໌ྎͰ͋Δ͜ͱ จࣈͲͷେ͖͞ͰಡΈ͘͢ɺΞΠίϯత֬໌ྎͰɺ০ ߇͑ΊͰదɺ͞ΒʹͦͷػೳΛ໌֬ʹද͢Α͏Ͱͳ͚ΕͳΓ·
ͤΜɻ w Ԟߦ͖Λ༩͑Δ͜ͱ ࢹ֮తͳॏͳΓຊΒ͍͠ಈ͖͕͋Δͱɺָ͔͠͞Γ͢͞ ্͕͠·͢ɻ
J04)VNBO*OUFSGBDF(VJEFMJOFT 6*σβΠϯΨΠυϥΠϯ
"OESPJE%FTJHO(VJEFMJOF 6*σβΠϯΨΠυϥΠϯ
ಉ͡ҙຯΛ࣋ͭΞΠίϯͰ ϓϥοτϑΥʔϜͰҟͳΔ γΣΞ͢Δ 6*σβΠϯΨΠυϥΠϯ J04 "OESPJE J04
6*σβΠϯΨΠυϥΠϯ ͦͷଞ ઃఆ άϧʔϓ ΞΫςΟϏςΟ ͓ؾʹೖΓ ϨʔςΟϯά
J04ΞϓϦͱ"OESPJEΞϓϦͷ6*ͷҧ͍ 6*σβΠϯΨΠυϥΠϯ
ը໘தԝʹը໘λΠτϧɻ ࠨଆʹલͷը໘ͷλΠτϧ໊Λ ೖΕͨόοΫϘλϯɻ ӈଆʹओཁͳΞΫγϣϯϘλϯ ը໘ࠨଆʹը໘λΠτϧɻ ͦͷ͞ΒʹࠨʹόοΫϘλϯɻ ը໘ӈଆʹओཁͳΞΫγϣϯϘλϯ J1IPOFφϏήʔγϣϯόʔ "OESPJEϝΠϯΞΫγϣϯόʔ 6*σβΠϯΨΠυϥΠϯ
εϚʔτϑΥϯͷ6*σβΠϯ ϕʔεͷߟ͑ํ͢ͰʹܾΊΒΕ͍ͯΔɻ ͜ͷߟ͑ํʹԊ͏ࣄͰࣗવͳ6*ΛߏஙՄೳ
ऴΘΓʹ
ࢲͷߟ͑ΔΑ͍6*σβΠϯͱ wϢʔβʔʹͱͬͯతͱ͢Δ͜ͱΛ ࣗવʹՄೳͱ͢ΔσβΠϯ wಧ͚खͱड͚खͱͷ Ϊϟοϓͷগͳ͍σβΠϯ wϢʔβʔʹͱͬͯڻ͖ײಈΛ ༩͑Δ͜ͱ͕Ͱ͖ΔσβΠϯ
6*σβΠϯ w ϏδϡΞϧσβΠϯҰ෦ͷཁૉʹ͗͢ͳ͍ w Ϣʔβʔͷߦಈʹج͍ͮͯળ͠ѱ͕͖͠·Δ w σόΠεʹΑͬͯϕʔεͷߟ͑ํܾΊΒΕͯ ͍Δ w ࣮ػͰૢ࡞ͯ͠Έͳ͍ͱળ͠ѱ͕͔͠Βͳ͍
࠷ޙʹ ʮεϚʔτϑΥϯͷͨΊͷ6*σβΠϯʯ ͠͝ڵຯΛ࣋ͨΕͨํ͓खʹͱͬͯݟ͍ͯͩ͘͞ɻ Ҏ্ɺ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Special Thanks photo by Flickr