AndroidアプリでLine Heightを 設定するときに注意したいこと / Things to keep in mind when setting Line Height in your Android app

[Online] potatotips #74 iOS/Android開発Tips共有会
https://potatotips.connpass.com/event/214754/

Transcript

1. AndroidΞϓϦͰLine HeightΛ

   ઃఆ͢Δͱ͖ʹ஫ҙ͍ͨ͜͠ͱ
   גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦
   ϩΫωϜ @_rockname
   

   View Slide

2. mixi, Inc.
   ࣗݾ঺հ
   ϩΫωϜ / rockname
   • ϛΫγΟͰʮՈ଒ΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ

   ։ൃͯ͠Δ
   • iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ
   • εϚϒϥ͕޷͖
   

   View Slide

3. mixi, Inc.
   લճͷpotatotips #73Ͱͷൃද
   https://speakerdeck.com/rockname/things-to-keep-in-mind-when-setting-line-height-in-your-ios-app
   

   View Slide

4. mixi, Inc.
   AndroidΞϓϦͰςΩετʹLine HeightΛઃఆ͍ͨ͠
   • Line HeghitʹԿ΋ઃఆ͠ͳ͔ͬͨ৔߹

   ӈਤͷΑ͏ʹځ۶ͳҹ৅Λ༩͑ͯ͠·͏
   • ߦؒʹద੾ͳεϖʔεΛ࣋ͨͤͯίϯςϯπΛ

   ಡΈ΍͘͢ද͍ࣔͨ͠
   

   View Slide

5. mixi, Inc.
   Line Heightͷఆٛ
   Line Height(Leading) = ֤ߦͷBaselineؒͷେ͖͞
   https://material.io/design/typography/understanding-typography.html#type-properties
   

   View Slide

6. mixi, Inc.
   android:lineSpacingExtra
   • TextViewͰߦؒΛࢦఆ͍ͨ͠৔߹͸ɺ

   android:lineSpacingExtraͱ͍͏attributeΛઃఆ͢ΔͱΑ͍
   

   View Slide

7. mixi, Inc.
   

   View Slide

8. mixi, Inc.
   Line HeightΛઃఆ
   • textSize: 30sp ʹରͯ͠ lineSpacingExtra: 6sp Λઃఆ

   (Line Height͕36ʹͳΔ͜ͱΛظ଴)
   

   View Slide

9. mixi, Inc.
   ద੾ͳ஋͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ
   • ظ଴஋ͷ36pxʹରͯ͠4pxେ͖͍Line Heigh
   t
   
   • ૝ఆҎ্ͷεϖʔε͕ઃఆ͞Εͯ͠·͍ͬͯͨ
   

   View Slide

10. mixi, Inc.
    lineSpacingExtraʹԿ΋ઃఆ͠ͳ͔ͬͨ৔߹
    • 30spͷtextSizeʹରͯ͠ɺͦ΋ͦ΋σϑΥϧτͰ
    Line Height͕34pxͱͳ͍ͬͯͨ
    • ͭ·Γɺ4px͕σϑΥϧτͷlineSpacingExtraͱ͠
    ͯઃఆ͞Ε͍ͯͨ
    • ͳͷͰɺ android:lineSpacingExtra=“2sp” ͱઃఆ͢
    Δͱظ଴௨Γ36pxͷLine Heightͱͳͬͨ
    

    View Slide

11. mixi, Inc.
    lineSpacingExtra͸͢΂ͯ-4spͯ͠ઃఆ͢Ε͹ྑ͍ͷ͔ʁ
    • textSizeʹΑͬͯ͜ͷσϑΥϧτͷlineSpacingExtra͸มΘͬͯ͠·͏ͷͰɺ͢΂ͯҰ཯
    ʹ-4sp͢Ε͹ྑ͍ͱ͍͏࿩Ͱ͸ͳ͍
    • ઃఆ͢ΔtextSize͝ͱʹσϑΥϧτͷlineSpacingExtraΛௐࠪͯ͠ઃఆ͢Δඞཁ͕͋Δ
    

    View Slide

12. mixi, Inc.
    ద੾ͳLine HeightͱͳΔΑ͏ʹௐ͍ࠪͯ͠Δࣄྫ΋
    https://bignerdranch.com/blog/perfecting-custom-typography-in-android/
    

    View Slide

13. ΍Γͨ͘ͳ͍…😇
    

    View Slide

14. mixi, Inc.
    android:lineHeight
    • Line HeightΛઃఆͰ͖Δattribute͕api level 28Ͱ௥Ճ͞Εͨ
    • ಺෦Ͱ͸lineSpacingExtraΛ࢖༻࣮ͨ͠૷͕ࢪ͞Ε͍ͯΔΒ͍͠
    

    View Slide

15. mixi, Inc.
    

    View Slide

16. mixi, Inc.
    android:lineHeightΛ࢖ͬͯΈΔ
    • ૝ఆ௨Γ36ptͷLine HeightΛઃఆͰ͖͍ͯͨ 👏
    

    View Slide

17. mixi, Inc.
    ͨͩ͠ɺ೔ຊޠͩͱ…
    • ಉ͘͡textSize: 30sp, lineHeight: 36spͰ೔ຊޠΛ

    දࣔͯ͠ΈΔ
    • ͢Δͱɺظ଴஋ͷ36ΑΓ6΋େ͖͍42pxͱͳͬͯ͠·ͬͨ
    

    View Slide

18. mixi, Inc.
    Ԥจͱ࿨จϑΥϯτͷҧ͍ʹ͍ͭͯ
    • Ԥจͩͱ༷ʑͳύϥϝʔλ͕ଘࡏ͍ͯͯ͠ɺখจࣈେจࣈʹΑͬͯҰߦ͋ͨΓʹ઎ΊΔจࣈͷີ౓͸େ͖͘มΘΔ
    • ରͯ͠࿨จʹͦΜͳ΋ͷ͸ͳ͘ɺࡶʹશ෦ͷจࣈ͕ΞϧϑΝϕοτେจࣈͱಉ͘͡Β͍ͷେ͖͞ͱͳ͍ͬͯΔ
    https://hayataki-masaharu.jp/web-typography-in-japanese/#.YFND_7T7Rlc
    

    View Slide

19. mixi, Inc.
    Ԥจͱ࿨จϑΥϯτͷҧ͍ʹ͍ͭͯ
    • Ԥจͱൺֱͯ͠ځ۶ʹݟ͕͑ͪͳ࿨จͷ৔߹ʹ͸ɺߦؒ͸޿ΊʹऔΔ͜ͱ͕ϕετϓϥΫςΟεͱͯ͠ޠΒΕ͍ͯΔ
    • AndroidͰ೔ຊޠͷLine Height͕ظ଴஋ΑΓ΋େ͖͘ઃఆ͞Ε͍ͯΔͷ͸ɺ͜ͷ͜ͱΛ഑ྀͯ͘͠Ε͍ͯΔͱਪଌͰ͖Δ
    https://blog.xoxzo.com/en/2018/12/19/japanese-typography-for-web-design/
    

    View Slide

20. mixi, Inc.
    ҰํɺiOSͰ͸
    • iOSଆ͸গͳ͘ͱ΋System FontͩͱݴޠʹΑΔLine Heightͷࠩ͸ͳ͔ͬͨ
    • ͨͩ͠ɺ୅ΘΓʹ೔ຊޠͷϑΥϯταΠζ͸উखʹ1pt΄Ͳ(αΠζʹΑΔ)খ͘͞දࣔ͞ΕΔΑ͏ʹͳ͍ͬͯΔ
    • ͜Ε΋ɺ࿨จͩͱځ۶ʹݟ͑ͯ͠·͏͜ͱʹର͢ΔOSଆͷ഑ྀͩͱਪ࡯Ͱ͖Δ
    https://qiita.com/moccow/items/4d0870e81db909a7aabd
    

    View Slide

21. mixi, Inc.
    Ԥจ/࿨จʹΑͬͯҟͳΔ࢓༷ʹର͢ΔΈͯͶͰͷରԠ
    • ΈͯͶͰ͸σβΠϯπʔϧʹFigmaΛ࠾༻͍ͯͯ͠σβΠϯγεςϜͷҰ෦ͱͯ͠
    TypographyΛఆٛͯ͠؅ཧ͍ͯ͠Δ
    • ͦ͜Ͱ͸Roboto΍Noto Sans CJKͷΑ͏ͳϑΥϯτ͝ͱʹίϯϙʔωϯτΛఆ͍ٛͯ͠Δ
    • AndroidͷLine Height͕Ԥจ/࿨จͰҟͳΔ݅ʹ͍ͭͯ͸ɺ֤Typographyʹ͓͚Δ೔ຊޠͷ
    σϑΥϧτͷLine HeightΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹ൓өͯ͠΋Β͍ͬͯΔ
    • iOSͷϑΥϯταΠζ͕Ԥจ/࿨จͰҟͳΔ݅ʹ͍ͭͯ͸ɺ֤Typographyʹ͓͚Δ೔ຊޠͷ
    ϑΥϯταΠζΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹ൓өͯ͠΋Β͍ͬͯΔ
    

    View Slide

22. mixi, Inc.
    ·ͱΊ
    • android:lineSpacingExtra ͸ҙਤͨ͠ݟͨ໨ʹͳΒͳ͍ͨΊ࢖Θͳ͍ํ͕ྑ͍
    • api level 28Ͱ͸͋Δ͕୅ΘΓʹ android:lineHeight Λ࢖༻ͨ͠ํ͕ྑ͍
    • ೔ຊޠͩͱઃఆͨ͠Line HeightΑΓେ͖Ίʹߦ͕ؒඳը͞ΕΔͨΊɺ

    ͦͷ࢓༷ΛσβΠφʹڞ༗͓͚ͯ͠Δͱྑ͍
    

    View Slide

23. Thank you!!!
    

    View Slide