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

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

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

takatomo okitsu

October 15, 2014
Tweet

More Decks by takatomo okitsu

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. ରԠͰ͖͍ͯͳ͍ΞϓϦ͸iPhone6ͰͲ͏

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

    ֦େ͞Εͯͨͱ͍͏Φν

    View full-size slide

  8. iPhone6Ͱී௨ʹݟΕͯΔ͠ɺ

    ಛʹiPhone6ରԠ͍Βͳ͔͔ͬͨͳʁ

    ͱࢥͬͯ҆৺ͯͨ͠Γ͠·ͤΜ͔ʁ
    ͦΕ͸ؒҧ͍ͳͷͰ͙͢ʹࣗࣾʹ໭ͬͯΤϯδχΞʹ

    ૬ஊ͍ͯͩ͘͠͞ʂ
    !
    ΋ͬͱը໘αΠζΛ༗ޮʹ࢖͑·͢ɻ
    ࣗࣾͷΞϓϦʹؔͯ͠…

    View full-size slide

  9. iPhone6 Plus

    View full-size slide

  10. iPhone6 Plus Α͋͘Δצҧ͍
    • @3xͷը૾͕ඞཁΈ͍ͨͳ࿩͕ྲྀΕͯ͘Δɻ


    ˠiPhone5S(Retina)ͱ͘Β΂ͯղ૾౓1.5ഒʹͳͬͨͷ͔ʙ


    ˠ੡඼εϖοΫݟΔ


    View full-size slide

  11. iPhone6 Plus iPhone5S
    401ppi 326ppi
    શવ1.5ഒ͡Όͳ͍ɻ1.23ഒ͙Β͍͔͠ͳ͍ɻ

    ຊ౰ͳΒ480 ppi͙Β͍ཉ͍͠ɻͲ͏͍͏͜ͱʁ

    View full-size slide

  12. iPhone 6 Plus ࣮͸…
    • ΧλϩάεϖοΫ͸ɺ

    ըૉ਺ 1,920 × 1,080 ϐΫηϧͷ 401ppi

    ͳΜ͚ͩͲɺ಺෦తʹ͸ɺ

    ըૉ਺ 2,208 × 1,242 ϐΫηϧ͋Δ΋ͷͱͯ͠ܭࢉ͠ɺ

    දࣔ͢Δࡍʹॖখ(໿0.87ഒ)ͯ͠ද͍ࣔͯ͠Δɻ
    • PhotoShopͳͲͰUIσβΠϯ͢Δ৔߹ʹ͸ɺ

    2,208 x 1,242ϐΫηϧͷαΠζͰ࡞੒͢Δͷ͕ਖ਼ղɻ
    IUUQXXXQBJOUDPEFBQQDPNOFXTJQIPOFTDSFFOTEFNZTUJpFE

    View full-size slide

  13. ϕΫλʔσʔλ

    View full-size slide

  14. @1x @2x @3x …
    • օ͞Μ͍ͭ΋@1x, @2xͷ2छྨͷը૾༻ҙͯ͠·ͤΜ͔ʁ
    • ͞Βʹ iPhone6PlusରԠͰɺ@3x΋௥Ճ͞Εͯɺ
    ʮͻʔʂʯͬͯͳͬͯ·ͤΜ͔ʁ
    ࠷৽ͷXCode6ΑΓɺϕΫλʔσʔλͱͯ͠PDF ͕

    ࢖͑ΔΑ͏ʹͳΓ·ͨ͠ɻ

    ˞ͨͩ͠ɺར༻ʹ͸͍͔ͭ͘஫ҙ఺͋Γ·͢

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. iPhone5s iPhone6 iPhone6 Plus
    ग़ྗྫ

    View full-size slide

  18. LaunchScreen

    View full-size slide

  19. LaunchScreen (εϓϥογϡը໘)
    • iPhone6 / iPhone6 Plus͕௥Ճ͞Εͨ͜ͱͰɺ

    iPhone4Ҏ্(iOS7Ҏ্)Ͱ΋࠷௿4छྨͷը૾͕ඞཁɻ

    ΞϓϦͷαΠζ૿͑Δ͠ΊΜͲ͍͘͞ɻ

    View full-size slide

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

    View full-size slide

  21. xibϑΝΠϧ࡞੒ྫ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. App Previews

    View full-size slide

  25. App Previews
    • AppStoreʹܝࡌ͞ΕΔΞϓϦ঺հಈը
    • ΞϓϦਃ੥࣌ʹొ࿥Ͱ͖ΔΑ͏ʹͳͬͨ

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

    View full-size slide

  26. ͱ͜ΖͰ…
    • iPhoneͷը໘ΛಈըͰ࿥ը͢Δํ๏ͬͯɺ

    օ͞ΜͲ͏ͯ͠·͢ʁ
    • ࠷ۙͩͱ AirPlay + Refrector ͷ૊Έ߹Θ͙ͤΒ͍͔͠બ
    ୒ࢶͳ͍ʁ

    http://macwin.org/mac/reflector/
    • ͨͩϑϨʔϜϨʔτ௿ͯ͘ΧΫ͍ͭͨΓɻ͍·͍ͪɻ
    • Wi-Fiઃఆ΋ΊΜͲ͔ͬͨ͘͞Γ

    View full-size slide

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


    S*FTBANKͱ͔ফ͞ΕΔ

    όοςϦʔ΋ৗʹ100%
    (sample)

    View full-size slide

  28. Ҏ্
    ͱ͍͏͜ͱͰɺ

    XCode6 iPhone6 iOS8ରԠ

    ͍Ζ͍ΖେมͰ͕͢ૉఢͳ͜ͱ΋

    ૿͑ͯ·͢ͷͰ

    Ҿ͖ଓ͖ؤுΓ·͠ΐ͏͆

    View full-size slide