Flat Desginの裏にあるもの

Flat Designの背景で起きたこと、きっかけとなった歴史などキーワード別に話しました。

Transcript

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

   View Slide

2. !OBLBKJKBQBO
   4PGUXBSF&OHJOFFS
   (.01&1"#0JOD
   J04.BD0498FC
   

   View Slide

3. View Slide

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

   View Slide

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

   View Slide

6. ൃදͷલʹ
   

   View Slide

7. Apple ͯ͠·͔͢ʁ
   

   View Slide

8. View Slide

9. Jenkins
   

   View Slide

10. ΋͏Ұͭʂ
    

    View Slide

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

    View Slide

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

    View Slide

13. ࠓ೔͸
    Flat Design
    ͷ࿩Ͱ͢
    

    View Slide

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

    View Slide

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

    View Slide

16. Flat Design
    

    View Slide

17. Flat Design
    

    View Slide

18. • Grid
    • Typography
    • Minimalism
    Flat Design
    

    View Slide

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

    View Slide

20. Skeuomorphism
    

    View Slide

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

    View Slide

22. Skeuomorphism
    

    View Slide

23. Skeuomorphism
    

    View Slide

24. Skeuomorphism vs Flat
    

    View Slide

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

    View Slide

26. Apple
    

    View Slide

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

    View Slide

28. • Deference
    • Clarity
    • Depth
    Designing for iOS
    

    View Slide

29. • Deference
    • ߇͑ΊͰ͋Δ͜ͱ
    • Clarity
    • ໌ྎͰ͋Δ͜ͱ
    • Depth
    • Ԟߦ͖͕͋Δ͜ͱ
    Designing for iOS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. Material Honesty
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. Minimalism
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. ·ͱΊ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. 5IBOLT
    

    View Slide