MENU
カテゴリー

【簡単】AdobeXDで小数点を消す方法を紹介します!

AdobeXDでオブジェクトに小数点を出さない方法を説明します!

takato(@n8takato)です!

XDで図形や画像に小数点を出さない様に設定したい。

この記事は上記の課題に向けて作成しています。

XDでwebデザインを作成していると図形や画像に小数点が出てしまいます。
この小数点は簡単に出さないように設定出来ます。

XDで小数点を出さない様にする設定方法を紹介します。

この記事を読むメリット

  • XDで小数点を出さない様にする方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー3年目
  • web制作現場で学んだことを発信している人

XDのプラグインに関する他の記事はこちら

あわせて読みたい
【2022年版】AdobeXDで文字を縦書きにする方法を紹介! XDで文字を縦書きにする方法を知りたい。 この記事は上記の課題に向けて作成しております。 現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。 その...
あわせて読みたい
【2022年版】AdobeXDで共有する方法を紹介します! XDで共有する方法を知りたい この記事は上記の課題に向けて作成しております。 XDには共有機能があります。 共有機能を使うことで他の人にデザインを共有することが出来...
目次

XDで小数点を出さない方法

XDで小数点を出さない方法を説明します。
XDで小数点を出さない方法

XDのプラグインを導入することで小数点を出さない様に出来ます。

導入するプラグイン

  • Remove Decimal Numbers

プラグインの導入手順は下記の通りです。

プラグインの導入手順

  1. プラグインを管理」を選択
  2. Remove Decimal Numbers」を検索
  3. プラグインをインストール

プラグインを管理」を選択

XDの上部メニューにある「プラグイン」から「プラグインを管理」を選択します。

「プラグインを管理」を選択します。
プラグインを管理

Remove Decimal Numbers」を検索

続いて左側にあるメニューから「おすすめのプラグイン」を選択して、「Remove Decimal Numbers」と検索します。

「Remove Decimal Numbers」と検索と検索します。
「Remove Decimal Numbers」と検索

プラグインをインストール

検索したプラグインが表示されたらインストールします。

「インストール」を選択します。
インストール

インストールを押したらポップアップが表示されます。

OK」を選択してください。

「OK」を選択します。
「OK」を選択する

インストール済み」と表示されたら完了です。

「インストール済み」と表示されたら完成です。
インストール済み

小数点が出ないか確認

小数点が出ないか実際に試してみます。

図形のサイズを変更しても値に小数点が表示されなければ完了です。

※サイズの値は右側の「変形」に表示されています。

珠数点が出ないか確認

XDで小数点を消した方が良い理由

XDで小数点を消した方が良い理由を説明します。
XDで小数点を消した方が良い理由

XDで小数点を消す方法はわかったよ。でもなんで小数点を消した方が良いの??

続いてはこの悩みに向けての説明です。

図形や画像の小数点を削除する理由は1pxのズレを回避するためです。

1pxのズレとは?

1pxのズレとは、デザインデータから図形や画像を書き出した際に画像サイズが1pxズレてしまう現象です。

バナー広告はサイズが決まっているため1pxのズレも許されません。しかしこの1pxのズレが生じてしまうとサイズが変わってしまいます。

1pxのズレの原因は小数点が含まれることです。

例えば150px 150pxの画像を作る際、デザインデータ上の画像サイズが150.12px 150.22pxの場合、その画像を書き出すと151px 151pxになってしまいます。

データ上のサイズに小数点が含まれると、書き出した画像のサイズが1pxズレてしまうのです。

手作業で小数点を削除するのは大変

図形や画像のサイズにある小数点を手作業で削除することは可能です。

図形のサイズ部分を選択して「↓」ボタンを押すと小数点が消えます。

しかし全ての画像や図形を手作業で行うのは大変なので、プラグインを導入することをおすすめします。

XDの小数点は簡単に消せる

XDの小数点は簡単に消せます。
XDの小数点は簡単に消せる

最後にまとめです。

  • Remove Decimal Numbers」の導入で小数点を消すことが出来る
  • 小数点を消す理由は1pxのズレを回避するため

XDでは簡単に小数点を消すことが出来ます。

XDでwebデザインを制作する方は是非プラグインを導入してください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次