Skip to main content
Participant
September 5, 2023
Answered

同じファイルを表示しているのに、Windows版とMac版でテキストボックスの位置や高さが微妙に違う

  • September 5, 2023
  • 2 replies
  • 3821 views

下の図は、Adobe XDの共有ファイル内の「全く同じテキストボックス」を選択したときのプロパティです。

 

 

共有ファイルの同じテキストボックスにもかかわらず、以下のような違いがあります。

・Windows版 高さ16、Y102

・Mac版 高さ13、Y104

 

このテキストボックスのフォントサイズは13pxのため、高さも13pxと表記されるのが正しかと思います。フォントの表記が異なるため、試しにどちらも「Arial」にしてみましたが、問題は解消されませんでした。

 

しばらくはMac版を利用しようと思いますが、なぜこのような差が出ているのでしょうか。

設定か何かを変更し、解消することはできるでしょうか。

    This topic has been closed for replies.
    Correct answer r360studio Kazue Mori

    初心者デザイナーMさん、こんにちは。

    手元のWin/Macの2台で確認してみました。

     

    次の通り、選択したフォントによって、フォントの高さが異なるものがありました。
    ズレているのが、モリサワ・フォントワークスのものです。

     

    ●モリサワ じゅん34
    https://www.morisawa.co.jp/fonts/specimen/1210

    Win 18px Mac 13px

     

    ●FOT-筑紫A丸ゴシック Std(Adobe Fonts)
    https://fonts.adobe.com/fonts/fot-tsukuardgothic-std

    Win 19px Mac 14px

     

    ●源ノ角ゴシック(Adobe Fonts)
    https://fonts.adobe.com/fonts/source-han-sans-japanese

    Win/Macのずれ無し 19px

     

    ●貂明朝(Adobe Fonts)
    https://fonts.adobe.com/fonts/ten-mincho

    Win/Macのずれ無し 20px

     

    このうち、FOT-筑紫A丸ゴシック Stdのテキストをパス変換([ctrl]([command])+[8]キー)したところ、高さが「14.12」となり、Win/Mac共に同じ高さとなりました。
    ※Winからパス変換しても、Macからパス変換しても結果は同じ。

     

    これは推測ですが、フォントによって、WinとMacでフォントの高さが変わるのではないでしょうか(行送りのデフォルトも異なるようです)。

     

    考えつく回避策としては「テキストをパス変換する(ただし、文字情報が失われるので後で文字の変更ができない)」か「選ぶフォントをWin/Macでズレないフォントに変える」ぐらいしかなさそうです。


    <追伸>

    初心者デザイナーMさん:wrote
    >フォントの表記が異なるため、試しにどちらも「Arial」にしてみましたが、問題は解消されませんでした。

    とのことですが、「Arial」をこちらで試したところ、Win/Macのずれ無しという結果になりました。

    もしかして、テキストボックスに全角(日本語)が混じっていないでしょうか?
    混ざっていれば、「Arial」に全角の字形がないので、フォント指定が化けてしまって、それで、Win/Macでズレているのかもしれません。


    以上、ご参考になりましたら幸いです。
    ー ー ー ー
    参考になったら“▲賛成票”を、解決したら“✔正解”で応答を。
    このコメントが有用か、私に伝えてくださるとうれしいです。

    r360studio Kazue Mori 🦔
    (執筆時間:30分)
    ー ー ー ー

    2 replies

    r360studio Kazue Mori
    Community Expert
    r360studio Kazue MoriCommunity ExpertCorrect answer
    Community Expert
    September 5, 2023

    初心者デザイナーMさん、こんにちは。

    手元のWin/Macの2台で確認してみました。

     

    次の通り、選択したフォントによって、フォントの高さが異なるものがありました。
    ズレているのが、モリサワ・フォントワークスのものです。

     

    ●モリサワ じゅん34
    https://www.morisawa.co.jp/fonts/specimen/1210

    Win 18px Mac 13px

     

    ●FOT-筑紫A丸ゴシック Std(Adobe Fonts)
    https://fonts.adobe.com/fonts/fot-tsukuardgothic-std

    Win 19px Mac 14px

     

    ●源ノ角ゴシック(Adobe Fonts)
    https://fonts.adobe.com/fonts/source-han-sans-japanese

    Win/Macのずれ無し 19px

     

    ●貂明朝(Adobe Fonts)
    https://fonts.adobe.com/fonts/ten-mincho

    Win/Macのずれ無し 20px

     

    このうち、FOT-筑紫A丸ゴシック Stdのテキストをパス変換([ctrl]([command])+[8]キー)したところ、高さが「14.12」となり、Win/Mac共に同じ高さとなりました。
    ※Winからパス変換しても、Macからパス変換しても結果は同じ。

     

    これは推測ですが、フォントによって、WinとMacでフォントの高さが変わるのではないでしょうか(行送りのデフォルトも異なるようです)。

     

    考えつく回避策としては「テキストをパス変換する(ただし、文字情報が失われるので後で文字の変更ができない)」か「選ぶフォントをWin/Macでズレないフォントに変える」ぐらいしかなさそうです。


    <追伸>

    初心者デザイナーMさん:wrote
    >フォントの表記が異なるため、試しにどちらも「Arial」にしてみましたが、問題は解消されませんでした。

    とのことですが、「Arial」をこちらで試したところ、Win/Macのずれ無しという結果になりました。

    もしかして、テキストボックスに全角(日本語)が混じっていないでしょうか?
    混ざっていれば、「Arial」に全角の字形がないので、フォント指定が化けてしまって、それで、Win/Macでズレているのかもしれません。


    以上、ご参考になりましたら幸いです。
    ー ー ー ー
    参考になったら“▲賛成票”を、解決したら“✔正解”で応答を。
    このコメントが有用か、私に伝えてくださるとうれしいです。

    r360studio Kazue Mori 🦔
    (執筆時間:30分)
    ー ー ー ー

    Participant
    September 5, 2023

    r360studio Kazue Mori さん、手厚くサポートいただきありがとうございます。

    お試しいただいた通り、Windows版とMac版で常にテキストボックスのサイズが異なっているわけではなく、指定しているフォントによってサイズが変わってしまう現象であることを確認しました。

     

    また、当初「Arial」にしたのに解消しないと投稿しましたが、追伸に記載いただいた通り、テキストボックス内で日本語を使用していたため不適切でした。こちらについても補足いただき、ありがとうございます。

     

    対象プロジェクトでは指定するフォントを変更することは難しく、またパス変換してしまうとその後変更できなくなるというのも困るため、基本的にはMac版を利用するという方針で回避したいと思います。

    お二人ともサポートいただきありがとうございました。とても助かりました。

    r360studio Kazue Mori
    Community Expert
    Community Expert
    September 5, 2023

    初心者デザイナーMさん、こんにちは。

    コメントを書き込んだ後に、便利そうなプラグインを見つけましたので追記です。

     

    ●【解決】XDで文字の上下にある余白を削除したい!
    https://sttk3.com/blog/tips/xd/mask-text.html

     

    で紹介されている「MaskText」というプラグインを使うと、文字情報はそのままに、マスクを用いて、余分な余白を取ってくれるそうです。

     

    ブログ記事のリンクは無効ですが、XDのプラグインで検索すると「MaskText」があり、組み込んでうまく使うことができました。

     

    ご参考になりましたら幸いです。

    ー ー ー ー
    参考になったら“▲賛成票”を。
    このコメントが有用か、私に伝えてくださるとうれしいです。

    r360studio Kazue Mori 🦔
    (執筆時間:10分)
    ー ー ー ー

    Ten A
    Community Expert
    Community Expert
    September 5, 2023

    実際のオブジェクトの状態もみせてくれませんか?

    Participant
    September 5, 2023

    Ten Aさん、ありがとうございます。実際のオブジェクトはこちらです。

    公開用にカスタムしたため、一部の数値が投稿時と異なります。

     

     

    r360studio Kazue Mori さんにもサポートいただき、原因と思われるものが特定できたため、このあとCloseします。誰かの役に立つかもしれないので、オブジェクトの状態(上図)も投稿しておきます。