Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flat Desginの裏にあるもの

A77456b262557e22986345f6d0555c58?s=47 nakajijapan
October 18, 2014

Flat Desginの裏にあるもの

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

A77456b262557e22986345f6d0555c58?s=128

nakajijapan

October 18, 2014
Tweet

Transcript

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

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

  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