【簡単】XDでアウトライン化する方法を紹介!

【簡単】XDでアウトライン化する方法を紹介!

takato(@n8takato)です!

XDでアウトライン化する方法を知りたい

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

XDのデザインデータを渡す場合アウトライン化する必要があります。

アウトライン化は制作現場では必須なので知っておかなきゃヤバイです。

そこで今回はXDでアウトライン化する方法を説明していきます。

この記事を読むメリット

  • XDでアウトライン化する方法がわかる

この記事を書いた人

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

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

XDに関する他の記事はこちら

あわせて読みたい
【2022年版】AdobeXDのガイドの引き方を紹介します! XDでガイドの引き方を知りたい この記事は上記の課題に向けて作成しております。 XDはイラレやフォトショと同様にガイドを引くことが出来ます。 webデザインを作成する...
あわせて読みたい
【AdobeXD】アートボードの基本的な使い方を7つ紹介します! XDのアートボードの使い方を知りたい この記事は上記の課題に向けて作成しています。 XDのアートボードの使い方がわからず困っている方がいると思います。 そんな方向け...
目次

XDでアウトライン化する方法

早速XDでアウトライン化する方法を説明します。

XDのアウトライン化

  • オブジェクト」→「パス」→「パスに変換
「オブジェクト」→「パス」→「パスに変換」でアウトライン化することが出来ます。
XDのアウトライン化

XDでは「アウトライン化」という項目が無く「パスに変換」になります。

Macのショートカットキー

  • 「command」+「8」

アウトライン化する時はテキストを選択した状態で行ってください。

アウトライン化とは?

アウトライン化を知らない方向けに説明します。

アウトライン化とは、「文字データ」のテキストを「パスデータ」に変換する作業のことです。

テキストツールで作成した文字は「テキストデータ」として扱われます。アウトライン化することで文字が「パスデータ」に変換されます。パスデータに変換されることで文字が図形として扱われます。

わかりやすく説明するとアウトライン化することでテキストが文字のような形をした図形に変わるということです。

アウトライン化されたか確認する方法

文字がアウトライン化されたか確認する方法は簡単です。

確認したい文字にカーソルを合わせてダブルクリックします。

アウトライン化されていると文字の周りにたくさんの丸が表示されます。

文字をダブルクリックして文字の周りに丸いのが表示されたらアウトライン化済みということが確認出来ます。
アウトライン化の確認

このように表示されたらアウトライン化済みです。

XDでアウトライン化する際の注意点

XDでアウトライン化する際の注意点が2つあります。

XDでアウトライン化する際の注意点2つ

  1. グループ化されたものは一括で出来ない
  2. 複数の色を使っている場合1色になってしまう

グループ化されたものは一括で出来ない

XDはイラレと異なりグループ化されているものを一括でアウトライン化することが出来ません。

そのためグループ化を解除してからアウトライン化する必要があります。

イラレのように「全選択」→「アウトライン化」が出来ないのは不便ですよね。

面倒ですが全てのグループ化を解除してからアウトライン化をしましょう。

複数の色を使っている場合1色になってしまう

1つの文章に複数の色を使用している場合、アウトライン化すると末尾の色1色になってしまいます。

上記動画のように「XDで」と「アウトライン化」の色を分けた文章をアウトライン化した場合、文章全体が「アウトライン化」の色になってしまいます。

おそらくこれはXDのバグです。

そのため色の異なる部分ごとにアウトライン化する必要があります。

異なる色でデザインしている方は気をつけてください。

アウトライン化するメリット

アウトライン化をするメリットは下記の通りです。

アウトライン化のメリット

  • 文字化けを防ぐ

アウトライン化で文字化けを防ぐ

アウトライン化せずにデータを渡すと文字化けの原因になります。

使用したフォントが受け手のXDデータ内に無い場合、近しいフォントに自動で変更されてしまいます。そのため受け手のデザインに文字化けが発生してしまうのです。

例えばあなたが「クレー」というフォントを使ったとします。

アウトライン化せずに送った場合、相手のXDに「クレー」のフォントが入っていないと他のフォントに自動で変換されてしまうのです。

フォントが変わるとデザインも大きく変わります。

そうならないためにもアウトライン化してから送りましょう。

XDはまだ発展途上

最後にまとめです。

  • XDのアウトライン化は「オブジェクト」→「パス」→「パスに変換」
  • Macユーザーは「command」+「8」でも出来る
  • グループ化されている文字は一括では出きない
  • 複数の文字を使用している文章は1色になってしまう

XDのアウトライン化はイラレほど簡単ではありません。

XD自体まだ発展途上なので、今後のアップロードに期待しましょう。

XDに関する他の記事はこちら

あわせて読みたい
【2022年版】AdobeXDで波線を作る方法を紹介! XDで波線を作る方法を知りたい この記事は上記の課題に向けて作成しています。 web制作をしていると波線を作ることがたまにあります。 僕も最近波線を作成しました。 そ...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次