世界展開する教育アプリの UIデザイン

6/8にアプリデザインの開発フローやエンジニアとの協業について発表しました。その時の資料を置いておきます。sketchお役立ち情報など加筆修正している部分があります。

発表会リンク
http://hirelink.connpass.com/event/32320/

@meycoとは？(リンクより紹介抜粋)
> 世界8ヵ国で300万人以上のユーザーを抱える教育アプリQuipper School、スタディサプリのデザイナーです。
エンジニアとデザイナーの良いコラボレーションを生み出す開発フローや、日本と海外の設計の違いとそれを乗り越えるユニバーサルなUIデザイン作りの肝など、世界展開するアプリ制作を通して得られた知見を中心に講演していただきます。

Hello. I am a QRcode Artist & Game EDU-TECH UX / UI interaction designer. I worked as a freelance artist and an expert in QRcode design. I eventually produced the QR Codes for books, and for major corporations such as Microsoft, Asahi News Papers and Seikaisha. My success in the QR code design gained international attention and i began to work on projects in San Francisco and other Asian countries. My exponential popularity landed my a spot on TEDxKG 2013 Japan. In September 2013 , I joined as a UX / UI designer for agency, to continue working with clients overseas. I have a blog where my keeps tabs on her experiences with overseas clients and university appearances. I enjoys game production, and was a designer for graphic.

Transcript

1. ੈքల։͢ΔڭҭΞϓϦͷ 6*σβΠϯ @meyco
2. ࣗݾ঺հ
   2VJQQFSͷ͜ͱ
   ௨ৗͷ6*ઃܭͱҧͬͯؾΛ͚ͭͨ ఺
   ΤϯδχΞͱͷڠۀʹ͍ͭͯ ຊ೔ͷ໨࣍
3. ࣗݾ঺հ 8IP
   JT
   NFZDP
4. !NFZDP Designer
 ʢࢴ→web→UIʣ QRcode Artist / Illustrator झຯͷήʔϜ։ൃ͕ڵ ͯ͡ϞόΠϧͷੈք΁
5. ࠓ·Ͱ࡞ͬͨ΋ͷʢҰ෦ʣ
7. /BUJWFΞϓϦྖҬ
 ͷελσΟαϓϦάϩʔόϧ൛ʢ͜ͷ̎ ͭ͸த਎͕΄ͱΜͲಉ͡ʣ
   6*σβΠϯʢΞϓϦͷάϥϑΟοΫ෦෼ʣ
   69σβΠϯʢͦͷػೳ͕͋ͬͯΔͷ͔ɺ ຊ౰ʹඞཁͳͷ͔ͷݕ౼ͳͲʣ ओͳۀ຿
8. λΠτϧςΩετ
9. 5JUMF
   5FYU Our Vision We aim to create a world where every child is given the opportunity to learn what they want to, with no boundaries nor challenges. We believe that learning is a right, not a privilege. Distributors of Wisdom Our Vision
10. About us • Founded in Dec 2010 in UK 
 • 5 offices: London, Tokyo, Manila, Mexico City, Jakarta 
 • 120+ Employees 
 • Shareholder: Recruit HD (100%) since Apr 2015 
 LONDON TOKYO MANILA MEXICO CITY JAKARTA
11. ΦϑΟε͸ΠΪϦεɺ೔ຊɺϝΩγίɺΠϯυω γΞɺϑΟϦϐϯ
    શମͩͱ໊ఔ౓ʢ૿͍͑ͯ·͢ʣ
    ΤϯδχΞ໿਺໊ʢ೔ຊɺΠΪϦεɺϑΟϦ ϐϯʣ
    σβΠφʔ໊ʢશੈք߹ܭݱࡏʣ
 ಺ɺ6*69σβΠφʔ໊ 2VJQQFSͷମ੍
12. Recruit Holdings -The parent company of Quipper Ltd.- FOUNDED HEADQUARTERS CONSOLIDATED SALES NUMBER OF CONSOLIDATED SUBSIDIARIES NUMBER OF GROUP EMPLOYEES 1960 Tokyo, Japan 10.4B USD 162 31,841 OUR MISSION To create a world where individuals are empowered by accessible information to create their own path in life. OVERSEAS BUSINESSES Recruit Marketing Partners Recruit Career Recruit Jobs Recruit Lifestyle Recruit Sumai Company Recruit Staffing Staff Service Holdings EUROPE ASIA N. AMERICA EDUCATION, BRIDAL, AUTOMOTIVE Recruit Holdings -The parent company of Quipper Ltd.-
13. Online education platform for every student to achieve academic excellence. Available in 8 countries No.1 e-learning service for schools in Indonesia and the Philippines Used by 200,000+ teachers Used by 3 million students Online education platform for teachers & students to create a highly effective learning process. E-learning solution for students preparing university entrance exams effectively. Fastest growth of user in Indonesia and Mexico. 10,000+ users to date High quality materials with 400 hrs of video tutorials 1,720 topics 7,600+ quizzes and prediction tests StudySapuri No.1 250,000 Paid users equal to No.1 prep school No.1 Customer satisfaction among all e-learning service Adopted in 700 schools out of 5,000 high schools Recruit Holdings
14. ΫΠούʔεΫʔϧੜె໿ສɺઌ ੜສਓ
    ΫΠούʔϏσΦʢສϢʔβʔ +BLBSUB
    
    .&9*$0ʣ
    Ϣʔβʔ਺߹ܭສਓҎ্ʢ૿͑ͯ ͍·͢ʣ 2VJQQFSͷαʔϏε
15. ελσΟαϓϦ
20. ϏσΦܕͷΦϯϥΠϯֶशαʔϏεɻֹ݄ ԁʢ੫ผ೥݄ݱࡏʣ
    ೥౓ྦྷܭ༗ྉձһ਺͸ສਓΛಥഁ
    ߴߍੜ޲͚ΦϯϥΠϯֶशαʔϏεʰडݧα ϓϦʱΛ2VJQQFSͷγεςϜʹࡌͤସ͑
    ߴߍߍͷ಺ɺߍͰಋೖ͞Ε͍ͯ·͢ ελσΟαϓϦͱ͸
21. ௨ৗͷ6*ઃܭͱҧͬͯؾΛ ͚ͭͨ఺
22. ӳޠͱϑΥϯτ໰୊
    ϏσΦपΓ ௨ৗͷ6*ઃܭͱҧͬͯؾΛ͚ͭͨ఺
23. ӳޠͱGPOU໰୊
24. ॳظͷϑΥϯτઃܭ English: Roboto regular English: Roboto bold 傈劤铂
    4BOT
    $+,
    +1
    %FNJ
    MJHIU 傈劤铂
    4BOT
    $+,
    +1
    CPME
25. ೔ຊޠϑΥϯτॏ͍
    
26. ඒ͠͞ΛͱΔ͔ܰ͞ΛͱΔ͔
    ॳظஈ֊͸ʲܰ͞ʳΛͱΔ
    ࠷ॳɺ/PUP
    TBOT
    $+,Λ࢖͍͔ͨͬ ͕ͨɺ/PSNBMͱ#PMEͦͷଞͰʴ .#͘Β͍ʹͳͬͨͷͰ΍Ίͨ ೔ຊޠϑΥϯτ͸͔ͳΓॏ͍ɻ
27. ͦͷޙͷσβΠϯमਖ਼΋݁ߏେมͩͬͨ  ·Ͱ  ·Ͱ )JSBHJOP
    4BOT  תד  תד 4BOT
    $+,
    +1
    %FNJ
    MJHIU sketch͸೔ຊޠͷϕʔεϥΠϯͷࢦఆ͕ऑ͍
 σβΠϯσʔλมߋ͢Δͷେม ܾஅ͸͓ૣΊʹ
28. ϏσΦपΓ
29. 
    ZPVUVCFΛࢀߟʹ·ͣઃܭͯ͠Έͨ 4BNQMF %FTJHO
30. શવ࢖͍ํҧ͏ʂʂʂʂ
31. ༧૝֎ͷ࢖͍ํ සൟʹಈըΛఀࢭɺר͖ ໭͠ɺૣૹΓΛ͢Δ ࢹௌதʹΨϯΨϯಈըε ϐʔυΛมߋ͢Δ όοΫάϥ΢ϯυ࠶ੜΛ ر๬͢Δਓଟ͠ ը࣭Λੌ͍ؾʹ͢Δ ಉ࣌ʹύέοτ୅΋ੌ͍ ؾʹ͢Δ
32. मਖ਼ࠩ෼
    #FGPS "GUFS
33. #FGPS "GUFS
34. ࣮ࡍʹ࢖ͬͯ΋ΒΘͳ͍ ͱຊ౰ʹΘ͔Βͳ͍
35. ·ͣϦϦʔεͯ͠ΈΔͱ͍͏ࣄ ͸େࣄ
    ༗໊ͳΞϓϦΛࢀߟʹͯ͠΋ Ϣʔεέʔε͕߹Θͳ͍৔߹͕ ͋Δ ࣮ࡍʹ࢖ͬͯ΋ΒΘͳ͍ͱຊ౰ʹΘ͔Βͳ͍
36. ΤϯδχΞͱͷڠۀʹ
    ͍ͭͯ
37. ೖࣾͨ͠౰ॳ
38. ̒ϲ݄͙Β͍ͰϦϦʔε͠ͳ͚Ε͹ͳΒͳ͔ͬͨ
    ϞόΠϧσβΠϯ͸άϩʔόϧ൛͕͕͋ͬͨɺ೔ຊ ͰٻΊΒΕΔػೳ͕ҧ͏ͨΊͦΕΛݩʹ࡞Γ௚͢ඞ ཁ͕͋ͬͨɻ
    ΤϯδχΞ͸"OESPJE
    ໊ɺJ04
    ໊
    ্࢘͸ϩϯυϯ
    ΋ͱ΋ͱ͋Δ8&#ͷ࢓༷ΛϞόΠϧʹࡌ͔ͤ͑Δ ݄ʹೖࣾ͠·ͨ͠
39. ϞόΠϧ͔Β1$ͷࡌͤସ͑͸ ൺֱత΍Γ΍͍͕͢ɺٯ͸͠ ʹ͍͘ɻʢ৘ใྔ͕ଟ͍ͨΊʣ
40. JTTVFΛಡΉطଘαʔϏεΛཧղ͢Δ
    άʔάϧϚςϦΞϧσβΠϯͱ"QQMFώϡʔ ϚϯΠϯλʔϑΣʔεΨΠυϥΠϯΛ͢΂ͯ ಡΈͳ͓͢
    
    طଘͷίϯϙʔωϯτ͸ଘࡏ͍ͯͨͨ͠Ίɺ ϞόΠϧͷಈ͖ʹ͋ΘͤͯσβΠϯ͠ͳ͓͠ ·ͣͨ͠ࣄ
41. ͲͷΑ͏ʹ࢓ࣄΛ͍ͯͬͨ͠ͷ ͔ʁ
42. ελσΟαϓϦʢ/BUJWF
    "QQʣ Λ࡞ͬͨ࣌ͷ໰୊ͱղܾํ๏
    
43. ໰୊ͩͬͨ͜ͱ
44. ͕࣌ؒແ͍ ΤϯδχΞ ͱσβΠϯ৘ใ ͷಉظํ๏ ભҠઌɺ
    ໭Γઌ໰୊ ࡉ͔͍σβ Πϯमਖ਼ͷߍ ਖ਼࡞ۀ
45. 
    ͲͷΑ͏ʹղܾ͠Α͏ͱͨ͠ ͷ͔ ͕࣌ؒແ͍ ΤϯδχΞ ͱσβΠϯ৘ใ ͷಉظํ๏ ભҠઌɺ໭Γ ઌ໰୊ ࡉ͔͍σβ Πϯमਖ਼ͷߍਖ਼ ࡞ۀ
46. ͕࣌ؒແ͍ No.1
47. όάΒͳ͍Α͏࣮֬ʹ࣮૷Ͱ͖ɺ͔ ͭඞཁͳػೳ͚ͩબΜͰઃܭͨ͠
    όάΒͳ͍ʼ΋͔ͨͭͳ͍ʼඒ͍͠
    αϘΕΔͱ͜Ζ͸ϓϩάϥϜͰαϘ ΔΑ͏ʹͨ͠ɻʢ͕·ΜΛࣙΊͨʣ ͕࣌ؒແ͍
48. TLFUDIσʔλΛ(JUIVCϦϙδτϦͰ؅ཧ
    ΞΠίϯσʔλTLFUDIΛϦϙδτϦʹϓο γϡˠ5SBWJT$*͕ͦΕΛݟ͚ͭΔˠࣗಈͰ ΤΫεϙʔτ͞Εͯ[JQϑΝΠϧੜ੒ɻͦΕ Λ֤։ൃ؀ڥ΁ɻ
    ΞΠίϯҰཡ΋࡞ͬͯ͘Εͯɺ͔ͭࠩ෼΋Θ ͔Δɻ ϓϩάϥϜͰαϘΔͱ͸ɹΞΠίϯฤ
49. Πϝʔδ ΞʔτϘʔυͰৼΓ෼͚ͯɺJPTɺ"OESPJE֤ಠࣗར༻͢ΔΞΠίϯͷௐ੔ ΋Ͱ͖ͯɺ͓ޓ͍ʹແବͳը૾ΛऔΓࠐ·ͳ͍Α͏ʹ͍ͯ͠Δɻৄ͘͠͸ ͪ͜ΒɹIUUQRJJUBDPNEBHF[JJUFNTBG⒎GCFDD
50. ڭ܇ ࠔͬͨΒ૬ஊͯ͠ΈΔɻ ҟۀछͰ΋ϗ΢Ϩϯι΢େࣄ
51. ڭ܇ ࠔͬͨΒ૬ஊͯ͠ΈΔɻ ҟۀछͰ΋ϗ΢Ϩϯι΢େࣄ ࠜੑ͸͍Δ͚ͲɺࠜੑͰԿͱ͔͢Δલʹਓʹ૬ஊ͢΂͖ɻ ࠜੑ͕ඞཁͳ͍໰୊΋ଟ͍ɻ
52. No.2 ΤϯδχΞ ͱσβΠϯ৘ใ ͷಉظํ๏
53. جຊతʹHJUIVCͰϓϩδΣΫτ؅ཧ
    ৗʹϦϙδτϦʹ࠷৽ͷ৘ใͱσβΠϯΛΞοϓ σʔτ
    ϑΣʔζʹΑͬͯ࢖͏ϓϩτλΠϐϯάαʔϏε ม͑ͨ
    ϦϑΝϨϯεΛ࡞Δʢࣗ෼ΛकΔͨΊˍܾΊͷ໰ ୊ͷ଎౓Λ্͛ΔͨΊʣ ৭ʑࢼͯ͠Έͨɻ
54. ։ൃϑΣʔζ͝ͱ͓קΊαʔϏε·ͱΊ ʲ'MJOUPʳɹϞοΫΞοϓ࡞Γʹ࠷దɻ։ൃ͸͡Ί͔Βத൫· Ͱ׆༂ɻػೳఏҊ΍ભҠ֬ೝ͸ͻͨ͢Β͜ΕͰݕূ͢Δ
    ʲJOWJTJPOʳػೳ͕Ұ௨Γ࣮૷͞Εͯɺࡉ͔͍σβΠϯͷमਖ਼ ՕॴΛࢦఆ͢Δͱ͖ʹศརɻ։ൃͷޙ൒Ͱ׆༂ɻ֤ࠃͷσβ ΠφʔɺϓϩδΣΫτϚωʔδϟʔɺσΟϨΫλʔ͕ݟΕΔͷ Ͱศར
    ʲ;&1-*/ʳ
    Ϛ΢εΛࡌͤΔ͚ͩͰࢦఆͷϚʔδϯɺϑΥϯτ αΠζɺ৭ɺελΠϧ͕ղΔɻ։ൃ͕தظϑΣʔζʢελΠϧ ΍ςΠετ͕ݻఆ͞Ε͖ͯͨ࣌ʣʹೖͬͨΒ࢖͏ͱศརɻϓ ϩδΣΫτελʔτ࣌ʹ͸߹Θͳ͍
    
55. ॳظϑΣʔζͯॿ͔ͬͨTLFUDIϓϥάΠϯ TLFUDINBKPS ͦͷଞɺؾʹͳΔ͓͢͢ΊϓϥάΠϯ·ͱΊ͸ ͪ͜Β
56. ϑΥϯτ͸(PPHMF
    .BUFSJBM
    %FTJHOʹهࡌ͞Εͯ ͍Δ5ZQPHSBQIZϧʔϧʹ߹ΘͤͯσβΠϯ
    ແҙຯͳʢσβΠϯతʹ͸ඒ͍͕͠ॏཁੑ͕௿͍ʣ ϑΥϯταΠζͷࢦఆ͕ݮͬͨ
    'MJOUPͰಈ͘ঢ়ଶͷϞοΫΛ͙͢ʹݟͤΕΔΑ͏ʹ ͢Δ
    ˞͜ͷ࣌ʹɺखॻ͖ϥϑ͙Β͍ͷঢ়ଶͰ࡞Δ͜ͱ ߴ଎Խग़དྷΔσβΠϯͷίπ
57. ڭ܇ githubศརɻ
 σβΠϯϦϑΝϨϯεΛ༻ҙͭͭ͠ɺ ৗʹ֤OSͷinterfaceGuidelineΛΈͯ ͓͘
58. ڭ܇ githubศརɻ
 σβΠϯϦϑΝϨϯεΛ༻ҙͭͭ͠ɺ ৗʹ֤OSͷinterfaceGuidelineΛΈͯ ͓͘ ಥવศརͳ΋ͷ͕ग़དྷͯͨΓ͢Δ
 ࡉ͔͘શͯಉظ͠Α͏ͱࢥΘͳ͍ɻ
59. No.3 ભҠઌɺ
    ໭Γઌ໰୊
60. 
    όά͕ͳ͍ඒ͠͞
    ը໘ભҠͱঢ়ଶભҠ͸දཪҰମ
    ಛʹάϩʔόϧλϒܕͷ6*ͩͱɺ໭Γઌ΍ભҠ ઌ͕ෳࡶʹͳΔͷͰɺࣗ෼͕೺ѲͰ͖ΔΑ͏ʹ಄ ʹೖΕ͓͔ͯͳ͚Ε͹ͳΒͳ͍
    "OESPJE͸όοΫϘλϯ͕͋ΔͷͰɺͦͷ෼ઃ ܭ͸J04ʹൺ΂ָͯͰ͢ ભҠઌɺ໭ΓઌΛ͖ͪΜͱܾΊͳ͍ͱΫϥογϡ͠΍͘͢ͳΔ
61. εϫΠϓͰը໘੾Γସ͍͑ͨ ࣄલʹ͢ ΂ͯͷσʔλΛऔͬͯ͘Δඞཁ͕͋Δ
    ը૾͍ͭऔͬͯ͘ΔʁσʔλͲ͏ͱΔʁ ϖʔδ։͘ͱ͖ʹੌ͍ॏ͍ɾɾɾ ྫ
62. ڭ܇ iOSΞϓϦ͸ɺWEBΑΓӨڹ͠ ͍͋ͬͯΔॴ͕ඇৗʹଟ͍ɻ
63. ڭ܇ iOSΞϓϦ͸ɺWEBΑΓӨڹ͠ ͍͋ͬͯΔॴ͕ඇৗʹଟ͍ɻ ۤखͳͱ͜Ζ͸ΤϯδχΞʹ೚ͤΑ͏
64. No.4 ࡉ͔͍σβ Πϯमਖ਼ͷߍ ਖ਼࡞ۀ
65. ΤϯδχΞͷํʹ͓ئ͍ͯ͠ɺڭ͑ͯ ΋Βͬͨ
    ςΩετͷ৭΍େ͖͞Λม͑ͨΓɺ੍ ໿ʢϚʔδϯɾύσΟϯάʣΛ͚ͭͨ Γ͢Δ
    ӳޠͰJTTVFॻ͘ΑΓૣ͍ ࣗ෼ͰίʔυΛमਖ਼͢ΔΑ͏ʹͨ͠ɻ
66. Ͱ͖ͳ͍͜ͱ͸͠ͳ͍ɻ όάΒͤΔͷ͕Ұ൪໰୊ɻ ࠷ۙ͸ɺΤϯδχΞͷਓ ʹ೚ͤΔ෦෼΋ଟ͍ɻ
67. ڭ܇ ແཧ͠ͳ͍Ͱɺग़དྷΔൣғͰखॿ ͚͢ΔͨΊʹษڧ͢Δ
68. ڭ܇ ແཧ͠ͳ͍Ͱɺग़དྷΔൣғͰखॿ ͚͢ΔͨΊʹษڧ͢Δ ΘΓͱͳΜͱ͔ͳΔ
69. ·ͱΊ
70. ࠔͬͨΒ૬ஊͯ͠ΈΔɻ
    ৗʹ֤04ͷ*OUFSGBDF
    (VJEFMJOFΛΈ͓ͯ͘
    J04ΞϓϦ͸ɺ8&#ΑΓӨڹ͍͋ͬͯ͠Δॴ ͕ඇৗʹଟ͍
    ແཧ͠ͳ͍Ͱɺग़དྷΔൣғͰखॿ͚͢ΔͨΊ ʹษڧ͢Δ ·ͱΊ
71. ίϛϡχέʔγϣϯ
    ௒େࣄ
72. ૣ͍ஈ֊ͰʮͱΓ͋͑ͣ΍ͬͯ Έ·͠ΐ͏ʯʮࣦഊͨ͠ͶʯΛ Ͱ͖ΔงғؾΛ࣋ͪ·͠ΐ͏
73. 5IBOL
    ZPV