J04ͷཧ૝తͳ6*Λߟ͑Δ GVXBNBLJ !Զίϯ೔໨

2 ࣗ ݾ ঺ հ @fuwamaki - ָఱגࣜձࣾ ॴଐ - iOSΞϓϦΤϯδχΞ - iOSΞϓϦ։ൃܦݧ1೥൒͘Β͍ - iOSDC2018 ౰೔ελοϑ

No content

ຊ ೔ ͷ ൃ ද ಺ ༰ ʹ ͭ ͍ ͯ 4 AppleͷσβΠφʔ͕ߟ͑Δ ϕετϓϥΫςΟεͳUIͷ঺հ͕ϝΠϯ ཧ ૝ త ͳ 6 * Λ ͜ ͏ ߟ ͑ͯ Έ · ͠ ͨ ɻ ɻ ɻ ͱ ͍ ͏ ࿩ ͱ ͍ ͏ Α Γ ͸ ɺ

Ξ δ Σ ϯ μ 5 1. ҰൠతʹݴΘΕ͍ͯΔɺྑ͍UI 2. Apple͕ߟ͑Δɺྑ͍UIʢHIGʣ 3. AppleͷσβΠφʔ͕ߟ͑ΔɺϕετϓϥΫςΟεͳUIͷྫ4ͭ 4. ·ͱΊ

ҰൠతʹݴΘΕ͍ͯΔɺྑ͍6*

ྑ ͍ 6 * ͱ ͸ Ұ ൠ త ʹ Ͳͷ Α ͏ ʹ ݴ Θ Εͯ ͍ Δ ͔ 7 https://honto.jp/netstore/pd-book_27087993.html

ྑ ͍ 6 * ͱ ͸ Ұ ൠ త ʹ Ͳͷ Α ͏ ʹ ݴ Θ Εͯ ͍ Δ ͔ 8 ݟ΍͢͞ ෼͔Γ΍͢͞ ૢ࡞͠΍͢͞ ݟ Δ ߟ ͑ Δ ߦ ಈ ͢Δ ਓؒͷߦಈ 3ͭͷཁૉ͢΂ͯΛ݉Ͷඋ͑ͨ΋ͷ͕ɺ࢖͍΍͍͢αʔϏε

"QQMF͕ߟ͑Δɺྑ͍6*ʢ)*(ʣ

) * ( ʢ ) V N B O * O U F S G B D F ( V J E F M J O F T ʣ 10 https://developer.apple.com/design/human-interface-guidelines/

% F T J H O 1S J O D J Q M F T 11 A e s t h e t i c I n t e g r i t y D i re c t M a n i p u l a t i o n M e t a p h o r s C o n s i s t e n c y F e e d b a c k U s e r C o n t ro l Aesthetic integrity represents how well an app’s appearance and behavior integrate with its function. For example, an app that helps people perform a serious task can keep them focused by using subtle, unobtrusive graphics, standard controls, and predictable behaviors. On the other hand, an immersive app, such as a game, can deliver a captivating appearance that promises fun and excitement, while encouraging discovery. The direct manipulation of onscreen content engages people and facilitates understanding. Users experience direct manipulation when they rotate the device or use gestures to affect onscreen content. Through direct manipulation, they can see the immediate, visible results of their actions. A consistent app implements familiar standards and paradigms by using system- provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect. Feedback acknowledges actions and shows results to keep people informed. The built- in iOS apps provide perceptible feedback in response to every user action. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions. People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences—whether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines. Throughout iOS, people—not apps—are in control. An app can suggest a course of action or warn about dangerous consequences, but it’s usually a mistake for the app to take over the decision-making. The best apps find the correct balance between enabling users and avoiding unwanted outcomes. An app can make people feel like they’re in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when they’re already underway. https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

12 UI Design Do’s and Don’ts iOS raises the bar for excellence in user interface design and offers great opportunities for you to deliver engaging and unique user experiences. Consider these common design concepts before you start coding to enhance the usability and appeal of your apps. To see more recommendations for great interface design, read the iOS Human Interface Guidelines. " Q Q M F ͷ σβΠ ϯ ن ଇ ʹ ଇ ͠ ͨ ɺ ෼ ͔ Γ ΍ ͢ ͍ σβΠ ϯ ྫ ू https://developer.apple.com/design/tips/

13 C o n t r a s t D i s t o r t i o n ݟ΍͍͢ 6 * % F T J H O % P` T B O E % P O` U T ྫ https://developer.apple.com/design/tips/

14 F o r m a t t i n g C o n t e n t O rg a n i z a t i o n ෼͔Γ΍͍͢ 6 * % F T J H O % P` T B O E % P O` U T ྫ https://developer.apple.com/design/tips/

15 H i t Ta rg e t s To u c h C o n t ro l s ૢ࡞͠΍͍͢ 6 * % F T J H O % P` T B O E % P O` U T ྫ https://developer.apple.com/design/tips/

) * ( ʢ ) V N B O * O U F S G B D F ( V J E F M J O F T ʣ 16 ݟ΍͢͞ ෼͔Γ΍͢͞ ૢ࡞͠΍͢͞ ݟ Δ ߟ ͑ Δ ߦ ಈ ͢Δ ਓؒͷߦಈ

ͦ ͷ ଞ ɺ ) * ( ʹ ࡌ ͬͯ ͍ Δ ಺ ༰ 17 ·ͩಡΜͰͳ͍ํ͸ɺҰಡ͢Δ͜ͱΛΦεεϝ͠·͢ • Loading • Modality • On-boarding • Undo and Redo • etc. When content is loading, a blank or static screen can make it seem like your app is frozen, resulting in confusion and frustration, and potentially causing people to leave your app. Many apps allow people to shake the device to undo and redo certain operations, such as typing or deleting. When initiated in this manner, an alert asks the user to confirm or cancel the undo or redo operation. Launch time is your first opportunity to onboard new users and reconnect with returning ones. Design a launch experience that’s fast, fun, and educational. Modality creates focus by preventing people from doing other things until they complete a task or dismiss a message or view.

"QQMFͷσβΠφʔ͕ߟ͑Δ ϕετϓϥΫςΟεͳ6*ͷྫͭ

ϖ ʔ δ λΠ τ ϧ 19 User Interface Design Lab. ʹ͍ͭͯ • Lab. ʹ͍ͭͯ • WWDC18 ΠϕϯτͷҰͭ • AppleॴଐͷΤΩεύʔτʹ௚઀ΞυόΠεΛ΋Β͑Δػձ • ࣗ༝ࢀՃܕɾ׬શ༧໿੍ͷ2छྨ • WWDC18Ͱ਺ଟ͋ͬͨ͘Lab.ͷҰͭ • User Interface Design Lab. ʹ͍ͭͯ • AppleॴଐͷσβΠφʔʹ௚઀ΞυόΠεΛ΋Β͑Δػձ • ׬શ༧໿੍ͷLab. ͰɺԠืऀଟ਺ͷͨΊநબͰ౰ͨΔ֬཰͕௿͍ͱᷚ ޾ӡʹ΋౰બͨͨ͠Ίɺ௚઀͓࿩͖ͯ͠·ͨ͠

ϖ ʔ δ λΠ τ ϧ 20 AppleͷσβΠφʔͱͨ͠࿩ͷ಺༰ Designer Designer fuwamaki Interpreter

" Q Q M F ͷ σβΠ φ ʔ ͕ ߟ ͑ Δ ɺ ϕ ε τ ϓ ϥ Ϋ ςΟ ε ͳ 6 * ͷ ྫ ͭ 21 1. ը໘ભҠ͸ɺػೳͷҠಈΛࣔ͢ 2. ೖྗͷϦίϝϯυػೳ 3. Ϣʔβʹ͸BeginnerͱProfessional͕͍Δ 4. ϝΠϯͱؔ܎ͳ͍΋ͷΛฒྻʹ͠ͳ͍ ͍ΖΜͳΞϓϦͷྫΛग़͠ͳ͕Β

22 1. ը໘ભҠ͸ɺػೳͷҠಈΛࣔ͢ 2. ೖྗͷϦίϝϯυػೳ 3. Ϣʔβʹ͸BeginnerͱProfessional͕͍Δ 4. ϝΠϯͱؔ܎ͳ͍΋ͷΛฒྻʹ͠ͳ͍ " Q Q M F ͷ σβΠ φ ʔ ͕ ߟ ͑ Δ ɺ ϕ ε τ ϓ ϥ Ϋ ςΟ ε ͳ 6 * ͷ ྫ ͭ

23 NPWJF ϗ ʔϜ ݕ ࡧ ೔ ෇ ࢦ ఆ Ұ ཡ ৄ ࡉ ը ໘ ભ Ҡ ͸ ػ ೳ ͷ Ҡ ಈ Λ ࣔ ͢ • ػೳ͝ͱʹɺը໘͕͋Δ • ػೳ͝ͱʹɺը໘͕ભҠ͢Δ ભҠ ˕ ˕

ը ໘ ભ Ҡ ͸ ػ ೳ ͷ Ҡ ಈ Λ ࣔ ͢ ʢ Ξ ϯ ν ύ λ ʔ ϯ ʣ 24 1ͭͷػೳͷதͰͷ ը໘ભҠ͸ආ͚Δ΂͖ ձһ৘ใొ࿥ ੏ɿ ָؒ ηΠɿ ໊ɿ ϝΠɿ ଠ࿕ ϥΫϚ λϩ΢ ॅॴɿ ˟ - ݕࡧ ͪ͜ΒͷॅॴͰ͔͢ʁ ౦ژ౎౦ژ۠౦ژொ1ஸ໨ 0, Ωϟϯηϧ ʷ • ձһ৘ใొ࿥ͷ࠷தʹ
 ը໘ભҠ͕͋Δ

25 " M F S U 5P H H M F 4 F D U J P O . P E B M ˕ ˕ ˕ ը ໘ ભ Ҡ ͸ ॲ ཧ ͷ Ҡ ಈ Λ ࣔ ͢ ʢ ͭ ͷ ॲ ཧ Ͱ ը ໘ ભ Ҡ Λ ආ ͚ Δ ํ ๏ ʣ NPWJF NPWJF

26 1. ը໘ભҠ͸ɺػೳͷҠಈΛࣔ͢ 2. ೖྗͷϦίϝϯυػೳ 3. Ϣʔβʹ͸BiginnerͱProfessional͕͍Δ 4. ϝΠϯͱؔ܎ͳ͍΋ͷΛฒྻʹ͠ͳ͍ " Q Q M F ͷ σβΠ φ ʔ ͕ ߟ ͑ Δ ɺ ϕ ε τ ϓ ϥ Ϋ ςΟ ε ͳ 6 * ͷ ྫ ͭ

ೖ ྗ ͷ Ϧ ί ϝ ϯ υ ػ ೳ 27 NPWJF ը໘ભҠ ʷ ˕ ˕

ೖ ྗ ͷ Ϧ ί ϝ ϯ υ ػ ೳ ʢ Ϧ ί ϝ ϯ υ ʹ ݶ Β ͣɺ ೖ ྗ ͷ બ ୒ ࢶ Λ ఏ ڙ ͢Δ ʣ 28 ˕ ˕ ˞ % B U B & O U S Z 
 ) * ( ͔ Β Ҿ ༻

29 1. ը໘ભҠ͸ɺػೳͷҠಈΛࣔ͢ 2. ೖྗͷϦίϝϯυػೳ 3. Ϣʔβʹ͸BeginnerͱProfessional͕͍Δ 4. ϝΠϯͱؔ܎ͳ͍΋ͷΛฒྻʹ͠ͳ͍ " Q Q M F ͷ σβΠ φ ʔ ͕ ߟ ͑ Δ ɺ ϕ ε τ ϓ ϥ Ϋ ςΟ ε ͳ 6 * ͷ ྫ ͭ

Ϣ ʔ β ʹ ͸ # F H J O O F S ͱ 1S P G F T T J P O B M ͕ ͍ Δ 30 Beginner΋Professional΋࢖͍΍͍͢UIΛ ֤ΞϓϦಛ༗ͷػೳ͕͋Δ৔߹ Beginner޲͚ʹνϡʔτϦΞϧΛઃ͚Δ ※ϨοεϯػೳΛઃ͚Δͱ͔΋༗ޮ ରԠͷͭ ˕

Ϣ ʔ β ʹ ͸ # F H J O O F S ͱ 1S P G F T T J P O B M ͕ ͍ Δ ʢ ) * ( ʹ ४ ڌ ʣ 31 HIGʹ४ڌ͢ΔUIʢBeginnerͰ΋࢖͍΍͍͢ʣ -> Θ͟Θ͟νϡʔτϦΞϧͳͲઃ͚ͳͯ͘OK ˕

32 1. ը໘ભҠ͸ɺػೳͷҠಈΛࣔ͢ 2. ೖྗͷϦίϝϯυػೳ 3. Ϣʔβʹ͸BeginnerͱProfessional͕͍Δ 4. ϝΠϯͱؔ܎ͳ͍΋ͷΛฒྻʹ͠ͳ͍ " Q Q M F ͷ σβΠ φ ʔ ͕ ߟ ͑ Δ ɺ ϕ ε τ ϓ ϥ Ϋ ςΟ ε ͳ 6 * ͷ ྫ ͭ

ϝ Π ϯ ͱ ؔ ܎ ͳ ͍ ΋ ͷ Λ ฒ ྻ ʹ ͠ ͳ ͍ 33 ˕ ʷ ϔϧϓ

ϝ Π ϯ ͱ ؔ ܎ ͳ ͍ ΋ ͷ Λ ฒ ྻ ʹ ͠ ͳ ͍ 34 Ϣʔβ͕ΞϓϦΛ࢖͏ཧ༝ ʹ Funny Moment ΛٻΊΔ͔Β Funny Moment ͷ͡Ό·͸͠ͳ͍ํ͕Α͍ ϝΠϯ͕'VOOZ.PNFOUͳΒ

35 ݟ͍ͨөը Λ୳͢ ฉ͖͍ͨԻָ Λ୳͢ ϝ Π ϯ ͱ ؔ ܎ ͳ ͍ ΋ ͷ Λ ฒ ྻ ʹ ͠ ͳ ͍ ʢ Ϣ ʔ β ͸ 'V O O Z . P N F O U ʹ ू த ʣ ˕ ˕

36 ϝ Π ϯ ͱ ؔ ܎ ͳ ͍ ΋ ͷ Λ ฒ ྻ ʹ ͠ ͳ ͍ ʢ ٯ ʹ ޿ ࠂ ͸ ɺ ฒ ྻ Խ Ͱ Ϋ Ϧ ο Ϋ ཰ ্ ঢ ʣ ޿ࠂ ޿ࠂ

·ͱΊ

· ͱ Ί 38 ࠓ೔ͷ࿩͕ΤϯδχΞɾσβΠφʔͷํͷࢀߟʹͳΕ͹޾͍ • HIGΛ·ͩಡΜͰ͍ͳ͍ํ͸ɺҰಡ͢Δ͜ͱΛΦεεϝ͠·͢ • AppleͷσβΠφʔ͕ߟ͑ΔɺϕετϓϥΫςΟεͳUIͷྫ4ͭ 1. ը໘ભҠ͸ɺػೳͷҠಈΛࣔ͢ 2. ೖྗͷϦίϝϯυػೳ 3. Ϣʔβʹ͸BeginnerͱProfessional͕͍Δ 4. ϝΠϯͱؔ܎ͳ͍΋ͷΛฒྻʹ͠ͳ͍

ϥΫϚࣄۀ෦ɺੵۃ࠾༻தʂ 39