【Adobe XD】サクッと解決!テキストを縦書き入力をする方法2つ

Adobe XD縦書き入力方法

みなさんこんにちは。Webデザイナー3年生のしゅん(@shun_webdesign)です。

今回はAdobe XDでテキストの縦書きを使う方法について紹介します。

XDにはテキストの縦書き設定は搭載されていない

Adobe XDではテキストの縦書き機能が搭載されていません。※2022年6月現在

そのため、プラグインや外部サービスを利用しないと縦書きを使用することができません。

縦書きの使用方法
  • プラグイン「Tategaki」をインストールして使う
  • Illustratorから縦書きのテキストをCCライブラリに追加

縦文字のレイアウトは日本固有のもので海外サイトではあまり使われないです

合わせて読みたい

AdobeXD Tipsまとめ 【Adobe XD】保存版これだけ見とけば大丈夫!今から使えるTipsまとめ

プラグイン「Tategaki」をインストールして使う

「Tategaki」というプラグインを使った方法を紹介します。

このプラグインをインストールすることで対象のテキストをクリックして縦並びに変更することができます。

縦文字作成方法

手順
  1. インストール画面へ移動(インストールはこちら)
  2. プラグインをインストール
  3. ファイル末尾の拡張子を「.xdx」に変更
  4. 縦文字の適用する
インストール画面へ移動

GitHub上のインストールページへ移動します。

※プラグインの検索画面ではありません。

インストールページへ

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

GitHubのページ内にある緑色のボタン「Code」を選択し、「Download ZIP」をクリック。

ZIPファイルがダウンロードされます。

ファイル末尾の拡張子を「.xdx」に変更

ダウンロードしたZIPファイルをそのまま末尾の拡張子を変更します。

tategaki-for-xd-master.zip ▶ tategaki-for-xd-master.xdx

ファイルをクリックし、展開するとXDのプラグイン管理画面が開きます。

画面のようなモーダルが展開されたらそのまま「ローカルにインストール」を選択してください。

縦文字の適用する

XD操作画面でテキスト(T)を選択し、文字を入力します。

その後、プラグインの一覧から「Tategaki」▶「テキストを縦書きにする」をクリック。

これで縦書きが適用されました。

厳密には縦文字ではないため扱いには注意

「Tategaki」で縦書き文字化したテキストは厳密には縦文字テキストではありません。

横書きテキストを縦並びに改行して並べたテキストです。

文字間の調整は行間の調整で行ってください。

また、長文の縦文字化は綺麗に並びません。

Illustratorから縦書きのテキストをCCライブラリに追加

https://unsplash.com/photos/jpkxJAcp6a4

Adobe Illustratorを使った方法です。

Adobe Illustratorで縦書き入力した文字をアウトライン化し、ライブラリに追加で使用できるようにします。

縦文字作成方法

手順
  1. Illustratorを起動
  2. 縦文字を入力
  3. 縦文字をライブラリに保存
  4. XDのライブラリから縦文字を使用する
Illustratorを起動

Adobe Illustratorをクリックして開きます。

縦文字を入力

文字(縦)ツールを選択。テキストを入力します。

入力後、右クリック「アウトライン化」を選択。

縦文字をCCライブラリに保存

入力したテキスト上で右クリック。

「CCライブラリに追加」を選択します。これでCCライブラリに追加されました。

CCライブラリから縦文字を使用する

ライブラリ(Shift⌘Y)をクリック。CCライブラリを選択し、保存したファイルから縦文字を配置します。

アウトライン化したテキストは画像として扱われる

アウトライン化するとテキストではなくXD上では画像として扱われます。

文字の調整は予めIllustratorで行っておく必要があります。

まとめ

今回はXDで縦文字を使う方法について以下を紹介しました。

  • プラグイン「Tategaki」をローカルにインストールで使用する
  • Illustratorで入力した文字をアウトライン化し、CCライブラリに追加

今回はプラグインと外部ツールを使った方法を紹介しました。

「Tategaki」を使用せずにテキストボックスを縦長に配置すれば同様の効果を得られるので試してみてください。

最後まで見ていただきありがとうございます!是非記事の共有をよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA