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

Flat Desginの裏にあるもの

nakajijapan
October 18, 2014

Flat Desginの裏にあるもの

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

nakajijapan

October 18, 2014
Tweet

More Decks by nakajijapan

Other Decks in 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