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