Flat Desginの裏にあるもの

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

Transcript

1. J04
   4XJGU
   ΤϯδχΞษڧձˏϠϑʔ
   !OBLBKJKBQBO Flat Design ͷཪʹ͋Δ΋ͷ
2. !OBLBKJKBQBO 4PGUXBSF
   &OHJOFFS (.0
   1&1"#0
   JOD J04
   
   .BD049
   
   8FC
4. 
   J04
   
   "OESPJE ϋϯυϝΠυɺख࡞Γ࡞඼ͷ௨ൢɾൢചαΠτ
   NJOOF
5. ৺ྶಈըΞϓϦ
   ΋͏Ұ౓͝ཡ͍ͨͩ͜͏ IUUQPXLSJOGPNPWJF ৺ྶࣸਅΞϓϦ
   ͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔ IUUQPXLSJOGP J1IPOFήʔϜ
   தౡਗ਼૟ہ GSVTUSBUJPONF IUUQWBDVVNOBLBKJKBQBOOFU IUUQGSVTUSBUJPONF
6. ൃදͷલʹ
7. Apple ͯ͠·͔͢ʁ
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