Skip to main content
Participant
May 17, 2022
Question

【xd】数値の単位がわからない(px!? pt!? どっちなの!)

  • May 17, 2022
  • 2 replies
  • 13129 views

XD作業画面上の数値がpxなのか、ptなのかわかりません。
また、開発用リンクのブラウザ画面で確認するとptになっていました。
(ブラウザ画面上からpxとして扱う設定に変更できますが、デフォルトだとptで作成していることになってたのか・・・と驚愕しました。一方で目視のサイズ感はpxっぽい・・・混乱)

デフォルトの設定をpxにする方法があれば教えていただきたいです。
また、xdでptを使うことなどない気がしているのですが、もし使用するケースや日頃使っている方がいれば、どいういうケースなのかお聞きしたいです。

よろしくお願いします。

This topic has been closed for replies.

2 replies

r360studio Kazue Mori
Community Expert
Community Expert
July 17, 2022

bujiroさん、こんにちは。

 

共有したデザインスペック(開発用リンク)のテキストの単位を ptではなく、pxにするには、XD の共有でリンク設定をする時に、表示設定ー書き出し先を「Web」に指定してみてください。

 

(↑書き出し先指定が iOSだとデフォルトがptになります)

 

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

.

Gishu Azami
Community Expert
Community Expert
July 17, 2022

大変遅い返信で恐縮です。
XDユーザー以前に、ウェブ制作の専門家としてコメントをさせていただきます。

 

まず、ウェブデザインにおいて「pt(ポイント)」という単位でビジュアルデザインを構成するという慣習的概念はありません。

「pt」は、出版や印刷など、DTPの分野で扱われている単位です。
ポイント — ウィキペディア 


ウェブデザインで扱われる絶対単位は「px(ピクセル)」です。
「px」は、デジタル機器で扱われる画像の画素に基づいている単位です。

ピクセル — ウィキペディア 

 

つまり、ウェブにおいては、「pt」でデザインを構成し作業することは(本来は)ありません。

その基本的概念(当然にpxである)に基づいてXDは設計されているため、あえて潔く、そのインターフェース上で単位の表示をしていないのだと当方は理解しています。

また、ptとpxがXD上で混在することがないという安心感は、意外に大切かもしれません。

 

“開発用リンクのブラウザ画面で確認するとptに”とのことですが、気にされなくてもよろしいのではないでしょうか。
ここで大切なことは、XD上で、例えば72四方のボックスと、テキストのサイズ72の文字の、それらの相対的なサイズが整合されていれば、なんらデザインに問題はないはずです。
つまり、XD内で相対的なサイジングが保たれていれば問題なしということです。

 

ところで、なぜ、ウェブデザインにおいて、このpxとptの「どっちよ問題」が度々起こるのでしょうか。
それは多分に、

  • PhotoshopやIllustratorでウェブのデザインをしていた頃に生じていた混同の名残や負の遺産
  • グラフィックデザインの分野の人たちとのリレーションで、彼らが扱う単位ptによる影響やそこから生じる誤解や混乱
  • CSSで用意されている絶対長の単位にptが用意されていることからの誤解や混乱

などによるものかと思います。

ちなみに、CSSではcmやmmも用意されていますが、オンスクリーン(ディスプレイ)向けのデジタルコンテンツのデザインで、それらの単位は使いませんよね?
ptも同様に考えてよいと思います。
CSS の値と単位 — mdn web docs_ 

 

デフォルトの設定をpxにする方法があれば教えて
以上のようなこともあり、オンスクリーンのデザインに特化しているXDには、そのような設定は用意されていません。

拙著で恐縮ですが、当方がウェブデザインで用いられる単位について、これまでのウェブブラウザーの進化に伴った変遷と現状の在り方について論考を記しております。
よろしければ、お手に取ってみてください。
オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現 

生明義秀