Flat Desginの裏にあるもの

Transcript

1. J04
   4XJGU
   ΤϯδχΞษڧձˏϠϑʔ
   !OBLBKJKBQBO Flat Design ͷཪʹ͋Δ΋ͷ

2. !OBLBKJKBQBO 4PGUXBSF
   &OHJOFFS (.0
   1&1"#0
   JOD J04
   
   .BD049
   
   8FC

3. None

4. 
   J04
   
   "OESPJE ϋϯυϝΠυɺख࡞Γ࡞඼ͷ௨ൢɾൢചαΠτ
   NJOOF

5. ৺ྶಈըΞϓϦ
   ΋͏Ұ౓͝ཡ͍ͨͩ͜͏ IUUQPXLSJOGPNPWJF ৺ྶࣸਅΞϓϦ
   ͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔ IUUQPXLSJOGP J1IPOFήʔϜ
   தౡਗ਼૟ہ GSVTUSBUJPONF IUUQWBDVVNOBLBKJKBQBOOFU IUUQGSVTUSBUJPONF

6. ൃදͷલʹ

7. Apple ͯ͠·͔͢ʁ

8. None

9. Jenkins

10. ΋͏Ұͭʂ

11. ՆٳΈͷ՝୊Ͱ CloudKit ௐ΂ͯΈ·ͨ͠

12. https://speakerdeck.com/nakajijapan/introducing-cloudkit

13. ࠓ೔͸ Flat Design ͷ࿩Ͱ͢

14. ͋ͷ͍ͨΒͳ ΍ͭͰ͠ΐʁ

15. ࠓ೔͸Flat Designͱ ͸Կ͔ͱ͍͏ΑΓ΋ ͦͷഎܠ΍ྺ࢙తͳ ΋ͷΛ࿩ͯ͠ΈΑ͏ͱ ࢥ͍·͢….

16. Flat Design

17. Flat Design

18. • Grid • Typography • Minimalism Flat Design

19. • Skeuomorphism • Apple • Material Honesty • Minimalism Flat

    Design

20. Skeuomorphism

21. Skeuomorphism ίϯϐϡʔλͷػೳʹରͯ͠ɺݱ࣮ʹ͋Δ࣮෺Λ ͦͷ··Πϝʔδͤ͞Δදݱํ๏

22. Skeuomorphism

23. Skeuomorphism

24. Skeuomorphism vs Flat

25. • ݱ࣮ੈքͷ΋ͷͱػೳͷΪϟοϓ • εϚϑΥͱͯ͠Ұ؟Ϩϑͱͯ͠ͷΧϝϥ • ܗଶ͕ػೳΛදݱ͠ͳ͍ • ਓͷशख़౓ • ֵ໋

    -> ൟӫ Skeuomorphismͷݶք

26. Apple

27. • ϑϥοτσβΠϯͱ͸͍͍ͬͯͳ͍ • ͋͘·ͰʮίϯςϯπΛॏཁࢹͨ͠ʯσβΠϯ • Designing for iOS Apple

28. • Deference • Clarity • Depth Designing for iOS

29. • Deference • ߇͑ΊͰ͋Δ͜ͱ • Clarity • ໌ྎͰ͋Δ͜ͱ • Depth

    • Ԟߦ͖͕͋Δ͜ͱ Designing for iOS

30. • UIʹ͸ͦͷ಺༰Λ෼͔Γ΍͘͢ද ࣔ͠ɺϢʔβͱ΍ΓऔΓ͢Δಇ͖ ͕͋Γ·͕͢ɺͦΕࣗ਎ͷํ͕໨ ཱͭΑ͏Ͱ͋ͬͯ͸ͳΓ·ͤΜɻ Designing for iOS Deference

31. • จࣈ͸Ͳͷେ͖͞Ͱ΋ಡΈ΍͘͢ɺ ΞΠίϯ͸త֬໌ྎͰɺ૷০͸߇͑ ΊͰద౓ɺ͞ΒʹͦͷػೳΛ໌֬ ʹද͢Α͏Ͱͳ͚Ε͹ͳΓ·ͤΜɻ Designing for iOS Clarity

32. • ࢹ֮తͳॏͳΓ΍ຊ෺Β͍͠ಈ͖ ͕͋Δͱɺָ͠͞΍෼͔Γ΍͢͞ ͕޲্͠·͢ɻ Designing for iOS Depth

33. Material Honesty

34. Material Honesty ޻ۀ੡඼͸ૉࡐʹ஧࣮Ͱ͋Δ΂͖ͩ

35. • ޻ۀ੡඼͸ૉࡐʹ஧࣮Ͱ͋Δ΂͖ͩ • ੲ͸ʮ૷০ʯ͢Δ͜ͱͰػೳΛײ͡ͳͤ͘͞Δ͜ͱ͕ඒ ಙͩͬͨ • ʮܗଶ͸ػೳʹै͏ʯ • ߏ଄ͦͷ΋ͷͷඒ͕͠͞ධՁ͞Εͯ͘ΔΑ͏ʹͳΔ •

    ෺࣭͸ଞͷͳʹ͔Λ໛͢ΔΑΓɺͦΕࣗ਎Ͱ͋Δ΂͖ͩ Material Honesty

36. Material Honesty φϙϨΦϯͷҜࢠ

37. Material Honesty ޫݯΛσΟεϓϨΠͷதͰදݱͨ͠ํ๏͸ ຊདྷͷσΟεϓϨΠͷදݱํ๏Ͱ͸ͳ͍ ྫɿޫݯ

38. Minimalism

39. • ඞཁ࠷௿ݶͷཁૉ͚ͩ࢒͠ɺ͢΂ͯΛഉআ͢Δ • ϢʔβͷҙࣝΛ࠷΋ॏཁͳ෦෼ʹϑΥʔΧεͤ͞Δ Minimalism

40. Minimalism International Klein Blue 191 (1962, Yves Klein) http://en.wikipedia.org/wiki/Yves_Klein

41. Minimalism എܠͰ͸ͳͯ͘ɺҰͭͷʮֆʯΒ͍͠Ͱ͢ɻɻɻ International Klein Blue 191 (1962, Yves Klein) http://en.wikipedia.org/wiki/Yves_Klein

42. ·ͱΊ

43. ·ͱΊ • εΩϡʔϞʔϑΟζϜͷݶք • ϑϥοτσβΠϯ͸ҰͭͷΞϓϩʔν • ਓʑͷਐԽ΍शख़౓ʹΑͬͯσβΠϯ͸มΘ͖ͬͯͨ • ίϯςϯπΛॏࢹͨ͠σβΠϯʹͳΓͭͭ͋Δʁ •

    σβΠϯ͸໰୊ղܾ͢Δ΋ͷͬͯߟ͑ΔͱΘ͔Γ΍͍͢

44. ࢀߟจݙ ϑϥοτσβΠϯͷجຊϧʔϧ

45. ࢀߟจݙ • iOS Human Interface Guidelines • https://developer.apple.com/jp/devcenter/ios/library/ documentation/userexperience/conceptual/mobilehig/ DesigningForiOS7/DesigningForiOS7.html

46. 5IBOLT