Flat Designの背景で起きたこと、きっかけとなった歴史などキーワード別に話しました。
J044XJGUΤϯδχΞษڧձˏϠϑʔ!OBLBKJKBQBOFlat Designͷཪʹ͋Δͷ
View Slide
!OBLBKJKBQBO4PGUXBSF&OHJOFFS(.01&1"#0JODJ04.BD0498FC
J04"OESPJEϋϯυϝΠυɺख࡞Γ࡞ͷ௨ൢɾൢചαΠτNJOOF
৺ྶಈըΞϓϦ͏Ұ͝ཡ͍ͨͩ͜͏IUUQPXLSJOGPNPWJF৺ྶࣸਅΞϓϦ͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔IUUQPXLSJOGPJ1IPOFήʔϜதౡਗ਼ہGSVTUSBUJPONFIUUQWBDVVNOBLBKJKBQBOOFUIUUQGSVTUSBUJPONF
ൃදͷલʹ
Apple ͯ͠·͔͢ʁ
Jenkins
͏Ұͭʂ
ՆٳΈͷ՝ͰCloudKitௐͯΈ·ͨ͠
https://speakerdeck.com/nakajijapan/introducing-cloudkit
ࠓFlat DesignͷͰ͢
͋ͷ͍ͨΒͳͭͰ͠ΐʁ
ࠓFlat DesignͱԿ͔ͱ͍͏ΑΓͦͷഎܠྺ࢙తͳͷΛͯ͠ΈΑ͏ͱࢥ͍·͢….
Flat Design
• Grid• Typography• MinimalismFlat Design
• Skeuomorphism• Apple• Material Honesty• MinimalismFlat Design
Skeuomorphism
Skeuomorphismίϯϐϡʔλͷػೳʹରͯ͠ɺݱ࣮ʹ͋Δ࣮Λͦͷ··Πϝʔδͤ͞Δදݱํ๏
Skeuomorphism vs Flat
• ݱ࣮ੈքͷͷͱػೳͷΪϟοϓ• εϚϑΥͱͯ͠Ұ؟Ϩϑͱͯ͠ͷΧϝϥ• ܗଶ͕ػೳΛදݱ͠ͳ͍• ਓͷशख़• ֵ໋ -> ൟӫSkeuomorphismͷݶք
Apple
• ϑϥοτσβΠϯͱ͍͍ͬͯͳ͍• ͋͘·ͰʮίϯςϯπΛॏཁࢹͨ͠ʯσβΠϯ• Designing for iOSApple
• Deference• Clarity• DepthDesigning for iOS
• Deference• ߇͑ΊͰ͋Δ͜ͱ• Clarity• ໌ྎͰ͋Δ͜ͱ• Depth• Ԟߦ͖͕͋Δ͜ͱDesigning for iOS
• UIʹͦͷ༰Λ͔Γ͘͢දࣔ͠ɺϢʔβͱΓऔΓ͢Δಇ͖͕͋Γ·͕͢ɺͦΕࣗͷํཱ͕ͭΑ͏Ͱ͋ͬͯͳΓ·ͤΜɻDesigning for iOSDeference
• จࣈͲͷେ͖͞ͰಡΈ͘͢ɺΞΠίϯత֬໌ྎͰɺ০߇͑ΊͰదɺ͞ΒʹͦͷػೳΛ໌֬ʹද͢Α͏Ͱͳ͚ΕͳΓ·ͤΜɻDesigning for iOSClarity
• ࢹ֮తͳॏͳΓຊΒ͍͠ಈ͖͕͋Δͱɺָ͔͠͞Γ্͕͢͞͠·͢ɻDesigning for iOSDepth
Material Honesty
Material Honestyۀૉࡐʹ࣮Ͱ͋Δ͖ͩ
• ۀૉࡐʹ࣮Ͱ͋Δ͖ͩ• ੲʮ০ʯ͢Δ͜ͱͰػೳΛײ͡ͳͤ͘͞Δ͜ͱ͕ඒಙͩͬͨ• ʮܗଶػೳʹै͏ʯ• ߏͦͷͷͷඒ͕͠͞ධՁ͞Εͯ͘ΔΑ͏ʹͳΔ• ࣭ଞͷͳʹ͔Λ͢ΔΑΓɺͦΕࣗͰ͋Δ͖ͩMaterial Honesty
Material HonestyφϙϨΦϯͷҜࢠ
Material HonestyޫݯΛσΟεϓϨΠͷதͰදݱͨ͠ํ๏ຊདྷͷσΟεϓϨΠͷදݱํ๏Ͱͳ͍ྫɿޫݯ
Minimalism
• ඞཁ࠷ݶͷཁૉ͚ͩ͠ɺͯ͢Λഉআ͢Δ• ϢʔβͷҙࣝΛ࠷ॏཁͳ෦ʹϑΥʔΧεͤ͞ΔMinimalism
MinimalismInternational Klein Blue 191 (1962, Yves Klein)http://en.wikipedia.org/wiki/Yves_Klein
MinimalismഎܠͰͳͯ͘ɺҰͭͷʮֆʯΒ͍͠Ͱ͢ɻɻɻInternational Klein Blue 191 (1962, Yves Klein)http://en.wikipedia.org/wiki/Yves_Klein
·ͱΊ
·ͱΊ• εΩϡʔϞʔϑΟζϜͷݶք• ϑϥοτσβΠϯҰͭͷΞϓϩʔν• ਓʑͷਐԽशख़ʹΑͬͯσβΠϯมΘ͖ͬͯͨ• ίϯςϯπΛॏࢹͨ͠σβΠϯʹͳΓͭͭ͋Δʁ• σβΠϯղܾ͢Δͷͬͯߟ͑ΔͱΘ͔Γ͍͢
ࢀߟจݙϑϥοτσβΠϯͷجຊϧʔϧ
ࢀߟจݙ• iOS Human Interface Guidelines• https://developer.apple.com/jp/devcenter/ios/library/documentation/userexperience/conceptual/mobilehig/DesigningForiOS7/DesigningForiOS7.html
5IBOLT