XCode6 / iPhone6 / iOS8 デザイナーが知ってると便利なTips

by takatomo okitsu

Slide 1

Slide 1 text

XCode6 / iPhone6 / iOS8 σβΠφʔ͕஌ͬͯΔͱ ศརͳTips ԭ௡وஐ@DeNA 2014/10/15 UI Crunch http://ui-crunch.com/

Slide 2

Slide 2 text

@okitsu ԭ௡وஐ ʢΦΩπλΧτϞʣ DeNAͰΤϯδχΞ΍ͬͯ·͢ɻ iOS/AndroidΞϓϦͷ։ൃ͕ଟ͍Ͱ͢ɻ

Slide 3

Slide 3 text

• Mobage • Comm: Free calls, texts and fun! • Baseball Stadium LIVE • Peko: Play to be Paid! • SHOWROOM • Yokohama DeNA Baystars

Slide 4

Slide 4 text

͍͖ͳΓͰ͕͢ɺ iPhone6 / 6 Plus ରԠ ਐΜͰ·͔͢ʁ

Slide 5

Slide 5 text

iPhone6ʹରԠͰ͖ͯΔ͔Ͳ͏͔ݟ෼͚Δํ๏ iPhone6 iPhone5s iPhoneΛԣʹฒ΂ͯφϏήʔγϣϯόʔͷߴ͞ΛݟΔ ಉ͡ɹɿiPhone6ରԠࡁ ҟͳΔɿiPhone6ະରԠ

Slide 6

Slide 6 text

iPhone6ʹରԠͰ͖ͯΔ͔Ͳ͏͔ݟ෼͚Δํ๏ iPhone6 iPhone5s ߴ͕͞ҟͳΔύλʔϯ Twitter͸ରԠͯ͠Δ͚ͲFacebook͸·ͩͳͷͶɺͱ͍͏ײ͡Ͱ೺ѲͰ͖Δɻ

Slide 7

Slide 7 text

ରԠͰ͖͍ͯͳ͍ΞϓϦ͸iPhone6ͰͲ͏  දࣔ͞Ε͍ͯΔͷ͔ʁ • Scaling modeͱ͍͏΋ͷ͕ൃಈ͠ɺΞεϖΫτൺΛҡ࣋ͨ͠ ··֦େදࣔ͞Ε͍ͯΔɻ • ͬ͘͡ΓݟΔͱɺεςʔλεόʔͷ࣌ࠁͷจࣈͱ͔ଟগ΅΍ ͚͍ͯΔͷ͕Θ͔Δ͸ͣɻ ී௨ʹݟ͑ͯͦ͏͚ͩͲɺ࣮͸ͬͦ͜Γ  ֦େ͞Εͯͨͱ͍͏Φν

Slide 8

Slide 8 text

iPhone6Ͱී௨ʹݟΕͯΔ͠ɺ  ಛʹiPhone6ରԠ͍Βͳ͔͔ͬͨͳʁ  ͱࢥͬͯ҆৺ͯͨ͠Γ͠·ͤΜ͔ʁ ͦΕ͸ؒҧ͍ͳͷͰ͙͢ʹࣗࣾʹ໭ͬͯΤϯδχΞʹ  ૬ஊ͍ͯͩ͘͠͞ʂ ! ΋ͬͱը໘αΠζΛ༗ޮʹ࢖͑·͢ɻ ࣗࣾͷΞϓϦʹؔͯ͠…

Slide 9

Slide 9 text

iPhone6 Plus

Slide 10

Slide 10 text

iPhone6 Plus Α͋͘Δצҧ͍ • @3xͷը૾͕ඞཁΈ͍ͨͳ࿩͕ྲྀΕͯ͘Δɻ    ˠiPhone5S(Retina)ͱ͘Β΂ͯղ૾౓1.5ഒʹͳͬͨͷ͔ʙ    ˠ੡඼εϖοΫݟΔ 

Slide 11

Slide 11 text

iPhone6 Plus iPhone5S 401ppi 326ppi શવ1.5ഒ͡Όͳ͍ɻ1.23ഒ͙Β͍͔͠ͳ͍ɻ  ຊ౰ͳΒ480 ppi͙Β͍ཉ͍͠ɻͲ͏͍͏͜ͱʁ

Slide 12

Slide 12 text

iPhone 6 Plus ࣮͸… • ΧλϩάεϖοΫ͸ɺ  ըૉ਺ 1,920 × 1,080 ϐΫηϧͷ 401ppi  ͳΜ͚ͩͲɺ಺෦తʹ͸ɺ  ըૉ਺ 2,208 × 1,242 ϐΫηϧ͋Δ΋ͷͱͯ͠ܭࢉ͠ɺ  දࣔ͢Δࡍʹॖখ(໿0.87ഒ)ͯ͠ද͍ࣔͯ͠Δɻ • PhotoShopͳͲͰUIσβΠϯ͢Δ৔߹ʹ͸ɺ  2,208 x 1,242ϐΫηϧͷαΠζͰ࡞੒͢Δͷ͕ਖ਼ղɻ IUUQXXXQBJOUDPEFBQQDPNOFXTJQIPOFTDSFFOTEFNZTUJpFE

Slide 13

Slide 13 text

ϕΫλʔσʔλ

Slide 14

Slide 14 text

@1x @2x @3x … • օ͞Μ͍ͭ΋@1x, @2xͷ2छྨͷը૾༻ҙͯ͠·ͤΜ͔ʁ • ͞Βʹ iPhone6PlusରԠͰɺ@3x΋௥Ճ͞Εͯɺ ʮͻʔʂʯͬͯͳͬͯ·ͤΜ͔ʁ ࠷৽ͷXCode6ΑΓɺϕΫλʔσʔλͱͯ͠PDF ͕  ࢖͑ΔΑ͏ʹͳΓ·ͨ͠ɻ  ˞ͨͩ͠ɺར༻ʹ͸͍͔ͭ͘஫ҙ఺͋Γ·͢

Slide 15

Slide 15 text

iOSͰϕΫλʔσʔλΛར༻͢Δࡍͷ஫ҙ఺ • લఏͱͯ͠ɺͳΜͰ΋͔ΜͰ΋ॊೈʹ֦େॖখ͞ΕΔΘ͚Ͱ͸ͳ͍ɻ • ۩ମతʹ͸ɺΞϓϦʹpdfΛؚΊͯϏϧυ͢Δͱɺ಺෦ͰϥελϥΠ ζʢϏοτϚοϓԽʣ͞ΕΔɻ݁Ռɺ@1x, @2x, @3xͷϏοτϚοϓ ϑΝΠϧ͕࡞ΒΕΔɻ • දࣔͷࡍʹ͸ɺ࡞ΒΕͨϏοτϚοϓ͕ར༻͞ΕΔɻ • ݩͱͳΔpdfϑΝΠϧ͸ɺ@1xͷαΠζͰ࡞੒͢Δඞཁ͕͋Δɻʢͦ ͏͠ͳ͍ͱδϟΪΔʣ • iOSͷόʔδϣϯͷ੍ݶ͸ͳ͠ʢiOS7, iOS6Ͱ΋ར༻Մʣ

Slide 16

Slide 16 text

ϕΫλʔσʔλ(pdf)ͷࢦఆํ๏ ※pdf͸Asset CatalogͰ͔͠ࢦఆͰ͖·ͤΜɻ Y

Slide 17

Slide 17 text

iPhone5s iPhone6 iPhone6 Plus ग़ྗྫ

Slide 18

Slide 18 text

LaunchScreen

Slide 19

Slide 19 text

LaunchScreen (εϓϥογϡը໘) • iPhone6 / iPhone6 Plus͕௥Ճ͞Εͨ͜ͱͰɺ  iPhone4Ҏ্(iOS7Ҏ্)Ͱ΋࠷௿4छྨͷը૾͕ඞཁɻ  ΞϓϦͷαΠζ૿͑Δ͠ΊΜͲ͍͘͞ɻ

Slide 20

Slide 20 text

LaunchScreenΛ1ϑΝΠϧʹʂ • XCode6͔ΒɺLaunchScreenΛ1ϑΝΠϧʹ·ͱΊΒ ΕΔػೳ͕௥Ճɻ • ࠓ·Ͱը૾͔͠ࢦఆͰ͖ͳ͔ͬͨͷ͕ɺxib/ storyboardͱ͍͏ϑΝΠϧ1ͭͰରԠͰ͖ΔΑ͏ʹ ͳͬͨɻ

Slide 21

Slide 21 text

xibϑΝΠϧ࡞੒ྫ

Slide 22

Slide 22 text

1ϑΝΠϧͰશը໘αΠζʹରԠ ※ͨͩ͠iOS8Ҏ্ɻiOS7ҎԼ͸͜Ε·ͰͲ͓Γը૾Λ༻ҙ͢Δඞཁ͋Γ

Slide 23

Slide 23 text

ʲศརαʔϏε঺հʳiOS.zip • iOSΞϓϦਃ੥ʹඞཁͳը૾ηοτΛ 1clickͰ·ͱΊͯμ΢ϯϩʔυͰ͖Δ ศརαʔϏεɻ • iPhone/iPad྆ํʹରԠɻ΋ͪΖΜ iOS8΋ରԠ • ΋͸΍༻ҙ͢Δը૾ͷछྨ͕ଟ͗ͯ͢ هԱ͢Δͷ͸ෆՄೳͳͨΊɺ͜͏͍͏ ͷੵۃతʹར༻ͨ͠΄͏͕ྑ͍ɻ • ։ൃऀͷ @hirama2 ͋Γ͕ͱ͏ʂ http://ioszip.mashroom.in/

Slide 24

Slide 24 text

App Previews

Slide 25

Slide 25 text

App Previews • AppStoreʹܝࡌ͞ΕΔΞϓϦ঺հಈը • ΞϓϦਃ੥࣌ʹొ࿥Ͱ͖ΔΑ͏ʹͳͬͨ  ʢͨͩ͠OSX Yosemite͕ඞਢʣ • 15ඵʙ30ඵҎ಺ɺ500MBҎ಺ɺ30fpsҎ಺ • H.264ʢਪ঑ʣ͔Apple ProRes videoίʔσοΫ • ղ૾౓ɾըૉ਺͸σόΠε͝ͱʹࢦఆ͋Γ • αϜω͸5ඵ࣌఺ͷ΋ͷ͕ࣗಈతʹબ୒ʢมߋ΋Մʣ • ૢ࡞͢Δਓ΍खͳͲΛ͏ͭͯ͠͸μϝɺͳͲ੍ݶ͋Γ IUUQTEFWFMPQFSBQQMFDPNMJCSBSZJPTEPDVNFOUBUJPO-BOHVBHFT6UJMJUJFT$PODFQUVBMJ5VOFT$POOFDU@(VJEF"QQFOEJDFT 1SPQFSUJFTIUNM

Slide 26

Slide 26 text

ͱ͜ΖͰ… • iPhoneͷը໘ΛಈըͰ࿥ը͢Δํ๏ͬͯɺ  օ͞ΜͲ͏ͯ͠·͢ʁ • ࠷ۙͩͱ AirPlay + Refrector ͷ૊Έ߹Θ͙ͤΒ͍͔͠બ ୒ࢶͳ͍ʁ  http://macwin.org/mac/reﬂector/ • ͨͩϑϨʔϜϨʔτ௿ͯ͘ΧΫ͍ͭͨΓɻ͍·͍ͪɻ • Wi-Fiઃఆ΋ΊΜͲ͔ͬͨ͘͞Γ

Slide 27

Slide 27 text

iPhoneͷը໘ΛಈըͰ࿥ը͢Δํ๏ ܾఆ൛ • 10຤ϦϦʔε༧ఆͷ࣍ظOSX Yosemite(10.10) + QuickTime Ͱɺ೦ئͷެࣜαϙʔτʂʂ • iPhoneΛUSBͰͭͳ͙͚ͩͰQuickTimeͰը໘ͷಈըΛ࿥ը Ͱ͖ΔΑ͏ʹͳΓ·͢ɻʢiOS8Ҏ߱ʣ • ༗Γ೉͍͜ͱʹɺ࿥ը࣌ʹɺεςʔλεόʔͷ࣌ؒ΍ΩϟϦΞ ৘ใɾόοςϦʔɾి೾ͷڧ͞ͳͲͷදࣔΛΑ͠ͳʹݻఆɻ    S*FTBANKͱ͔ফ͞ΕΔ  όοςϦʔ΋ৗʹ100% (sample)

Slide 28

Slide 28 text

Ҏ্ ͱ͍͏͜ͱͰɺ  XCode6 iPhone6 iOS8ରԠ  ͍Ζ͍ΖେมͰ͕͢ૉఢͳ͜ͱ΋  ૿͑ͯ·͢ͷͰ  Ҿ͖ଓ͖ؤுΓ·͠ΐ͏͆