Flat Desginの裏にあるもの
by
nakajijapan
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
J044XJGUΤϯδχΞษڧձˏϠϑʔ !OBLBKJKBQBO Flat Design ͷཪʹ͋Δͷ
Slide 2
Slide 2 text
!OBLBKJKBQBO 4PGUXBSF&OHJOFFS (.01&1"#0JOD J04.BD0498FC
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
J04"OESPJE ϋϯυϝΠυɺख࡞Γ࡞ͷ௨ൢɾൢചαΠτ NJOOF
Slide 5
Slide 5 text
৺ྶಈըΞϓϦ͏Ұ͝ཡ͍ͨͩ͜͏ IUUQPXLSJOGPNPWJF ৺ྶࣸਅΞϓϦ͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔ IUUQPXLSJOGP J1IPOFήʔϜதౡਗ਼ہ GSVTUSBUJPONF IUUQWBDVVNOBLBKJKBQBOOFU IUUQGSVTUSBUJPONF
Slide 6
Slide 6 text
ൃදͷલʹ
Slide 7
Slide 7 text
Apple ͯ͠·͔͢ʁ
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Jenkins
Slide 10
Slide 10 text
͏Ұͭʂ
Slide 11
Slide 11 text
ՆٳΈͷ՝Ͱ CloudKit ௐͯΈ·ͨ͠
Slide 12
Slide 12 text
https://speakerdeck.com/nakajijapan/introducing-cloudkit
Slide 13
Slide 13 text
ࠓ Flat Design ͷͰ͢
Slide 14
Slide 14 text
͋ͷ͍ͨΒͳ ͭͰ͠ΐʁ
Slide 15
Slide 15 text
ࠓFlat Designͱ Կ͔ͱ͍͏ΑΓ ͦͷഎܠྺ࢙తͳ ͷΛͯ͠ΈΑ͏ͱ ࢥ͍·͢….
Slide 16
Slide 16 text
Flat Design
Slide 17
Slide 17 text
Flat Design
Slide 18
Slide 18 text
• Grid • Typography • Minimalism Flat Design
Slide 19
Slide 19 text
• Skeuomorphism • Apple • Material Honesty • Minimalism Flat Design
Slide 20
Slide 20 text
Skeuomorphism
Slide 21
Slide 21 text
Skeuomorphism ίϯϐϡʔλͷػೳʹରͯ͠ɺݱ࣮ʹ͋Δ࣮Λ ͦͷ··Πϝʔδͤ͞Δදݱํ๏
Slide 22
Slide 22 text
Skeuomorphism
Slide 23
Slide 23 text
Skeuomorphism
Slide 24
Slide 24 text
Skeuomorphism vs Flat
Slide 25
Slide 25 text
• ݱ࣮ੈքͷͷͱػೳͷΪϟοϓ • εϚϑΥͱͯ͠Ұ؟Ϩϑͱͯ͠ͷΧϝϥ • ܗଶ͕ػೳΛදݱ͠ͳ͍ • ਓͷशख़ • ֵ໋ -> ൟӫ Skeuomorphismͷݶք
Slide 26
Slide 26 text
Apple
Slide 27
Slide 27 text
• ϑϥοτσβΠϯͱ͍͍ͬͯͳ͍ • ͋͘·ͰʮίϯςϯπΛॏཁࢹͨ͠ʯσβΠϯ • Designing for iOS Apple
Slide 28
Slide 28 text
• Deference • Clarity • Depth Designing for iOS
Slide 29
Slide 29 text
• Deference • ߇͑ΊͰ͋Δ͜ͱ • Clarity • ໌ྎͰ͋Δ͜ͱ • Depth • Ԟߦ͖͕͋Δ͜ͱ Designing for iOS
Slide 30
Slide 30 text
• UIʹͦͷ༰Λ͔Γ͘͢ද ࣔ͠ɺϢʔβͱΓऔΓ͢Δಇ͖ ͕͋Γ·͕͢ɺͦΕࣗͷํ͕ ཱͭΑ͏Ͱ͋ͬͯͳΓ·ͤΜɻ Designing for iOS Deference
Slide 31
Slide 31 text
• จࣈͲͷେ͖͞ͰಡΈ͘͢ɺ ΞΠίϯత֬໌ྎͰɺ০߇͑ ΊͰదɺ͞ΒʹͦͷػೳΛ໌֬ ʹද͢Α͏Ͱͳ͚ΕͳΓ·ͤΜɻ Designing for iOS Clarity
Slide 32
Slide 32 text
• ࢹ֮తͳॏͳΓຊΒ͍͠ಈ͖ ͕͋Δͱɺָ͔͠͞Γ͢͞ ্͕͠·͢ɻ Designing for iOS Depth
Slide 33
Slide 33 text
Material Honesty
Slide 34
Slide 34 text
Material Honesty ۀૉࡐʹ࣮Ͱ͋Δ͖ͩ
Slide 35
Slide 35 text
• ۀૉࡐʹ࣮Ͱ͋Δ͖ͩ • ੲʮ০ʯ͢Δ͜ͱͰػೳΛײ͡ͳͤ͘͞Δ͜ͱ͕ඒ ಙͩͬͨ • ʮܗଶػೳʹै͏ʯ • ߏͦͷͷͷඒ͕͠͞ධՁ͞Εͯ͘ΔΑ͏ʹͳΔ • ࣭ଞͷͳʹ͔Λ͢ΔΑΓɺͦΕࣗͰ͋Δ͖ͩ Material Honesty
Slide 36
Slide 36 text
Material Honesty φϙϨΦϯͷҜࢠ
Slide 37
Slide 37 text
Material Honesty ޫݯΛσΟεϓϨΠͷதͰදݱͨ͠ํ๏ ຊདྷͷσΟεϓϨΠͷදݱํ๏Ͱͳ͍ ྫɿޫݯ
Slide 38
Slide 38 text
Minimalism
Slide 39
Slide 39 text
• ඞཁ࠷ݶͷཁૉ͚ͩ͠ɺͯ͢Λഉআ͢Δ • ϢʔβͷҙࣝΛ࠷ॏཁͳ෦ʹϑΥʔΧεͤ͞Δ Minimalism
Slide 40
Slide 40 text
Minimalism International Klein Blue 191 (1962, Yves Klein) http://en.wikipedia.org/wiki/Yves_Klein
Slide 41
Slide 41 text
Minimalism എܠͰͳͯ͘ɺҰͭͷʮֆʯΒ͍͠Ͱ͢ɻɻɻ International Klein Blue 191 (1962, Yves Klein) http://en.wikipedia.org/wiki/Yves_Klein
Slide 42
Slide 42 text
·ͱΊ
Slide 43
Slide 43 text
·ͱΊ • εΩϡʔϞʔϑΟζϜͷݶք • ϑϥοτσβΠϯҰͭͷΞϓϩʔν • ਓʑͷਐԽशख़ʹΑͬͯσβΠϯมΘ͖ͬͯͨ • ίϯςϯπΛॏࢹͨ͠σβΠϯʹͳΓͭͭ͋Δʁ • σβΠϯղܾ͢Δͷͬͯߟ͑ΔͱΘ͔Γ͍͢
Slide 44
Slide 44 text
ࢀߟจݙ ϑϥοτσβΠϯͷجຊϧʔϧ
Slide 45
Slide 45 text
ࢀߟจݙ • iOS Human Interface Guidelines • https://developer.apple.com/jp/devcenter/ios/library/ documentation/userexperience/conceptual/mobilehig/ DesigningForiOS7/DesigningForiOS7.html
Slide 46
Slide 46 text
5IBOLT