takato（@n8takato）です！
XDで文字を縦書きにする方法を知りたい。
この記事は上記の課題に向けて作成しております。
現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。
そのためプラグインを導入する必要があります。
この記事ではプラグインを導入して文字を縦書きにする方法を紹介します。
この記事でわかること
- XDで文字を縦書きにする方法
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
Figmaで文字を縦書きにする方法はこちら
XDで文字を縦書きにする方法
XDで文字を縦書きにする手順は下記の通りです。
文字を縦書きにする手順
- プラグインをダウンロードする
- XDにプラグインをインストールする
- XD上で文字を縦書きに変更する
プラグインをダウンロードする
始めにプラグインをダウンロードします。
今回ダウンロードするプラグインはこちらです。
- 「Tategaki for Adobe XD」
①GitHubにアクセス
上記のプラグインはGitHubからダウンロード出来ます。
下記URLよりGitHubにアクセスしてください。
https://github.com/ashryanbeats/tategaki-for-xd
②ZIPファイルをダウンロード
GitHubを開いたらZIPファイルをダウンロードします。
- 「Code」をクリック
- 「Download ZIP」をクリック
これでプラグインのZIPファイルがダウンロードされました。
XDにプラグインをインストールする
続いてXDにプラグインをインストールします。
①拡張子を変更する
ダウンロードしたファイルの拡張子を「.zip」から「.xdx」に変更します。
※zipファイルは開かずに拡張子を変更してください。
②XDにプラグインをインストール
拡張子「.xdx」に変更したファイルを開きます。するとクリエイティブクラウドが立ち上がります。
下記ポップアップは「OK」を選択してください。
続いてプラグインをローカルにインストールします。
「ローカルにインストール」を選択してください。
下記ポップアップが表示されるので、「OK」を選択してください。
これでXDにプラグインをインストールすることが出来ました。
下記ポップアップよりXDを開いてください。
XD上で文字を縦書きに変更する
ここからはXD上で文字を縦書きにする方法の説明です。
①縦書きにしたい文字を選択
縦書きにしたい文字を選択します。
今回は下記の文字を縦書きにしたいと思います。
②「テキストを縦書きにする」を選択
文字を縦書きにするために「テキストを縦書きにする」を選択します。
「テキストを縦書きにする」は下記の手順で選択出来ます。
- 「プラグイン」を選択
- 「Tategaki」を選択
- 「テキストを縦書きにする」を選択
すると選択したテキストが縦書きに変化します。これで完成です。
文字の間隔を調整する方法
縦書きにした文字の間隔を調整する方法を説明します。
行送りを調整する
XDには「行送り」という行間を調整出来る機能があります。
行送りの機能で行間を調整していきます。
行送りで数値を調整する
XDの画面右側にある3本線のアイコンが行送りになります。
行送りの数値を調整することで、下記のように行間が変わります。
- 数値が大きい→行間が広がる
- 数値が小さい→行間が狭まる
縦書きにした際行間が広く見えることがあるので、そんな時は行送りで行間を調整してください。
縦書きにする際の注意点
XDの縦書きには注意点があります。
縦書きの注意点
- 句読点や長音記号は縦書きされない
句読点や長音記号は縦書きされない
句読点や長音記号(伸ばす横線)は縦書きの対象となりません。
そのため、長い文章は縦書きに不向きになります。
下記は「私は、ビリヤードが大好き。」という文章です。
見てわかるように、「、ー。」が縦書きになっていません。
句読点や長音記号はXDの縦書きに不向です。使用する際はこれらの記号が含まれない文章や単語を選びましょう。
XDで文字を縦書きにしよう
最後にまとめです。
- XDで文字を縦書きにするには「Tategaki for Adobe XD」を導入する
- 縦書きにした文字の間隔は行送りで調整出来る
- 句読点や長音記号は縦書きにならない
以上です。
是非実施してみてください。