日本語アプリケーションのインターフェイスデザイン(公開版)

A4c8177aa00623c9593f10be748b3861?s=47 usagimaru
March 13, 2018

 日本語アプリケーションのインターフェイスデザイン(公開版)

UI Crunch #12「伝える」を加速させる。書く、読むUI
https://ui-crunch.connpass.com/event/78845/

A4c8177aa00623c9593f10be748b3861?s=128

usagimaru

March 13, 2018
Tweet

Transcript

  1. v1 2018.3.13 © 2018 Satori MARU. @usagimaruma ೔ ຊ ޠ

    Ξ ϓ Ϧ έ ồ γ ἀ ϯ ͷ Π ϯ λ ồ ϑ ỻ Π ε σ β Π ϯ UI Crunch #12 ň ఻ ͑ Δ Ứ Λ Ճ ଎ ͞ ͤ Δ Ố ॻ ͘ ỏ ಡ Ή 6*
  2. @usagimaruma ؙྯཬ · Δ ͞ ͱ Γ גࣜձࣾάουύον Application Designer

    • Interface Developer • iOS Developer macOS Developer • Sketch Plugin Developer
  3. JINS Inc. v1

  4. גࣜձࣾϕδΦϕδί iOS / ʙ1.0.1 Λ୲౰ vegeryorganics.com

  5. None
  6. શࠃͷ޻ܳ࢈஍Λͭͳཱྀ͙ͷ͓ͱ΋ϝσΟΞ TVODIJKQ גࣜձࣾத઒੓ࣣ঎ళ iOS / ʙ2.0.1 Λ୲౰

  7. JP EN த ࡥ  ൟ ৄࡉݕࡧΛදࣔ ೥౓Λબ୒ ಛผ৆Λબ୒ IUUQTXXXHNBSLPSHBXBSEEFTDSJCF

    UPLFO[B6J%6M3E
  8. શࠃͷ޻ܳ࢈஍Λͭͳཱྀ͙ͷ͓ͱ΋ϝσΟΞ TVODIJKQ גࣜձࣾத઒੓ࣣ঎ళ

  9. ཱྀҹ஽ ͨͼ͍Μͪΐ͏

  10. ࿨ྐྵ ॎ૊Έ ׽਺ࣈɾه਺๏

  11. จ Խ ͷ ཧ ղ ࿨ྐྵ ॎ૊Έ ׽਺ࣈɾه਺๏

  12. จԽʹجͮ͘ΠϯλʔϑΣΠεͷํ޲

  13. ň෷࿠࡯ࣙൣʢ;ΒΜ͢͡͸Μʣʼn૲ߘ

  14. ň෷࿠࡯ࣙൣʢ;ΒΜ͢͡͸Μʣʼn૲ߘ

  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. Πϥετɿ@tobefrog

  22. http://mogumogunews.com/2014/07/topic_7553/

  23. https://twitter.com/nonomaru116/status/741528924761378817 https://www.amazon.co.jp/dp/B009HPDI30/

  24. https://twitter.com/nonomaru116/status/741528924761378817 https://www.amazon.co.jp/dp/B009HPDI30/      

  25. https://twitter.com/horicun/status/749811918408343552

  26. https://commons.wikimedia.org/wiki/File:Tobus_D-H245_2016-9-16.jpg https://commons.wikimedia.org/wiki/File:Mercedes-Benz_Bus_O405N_ZOB_Hannover_Germany.jpg

  27. https://commons.wikimedia.org/wiki/File:Shikoku_Pilgrimage_Map01.png https://commons.wikimedia.org/wiki/File:Prayer_wheels_in_Samye.jpg

  28. ೔ຊ๏ྩ֎ࠃޠ༁σʔλϕʔεγεςϜ http://www.japaneselawtranslation.go.jp/

  29. ೔ຊ๏ྩ֎ࠃޠ༁σʔλϕʔεγεςϜ http://www.japaneselawtranslation.go.jp/

  30. https://commons.wikimedia.org/wiki/File:Tuzurizi12.jpg

  31. https://commons.wikimedia.org/wiki/File:ϚϯΨͷน_഑Սݕࡧ_ޒेԻ_(7900192680).jpg

  32. None
  33. ৘ใͷྲྀΕͱΠϯλʔϑΣΠεͷํ޲ ৘ใల։ͷݪଇ

  34. None
  35. ൱ఆ ಉҙ

  36. ൱ఆ ಉҙ

  37. None
  38. None
  39. None
  40. None
  41. None
  42. https://msdn.microsoft.com/ja-jp/library/windows/desktop/dn742498.aspx macOS Windows

  43. https://msdn.microsoft.com/ja-jp/library/windows/desktop/dn742498.aspx ൱ఆ ൱ఆ ߠఆ ߠఆ ൱ఆ ൱ఆ macOS Windows

  44. https://msdn.microsoft.com/ja-jp/library/windows/desktop/dn742498.aspx ߠఆ ߠఆ ൱ఆ ൱ఆ ൱ఆ ൱ఆ macOS Windows

  45. https://developer.apple.com/videos/play/wwdc2016/232/

  46. https://developer.apple.com/videos/play/wwdc2016/232/

  47. https://developer.apple.com/videos/play/wwdc2016/232/

  48. https://developer.apple.com/videos/play/wwdc2016/232/

  49. https://developer.apple.com/videos/play/wwdc2016/232/

  50. https://www.flickr.com/photos/ktdm_jp/13051130174

  51. None
  52. ฏ ੒ ࡾ े ೥ े Ұ ݄ ฏ ੒

    ೥ ݄ 11 30 ೋ ઍ े ീ ೥ े Ұ ݄ ೋ ࿡ ࣣ ീ ೥ े Ұ ݄ ೋ ʓ Ұ ീ ೥ Ұ Ұ ݄ ੢ ྐྵ ੢ ྐྵ ߖ ل ࿨ ྐྵ ࿨ ྐྵ
  53. ฏ ੒ ೥ ݄ 11 30 ฏ ੒ ࡾ े

    ೥ े Ұ ݄ ೋ ઍ े ീ ೥ े Ұ ݄ ೋ ࿡ ࣣ ീ ೥ े Ұ ݄ ೋ ʓ Ұ ീ ೥ Ұ Ұ ݄ ੢ ྐྵ ੢ ྐྵ ߖ ل ࿨ ྐྵ ࿨ ྐྵ
  54. None
  55. ৽ݩ߸͕ൃද͞Εɺ04͕ରԠ͢Ε͹ਖ਼ৗʹಈ͘͸ͣ

  56. None
  57. None
  58. None
  59. None
  60. None
  61. શࠃͷ޻ܳ࢈஍Λͭͳཱྀ͙ͷ͓ͱ΋ϝσΟΞ TVODIJKQ גࣜձࣾத઒੓ࣣ঎ళ

  62. ೔ຊޠͱλΠϙάϥϑΟ

  63. Cen

  64. தԝ഑ஔ Center

  65. தԝ഑ஔ Center

  66. Typography

  67. Typography Ascender line Mean line x-height Descender line Cap line

    Base line Cap height Descender Ascender Line Height
  68. x-height Ascender Descender  Leading Typography

  69.  Leading x-height Ascender Descender Typoάϥphy

  70.  Leading x-height Ascender Descender Typoάϥphy

  71. Leading  x-height Ascender Descender Typoάϥphy

  72. ώϥΪϊ໌ே Line Height Leading  Ascender Descender 5ZQPάϥQIZ

  73. தԝ഑ஔ Center Leading

  74. None
  75. ώϥΪϊ֯ΰγοΫ ᕟΰγοΫମ ஜࢵAؙΰγοΫ AXIS Std Noto Sans CJK JP Osaka

  76. Apple ͷγεςϜϑΥϯτ San Francisco

  77. SF Pro Display SF Pro Text SF Compact Display SF

    Compact Text SF Mono San Francisco !"#$%&'()* !"#$%&'()* Ultra Light Light Thin Medium Regular Black Heavy Semibold Bold
  78. SF Pro Display SF Pro Text Ultra Light Light Thin

    Medium Regular Black Heavy Semibold Bold Light Medium Regular Heavy Semibold Bold
  79. SF Pro Display SF Pro Text Text Talk Text Talk

    Text Talk Text Talk
  80. Text Talk Text Talk SF Pro Display SF Pro Text

    Text Talk Text Talk
  81. SF Pro Display SF Pro Text Text Talk Text Talk

    Text Talk Text Talk
  82. SF Pro Display SF Pro Text Text Talk Text Talk

    Text Talk Text Talk େ͖ͳλΠτϧ޲͚ ࢹೝੑɺՄಡੑॏࢹ 20pt Ҏ্ͷςΩετ 20pt ະຬͷςΩετ
  83. https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/

  84. System Font

  85. SF Pro Text < 20pt >= 20pt SF Pro Display

    “Lorem ipsum dolor sit amet...”
  86. SF Pro Text < 20pt >= 20pt SF Pro Display

    “Lorem ipsum dolor sit amet...”
  87. System Font SF Pro )JSBHJOP4BOT en ja zh ko SF

    Pro SF Pro 3LQJ)DQJ6& SF Pro "QQMF4%(PUIJD/FP + + + ϝλϑΥϯτ Metrics Metrics Metrics Metrics × × × ×
  88. த՚ϑΥϯτݱ৅

  89. None
  90. None
  91. ۭ ᑮ ॢ ໖ ρϬᓟΨᑮ΁ͭͼ͚Δͯ   ιϤᓪΤ໖ͽͩ͸͖ΐͫ PingFang SC

    STHeiti Apple SD Gothic Neo தࠃޠ தࠃޠ ؖࠃޠ ΰϛശΛۭʹ͍ͯ͠·͢ Hiragino Sans ೔ຊޠ NJǵདƵॢƎźƉŧơż Hiragino Sans GB தࠃޠ
  92. ᑮ ᅍ ፗ ݍ ۸ ڒ 櫏  ၹ ବ

    ಅ ࢏ 气 ਖ਼ ᥯ PingFang SC Hiragino Sans ۭ փ ௚ ൓ Խ ਕ ࡶ  ւ ఈ ॴ ث ྨ ক ֯
  93. ݴޠ༏ઌ౓ɿ೔ຊޠʼதࠃޠɾؖࠃޠ

  94. ϓϩάϥϛϯάͰղܾɿڧ੍తʹ೔ຊޠʹϑΥʔϧόοΫ

  95. ϓϥοτϑΥʔϜͷ࢓૊Έ

  96. https://goodpatch.com/blog/dialog-design/

  97. ͍͍͑ ͸͍ Ωϟϯηϧ͢Δͱ಺༰͕ফ͑ͯ͠·͏ͷ Ͱอଘ͢Δ͜ͱΛ͓קΊ͠·͢ɻ ฤू಺༰ΛΩϟϯηϧͯ͠΋Α Ζ͍͠Ͱ͔͢ʁ

  98. ͍͍͑ ͸͍ Ωϟϯηϧ͢Δͱ಺༰͕ফ͑ͯ͠·͏ͷ Ͱอଘ͢Δ͜ͱΛ͓קΊ͠·͢ɻ ฤू಺༰ΛΩϟϯηϧͯ͠΋Α Ζ͍͠Ͱ͔͢ʁ Ωϟϯηϧʁɹอଘʁɹ͸͍ʁɹ͍͍͑ʁ !

  99. ͍͍͑ ͸͍ Ωϟϯηϧ͢Δͱ಺༰͕ফ͑ͯ͠·͏ͷ Ͱอଘ͢Δ͜ͱΛ͓קΊ͠·͢ɻ ฤू಺༰ΛΩϟϯηϧͯ͠΋Α Ζ͍͠Ͱ͔͢ʁ ! ʮฤू಺༰ΛΩϟϯηϧͨ͘͠ͳ͍ʯʹʮ͍͍͑ʯʁ

  100. ͍͍͑ ͸͍ Ωϟϯηϧ͢Δͱ಺༰͕ফ͑ͯ͠·͏ͷ Ͱอଘ͢Δ͜ͱΛ͓קΊ͠·͢ɻ ฤू಺༰ΛΩϟϯηϧͯ͠΋Α Ζ͍͠Ͱ͔͢ʁ ! ʮฤू಺༰͕ফ͑ͯ͠·Θͳ͍Α͏ʹʯʹʮ͍͍͑ʯʁ

  101. ͍͍͑ ͸͍ Ωϟϯηϧ͢Δͱ಺༰͕ফ͑ͯ͠·͏ͷ Ͱอଘ͢Δ͜ͱΛ͓קΊ͠·͢ɻ ฤू಺༰ΛΩϟϯηϧͯ͠΋Α Ζ͍͠Ͱ͔͢ʁ ! ʮฤू಺༰ΛΩϟϯηϧ͍ͨ͠ʯʹʮ͸͍ʯʁ

  102. ͍͍͑ ͸͍ Ωϟϯηϧ͢Δͱ಺༰͕ফ͑ͯ͠·͏ͷ Ͱอଘ͢Δ͜ͱΛ͓קΊ͠·͢ɻ ฤू಺༰ΛΩϟϯηϧͯ͠΋Α Ζ͍͠Ͱ͔͢ʁ ! ʮอଘ͢Δʯʹʮ͸͍ʯʁ

  103. ͍͍͑ ͸͍ Ωϟϯηϧ͢Δͱ಺༰͕ফ͑ͯ͠·͏ͷ Ͱอଘ͢Δ͜ͱΛ͓קΊ͠·͢ɻ ฤू಺༰ΛΩϟϯηϧͯ͠΋Α Ζ͍͠Ͱ͔͢ʁ

  104. ͍͍͑ ͸͍ Ωϟϯηϧ͢Δͱ಺༰͕ফ͑ͯ͠·͏ͷ Ͱอଘ͢Δ͜ͱΛ͓קΊ͠·͢ɻ ฤू಺༰ΛΩϟϯηϧͯ͠΋Α Ζ͍͠Ͱ͔͢ʁ

  105. Ωϟϯηϧ ഁغ ฤू಺༰Λഁغ͠·͔͢ʁ

  106. Ωϟϯηϧ ഁغ ฤू಺༰Λഁغ͠·͔͢ʁ ഁغ͠·͔͢ʁɹˠɹഁغ

  107. • ΞΫγϣϯ໊ʹʮ͸͍ʼnň͍͍͑ʯΛ༻͍ͳ͍ • ΞΫγϣϯ໊Λಈࢺදݱʹ͢Δ • ໰͍͔͚಺༰ͱಉҙతΞΫγϣϯ໊ΛҰகͤ͞Δ • ňΩϟϯηϧʯ͸GUIͰΑ͘࢖ΘΕΔͷͰආ͚Δ ୅ΘΓʹʮதࢭʼnňऔΓফ͠ʼnňऔΓ΍ΊʯͳͲΛݕ౼͢Δ •

    ಈ࡞ͷओମΛϢʔβʔʹ͢Δ • ໃ६ͨ͠ϝοηʔδΛؚΊͳ͍ • ؆ܿʹදݱ͢Δ Ωϟϯηϧ ഁغ ฤू಺༰Λഁغ͠·͔͢ʁ
  108. Ωϟϯηϧ ഁغ ฤू಺༰Λഁغ͠·͔͢ʁ

  109. Ωϟϯηϧ ഁغ ಺༰Λอଘ ฤू಺༰Λഁغ͠·͔͢ʁ

  110. • ίϯςϯπ ʹର͢Δ ΞΫγϣϯ Λఏࣔ͢Δ • Ϣʔβʔ͕ೳಈతʹߦಈ͢Δ৔߹ʹ༻͍Δ • ഁյతΞΫγϣϯ͸࠷΋ԕ͍Ґஔʢ্ʣʹஔ͘ •

    ඞͣʮΩϟϯηϧʯΛஔ͘ • ඞཁͳΒϝοηʔδΛؚΊΔ • ಈ࡞ͷओମΛϢʔβʔʹ͢Δ • ؆ܿʹදݱ͢Δ Ωϟϯηϧ ഁغ ಺༰Λอଘ ฤू಺༰Λഁغ͠·͔͢ʁ ໊ࢺ ಈࢺ
  111. Slack ϑΝΠϧ ฤू දࣔ  ΢Οϯυ΢ ϔϧϓ ཤྺ

  112. Slack ϑΝΠϧ ฤू දࣔ  ΢Οϯυ΢ ϔϧϓ ཤྺ ਖ਼͘͠͸ʮ΢Πϯυ΢ʯ

  113. Slack Λऴྃ͢Δ ⌘Q ͢΂ͯදࣔ ͦͷଞΛඇදࣔʹ͢Δ ⌥⌘H Slack Λඇදࣔʹ͢Δ ⌘H αʔϏε

    ΞοϓσʔτΛνΣοΫ͢Δ… ؀ڥઃఆ… ⌘, Slackʹ͍ͭͯ Slack SlackΛऴྃ ⌘Q ͢΂ͯΛදࣔ ΄͔ΛӅ͢ ⌥⌘H SlackΛӅ͢ ⌘H αʔϏε ΞοϓσʔτΛ֬ೝ… ؀ڥઃఆ… ⌘, Slackʹ͍ͭͯ Slack
  114. None
  115. SlackΛऴྃ ⌘Q ͢΂ͯΛදࣔ ΄͔ΛӅ͢ ⌥⌘H SlackΛӅ͢ ⌘H αʔϏε ΞοϓσʔτΛ֬ೝ… ؀ڥઃఆ…

    ⌘, Slackʹ͍ͭͯ Slack
  116. For issues that aren’t covered in the Apple Publications Style

    Guide, Apple recommends three other works: The American Heritage Dictionary,The Chicago Manual of Style, and Words Into Type. When these books give conflicting rules, The Chicago Manual of Style takes precedence for questions of usage and The American Heritage Dictionary for questions of spelling. The rest of this section discusses specific details of how to present your text in a style that integrates properly with the Aqua user interface. Inserting Spaces Between Sentences If any part of your application's user interface displays two or more sentences in a paragraph, be sure to insert only a single space between the ending punctuation of one sentence and the first word of the next sentence. Although much of the text in an application's user interface is in the form of labels and short phrases, application help, alerts, and dialogs often contain longer blocks of text. You should examine these blocks of text to make sure that extra spaces do not appear between sentences. Using the Ellipsis Character An ellipsis character (…) can imply that there is more text than there is room to display or that a command (such as Open...) requires additional information before it can be performed. If, for example, the name of an item is too long to fit in a menu or list box, you should insert an ellipsis character in the middle of the name, preserving the beginning and the end of the name. This ensures that the parts of the name that are most likely to be unique are still visible. An ellipsis character after a menu item or button label indicates to the user that additional information is required to complete a command. You should use an ellipsis character in the following cases: ▪ An action that requires further user input to complete or presents an alert allowing the user to cancel the action. Examples include Find, Go To, Open, Page Setup, and Print. ▪ An action that opens a settings window. The main function of settings windows is to allow the user to change some aspect of the application, not the document content. Examples include Set Title, Preferences, and Options. Don’t use an ellipsis character in the following cases: ▪ An action that requires no further user input to complete and does not present an alert. Often the item to be acted upon is already selected. Examples include New, Cut, Bold, and Quit. ▪ An action that opens an informational, accessory, or tool window. These windows can be implemented as either utility windows (as in the case of a color palette) or modeless windows. These windows provide tools that help create or manage the content in the main window and are frequently left open to assist in accomplishing the task of the main window. Examples include Get Info, Show Tools, and About This Application. Be sure to create the ellipsis character using the key combination Option-; (Option-semicolon). This ensures that an assistive application can provide the correct interpretation of the character to a disabled user. If you use 3 period characters to simulate an ellipsis, many assistive applications will be unable to make sense of them. Style 121 2006-02-07 | © 1992, 2001-2003, 2006 Apple Computer, Inc. All Rights Reserved. C H A P T E R 9 Text • ͞ΒʹϢʔβʔೖྗ͕ඞཁͳΞΫγϣϯ໊ • ઃఆ΢Πϯυ΢Λ։͘ΞΫγϣϯ໊ • ϞʔυϨεͰ͸ͳ͍΢Πϯυ΢Λ։͘ΞΫγϣϯ໊ • ςΩετ͕දࣔྖҬʹऩ·Βͳ͍৔߹ͷςΩετ Apple Human Interface Guidelines 2006 লུه߸ “…” Λ࢖༻͢΂͖৔໘
  117. None
  118. http://help.apple.com/applestyleguide/

  119. ͓͗Μ

  120. ᷫԂਫ਼ࣷͷL

  121. ᷫԂਫ਼ࣷͷL Marked Text ະ֬ఆจࣈྻ

  122. ᷫԂਫ਼ࣷͷL

  123. None
  124. None
  125. SlackΛऴྃ ⌘Q ͢΂ͯΛදࣔ ΄͔ΛӅ͢ ⌥⌘H SlackΛӅ͢ ⌘H αʔϏε ΞοϓσʔτΛ֬ೝ… ؀ڥઃఆ…

    ⌘, Slackʹ͍ͭͯ Slack Ωϟϯηϧ ഁغ ಺༰Λอଘ ฤू಺༰Λഁغ͠·͔͢ʁ ۭ ᑮ San Francisco தԝ഑ஔ ฏ ੒ ࡾ े ೥ े Ұ ݄ ᷫԂਫ਼ࣷͷL
  126. ͋Ӭ"

  127. ͋Ӭ" จ Խ

  128. ͋Ӭ" จ Խ

  129. ͋Ӭ" จ Խ

  130. ͋Ӭ" จ Խ

  131. ͋Ӭ" จ Խ

  132. v1 2018.3.13 © 2018 Satori MARU. @usagimaruma ೔ ຊ ޠ

    Ξ ϓ Ϧ έ ồ γ ἀ ϯ ͷ Π ϯ λ ồ ϑ ỻ Π ε σ β Π ϯ UI Crunch #12 ň ఻ ͑ Δ Ứ Λ Ճ ଎ ͞ ͤ Δ Ố ॻ ͘ ỏ ಡ Ή 6*