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
38
17k
Patterns of UI Design
tikeda
3
910
Sass for everyday's cooking
tikeda
21
1.9k
Web Fonts with Web Design
tikeda
6
6.3k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Designing Experiences People Love
moore
138
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
A better future with KSS
kneath
238
17k
The Language of Interfaces
destraynor
154
24k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.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