$30 off During Our Annual Pro Sale. View Details »

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

usagimaru
March 13, 2018

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

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

usagimaru

March 13, 2018
Tweet

More Decks by usagimaru

Other Decks in Design

Transcript

  1. v1 2018.3.13
    © 2018 Satori MARU. @usagimaruma


    ޠ
    Ξ
    ϓ
    Ϧ
    έ

    γ

    ϯ
    ͷ
    Π
    ϯ
    λ

    ϑ

    Π
    ε
    σ
    β
    Π
    ϯ
    UI Crunch #12
    ň

    ͑
    Δ

    Λ
    Ճ

    ͞
    ͤ
    Δ


    ͘


    Ή
    6*

    View Slide

  2. @usagimaruma
    ؙྯཬ
    · Δ ͞ ͱ Γ
    גࣜձࣾάουύον
    Application Designer • Interface Developer • iOS Developer
    macOS Developer • Sketch Plugin Developer

    View Slide

  3. JINS Inc.
    v1

    View Slide

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

    View Slide

  5. View Slide

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

    View Slide

  7. JP EN த ࡥ ൟ

    ৄࡉݕࡧΛදࣔ
    ೥౓Λબ୒ ಛผ৆Λબ୒
    IUUQTXXXHNBSLPSHBXBSEEFTDSJCF UPLFO[B6J%6M3E

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide


  11. Խ
    ͷ

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. Πϥετɿ@tobefrog

    View Slide

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

    View Slide

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

    View Slide

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





    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. View Slide

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

    View Slide

  34. View Slide

  35. ൱ఆ ಉҙ

    View Slide

  36. ൱ఆ ಉҙ

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. https://msdn.microsoft.com/ja-jp/library/windows/desktop/dn742498.aspx
    macOS Windows

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. View Slide







  52. Ұ
    ݄



    ݄
    11
    30






    Ұ
    ݄






    Ұ
    ݄

    ʓ
    Ұ


    Ұ
    Ұ
    ݄




    ߖ
    ل




    View Slide




  53. ݄
    11
    30






    Ұ
    ݄






    Ұ
    ݄






    Ұ
    ݄

    ʓ
    Ұ


    Ұ
    Ұ
    ݄




    ߖ
    ل




    View Slide

  54. View Slide

  55. ৽ݩ߸͕ൃද͞Εɺ04͕ରԠ͢Ε͹ਖ਼ৗʹಈ͘͸ͣ

    View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

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

    View Slide

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

    View Slide

  63. Cen

    View Slide

  64. தԝ഑ஔ
    Center

    View Slide

  65. தԝ഑ஔ
    Center

    View Slide

  66. Typography

    View Slide

  67. Typography
    Ascender line
    Mean line
    x-height
    Descender line
    Cap line
    Base line
    Cap height
    Descender
    Ascender
    Line Height

    View Slide

  68. x-height
    Ascender
    Descender

    Leading
    Typography

    View Slide


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

    View Slide


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

    View Slide

  71. Leading

    x-height
    Ascender
    Descender
    Typoάϥphy

    View Slide

  72. ώϥΪϊ໌ே
    Line Height
    Leading

    Ascender
    Descender
    5ZQPάϥQIZ

    View Slide

  73. தԝ഑ஔ
    Center
    Leading

    View Slide

  74. View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  78. SF Pro Display SF Pro Text
    Ultra Light
    Light
    Thin
    Medium
    Regular
    Black
    Heavy
    Semibold
    Bold
    Light
    Medium
    Regular
    Heavy
    Semibold
    Bold

    View Slide

  79. SF Pro Display
    SF Pro Text
    Text Talk
    Text Talk
    Text Talk
    Text Talk

    View Slide

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

    View Slide

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

    View Slide

  82. SF Pro Display
    SF Pro Text
    Text Talk
    Text Talk
    Text Talk
    Text Talk
    େ͖ͳλΠτϧ޲͚
    ࢹೝੑɺՄಡੑॏࢹ
    20pt Ҏ্ͷςΩετ
    20pt ະຬͷςΩετ

    View Slide

  83. https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/

    View Slide

  84. System Font

    View Slide

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

    View Slide

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

    View Slide

  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
    × × ×
    ×

    View Slide

  88. த՚ϑΥϯτݱ৅

    View Slide

  89. View Slide

  90. View Slide

  91. ۭ




    ρϬᓟΨᑮ΁ͭͼ͚Δͯ


    ιϤᓪΤ໖ͽͩ͸͖ΐͫ
    PingFang SC
    STHeiti
    Apple SD Gothic Neo
    தࠃޠ
    தࠃޠ
    ؖࠃޠ
    ΰϛശΛۭʹ͍ͯ͠·͢
    Hiragino Sans
    ೔ຊޠ
    NJǵདƵॢƎźƉŧơż
    Hiragino Sans GB
    தࠃޠ

    View Slide

  92. ᑮ ᅍ ፗ ݍ ۸ ڒ 櫏
    ၹ ବ ಅ ࢏ 气 ਖ਼ ᥯
    PingFang SC
    Hiragino Sans
    ۭ փ ௚ ൓ Խ ਕ ࡶ
    ւ ఈ ॴ ث ྨ ক ֯

    View Slide

  93. ݴޠ༏ઌ౓ɿ೔ຊޠʼதࠃޠɾؖࠃޠ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  107. • ΞΫγϣϯ໊ʹʮ͸͍ʼnň͍͍͑ʯΛ༻͍ͳ͍
    • ΞΫγϣϯ໊Λಈࢺදݱʹ͢Δ
    • ໰͍͔͚಺༰ͱಉҙతΞΫγϣϯ໊ΛҰகͤ͞Δ
    • ňΩϟϯηϧʯ͸GUIͰΑ͘࢖ΘΕΔͷͰආ͚Δ
    ୅ΘΓʹʮதࢭʼnňऔΓফ͠ʼnňऔΓ΍ΊʯͳͲΛݕ౼͢Δ
    • ಈ࡞ͷओମΛϢʔβʔʹ͢Δ
    • ໃ६ͨ͠ϝοηʔδΛؚΊͳ͍
    • ؆ܿʹදݱ͢Δ
    Ωϟϯηϧ ഁغ
    ฤू಺༰Λഁغ͠·͔͢ʁ

    View Slide

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

    View Slide

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

    View Slide

  110. • ίϯςϯπ ʹର͢Δ ΞΫγϣϯ Λఏࣔ͢Δ
    • Ϣʔβʔ͕ೳಈతʹߦಈ͢Δ৔߹ʹ༻͍Δ
    • ഁյతΞΫγϣϯ͸࠷΋ԕ͍Ґஔʢ্ʣʹஔ͘
    • ඞͣʮΩϟϯηϧʯΛஔ͘
    • ඞཁͳΒϝοηʔδΛؚΊΔ
    • ಈ࡞ͷओମΛϢʔβʔʹ͢Δ
    • ؆ܿʹදݱ͢Δ
    Ωϟϯηϧ
    ഁغ
    ಺༰Λอଘ
    ฤू಺༰Λഁغ͠·͔͢ʁ
    ໊ࢺ ಈࢺ

    View Slide

  111. Slack ϑΝΠϧ ฤू දࣔ
     ΢Οϯυ΢ ϔϧϓ
    ཤྺ

    View Slide

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

    View Slide

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

    View Slide

  114. View Slide

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

    View Slide

  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
    লུه߸ “…” Λ࢖༻͢΂͖৔໘

    View Slide

  117. View Slide

  118. http://help.apple.com/applestyleguide/

    View Slide

  119. ͓͗Μ

    View Slide

  120. ᷫԂਫ਼ࣷͷL

    View Slide

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

    View Slide

  122. ᷫԂਫ਼ࣷͷL

    View Slide

  123. View Slide

  124. View Slide

  125. SlackΛऴྃ ⌘Q
    ͢΂ͯΛදࣔ
    ΄͔ΛӅ͢ ⌥⌘H
    SlackΛӅ͢ ⌘H
    αʔϏε
    ΞοϓσʔτΛ֬ೝ…
    ؀ڥઃఆ… ⌘,
    Slackʹ͍ͭͯ
    Slack
    Ωϟϯηϧ
    ഁغ
    ಺༰Λอଘ
    ฤू಺༰Λഁغ͠·͔͢ʁ
    ۭ ᑮ
    San Francisco
    தԝ഑ஔ






    Ұ
    ݄
    ᷫԂਫ਼ࣷͷL

    View Slide

  126. ͋Ӭ"

    View Slide

  127. ͋Ӭ" จ
    Խ

    View Slide

  128. ͋Ӭ" จ
    Խ

    View Slide

  129. ͋Ӭ" จ
    Խ

    View Slide

  130. ͋Ӭ" จ
    Խ

    View Slide

  131. ͋Ӭ" จ
    Խ

    View Slide

  132. v1 2018.3.13
    © 2018 Satori MARU. @usagimaruma


    ޠ
    Ξ
    ϓ
    Ϧ
    έ

    γ

    ϯ
    ͷ
    Π
    ϯ
    λ

    ϑ

    Π
    ε
    σ
    β
    Π
    ϯ
    UI Crunch #12
    ň

    ͑
    Δ

    Λ
    Ճ

    ͞
    ͤ
    Δ


    ͘


    Ή
    6*

    View Slide