【2022年版】AdobeXDで文字を縦書きにする方法を紹介!

【2022年版】AdobeXDで文字を縦書きにする方法を紹介!

takato(@n8takato)です!

XDで文字を縦書きにする方法を知りたい。

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

現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。

そのためプラグインを導入する必要があります。

この記事ではプラグインを導入して文字を縦書きにする方法を紹介します。

この記事でわかること

  • XDで文字を縦書きにする方法

この記事を書いた人

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

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

XDで文字を縦書きにする方法

XDで文字を縦書きにする方法
XDで文字を縦書きにする方法

XDで文字を縦書きにする手順は下記の通りです。

  1. プラグインをダウンロードする
  2. XDにプラグインをインストールする
  3. XD上で文字を縦書きに変更する

プラグインをダウンロードする

始めにプラグインをダウンロードします。

今回ダウンロードするプラグインはこちらです。

  • Tategaki for Adobe XD

①GitHubにアクセス

上記のプラグインはGitHubからダウンロード出来ます。

下記URLよりGitHubにアクセスしてください。

https://github.com/ashryanbeats/tategaki-for-xd

②ZIPファイルをダウンロード

GitHubを開いたらZIPファイルをダウンロードします。

  1. 「Code」をクリック
  2. 「Download ZIP」をクリック
Tategaki for Adobe XDダウンロードページ
Tategaki for Adobe XD

これでプラグインのZIPファイルがダウンロードされました。

XDにプラグインをインストールする

続いてXDにプラグインをインストールします。

①拡張子を変更する

ダウンロードしたファイルの拡張子を「.zip」から「.xdx」に変更します。

※zipファイルは開かずに拡張子を変更してください。

拡張子を.xdxへ変更
拡張子を.xdxへ変更

②XDにプラグインをインストール

拡張子「.xdx」に変更したファイルを開きます。するとクリエイティブクラウドが立ち上がります。

下記ポップアップは「OK」を選択してください。

クリエイティブクラウドのアクセス許可
アクセス許可

続いてプラグインをローカルにインストールします。

ローカルにインストール」を選択してください。

プラグインをローカルにインストール
プラグインをローカルにインストール

下記ポップアップが表示されるので、「OK」を選択してください。

「Tategaki」のインストール
「Tategaki」のインストール

これでXDにプラグインをインストールすることが出来ました。

下記ポップアップよりXDを開いてください。

XDを開く
XDを開く

XD上で文字を縦書きに変更する

ここからはXD上で文字を縦書きにする方法の説明です。

①縦書きにしたい文字を選択

縦書きにしたい文字を選択します。

今回は下記の文字を縦書きにしたいと思います。

文字の選択
文字の選択

②「テキストを縦書きにする」を選択

文字を縦書きにするために「テキストを縦書きにする」を選択します。

テキストを縦書きにする」は下記の手順で選択出来ます。

  1. 「プラグイン」を選択
  2. 「Tategaki」を選択
  3. 「テキストを縦書きにする」を選択
テキストを縦書きにする
テキストを縦書きにする

すると選択したテキストが縦書きに変化します。これで完成です。

XD テキストを縦書き
XD テキストを縦書き

文字の間隔を調整する方法

文字の間隔を調整する方法
文字の間隔を調整する方法

縦書きにした文字の間隔を調整する方法を説明します。

行送りを調整する

XDには「行送り」という行間を調整出来る機能があります。

行送りの機能で行間を調整していきます。

行送りで数値を調整する

XDの画面右側にある3本線のアイコンが行送りになります。

XDの行送り
XDの行送り

行送りの数値を調整することで、下記のように行間が変わります。

  • 数値が大きい→行間が広がる
  • 数値が小さい→行間が狭まる

縦書きにした際行間が広く見えることがあるので、そんな時は行送りで行間を調整してください。

縦書きにする際の注意点

縦書きにする際の注意点
縦書きにする際の注意点

XDの縦書きには注意点があります。

縦書きの注意点

  • 句読点や長音記号は縦書きされない

句読点や長音記号は縦書きされない

句読点や長音記号(伸ばす横線)は縦書きの対象となりません。

そのため、長い文章は縦書きに不向きになります。

下記は「私は、ビリヤードが大好き。」という文章です。

句読点、長音記号は縦書きにならない
句読点、長音記号は縦書きにならない

見てわかるように、「、ー。」が縦書きになっていません。

句読点や長音記号はXDの縦書きに不向です。使用する際はこれらの記号が含まれない文章や単語を選びましょう。

XDで文字を縦書きにしよう

XDで文字を縦書きにしよう
XDで文字を縦書きにしよう

最後にまとめです。

  • XDで文字を縦書きにするには「Tategaki for Adobe XD」を導入する
  • 縦書きにした文字の間隔は行送りで調整出来る
  • 句読点や長音記号は縦書きにならない

以上です。

是非実施してみてください。

\楽天ポイント5倍セール!/
楽天市場
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる